:root { color-scheme: dark; font-family: "Times New Roman", Times, serif; color: #eee9dc; background: #000; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: #000; }
.field { position: fixed; inset: 0; background: #000 url('./poster.jpg') center / cover no-repeat; }
#flower-field { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1s; }
#flower-field.ready { opacity: 1; }
.page { position: relative; z-index: 1; min-height: 100svh; padding: clamp(22px, 3.4vw, 52px); display: flex; flex-direction: column; pointer-events: none; background: linear-gradient(180deg,rgba(0,0,0,.55),transparent 36%,transparent 78%,rgba(0,0,0,.62)); }
header, main, footer { pointer-events: auto; width: fit-content; }
h1 { font-size: clamp(23px, 2.2vw, 34px); font-weight: 400; letter-spacing: -.025em; margin: 0 0 18px; }
h2 { font-size: 16px; font-weight: 400; margin: 0 0 8px; }
p { font-size: 14px; line-height: 1.5; margin: 0; color: #aaa99e; }
nav { display: flex; gap: 20px; margin-top: 18px; }
a { color: #eee9dc; font-size: 14px; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: #716f65; }
a:hover { text-decoration-color: currentColor; }
footer { margin-top: auto; padding-top: 44px; }
address { color: #c6c3b7; font-size: 13px; line-height: 1.5; font-style: normal; }
button { position: fixed; z-index: 2; right: clamp(22px, 3.4vw, 52px); bottom: clamp(22px, 3.4vw, 52px); border: 1px solid #77776a; padding: 10px 14px; background: #0007; color: #ddd9cc; font: 12px "Times New Roman", Times, serif; cursor: pointer; backdrop-filter: blur(8px); }
button:hover { border-color: #ddd9cc; }
:focus-visible { outline: 2px solid #f3e2bd; outline-offset: 6px; }
@media(max-width:600px) { .page { padding: 24px; } h1 { margin-bottom: 16px; } p { max-width: 235px; } button { right:24px;bottom:24px; } }
@media(prefers-reduced-motion:reduce) { #flower-field { transition:none; } }

#field-stats { position:fixed;z-index:5;top:20px;right:20px;width:195px;padding:10px 12px;background:rgba(0,0,0,.72);border:1px solid #77776a55;border-radius:5px;color:#deded0;font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;backdrop-filter:blur(10px);font-variant-numeric:tabular-nums; }
#field-stats[hidden] { display:none; }
#field-stats .stats-heading { display:flex;align-items:center;justify-content:space-between;color:#a6b79a;font-size:10px;letter-spacing:.1em; }
#field-stats button { position:static;padding:0;border:0;background:none;backdrop-filter:none;font:18px/1 monospace;color:#b7b9ac;width:22px;height:22px; }
#field-stats dl { display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:6px 0 8px; }
#field-stats dt { color:#92988a; } #field-stats dd { margin:0;text-align:right; }
#field-stats small { display:block;font:9px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#7e8776; }
@media(max-width:600px) { #field-stats { top:auto;bottom:80px;right:16px;width:176px;padding:8px 10px;font-size:10px; } }
#field-quality { position:fixed;z-index:3;right:clamp(22px,3.4vw,52px);bottom:calc(clamp(22px,3.4vw,52px) + 48px);display:flex;align-items:center;gap:9px;color:#bcbcaf;font:11px/1.4 "Times New Roman",Times,serif; }
#field-quality select { appearance:auto;border:1px solid #77776a88;border-radius:2px;background:#070907d9;color:#ddd9cc;padding:5px 6px;font:12px "Times New Roman",Times,serif; }
#field-quality[data-busy="true"] { opacity:.65; }
#field-stats details { margin:7px 0; } #field-stats summary { cursor:pointer;color:#a6b79a;font-size:10px; }
#field-stats details dl { padding-top:5px;border-top:1px solid #77776a44; }
@media(max-width:600px) { #field-quality { right:24px;bottom:72px; } #field-stats { bottom:116px; } }
#scene-controls-toggle { left:20px;right:auto;bottom:20px;z-index:9;font:12px system-ui; }
#scene-controls { position:fixed;z-index:10;left:20px;bottom:72px;width:340px;max-width:calc(100vw - 40px);max-height:calc(100svh - 110px);overflow:auto;overscroll-behavior:contain;padding:14px;color:#e1dfd3;background:#0a0d0bf5;border:1px solid #62695d;border-radius:6px;font:11px/1.5 system-ui,sans-serif;box-shadow:0 8px 32px #0008; }
#scene-controls[hidden] { display:none; }
#scene-controls header { display:flex;width:100%;align-items:center;justify-content:space-between;letter-spacing:.08em; }
#scene-controls button { position:static;padding:6px 9px;font:11px system-ui;backdrop-filter:none; }
#scene-controls header button { border:0;font-size:20px;padding:0 5px; }
#scene-controls p { font:10px/1.5 system-ui;color:#99a48f;margin:4px 0 10px; }
#scene-controls details { margin:6px 0;border-top:1px solid #434a3d;padding-top:7px; }
#scene-controls summary { cursor:pointer;color:#c4d1b7;font-weight:600; }
#scene-controls .control-row { display:grid;grid-template-columns:1fr 100px 58px;align-items:center;gap:7px;padding:4px 0; }
#scene-controls input { min-width:0;width:100%;font:11px ui-monospace,monospace;color:#deded0;background:#20251d;border:1px solid #58624e;border-radius:2px;padding:3px; }
#scene-controls input[type="range"] { padding:0;accent-color:#afc598; }
#scene-controls input[type="checkbox"] { width:16px;justify-self:end;grid-column:3; }
#scene-controls input[type="color"] { height:25px;grid-column:2/4; }
#scene-controls select { grid-column:2/4;min-width:0;width:100%;font:11px system-ui;color:#deded0;background:#20251d;padding:4px; }
#scene-controls textarea { width:100%;height:110px;font:10px ui-monospace,monospace;background:#151a13;color:#d7dfce;border:1px solid #58624e; }
#scene-controls .control-actions { display:flex;gap:6px;margin:10px 0; }
#scene-controls .control-status { display:block;font-size:10px;color:#aebca2;margin-top:8px; }
@media(max-width:600px) { #scene-controls { left:12px;bottom:68px;max-width:calc(100vw - 24px);width:340px;max-height:65svh; } #scene-controls-toggle { left:24px;bottom:24px; } }

/* The field is a one-screen touch surface; controls keep native gestures. */
#flower-field { touch-action:pinch-zoom; }

@font-face { font-family:'Space Grotesk';src:url('./fonts/SpaceGrotesk-Variable.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:swap; }
:root { font-family:'Space Grotesk',Arial,sans-serif; }
h1 { font-weight:500;letter-spacing:-.055em; }
h2 { font-weight:500;letter-spacing:-.025em; }
body > button,#field-quality,#field-quality select { font-family:'Space Grotesk',Arial,sans-serif; }
.field { opacity:1;transition:opacity 1.2s ease; }
.page { opacity:1;visibility:visible;transition:opacity 1s ease; }
#motion,#field-quality,#field-stats,#scene-controls,#scene-controls-toggle { transition:opacity .8s ease; }
body[data-intro]:not([data-intro="complete"]) :is(.page,#motion,#field-quality,#field-stats,#scene-controls,#scene-controls-toggle) { opacity:0;visibility:hidden;pointer-events:none; }
body[data-intro="loading"] .field { opacity:0; }
#arrival { position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:#050605;transition:background-color 1.2s ease;pointer-events:none; }
body[data-intro="scene"] #arrival,body[data-intro="message"] #arrival { background:transparent; }
#arrival::before { content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#0007,transparent 75%);opacity:0;transition:opacity .8s ease; }
body[data-intro="message"] #arrival::before { opacity:1; }
.arrival-loader { display:flex;flex-direction:column;align-items:center;gap:24px;transition:opacity .35s ease,visibility .35s; }
.arrival-loader span { color:#d8dac7;font-size:10px;line-height:1;letter-spacing:.2em;text-transform:uppercase; }
.arrival-spinner { width:64px;height:64px;animation:arrival-turn 3s linear infinite; }
@keyframes arrival-turn { to { transform:rotate(360deg); } }
body:not([data-intro="loading"]) .arrival-loader { opacity:0;visibility:hidden; }
#arrival .arrival-line { position:absolute;inset-inline:5vw;top:50%;transform:translateY(-50%);margin:0 auto;max-width:1200px;color:#f2efdf;font-family:'Space Grotesk',Arial,sans-serif;font-size:clamp(48px,8.5vw,142px);font-weight:600;line-height:.98;letter-spacing:-.075em;text-align:center;text-wrap:balance;opacity:0;text-shadow:0 3px 36px #0005; }
#arrival .arrival-skip { position:absolute;bottom:max(28px,env(safe-area-inset-bottom));right:auto;left:50%;transform:translateX(-50%);padding:10px 0;border:0;background:none;backdrop-filter:none;font:11px 'Space Grotesk',Arial,sans-serif;letter-spacing:.025em;color:#eee9dc9c;pointer-events:auto; }
#arrival .arrival-skip:hover { color:#f2efdf; }
.arrival-skip span { margin-left:6px; }
@media(max-width:600px) { #arrival .arrival-line { inset-inline:24px;font-size:clamp(44px,12vw,72px);letter-spacing:-.065em; } }
@media(prefers-reduced-motion:reduce) { .arrival-spinner { animation:none; } .field,.page,#arrival,#arrival::before,.arrival-loader,#motion,#field-quality { transition:none; } }

/* Intro art-direction tools. Extra fonts load only when selected. */
@font-face{font-family:Syne;src:url('./fonts/Syne.ttf');font-weight:400 800;font-display:swap}
@font-face{font-family:Unbounded;src:url('./fonts/Unbounded.ttf');font-weight:200 900;font-display:swap}
@font-face{font-family:Outfit;src:url('./fonts/Outfit.ttf');font-weight:100 900;font-display:swap}
@font-face{font-family:Manrope;src:url('./fonts/Manrope.ttf');font-weight:200 800;font-display:swap}
@font-face{font-family:Sora;src:url('./fonts/Sora.ttf');font-weight:100 800;font-display:swap}
@font-face{font-family:'Archivo Black';src:url('./fonts/ArchivoBlack.ttf');font-weight:400;font-display:swap}
@font-face{font-family:'DM Serif Display';src:url('./fonts/DMSerifDisplay.ttf');font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('./fonts/SpaceMono.ttf');font-weight:400;font-display:swap}
#arrival .arrival-line{font-family:var(--intro-font,'Space Grotesk',Arial,sans-serif);font-weight:var(--intro-weight,600);font-size:clamp(24px,var(--intro-size,8.5vw),240px);letter-spacing:var(--intro-tracking,-.075em);line-height:var(--intro-line-height,.98);max-width:var(--intro-width,1200px);color:var(--intro-color,#f2efdf);text-align:var(--intro-align,center);text-transform:var(--intro-case,none);transform:translate(var(--intro-x,0px),calc(-50% + var(--intro-y,0px)))}
.arrival-spinner{width:var(--intro-spinner-size,64px);height:var(--intro-spinner-size,64px);animation-duration:var(--intro-spinner-period,3s)}
.field,#arrival{transition-duration:var(--scene-fade,1200ms)}
.page{transition-duration:var(--ui-fade,1000ms)}
body[data-editing-intro] #scene-controls,body[data-editing-intro] #scene-controls-toggle{opacity:1!important;visibility:visible!important;pointer-events:auto!important;z-index:30}
#scene-controls input[type="text"]{grid-column:2/4;font-size:12px}
#scene-controls details>button{margin:5px 6px 3px 0}
@media(max-width:600px){#arrival .arrival-line{font-size:clamp(24px,var(--intro-mobile-size,12vw),120px)}}
@media(prefers-reduced-motion:reduce){.field,#arrival,.page{transition-duration:0s}}

.identity h1 { margin:0 0 6px; }
.identity p { max-width:none; }
.identity nav { gap:8px;flex-wrap:wrap;margin-top:10px;align-items:baseline; }
.identity nav span { color:#aaa99e;font-size:14px; }
.identity .site-status { margin-top:24px; }