/* Czas Patrzenia — Soft-Noir / SILENCE canon.
   Tokens copied bit-exact from Soft-Noire-Design/system/tokens (phi-tokens SSoT).
   Fonts self-hosted (OFL): STIX Two Text (display), IBM Plex Sans (body). No CDN. */
@font-face{font-family:"STIX Two Text";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"STIX Two Text";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"STIX Two Text";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"STIX Two Text";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/stix-two-text-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02AF}
@font-face{font-family:"IBM Plex Sans";font-weight:300;font-display:swap;src:url(fonts/ibm-plex-sans-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"IBM Plex Sans";font-weight:300;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-300-normal.woff2) format("woff2");unicode-range:U+0100-02AF}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2212}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF}

:root{
  color-scheme:dark;
  /* surfaces (sqrt(phi) luminance steps) */
  --surface-base:#0F0F14;--surface-raised:#1A1A20;--surface-elevated:#25252E;--surface-overlay:#32323E;--surface-float:#3F3F4F;
  --phi-surface-zero:#07070F;--surface-zero-deep:#0D0F12;
  --text-primary:#E8E8F0;--text-secondary:#CBD5E1;--text-muted:#ADADBD;--text-ritual:#E8E4DF;
  --accent-gold:#C9A84C;--accent-gold-dim:#8B7355;--accent-gold-glow:#F5D78E;--accent-teal:#7FB0B8;
  --gold-glow-base:rgba(201,168,76,0.22);--gold-glow-peak:rgba(201,168,76,0.38);
  --border-subtle:hsl(220 15% 92% / 0.08);--border-medium:hsl(220 15% 92% / 0.12);--border-strong:hsl(220 15% 92% / 0.18);
  --border-gold:color-mix(in srgb,var(--accent-gold) 38%,transparent);
  /* phi */
  --phi:1.618033988749895;--phi-inv:0.618033988749895;--phi-inv-2:0.381966011250105;
  --content-ratio:61.8%;--breath-ratio:38.2%;
  /* spacing phi^n rem */
  --s-n4:0.146rem;--s-n3:0.236rem;--s-n2:0.382rem;--s-n1:0.618rem;--s-0:1rem;--s-1:1.618rem;--s-2:2.618rem;--s-3:4.236rem;--s-4:6.854rem;--s-5:11.090rem;
  --touch-min:44px;
  /* type 16 x phi^n */
  --font-display:"STIX Two Text",Georgia,serif;
  --font-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:"IBM Plex Mono","SF Mono",ui-monospace,monospace;
  --fs-n1:9.889px;--fs-0:16px;--fs-1:25.888px;--fs-2:41.887px;--fs-3:67.773px;--fs-utility:13px;
  --lh-body:1.618;--lh-tight:1.272;--ls-ritual:0.0382em;--ls-label:0.12em;--ls-hud:0.18em;
  /* radii Fibonacci */
  --r-sm:5px;--r-md:8px;--r-lg:13px;--r-xl:21px;--r-2xl:34px;--r-pill:999px;
  /* motion (phi/pi): 236 / 382 / 618 / 1618 / 2618 */
  --d-micro:236ms;--d-breath:382ms;--d-phi:618ms;--d-golden:1618ms;--d-breathe:2618ms;--d-ceremony:6854ms;
  --ease-phi:cubic-bezier(0.382,0,0.618,1);--ease-golden:cubic-bezier(0.38,0,0.12,1);--ease-settle:cubic-bezier(0.236,0,0.236,1);--ease-breath:cubic-bezier(0.45,0,0.55,1);
  --shadow-xl:0 13px 34px -5px rgb(0 0 0/.50);
  --tabbar-h:calc(55px + env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion:reduce){
  :root{--d-micro:1ms;--d-breath:1ms;--d-phi:1ms;--d-golden:1ms;--d-breathe:1ms;--d-ceremony:1ms}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--surface-base)}
body{margin:0;min-height:100dvh;background:radial-gradient(120% 61.8% at 50% 0%,#15151c 0%,var(--surface-base) 61.8%) fixed,var(--surface-base);color:var(--text-secondary);font:400 var(--fs-0)/var(--lh-body) var(--font-body);-webkit-font-smoothing:antialiased;letter-spacing:.005em;overscroll-behavior-y:none}
img{max-width:100%;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:1.5px solid var(--accent-gold);outline-offset:3px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-999px;top:0;background:var(--surface-elevated);padding:var(--s-n1) var(--s-0);z-index:99}
.skip:focus{left:var(--s-0)}
h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--text-primary);letter-spacing:-.005em;margin:0}
h1{font-size:clamp(var(--fs-1),9vw,var(--fs-2));line-height:var(--lh-tight)}
h2{font-size:var(--fs-1);line-height:var(--lh-tight)}
h3{font-size:calc(var(--fs-0) * 1.272);line-height:var(--lh-tight)}
p{margin:0 0 var(--s-0)}
.eyebrow{font:500 var(--fs-utility)/1 var(--font-body);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--accent-gold);margin:0 0 var(--s-0)}
.muted{color:var(--text-muted)}
.lead{font-size:calc(var(--fs-0)*1.118);color:var(--text-secondary)}
.serif-i{font-family:var(--font-display);font-style:italic}
.mono{font-family:var(--font-mono);font-size:var(--fs-utility);letter-spacing:.04em}

/* hairline */
.hairline{position:fixed;inset:0 0 auto 0;height:1px;z-index:60;pointer-events:none;opacity:0;transition:opacity var(--d-phi) var(--ease-phi)}
.hairline.on{opacity:1}
.hairline i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,transparent,var(--accent-gold) 38.2%,var(--accent-gold-glow));box-shadow:0 0 8px var(--gold-glow-peak)}

/* header & tabs */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:var(--s-0);padding:calc(env(safe-area-inset-top) + var(--s-n1)) var(--s-1) var(--s-n1);background:color-mix(in srgb,var(--surface-base) 82%,transparent);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);border-bottom:1px solid var(--border-subtle);transition:transform var(--d-phi) var(--ease-phi),opacity var(--d-phi) var(--ease-phi)}
.brand{display:inline-flex;align-items:center;gap:var(--s-n1);text-decoration:none;font-family:var(--font-display);font-size:calc(var(--fs-0)*1.118);color:var(--text-primary);min-height:var(--touch-min)}
.brand-mark{width:13px;height:13px;border-radius:50%;border:1px solid var(--accent-gold);position:relative}
.brand-mark::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent-gold)}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(4,1fr);height:var(--tabbar-h);padding-bottom:env(safe-area-inset-bottom);background:color-mix(in srgb,var(--surface-raised) 88%,transparent);backdrop-filter:blur(21px);-webkit-backdrop-filter:blur(21px);border-top:1px solid var(--border-subtle);transition:transform var(--d-phi) var(--ease-phi)}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--text-muted);font-size:var(--fs-n1);letter-spacing:var(--ls-label);text-transform:uppercase;min-height:var(--touch-min);transition:color var(--d-breath) var(--ease-phi)}
.tabs svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.tabs a[aria-current="page"]{color:var(--accent-gold)}
body.immersive .top{transform:translateY(-100%);opacity:0;pointer-events:none}
body.immersive .tabs,body.onboarding .tabs{transform:translateY(110%)}
body.onboarding .top{display:none}
@media (min-width:900px){
  .tabs{position:fixed;left:auto;bottom:auto;top:calc(env(safe-area-inset-top) + var(--s-n1));right:var(--s-1);z-index:41;display:flex;gap:var(--s-n1);height:var(--touch-min);padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0}
  body.immersive .tabs{transform:translateY(-200%)}
  .tabs a{flex-direction:row;gap:var(--s-n1);padding:0 var(--s-0);font-size:var(--fs-utility);border-radius:var(--r-pill);border:1px solid transparent}
  .tabs a[aria-current="page"]{border-color:var(--border-gold);background:color-mix(in srgb,var(--accent-gold) 6%,transparent)}
  .tabs svg{width:17px;height:17px}
}

main{display:block;padding-bottom:calc(var(--tabbar-h) + var(--s-2));outline:none}
@media (min-width:900px){main{padding-bottom:var(--s-3)}}
.wrap{width:min(100% - 2*var(--s-1),1180px);margin-inline:auto}
.view{animation:viewIn var(--d-phi) var(--ease-phi) both}
@keyframes viewIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}
.section{padding-block:var(--s-2) var(--s-1)}
.split{display:grid;gap:var(--s-1)}
@media (min-width:900px){.split{grid-template-columns:61.8fr 38.2fr;gap:var(--s-2);align-items:start}.split.rev{grid-template-columns:38.2fr 61.8fr}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-n1);min-height:var(--touch-min);padding:0 var(--s-1);border-radius:var(--r-pill);border:1px solid var(--accent-gold);background:var(--accent-gold);color:#14110A;font-weight:500;letter-spacing:var(--ls-ritual);text-decoration:none;cursor:pointer;transition:background var(--d-breath) var(--ease-phi),transform var(--d-micro) var(--ease-phi),box-shadow var(--d-phi) var(--ease-phi);-webkit-tap-highlight-color:transparent;white-space:nowrap}
.btn:hover{background:var(--accent-gold-glow);box-shadow:0 0 21px var(--gold-glow-base)}
.btn:active{transform:scale(.982)}
.btn.ghost{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn.ghost:hover{border-color:var(--border-gold);background:color-mix(in srgb,var(--accent-gold) 6%,transparent);box-shadow:none}
.btn.quiet{background:transparent;border-color:transparent;color:var(--text-muted);padding:0 var(--s-0)}
.btn.quiet:hover{color:var(--text-primary);box-shadow:none;background:transparent}
.btn.sm{min-height:34px;padding:0 var(--s-0);font-size:var(--fs-utility)}
.btn[aria-pressed="true"]{border-color:var(--accent-gold);color:var(--accent-gold);background:color-mix(in srgb,var(--accent-gold) 10%,transparent)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-n1);align-items:center}
.icon-btn{width:var(--touch-min);height:var(--touch-min);display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--border-medium);background:color-mix(in srgb,var(--surface-base) 61.8%,transparent);backdrop-filter:blur(8px);cursor:pointer;color:var(--text-primary);transition:border-color var(--d-breath) var(--ease-phi)}
.icon-btn:hover{border-color:var(--border-gold)}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}

/* cards */
.card{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--r-xl);padding:var(--s-1);box-shadow:var(--shadow-xl)}
.chip{display:inline-flex;align-items:center;gap:var(--s-n2);font-size:var(--fs-utility);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border-medium);border-radius:var(--r-pill);padding:3px var(--s-n1)}
.chip.gold{color:var(--accent-gold);border-color:var(--border-gold)}
.note{border-left:1px solid var(--accent-gold);padding:var(--s-n2) 0 var(--s-n2) var(--s-0);color:var(--text-muted);font-size:var(--fs-utility);line-height:var(--lh-body)}

/* onboarding */
.ob{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;background:radial-gradient(90% 50% at 50% 38.2%,#17171f 0%,var(--phi-surface-zero) 100%);padding:calc(env(safe-area-inset-top) + var(--s-1)) var(--s-1) calc(env(safe-area-inset-bottom) + var(--s-1))}
.ob-track{flex:1;position:relative;overflow:hidden}
.ob-step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;max-width:34rem;margin-inline:auto;opacity:0;transform:translateX(34px);transition:opacity var(--d-phi) var(--ease-phi),transform var(--d-phi) var(--ease-phi);pointer-events:none}
.ob-step.is-on{opacity:1;transform:none;pointer-events:auto}
.ob-step.is-past{transform:translateX(-34px)}
.ob-step h1{margin-bottom:var(--s-1)}
.ob-step .lead{color:var(--text-ritual)}
.ob-orb{width:89px;height:89px;margin-bottom:var(--s-2);position:relative}
.ob-orb::before,.ob-orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent-gold);animation:orb var(--d-ceremony) var(--ease-breath) infinite}
.ob-orb::after{inset:34%;background:var(--accent-gold);border:0;animation-name:core;box-shadow:0 0 34px var(--gold-glow-peak)}
@keyframes orb{0%,100%{transform:scale(1);opacity:.618}38.2%,61.8%{transform:scale(1.09);opacity:1}}
@keyframes core{0%,100%{transform:scale(.9)}50%{transform:scale(1.06)}}
.ob-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s-0);max-width:34rem;width:100%;margin-inline:auto}
.dots{display:flex;gap:var(--s-n1)}
.dots i{width:21px;height:2px;border-radius:2px;background:var(--surface-float);transition:background var(--d-phi) var(--ease-phi),width var(--d-phi) var(--ease-phi)}
.dots i.on{background:var(--accent-gold);width:34px}
.steps-list{list-style:none;padding:0;margin:0 0 var(--s-1);display:grid;gap:var(--s-0)}
.steps-list li{display:grid;grid-template-columns:34px 1fr;gap:var(--s-n1);align-items:start}
.steps-list b{font:400 var(--fs-utility)/34px var(--font-mono);color:var(--accent-gold);border:1px solid var(--border-gold);border-radius:50%;width:34px;height:34px;text-align:center}
.consent{display:grid;gap:var(--s-n1);margin:0 0 var(--s-0)}
.opt{display:grid;grid-template-columns:21px 1fr;gap:var(--s-0);align-items:start;padding:var(--s-0);border:1px solid var(--border-medium);border-radius:var(--r-lg);cursor:pointer;transition:border-color var(--d-breath) var(--ease-phi),background var(--d-breath) var(--ease-phi)}
.opt:has(input:checked){border-color:var(--border-gold);background:color-mix(in srgb,var(--accent-gold) 6%,transparent)}
.opt input{appearance:none;width:21px;height:21px;margin:2px 0 0;border:1px solid var(--border-strong);border-radius:50%;display:grid;place-items:center}
.opt input:checked{border-color:var(--accent-gold)}
.opt input:checked::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent-gold)}
.opt strong{display:block;color:var(--text-primary);font-weight:500}
.opt span{font-size:var(--fs-utility);color:var(--text-muted);line-height:1.5}

/* kanon */
.hero{padding-block:var(--s-2) var(--s-1)}
.hero h1{max-width:16ch}
.hero .lead{max-width:38rem}
.grid{display:grid;gap:var(--s-1);grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}
.art{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--surface-raised);border:1px solid var(--border-subtle);transition:transform var(--d-phi) var(--ease-phi),border-color var(--d-phi) var(--ease-phi);animation:viewIn var(--d-phi) var(--ease-phi) both}
.art:hover{border-color:var(--border-gold)}
.art-media{display:block;position:relative;aspect-ratio:1.618/1;overflow:hidden;cursor:pointer;border:0;padding:0;width:100%;background:#000}
.art-media img{width:100%;height:100%;object-fit:cover;transition:transform var(--d-golden) var(--ease-golden),filter var(--d-phi) var(--ease-phi);filter:saturate(.92)}
.art:hover .art-media img{transform:scale(1.03);filter:none}
.art-media .play{position:absolute;left:var(--s-0);bottom:var(--s-0);display:inline-flex;gap:var(--s-n2);align-items:center;font-size:var(--fs-utility);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-primary);background:color-mix(in srgb,var(--surface-base) 70%,transparent);backdrop-filter:blur(8px);padding:var(--s-n2) var(--s-0);border-radius:var(--r-pill);border:1px solid var(--border-medium)}
.art-media .play::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-gold);box-shadow:0 0 8px var(--accent-gold)}
.art-body{padding:var(--s-0) var(--s-1) var(--s-1)}
.art-body h3{margin-bottom:var(--s-n3)}
.meta{display:flex;flex-wrap:wrap;gap:var(--s-n2) var(--s-0);font-size:var(--fs-utility);color:var(--text-muted);margin-bottom:var(--s-0)}
.ai-badge{position:absolute;top:var(--s-0);right:var(--s-0);z-index:2}

/* viewer */
.viewer{position:fixed;inset:0;z-index:50;background:var(--phi-surface-zero);display:grid;grid-template-rows:1fr auto;animation:fadeIn var(--d-golden) var(--ease-golden) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.stage{position:relative;display:grid;place-items:center;overflow:hidden;padding:calc(env(safe-area-inset-top) + 55px) 0 0}
.frame{position:relative;max-width:100%;max-height:100%;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;animation:emerge var(--d-breathe) var(--ease-golden) both}
@keyframes emerge{from{opacity:0;transform:scale(.982);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.frame img{max-width:100vw;max-height:calc(100dvh - 180px);width:auto;height:auto;pointer-events:none;-webkit-user-drag:none}
@media (orientation:portrait) and (max-width:640px){.frame img{width:100vw}}
.mark{position:absolute;border:1px solid var(--accent-gold);background:color-mix(in srgb,var(--accent-gold) 10%,transparent);box-shadow:0 0 0 1px rgb(0 0 0/.2),0 0 21px var(--gold-glow-base);border-radius:var(--r-sm);animation:markIn var(--d-phi) var(--ease-phi) both;pointer-events:none}
.mark.pt{border-radius:50%}
.mark.draft{border-style:dashed;animation:none}
@keyframes markIn{from{opacity:0;transform:scale(1.272)}to{opacity:1;transform:none}}
.v-top{position:absolute;top:calc(env(safe-area-inset-top) + var(--s-n1));left:var(--s-0);right:var(--s-0);display:flex;justify-content:space-between;align-items:center;gap:var(--s-n1);z-index:3;transition:opacity var(--d-phi) var(--ease-phi)}
.v-title{font-family:var(--font-display);color:var(--text-ritual);font-size:var(--fs-0);text-align:center;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-bar{padding:var(--s-0) var(--s-1) calc(env(safe-area-inset-bottom) + var(--s-0));display:flex;align-items:center;justify-content:space-between;gap:var(--s-0);transition:opacity var(--d-phi) var(--ease-phi)}
.v-hint{font-size:var(--fs-utility);color:var(--text-muted);max-width:21rem}
.viewer.calm .v-top,.viewer.calm .v-bar{opacity:.146}
.viewer.calm .v-top:hover,.viewer.calm .v-bar:hover{opacity:1}
.count{font:400 var(--fs-utility)/1 var(--font-mono);color:var(--accent-gold)}

/* sheet */
.scrim{position:fixed;inset:0;z-index:80;background:rgb(7 7 15/.618);animation:fadeIn var(--d-phi) var(--ease-phi) both;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:min(100%,38rem);max-height:92dvh;overflow:auto;background:var(--surface-raised);border:1px solid var(--border-medium);border-bottom:0;border-radius:var(--r-2xl) var(--r-2xl) 0 0;padding:var(--s-1) var(--s-1) calc(env(safe-area-inset-bottom) + var(--s-1));animation:sheetUp var(--d-phi) var(--ease-golden) both}
@media (min-width:900px){.scrim{align-items:center}.sheet{border-radius:var(--r-2xl);border-bottom:1px solid var(--border-medium)}}
@keyframes sheetUp{from{transform:translateY(38.2%);opacity:0}to{transform:none;opacity:1}}
.grab{width:34px;height:3px;border-radius:3px;background:var(--surface-float);margin:0 auto var(--s-1)}
.dwell{font-family:var(--font-display);font-size:var(--fs-2);line-height:1;color:var(--text-primary);margin:var(--s-n1) 0 var(--s-n1)}
label.field{display:block;margin:0 0 var(--s-0)}
label.field>span{display:block;font-size:var(--fs-utility);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s-n2)}
textarea,input[type=text],input[type=date]{width:100%;background:var(--surface-base);border:1px solid var(--border-medium);border-radius:var(--r-lg);padding:var(--s-n1) var(--s-0);color:var(--text-primary);line-height:1.5;resize:vertical;min-height:var(--touch-min);transition:border-color var(--d-breath) var(--ease-phi)}
textarea{min-height:89px}
textarea:focus,input:focus{outline:none;border-color:var(--accent-gold)}
::placeholder{color:#7d7d8c}

/* rytm / charts */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-n1);margin-bottom:var(--s-1)}
.stat{background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--s-0)}
.stat b{display:block;font-family:var(--font-display);font-weight:400;font-size:var(--fs-1);color:var(--text-primary);line-height:1.1}
.stat span{font-size:var(--fs-n1);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.rhythm{display:grid;gap:var(--s-0)}
.r-item{display:grid;grid-template-columns:89px 1fr;gap:var(--s-0);align-items:center}
.r-thumb{position:relative;border-radius:var(--r-md);overflow:hidden;aspect-ratio:1.618/1}
.r-thumb img{width:100%;height:100%;object-fit:cover}
.r-thumb canvas,.heat canvas{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
.bar{height:3px;border-radius:3px;background:var(--surface-elevated);overflow:hidden;margin:var(--s-n2) 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-gold-dim),var(--accent-gold));transform-origin:0 50%;animation:grow var(--d-golden) var(--ease-golden) both}
@keyframes grow{from{transform:scaleX(0)}}
.heat{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1168/784;background:#000}
.heat img{width:100%;height:100%;object-fit:cover;filter:grayscale(.618) brightness(.618)}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart text{fill:var(--text-muted);font:400 11px var(--font-body)}
.chart .lbl{fill:var(--text-secondary);font-size:12px}
.chart .val{fill:var(--accent-gold);font-family:var(--font-mono);font-size:11px}
.chart rect.b{fill:url(#g)}
.chart .grow{transform-box:fill-box;transform-origin:left;animation:grow var(--d-golden) var(--ease-golden) both}
.chart .rise{transform-box:fill-box;transform-origin:bottom;animation:rise var(--d-golden) var(--ease-golden) both}
@keyframes rise{from{transform:scaleY(0)}}
.seg{display:inline-flex;border:1px solid var(--border-medium);border-radius:var(--r-pill);padding:3px;gap:3px;margin-bottom:var(--s-0);flex-wrap:wrap}
.seg button{border:0;background:none;border-radius:var(--r-pill);padding:var(--s-n2) var(--s-0);font-size:var(--fs-utility);color:var(--text-muted);cursor:pointer;min-height:34px;transition:background var(--d-breath) var(--ease-phi),color var(--d-breath) var(--ease-phi)}
.seg button[aria-pressed="true"]{background:var(--surface-elevated);color:var(--accent-gold)}
.demo-flag{display:block;border:1px dashed var(--border-gold);border-radius:var(--r-lg);padding:var(--s-n1) var(--s-0);font-size:var(--fs-utility);color:var(--text-muted);margin-bottom:var(--s-1)}
.demo-flag b{color:var(--accent-gold);font-weight:500;letter-spacing:var(--ls-label);margin-right:var(--s-n1)}

/* galeria */
.sl{display:grid;gap:var(--s-n1)}
.sl-item{display:grid;grid-template-columns:55px 1fr auto;gap:var(--s-0);align-items:center;padding:var(--s-n1);border:1px solid var(--border-subtle);border-radius:var(--r-lg);background:var(--surface-raised)}
.sl-item img{width:55px;height:34px;object-fit:cover;border-radius:var(--r-sm)}
.sl-item small{display:block;color:var(--text-muted);font-size:var(--fs-utility)}
.rsvp{display:flex;align-items:center;gap:var(--s-1)}
.rsvp .num{font-family:var(--font-display);font-size:var(--fs-2);color:var(--text-primary);line-height:1;min-width:2ch}
.empty{padding:var(--s-1);border:1px dashed var(--border-medium);border-radius:var(--r-lg);color:var(--text-muted);text-align:center;font-size:var(--fs-utility)}
pre.md{white-space:pre-wrap;background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--r-lg);padding:var(--s-0);font:400 12px/1.6 var(--font-mono);color:var(--text-secondary);max-height:21rem;overflow:auto}
hr.rule{border:0;height:1px;background:linear-gradient(90deg,var(--border-gold),transparent 61.8%);margin:var(--s-2) 0 var(--s-1)}
.foot{font-size:var(--fs-utility);color:var(--text-muted);padding-block:var(--s-1)}
.toast{position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--s-0));transform:translate(-50%,21px);opacity:0;z-index:90;background:var(--surface-elevated);border:1px solid var(--border-gold);color:var(--text-primary);padding:var(--s-n1) var(--s-1);border-radius:var(--r-pill);font-size:var(--fs-utility);transition:opacity var(--d-breath) var(--ease-phi),transform var(--d-breath) var(--ease-phi);pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:var(--s-0);padding:var(--s-n1) 0;border-bottom:1px solid var(--border-subtle);min-height:var(--touch-min)}
.switch input{appearance:none;width:42px;height:26px;border-radius:13px;background:var(--surface-float);position:relative;cursor:pointer;flex:none;transition:background var(--d-breath) var(--ease-phi)}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--text-primary);transition:transform var(--d-breath) var(--ease-phi)}
.switch input:checked{background:var(--accent-gold-dim)}
.switch input:checked::after{transform:translateX(16px);background:var(--accent-gold-glow)}
.legend{display:flex;align-items:center;gap:var(--s-n1);font-size:var(--fs-n1);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-top:var(--s-n1)}
.legend i{flex:0 0 89px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--accent-gold),var(--accent-gold-glow))}

.v-meta{display:none}
@media (min-width:900px){
  .viewer{grid-template-columns:61.8fr 38.2fr;grid-template-rows:1fr}
  .stage{padding:var(--s-3) var(--s-1) var(--s-1)}
  .frame img{max-width:calc(61.8vw - 2*var(--s-1));max-height:calc(100dvh - 2*var(--s-3))}
  .v-top{right:auto;width:calc(61.8vw - 2*var(--s-0))}
  .v-bar{flex-direction:column;align-items:stretch;justify-content:center;gap:var(--s-1);padding:var(--s-3) var(--s-2);border-left:1px solid var(--border-subtle);background:linear-gradient(180deg,var(--surface-base),var(--phi-surface-zero))}
  .v-meta{display:block;animation:viewIn var(--d-golden) var(--ease-golden) both;animation-delay:var(--d-breath)}
  .v-meta h2{font-size:var(--fs-2);margin-bottom:var(--s-n1)}
  .v-bar .btn{align-self:flex-start}
}