/* Resonant-Grid styles. Single dark look per spec. */
*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;font-size:14px}
img{max-width:100%}
/* Layout: fixed chrome (logo TL, feedback BL); centered column = view area, then prompt/input/Enter. Single dark look per spec. */
:root{
  --bg:#171616; --fg:#ece8e8; --muted:#9a9696; --box:#d9d9d9; --line:#6e6b6b; --red:#da1d55;
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;
  --sans:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --gap:10px;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:0;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
textarea:focus-visible{outline:none}
.field:focus-within .rule{background:#9a9696}
.logo{position:fixed;top:calc(22px + env(safe-area-inset-top, 0px));left:calc(22px + env(safe-area-inset-left, 0px));height:16px;z-index:5}
.logo img{height:100%;width:auto;display:block}
.reset{position:fixed;top:calc(18px + env(safe-area-inset-top, 0px));right:calc(22px + env(safe-area-inset-right, 0px));z-index:5;font-family:var(--sans);font-size:14px;color:var(--fg);padding:4px 0}
.reset:hover{text-decoration:underline;text-underline-offset:4px}
.feedback{position:fixed;left:calc(18px + env(safe-area-inset-left, 0px));bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  background:#fafafa;color:#3a3a3a;border-radius:999px;padding:9px 20px;font-size:13px;text-decoration:none;
  box-shadow:0 1px 6px rgba(0,0,0,.35);z-index:5}
main{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-block:72px 96px;box-sizing:border-box}
#view{width:100%;display:flex;justify-content:center}
.pwrap{height:var(--pv);transition:height 1.4s ease-in-out,opacity .9s linear;width:100%;overflow:hidden}
.pwrap.gone{height:var(--pg);opacity:0}
.prompt{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.8vw,33px);text-align:center;margin:0;padding-top:var(--g1);font-size:var(--pf);text-wrap:balance;color:var(--fg);line-height:1.25;
  transition:opacity .7s linear,color 2.5s linear}
.prompt.swap{opacity:0}
.prompt.keep{font-style:italic}
.timeline-on .pwrap,.groups-on .pwrap{opacity:0}
form{width:min(max(47vw,300px),100%);display:flex;flex-direction:column;align-items:center;gap:22px}
.field{width:100%;position:relative}
textarea{width:100%;resize:none;background:transparent;border:0;outline:none;color:var(--fg);
  font-family:var(--serif);font-size:19px;line-height:1.4;padding:2px 2px 6px;overflow:hidden;min-height:30px;display:block}
.rule{height:1px;background:var(--line);position:relative;overflow:hidden}
.rule::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:0}
.busy .rule{height:2px;background:#3a3838}
.busy .rule::after{opacity:1;animation:sweep 1.4s linear infinite}
@keyframes sweep{from{left:-40%}to{left:100%}}
/* drill-down petals bleed in: linear timing; blur falls on a squared curve (approved arrival curve) */
@keyframes arrive{0%{opacity:0;filter:blur(8px);scale:.86}25%{opacity:.25;filter:blur(4.5px);scale:.895}50%{opacity:.5;filter:blur(2px);scale:.93}75%{opacity:.75;filter:blur(.5px);scale:.965}100%{opacity:1;filter:blur(0px);scale:1}}
img.arrive{animation:arrive 2.2s linear both}
@keyframes arriveFade{from{opacity:0}to{opacity:1}}
img.fadein{animation:arriveFade 1.2s linear both}
@media (prefers-reduced-motion:reduce){img.arrive{animation:arriveFade 1.2s linear both}.busy .rule::after{animation:none;left:0;width:100%;opacity:.7}.pwrap{transition:opacity .8s linear}}
.enter{background:var(--red);color:#fff;border-radius:5px;padding:6px 15px;font-size:16px;letter-spacing:.01em}
.enter:hover{filter:brightness(1.08)}
.msg{font-size:13px;color:var(--muted);min-height:18px;text-align:center}

/* working canvas: canvas centered on screen; group panel hangs off its left edge */
.stage{position:relative;width:var(--cw);height:var(--ch);flex:none}
.canvas{position:absolute;inset:0;border:1px solid var(--box);box-sizing:border-box}
.dpanel{position:absolute;top:0;right:calc(100% + var(--pgap));height:100%}
.pscroll{height:100%;overflow-y:auto;overflow-x:hidden;direction:rtl;display:flex;flex-direction:column;gap:var(--pbgap);padding-left:10px;box-sizing:border-box}
.pbox{flex:none;width:var(--pb);height:var(--pb);border:1px solid var(--box);position:relative;direction:ltr;box-sizing:border-box;padding:0;background:transparent;overflow:hidden;transition:border-color 1.2s linear}
.pbox:disabled{border-color:#4d4a4a} /* empty: quieter than the working area */
.pbox:disabled{cursor:default}
.pbox:not(:disabled):hover{border-color:#fff}
.pbox img{position:absolute;pointer-events:none;object-fit:contain}
.layer{position:absolute;inset:0;pointer-events:none;z-index:3}
/* ghost petals: faint gray placeholders on the canvas before and in the first entries */
.canvas{overflow:hidden}
.ghost{position:absolute;pointer-events:none;object-fit:contain;opacity:0;will-change:opacity,transform}
.fl{position:absolute;left:0;top:0;width:160px;height:160px;padding:0;pointer-events:auto;will-change:transform,opacity;transform-origin:50% 50%}
.fl.flying{pointer-events:none}
.fl img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:opacity 1.2s linear}
.fl:focus-visible{outline:none}
.fl:focus-visible img{filter:drop-shadow(0 0 6px #fff)}
/* canvas | timeline toggle */
.vtoggle,.gtoggle{position:absolute;bottom:100%;right:3%;margin-bottom:12px;font-family:var(--serif);font-size:var(--tf);display:flex;gap:.45em;align-items:baseline;color:#8a8686;z-index:4}
.vtoggle button,.gtoggle button{color:#8a8686;padding:2px 0;font-family:inherit;font-size:inherit;transition:color .4s}
.vtoggle button[aria-pressed="true"],.gtoggle button[aria-pressed="true"]{color:var(--fg);cursor:default}
.vtoggle button:not([aria-pressed="true"]):hover,.gtoggle button:not([aria-pressed="true"]):hover{color:#c9c5c5}
.canvas,.layer,.dpanel,.tl{transition:opacity .7s linear,visibility .7s}
.stage.mode-tl .canvas,.stage.mode-tl .layer,.stage.mode-tl .dpanel,
.stage.mode-gr .canvas,.stage.mode-gr .layer,.stage.mode-gr .dpanel{opacity:0;visibility:hidden;pointer-events:none}
/* groups view (curio box): every group in a square box, same footprint as the canvas */
.gr{position:absolute;inset:0;transition:opacity .7s linear,visibility .7s}
.stage:not(.mode-gr) .gr{opacity:0;visibility:hidden;pointer-events:none}
.gr-scroll{height:100%;overflow-y:auto;overflow-x:hidden}
.gr-grid{display:grid;grid-template-columns:repeat(var(--gcols),var(--gbs));grid-auto-rows:var(--gbs);gap:var(--ggap)}
.gr-box{position:relative;border:1px solid var(--box);padding:0;background:transparent;overflow:hidden}
.gr-box:disabled{cursor:default}
.gr-box:not(:disabled):hover{border-color:#fff}
.gr-box img{position:absolute;pointer-events:none;object-fit:contain}
.gr-back{position:absolute;bottom:100%;left:2%;margin-bottom:6px;font-family:var(--serif);font-size:18px;padding:2px 6px 2px 0}
.stage:not(.mode-gr) .gr-back{visibility:hidden;opacity:0}
.gr.opening .gr-box{animation:gopen .9s cubic-bezier(.25,.1,.25,1) both;animation-delay:calc(var(--i)*70ms)}
.gr.opening .gr-box img{animation:arrive 1.6s linear both;animation-delay:calc(.35s + var(--i)*70ms)}
@media (prefers-reduced-motion:reduce){.gr.opening .gr-box,.gr.opening .gr-box img{animation:gfade .6s linear both}}
/* "see all" under the panel boxes */
.dpanel{display:flex;flex-direction:column}
.dpanel .pscroll{height:auto;max-height:calc(100% - 44px);flex:0 1 auto}
.seeall{align-self:flex-end;width:var(--pb);text-align:left;font-family:var(--serif);font-size:var(--tf);color:var(--fg);padding:14px 0 0 2px}
.seeall:hover{text-decoration:underline;text-underline-offset:4px}
.stage:not(.mode-tl) .tl{opacity:0;visibility:hidden;pointer-events:none}
/* timeline: every entry left to right as entered; depth top (skimming) to bottom (contacting) */
.tl{position:absolute;inset:0;border:1px solid var(--box);box-sizing:border-box;overflow-x:auto;overflow-y:hidden}
.tl-in{position:relative;height:100%;min-width:100%}
.tl-line{position:absolute;left:0;right:0;height:1px;background:#5c5959;pointer-events:none}
.tl .tp{position:absolute;padding:0;animation:bob var(--bd) ease-in-out var(--bo) infinite alternate}
.tl .tp img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.tl .tp:focus-visible{outline:none}.tl .tp:focus-visible img{filter:drop-shadow(0 0 6px #fff)}
@keyframes bob{from{translate:0 -3px}to{translate:0 3px}}
.tl.opening{animation:gopen 1s cubic-bezier(.25,.1,.25,1) both;transform-origin:50% 50%}
.tl.opening .tl-line,.tl-labels.opening{animation:gfade .9s linear both;animation-delay:.4s}
.tl.opening .tp img{animation:arrive 1.6s linear both;animation-delay:calc(.45s + var(--i)*60ms)}
/* Surface / Depth: outside the box on the left, fixed while the timeline scrolls */
.tl-labels{position:absolute;top:0;bottom:0;right:calc(100% + var(--pgap));pointer-events:none;font-family:var(--serif);font-size:var(--tf);color:#8a8686;transition:opacity .7s linear,visibility .7s}
.tl-labels span{position:absolute;right:0;white-space:nowrap;line-height:1}
.tl-labels .lt{top:calc(var(--ch)*.06)} .tl-labels .lb{bottom:calc(var(--ch)*.06)}
.stage:not(.mode-tl) .tl-labels{opacity:0;visibility:hidden}
@media (prefers-reduced-motion:reduce){.tl .tp{animation:none}.tl.opening{animation:gfade .6s linear both}.tl.opening .tp img{animation:gfade .6s linear both}}
form{transition:opacity .6s linear,visibility .6s}
.timeline-on form,.groups-on form{opacity:0;visibility:hidden}
/* light pill scrollbars, as drawn */
.scr::-webkit-scrollbar{width:12px;height:12px}
.scr::-webkit-scrollbar-track{background:#d4d4d4;border-radius:6px}
.scr::-webkit-scrollbar-thumb{background:#8c8c8c;border-radius:6px;border:2px solid #d4d4d4}
@supports not selector(::-webkit-scrollbar){.scr{scrollbar-color:#8c8c8c #d4d4d4;scrollbar-width:thin}}

/* group drill-down: same footprint as the canvas */
.back{font-family:var(--serif);font-size:18px;align-self:flex-start;padding:2px 6px 2px 0}
.gview{width:var(--cw);display:flex;flex-direction:column;gap:8px;position:relative}
.gview .back{position:absolute;bottom:100%;margin-bottom:6px;left:2%}
/* opening a group: the box eases open, then its contents bleed in, top to bottom */
@keyframes gopen{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes gfade{from{opacity:0}to{opacity:1}}
.gview.opening .gbox{animation:gopen 1s cubic-bezier(.25,.1,.25,1) both;transform-origin:50% 50%}
.gview.opening .back,.gview.opening .gtoggle,.gview.opening .gdiv,.gview.opening .notes{animation:gfade .9s linear both;animation-delay:.45s}
/* switching notes <-> timeline inside a group: the box contents fade across */
.gview.switching .gbox{animation:gfade .8s linear both}
.gview.switching .list li,.gview.switching .field-p button{animation:gfade .8s linear both;animation-delay:calc(.2s + var(--i)*50ms)}
/* group timeline: same footprint as the notes box */
.gtl{position:relative;height:var(--ch)}
.gview.opening .list li,.gview.opening .field-p button{animation:gfade .9s linear both;animation-delay:calc(.4s + var(--i)*70ms)}
.pview.opening .pmain{animation:gopen 1s cubic-bezier(.25,.1,.25,1) both;transform-origin:50% 50%}
.pview.opening .back{animation:gfade .9s linear both;animation-delay:.45s}
.pview.opening .pmain .t{animation:gfade .9s linear both;animation-delay:.4s}
.pview.opening .pmain img{animation:arrive 1.6s linear both;animation-delay:.35s}
.pview.opening .car{animation:gfade .9s linear both;animation-delay:.6s}
.pview.opening .panel{animation:gfade .9s linear both;animation-delay:calc(.75s + var(--i)*.2s)}
.pview.opening svg.links{animation:gfade .9s linear both;animation-delay:1s}
@media (prefers-reduced-motion:reduce){.gview.opening .gbox,.pview.opening .pmain{animation:gfade .6s linear both}.pview.opening .pmain img{animation:gfade .6s linear both}}
.gbox{border:1px solid var(--box);height:var(--ch);display:grid;grid-template-columns:minmax(0,1fr) 1px 30%;box-sizing:border-box}
.gscroll{overflow-y:auto;overflow-x:hidden;margin-block:calc(var(--ch)*.12) calc(var(--ch)*.1);padding:0 2% 0 5%;min-width:0}
.gin{display:grid;grid-template-columns:44% 56%;position:relative}
.gdiv{background:var(--box);margin-block:calc(var(--ch)*.085)}
.notes{padding:calc(var(--ch)*.11) 9% 0;min-width:0}
.notes{display:flex;flex-direction:column;gap:10px;padding-bottom:calc(var(--ch)*.085)!important}
.notes h3{font-family:var(--serif);font-weight:400;font-size:var(--nf);margin:0}
.notes label{display:contents}
.notes textarea{flex:1;min-height:120px;padding:0;font-size:calc(var(--lf)*.9);line-height:1.45;overflow-y:auto;cursor:text;color:var(--fg)}
.field-p{position:relative}
.field-p button{position:absolute;padding:0;transition:transform .15s}
.field-p img{width:100%;height:100%;display:block;pointer-events:none}
.list{list-style:none;margin:0;padding:0 14px 0 6%}
.list li button{font-family:var(--serif);font-style:italic;font-size:var(--lf);text-align:left;width:100%;padding:0;height:var(--row);line-height:var(--row);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;color:var(--fg)}
.hl{transform:scale(1.15);z-index:3}
.list li button.hl{transform:none;color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:5px}

/* petal drill-down */
.pview{width:min(820px,100%);display:flex;flex-direction:column;gap:14px;position:relative}
.prow{display:flex;gap:clamp(28px,8vw,96px);align-items:flex-start;position:relative;flex-wrap:wrap}
.pleft{display:flex;flex-direction:column;gap:14px;align-items:center;width:min(360px,100%)}
.pmain{width:100%;aspect-ratio:1;max-width:100%;border:1px solid var(--box);position:relative;box-sizing:border-box}
.pmain .t{position:absolute;top:14px;left:18px;right:18px;z-index:2}
.pmain .t q{display:block;font-family:var(--serif);font-style:italic;font-size:21px;line-height:1.3;quotes:none}
.pmain .t time{display:block;font-size:13px;margin-top:6px;color:var(--fg)}
.pmain img{position:absolute;left:28%;top:24%;width:58%;height:66%;object-fit:contain}
.car{display:flex;align-items:center;gap:12px}
.arrow{font-size:30px;color:var(--muted);width:28px;line-height:1;padding:0}
.arrow:disabled{opacity:.2;cursor:default}
.thumb{width:68px;height:68px;border:1px solid var(--box);padding:6px;box-sizing:border-box;flex:none}
.thumb img{width:100%;height:100%;object-fit:contain;display:block}
.thumb.cur{border-color:var(--fg);border-width:2px;padding:5px}
.thumb.empty{cursor:default}
.panels{display:flex;flex-direction:column;gap:30px;padding-top:24px;min-width:0}
.panel h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:0 0 12px}
.prow-th{display:flex;gap:12px;align-items:center}
svg.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
/* pause before beginning */
/* first arrival: only the card over the plain background; the page fades in when it closes */
main,.logo,.reset,.feedback{transition:opacity 1.8s cubic-bezier(.4,0,.2,1),visibility 1.8s}
.intro-first main,.intro-first .logo,.intro-first .reset,.intro-first .feedback{opacity:0;visibility:hidden}
.intro-first .intro,.intro.closing.bare{background:transparent}
.intro{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(12,11,11,.62);animation:ifade 2s ease-in-out both}
.intro.closing{animation:ifadeout 1.1s cubic-bezier(.4,0,.2,1) both;pointer-events:none} /* an animation, so it overrides the fade-in's hold */
@keyframes ifadeout{from{opacity:1}to{opacity:0}}
@keyframes ifade{from{opacity:0}to{opacity:1}}
@keyframes irise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.icard:focus{outline:none}
.icard{background:var(--bg);border:1px solid #4d4a4a;width:min(520px,100%);max-height:100%;overflow-y:auto;padding:clamp(28px,5vw,48px);display:flex;flex-direction:column;gap:30px;
  animation:irise 1.8s cubic-bezier(.25,.1,.25,1) .5s both}
.itext p{font-family:"Cormorant Garamond", Georgia, serif;font-weight:400;font-size:clamp(20px,2.3vw,24px);line-height:1.55;letter-spacing:.01em;color:#d6d1d1;margin:0 0 .5em}
.itext p:last-child{margin:0}
/* one-minute bar: red like the text box's working line, filling smoothly */
.ibar{height:4px;border-radius:2px;background:#2e2c2c;overflow:hidden}
.ifill{height:100%;border-radius:2px;background:linear-gradient(90deg,rgba(218,29,85,.45),var(--red));box-shadow:0 0 8px rgba(218,29,85,.55);transform-origin:0 50%;animation:ifill 60s linear both}
@keyframes ifill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ibtns{display:flex;align-items:center;justify-content:center;gap:24px}
.ibegin{background:#2c2a2a;color:#6f6b6b;border-radius:5px;padding:6px 15px;font-size:16px;letter-spacing:.01em;transition:background-color 1.4s linear,color 1.4s linear}
.ibegin:disabled{cursor:default}
.ibegin.lit{background:var(--red);color:#fff}
.ibegin.lit:hover{filter:brightness(1.08)}
.iskip{color:var(--muted);font-size:15px;padding:6px 0}
.iskip:hover{color:var(--fg);text-decoration:underline;text-underline-offset:4px}
@media (max-width:699px){
  /* phone: header and feedback scroll with the page instead of floating over it */
  html,body{height:auto}
  body{min-height:100%;position:relative}
  .logo,.reset,.feedback{position:absolute}
  main{min-height:100svh;justify-content:flex-start;padding-block:68px 84px}
  /* phone panel: one box (the group that most recently received a petal), toggle on the same row */
  .pbox:not(:first-child),.seeall{display:none}
  .vtoggle{bottom:auto;top:calc(var(--pb) / 2);transform:translateY(-50%);margin:0}
  .gr-back{bottom:auto;top:calc(var(--pb) / 2);transform:translateY(-50%);margin:0;left:0}
  .gview{margin-top:44px}
  .dpanel{flex-direction:row;align-items:center;gap:10px}.dpanel .pscroll{max-height:none;min-width:0}.seeall{align-self:center;width:auto;padding:0 0 8px;white-space:nowrap}
  .gr{top:calc(var(--pb) + 18px)}
  .tl-labels{right:auto;left:8px;z-index:4}.tl-labels span{right:auto;left:0;font-size:13px}
  .stage .tl,.stage .tl-labels{top:calc(var(--pb) + 18px)}
  .stage{height:auto;display:flex;flex-direction:column;gap:10px}
  .dpanel{position:static;height:auto}
  .pscroll{direction:ltr;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:0 0 8px}
  .canvas{position:relative;height:var(--ch)}
  .gbox{height:auto;grid-template-columns:1fr;grid-template-rows:min(56vh,380px) 1px auto}
  .gscroll{margin-block:18px}
  .gdiv{margin-block:0;margin-inline:6%}
  .notes{padding:14px 6% 20px}
  .prow{flex-direction:column;align-items:center}
  .panels{flex-direction:row;gap:28px;padding-top:0;align-self:flex-start;flex-wrap:wrap}
  .thumb{width:58px;height:58px}
}