:root {
  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --sans: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --fs: 1;

  --ink: #2a2420;
  --soft: rgba(42, 36, 32, .55);
  --accent: #c4553b;
  --panel: rgba(246, 240, 230, .94);
  --scrim: rgba(246, 240, 230, .5);
  --line: rgba(42, 36, 32, .18);
  --bg: #1a1613;
}

body[data-season="spring"] { --ink: #22382a; --soft: rgba(34, 56, 42, .58); --accent: #d9738c; --panel: rgba(247, 243, 233, .94); --scrim: rgba(245, 240, 228, .58); --line: rgba(34, 56, 42, .18); --bg: #f5f0e4; }
body[data-season="summer"] { --ink: #3a1424; --soft: rgba(58, 20, 36, .6); --accent: #e9573c; --panel: rgba(253, 232, 192, .95); --scrim: rgba(251, 213, 140, .5); --line: rgba(58, 20, 36, .2); --bg: #fbd58c; }
body[data-season="autumn"] { --ink: #f6e6c8; --soft: rgba(246, 230, 200, .62); --accent: #d99a2b; --panel: rgba(46, 25, 20, .95); --scrim: rgba(52, 28, 22, .55); --line: rgba(246, 230, 200, .2); --bg: #3a1e19; }
body[data-season="winter"] { --ink: #e6edf5; --soft: rgba(230, 237, 245, .6); --accent: #a9c7dd; --panel: rgba(18, 25, 38, .95); --scrim: rgba(15, 21, 32, .5); --line: rgba(230, 237, 245, .18); --bg: #111824; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  transition: background-color 1.2s;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

#stage { position: fixed; inset: 0; display: block; touch-action: none; }
#scrim {
  position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s;
  background: radial-gradient(120% 70% at 45% 48%, var(--scrim) 0%, var(--scrim) 45%, transparent 85%);
}
body.reading:not(.text-off) #scrim { opacity: 1; }

/* ---------------------------------------------------------------- home */
#home {
  position: fixed; inset: 0; display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  transition: opacity .9s, transform 1.2s cubic-bezier(.2, .7, .1, 1);
  z-index: 20;
}
#home.leaving { opacity: 0; transform: scale(1.06); pointer-events: none; }
.quad { position: relative; overflow: hidden; display: block; text-align: left; }
.quad[data-season="spring"] { background: linear-gradient(#f5f0e4, #e2ecdb); color: #22382a; }
.quad[data-season="summer"] { background: linear-gradient(#fbd58c, #f39a5e); color: #3a1424; }
.quad[data-season="autumn"] { background: linear-gradient(#3a1e19, #5c2b1e); color: #f6e6c8; }
.quad[data-season="winter"] { background: linear-gradient(#0f1520, #24344d); color: #e6edf5; }
.qname {
  position: absolute; font-family: var(--sans); font-weight: 400; font-size: 11px;
  letter-spacing: .34em; text-transform: uppercase;
}
.quad[data-season="spring"] .qname, .quad[data-season="summer"] .qname { top: calc(var(--st) + 22px); }
.quad[data-season="winter"] .qname, .quad[data-season="autumn"] .qname { bottom: calc(var(--sb) + 22px); }
.quad[data-season="spring"] .qname, .quad[data-season="winter"] .qname { left: calc(var(--sl) + 22px); }
.quad[data-season="summer"] .qname, .quad[data-season="autumn"] .qname { right: calc(var(--sr) + 22px); }
.quad:active { filter: brightness(1.04); }

.shape { position: absolute; display: block; animation: float 9s ease-in-out infinite alternate; }
.s-spring-a { width: 70%; aspect-ratio: 1; border-radius: 50%; background: #f0b3c2; left: -12%; bottom: -18%; mix-blend-mode: multiply; }
.s-spring-b { width: 46%; aspect-ratio: 1; border-radius: 50%; background: #9cc6a0; right: 6%; bottom: 8%; mix-blend-mode: multiply; animation-delay: -3s; }
.s-spring-c { width: 1px; height: 38%; background: #3e6a4e; left: 58%; bottom: 0; animation: none; }
.s-spring-c::after { content: ''; position: absolute; top: -7px; left: -7px; width: 15px; height: 15px; border-radius: 50%; background: #d9738c; }
.s-summer-a { width: 44%; aspect-ratio: 1; border-radius: 50%; background: #e9573c; right: 14%; top: 22%; }
.s-summer-b { left: 0; right: 0; bottom: 0; height: 28%; background: repeating-linear-gradient(#7fd1c5 0 33%, #2aa79f 33% 66%, #1f7f86 66% 100%); animation: none; }
.s-summer-c { width: 0; height: 0; border-left: 22px solid transparent; border-right: 0 solid transparent; border-bottom: 46px solid #fff1d6; left: 22%; bottom: 28%; border-left-width: 0; border-right-width: 24px; animation-duration: 6s; }
.s-autumn-a { width: 40%; aspect-ratio: 1; border-radius: 50%; background: #d99a2b; left: 34%; top: 50%; }
.s-autumn-b { width: 90%; aspect-ratio: 1; border-radius: 0 100% 0 0; background: #b5482a; left: 0; bottom: -45%; animation: none; }
.s-autumn-c { width: 34px; height: 16px; border-radius: 100% 0; background: #e8c15a; right: 22%; top: 46%; transform: rotate(-24deg); animation: drift 7s ease-in-out infinite alternate; }
.s-winter-a { width: 38%; aspect-ratio: 1; border-radius: 50%; background: #dce3ec; right: 38%; top: 42%; box-shadow: inset -22px 8px 0 0 #172235; }
.s-winter-b { left: -10%; right: -10%; bottom: 0; height: 36%; background: #5b6e86; clip-path: polygon(0 100%, 0 60%, 30% 10%, 52% 55%, 74% 0, 100% 50%, 100% 100%); animation: none; }
.s-winter-c { width: 4px; height: 4px; border-radius: 50%; background: #fff; left: 30%; top: 30%; box-shadow: 40px 60px #fff, 90px 20px #fff, 20px 120px #fff, 130px 90px #fff, 70px 150px rgba(255,255,255,.6), 150px 30px rgba(255,255,255,.6); animation: snow 6s linear infinite; }
@keyframes float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -10px, 0); } }
@keyframes drift { from { transform: translate(0, 0) rotate(-24deg); } to { transform: translate(-30px, 18px) rotate(30deg); } }
@keyframes snow { from { transform: translateY(-20px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(40px); opacity: 0; } }

#medallion {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(62vw, 300px); aspect-ratio: 1; border-radius: 50%;
  background: #f7f1e6; color: #2a2420;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .18);
  pointer-events: none;
}
#medallion h1 { margin: 0; font-weight: 400; font-size: clamp(30px, 8.5vw, 44px); line-height: .98; letter-spacing: -.01em; }
#medallion h1 em { font-style: italic; font-weight: 500; }
#medallion p { margin: 14px 0 0; font-family: var(--sans); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; opacity: .6; }

/* ---------------------------------------------------------------- reader */
#reader { position: fixed; inset: 0; z-index: 5; animation: fadein 1.4s ease both; pointer-events: none; }
#poem, #hero-hit, .edge, #nav { pointer-events: auto; }
@keyframes fadein { from { opacity: 0; } }

#poem {
  position: absolute; inset: 0;
  padding: calc(var(--st) + 48px) calc(var(--sr) + 30px) 0 calc(var(--sl) + 30px);
  display: flex; flex-direction: column;
  transition: opacity .8s;
  touch-action: pan-y;
}
body.text-off #poem { opacity: 0; pointer-events: none; }
#poem-head { width: min(100%, 620px); margin: 0 auto; padding-right: 34%; min-height: 128px; }
#poem-num { margin: 0 0 14px; font-family: var(--sans); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--soft); }
#poem-title { margin: 0; font-weight: 400; font-style: italic; font-size: calc(clamp(26px, 7.4vw, 40px) * var(--fs)); line-height: 1.04; letter-spacing: -.005em; text-wrap: balance; }
#poem-author { margin: 12px 0 0; font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
#poem-note { margin: 6px 0 0; font-style: italic; font-size: 15px; color: var(--soft); }
#poem-note:empty { display: none; }

#poem-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  width: min(100%, 620px); margin: 0 auto;
  padding: 26px 0 calc(var(--sb) + 150px);
  font-size: calc(clamp(17.5px, 4.7vw, 24px) * var(--fs)); line-height: 1.42;
  -webkit-mask-image: linear-gradient(transparent 0, #000 26px, #000 calc(100% - 120px), transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 26px, #000 calc(100% - 120px), transparent 100%);
  user-select: text; -webkit-user-select: text;
  scrollbar-width: none;
}
#poem-body::-webkit-scrollbar { display: none; }
.stanza { margin: 0 0 1.05em; }
.line { display: block; padding-left: calc(1.1em + var(--ind, 0) * 1.4em); text-indent: -1.1em; opacity: 0; animation: lineIn .9s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes lineIn { from { opacity: 0; transform: translate3d(var(--dx, 0), 10px, 0); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
#poem.out { opacity: 0; transition: opacity .35s; }

.slot-invite { font-style: italic; color: var(--soft); max-width: 30em; }
.slot-invite button, .own-edit {
  margin-top: 1.2em; font-family: var(--sans); font-style: normal; font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.own-edit { opacity: .55; }

/* hero (record) hit area, positioned each frame */
#hero-hit {
  position: absolute; left: 0; top: 0; width: 100px; height: 100px; border-radius: 50%;
  transform: translate3d(-200px, -200px, 0); z-index: 6;
}
#rec-time {
  position: absolute; left: 0; top: 0; margin: 0; z-index: 6; pointer-events: none;
  font-family: var(--sans); font-size: 11px; letter-spacing: .2em; color: var(--ink);
  transform: translate3d(-200px, -200px, 0); white-space: nowrap;
}

/* edges: double-tap to change season */
.edge { position: absolute; z-index: 7; display: flex; align-items: center; justify-content: center; }
.edge i { position: absolute; background: var(--edge); opacity: .32; transition: opacity .3s, transform .3s; }
.edge span {
  position: absolute; font-family: var(--sans); font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink); opacity: 0; transition: opacity .3s; white-space: nowrap; pointer-events: none;
}
.edge.armed span { opacity: .9; }
.edge.armed i { opacity: 1; }
.edge[data-edge="top"] { top: 0; left: 18%; right: 18%; height: calc(var(--st) + 30px); }
.edge[data-edge="top"] i { left: 30%; right: 30%; top: calc(var(--st) + 8px); height: 1px; }
.edge[data-edge="top"] span { top: calc(var(--st) + 14px); }
.edge[data-edge="bottom"] { bottom: 0; left: 18%; right: 18%; height: calc(var(--sb) + 26px); }
.edge[data-edge="bottom"] i { left: 30%; right: 30%; bottom: calc(var(--sb) + 6px); height: 1px; }
.edge[data-edge="bottom"] span { bottom: calc(var(--sb) + 10px); }
.edge[data-edge="left"] { left: 0; top: 26%; bottom: 22%; width: calc(var(--sl) + 24px); }
.edge[data-edge="left"] i { top: 30%; bottom: 30%; left: calc(var(--sl) + 6px); width: 1px; }
.edge[data-edge="left"] span { left: calc(var(--sl) + 12px); transform: rotate(-90deg) translateY(-50%); transform-origin: left center; left: calc(var(--sl) + 18px); }
.edge[data-edge="right"] { right: 0; top: 26%; bottom: 22%; width: calc(var(--sr) + 24px); }
.edge[data-edge="right"] i { top: 30%; bottom: 30%; right: calc(var(--sr) + 6px); width: 1px; }
.edge[data-edge="right"] span { right: calc(var(--sr) + 18px); transform: rotate(90deg) translateY(-50%); transform-origin: right center; }
.edge.armed i { transform: scale(1.4); }

/* nav: back · cog · next */
#nav {
  position: absolute; left: 50%; bottom: calc(var(--sb) + 30px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 22px; z-index: 8;
}
#nav button { width: 46px; height: 46px; display: grid; place-items: center; color: var(--ink); filter: drop-shadow(0 0 5px var(--bg)) drop-shadow(0 0 2px var(--bg)); }
#nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.1; opacity: .55; transition: opacity .3s; }
#nav button:active svg { opacity: 1; }
#nav button:disabled svg { opacity: .15; }
#ornament svg { width: 30px; height: 30px; opacity: .42; }
.cog .teeth { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; }
.cog .petal { fill: var(--accent); stroke: none; opacity: .8; }
.cog { animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* first-visit hints */
#hints { position: absolute; inset: 0; z-index: 9; pointer-events: none; animation: fadein 1s ease 1.2s both; transition: opacity 1s; }
#hints.gone { opacity: 0; }
#hints p { position: absolute; margin: 0; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink); opacity: .8; }
#hints .h-hero { right: calc(var(--sr) + 22px); top: var(--hero-hint-top, 30%); text-align: right; }
#hints .h-edge { left: 0; right: 0; text-align: center; bottom: calc(var(--sb) + 108px); }
#hints .h-cog { left: 0; right: 0; text-align: center; bottom: calc(var(--sb) + 82px); }

/* ---------------------------------------------------------------- panel */
#panel, #editor { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .12); }
#panel .sheet, #editor .sheet {
  width: min(100%, 560px); max-height: 88vh; overflow-y: auto;
  background: var(--panel); color: var(--ink);
  border-radius: 22px 22px 0 0;
  padding: 10px calc(var(--sr) + 22px) calc(var(--sb) + 26px) calc(var(--sl) + 22px);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .2);
  animation: sheetIn .45s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } }
.grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 8px; }
.p-head { display: flex; align-items: center; justify-content: space-between; }
.eyebrow { margin: 14px 0 12px; font-family: var(--sans); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--soft); }
#p-close { width: 40px; height: 40px; display: grid; place-items: center; margin-right: -10px; }
#p-close svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.2; fill: none; opacity: .6; }

.p-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 520px) { .p-grid { grid-template-columns: 1fr 1fr; align-items: center; } }
#xy {
  position: relative; width: 100%; aspect-ratio: 1.35; border-radius: 14px; border: 1px solid var(--line);
  touch-action: none; overflow: hidden;
  background:
    radial-gradient(circle at var(--x, 50%) var(--y, 50%), color-mix(in srgb, var(--accent) 28%, transparent), transparent 55%);
}
.xy-h, .xy-v { position: absolute; background: var(--line); }
.xy-h { left: 0; right: 0; top: var(--y, 50%); height: 1px; }
.xy-v { top: 0; bottom: 0; left: var(--x, 50%); width: 1px; }
#xy-puck {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 1.5px solid var(--ink); background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent);
}
.xy-label { position: absolute; font-family: var(--sans); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--soft); }
.xy-label.x { right: 10px; bottom: 8px; }
.xy-label.y { left: 10px; top: 8px; }

.knobs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.knob { text-align: center; touch-action: none; cursor: ns-resize; }
.knob svg { width: 100%; max-width: 72px; display: block; margin: 0 auto; overflow: visible; }
.k-track { fill: none; stroke: var(--line); stroke-width: 1.2; stroke-dasharray: 2 4; }
.k-arc { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.k-dot { fill: var(--ink); }
.knob label { display: block; margin-top: 4px; font-family: var(--sans); font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--soft); }

.p-section { border-top: 1px solid var(--line); margin-top: 22px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg button { padding: 11px 10px; font-family: var(--sans); font-size: 13px; text-align: left; line-height: 1.25; }
.seg button small { display: block; font-size: 10.5px; color: var(--soft); letter-spacing: .02em; }
.seg.mini { display: inline-grid; grid-template-columns: repeat(3, auto); border-radius: 999px; }
.seg.mini button { padding: 9px 13px; font-size: 12px; text-align: center; }
.seg button.on { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.takes, .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pill {
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em; padding: 10px 15px;
  border: 1px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
}
.pill:disabled { opacity: .35; }
.pill.sq { padding: 10px 13px; }
.pill.solid { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.pill.ghost { border-color: transparent; color: var(--soft); }
.pill.rec i { width: 9px; height: 9px; border-radius: 50%; background: #d8433a; }
.pill.rec.on i { border-radius: 2px; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.fine { font-family: var(--serif); font-size: 15px; line-height: 1.4; color: var(--soft); margin: 10px 0 0; }
.about .fine { font-size: 14px; }

/* editor */
#editor input, #editor textarea {
  display: block; width: 100%; margin: 0 0 10px; padding: 11px 12px;
  font-family: var(--serif); font-size: 17px; color: var(--ink);
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  user-select: text; -webkit-user-select: text;
}
#editor textarea { min-height: 38vh; line-height: 1.4; resize: vertical; }
#editor input::placeholder, #editor textarea::placeholder { color: var(--soft); }

/* toast */
#toast {
  position: fixed; left: 50%; top: calc(var(--st) + 14px); transform: translate(-50%, -10px); z-index: 40;
  font-family: var(--sans); font-size: 12px; letter-spacing: .06em;
  background: var(--panel); color: var(--ink); padding: 9px 16px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .35s, transform .35s;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12); max-width: calc(100% - 40px); text-align: center;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

#awake { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: -10px; top: -10px; }

@media (prefers-reduced-motion: reduce) {
  .shape, .cog { animation: none; }
  .line { animation-duration: .01s; }
}