/* Metamorphosis — "Morpho" theme. Loaded after each page's own styles, so it wins.
   Deep-space black, iridescent morpho-wing blue / violet / cyan, glass panels, clean type. */
:root {
  --night: #05060d;
  --night-2: #0b0f1e;
  --leaf: #5ef2d0;
  --silk: #e9edf9;
  --monarch: #6ea8ff;
  --glow: #b38cff;
  --muted: #8e97b5;
  --line: rgba(150, 175, 255, 0.14);
  --display: "Sora", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --iris: linear-gradient(100deg, #7cf3ff 0%, #6ea8ff 38%, #8f7bff 70%, #d08cff 100%);
  --glass: rgba(18, 24, 48, 0.55);
  --glass-hi: rgba(28, 36, 70, 0.7);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line) inset;
}

html {
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(110, 168, 255, 0.16), transparent 60%),
    radial-gradient(900px 600px at 95% 10%, rgba(179, 140, 255, 0.13), transparent 60%),
    radial-gradient(1000px 800px at 50% 120%, rgba(94, 242, 208, 0.08), transparent 60%),
    #05060d;
  background-attachment: fixed;
}
body {
  background:
    linear-gradient(rgba(150, 175, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, rgba(150, 175, 255, 0.035) 1px, transparent 1px) 0 0 / 56px 56px;
  background-attachment: fixed;
  font-size: 16.5px;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}
#sky { opacity: 0.85; }

h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.035em; }
h2 { letter-spacing: -0.03em; }
::selection { background: rgba(110, 168, 255, 0.35); }
a { color: #8fc0ff; }
:focus-visible { outline: 2px solid #7cf3ff; outline-offset: 3px; }

/* Gradient accent text wherever the old orange word was */
.hero h1 span, .nav-brand span, .ws-shelf h2 span, h2 span {
  background: var(--iris); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero { padding-top: 64px !important; }
.hero h1 { font-size: clamp(44px, 7.4vw, 88px) !important; line-height: 0.98 !important; font-weight: 600; }
.hero p { color: var(--muted); font-size: 19px; line-height: 1.6; margin-top: 14px; }
.label {
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.18em;
  color: #7cf3ff; display: inline-flex; align-items: center; gap: 10px;
}
.hero .label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5ef2d0;
  box-shadow: 0 0 12px #5ef2d0; animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* Navigation: floating glass bar */
.nav {
  position: sticky; top: 12px; z-index: 50; margin-top: 12px; padding: 10px 12px 10px 20px !important;
  background: rgba(10, 14, 30, 0.62); border: 1px solid var(--line); border-radius: 18px;
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.9);
}
.nav-brand { font-family: var(--display) !important; font-weight: 600; font-size: 19px !important; letter-spacing: -0.02em; display: inline-block; white-space: nowrap; }
.nav-brand::before {
  content: ""; display: inline-block; vertical-align: -5px; margin-right: 10px; width: 22px; height: 22px; border-radius: 7px;
  background: conic-gradient(from 200deg, #7cf3ff, #6ea8ff, #8f7bff, #d08cff, #7cf3ff);
  box-shadow: 0 0 18px rgba(110, 168, 255, 0.55);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 3.5px, #000 4px); mask: radial-gradient(circle at 50% 50%, transparent 3.5px, #000 4px);
}
.nav-links { gap: 2px !important; }
.nav-links a {
  border: 1px solid transparent !important; font-weight: 500 !important; font-size: 14.5px !important;
  color: #b9c2de !important; padding: 8px 14px !important; transition: color .2s, background .2s;
}
.nav-links a:hover { background: rgba(150, 175, 255, 0.08) !important; color: #fff !important; }
main[data-current="ask"] .nav-links a[data-here="ask"],
main[data-current="inout"] .nav-links a[data-here="inout"],
main[data-current="garden"] .nav-links a[data-here="garden"],
main[data-current="workshop"] .nav-links a[data-here="workshop"],
main[data-current="board"] .nav-links a[data-here="board"] {
  background: rgba(110, 168, 255, 0.14) !important; color: #fff !important;
  border-color: rgba(110, 168, 255, 0.35) !important; box-shadow: 0 0 20px -6px rgba(110, 168, 255, 0.6);
}
.nav-links a[data-here="board"] { position: relative; }
.nav-links a[data-here="board"]::after {
  content: "NEW"; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; margin-left: 6px;
  padding: 2px 5px; border-radius: 5px; background: var(--iris); color: #05060d; font-weight: 700; vertical-align: 2px;
}

/* Buttons */
.btn {
  background: var(--iris) !important; color: #05060d !important; font-weight: 600 !important;
  font-family: var(--display); letter-spacing: -0.01em; font-size: 16.5px !important;
  border-radius: 12px !important; padding: 14px 24px !important;
  box-shadow: 0 10px 30px -10px rgba(110, 168, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform .15s, box-shadow .2s, filter .2s;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 40px -12px rgba(143, 123, 255, 0.85), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.ghost, .btn.small.ghost {
  background: rgba(150, 175, 255, 0.06) !important; color: var(--silk) !important;
  border: 1px solid var(--line) !important; box-shadow: none !important;
}
.btn.ghost:hover { background: rgba(150, 175, 255, 0.12) !important; }
.chip, .ws-chip, button.chip {
  background: rgba(150, 175, 255, 0.05) !important; border: 1px solid var(--line) !important;
  color: #c9d1ea !important; border-radius: 10px !important; font-weight: 500 !important;
  transition: border-color .2s, background .2s, color .2s;
}
.chip:hover, .ws-chip:hover { border-color: rgba(124, 243, 255, 0.45) !important; color: #fff !important; background: rgba(124, 243, 255, 0.07) !important; }
.chip[aria-pressed="true"] { border-color: rgba(110, 168, 255, 0.6) !important; background: rgba(110, 168, 255, 0.16) !important; color: #fff !important; }

/* Inputs */
textarea, input[type="text"], input:not([type]), select {
  background: rgba(10, 14, 30, 0.7) !important; border: 1px solid rgba(150, 175, 255, 0.22) !important;
  border-radius: 16px !important; color: var(--silk) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 50px -30px rgba(0, 0, 0, 0.9);
  transition: border-color .2s, box-shadow .2s;
}
textarea:focus, input:focus, select:focus {
  outline: none !important; border-color: rgba(124, 243, 255, 0.6) !important;
  box-shadow: 0 0 0 4px rgba(124, 243, 255, 0.12), 0 20px 50px -30px rgba(0, 0, 0, 0.9) !important;
}
textarea::placeholder, input::placeholder { color: #67708f; }

/* Panels / cards pick up glass */
.cocoon, .butterfly, .ws-card, .wish, .card, .panel, .plant, .tree-card, .stage, .inout-result, .sheet-card, .fact {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.butterfly, .inout-result { border-width: 1px !important; border-color: rgba(110, 168, 255, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(110,168,255,.15) inset, 0 30px 80px -40px rgba(110, 168, 255, 0.55); }
.status { color: var(--muted); }

/* Footer feel */
main::after {
  content: "METAMORPHOSIS · FREE AI, OPEN TO EVERYONE";
  display: block; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .22em;
  color: #4d5677; padding: 24px 0 8px; border-top: 1px solid var(--line); margin-top: 24px;
}

@media (max-width: 640px) {
  .nav { top: 8px; padding: 8px 10px 8px 14px !important; border-radius: 14px; }
  .nav { flex-wrap: nowrap !important; flex-direction: column; align-items: stretch !important; gap: 6px !important; }
  .nav-links { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin: 0 -4px; padding-bottom: 2px; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { padding: 7px 11px !important; font-size: 13.5px !important; white-space: nowrap; flex: none; }
  .hero { padding-top: 36px !important; }
}
@media (prefers-reduced-motion: reduce) { .hero .label::before { animation: none; } }
main { grid-template-columns: minmax(0, 1fr); }
.nav, .nav-links { min-width: 0; }