/* Moi Circle website — shared styles. The page is a deck of full-screen scenes: one scroll = one step, every transition is time-based. */

@property --n{syntax:'<integer>';inherits:false;initial-value:0}

/* ---------- Themes ---------- */
[data-theme="forest-light"]{
  --bg:#FAFBF8;--surface:#FFFFFF;--ink:#0E1A13;--muted:#4A5850;--hairline:#E1E7E0;
  --accent:#1F4D36;--on-accent:#FFFFFF;--accent-soft:#E6EFE7;
  --h-base:#EEF3EA;--h1:#DCEAD7;--h2:#A9CBAE;--h3:#2F6B4A;--h4:#CFE0C6;
  --d-base:#12301F;--d1:#1F4D36;--d2:#3D7A55;--d3:#0A1F14;--on-deep:#F3F7F2;--on-deep-muted:#C3D3C7;
  --shadow:rgba(14,26,19,.42);--grain-blend:overlay;
}
[data-theme="forest-dark"]{
  --bg:#0B1510;--surface:#111E17;--ink:#EAF1EB;--muted:#9DAEA3;--hairline:#1F3026;
  --accent:#9ED3AF;--on-accent:#0B1510;--accent-soft:#16271D;
  --h-base:#0B1510;--h1:#12291C;--h2:#245238;--h3:#5E9E74;--h4:#0F2318;
  --d-base:#0F2418;--d1:#1C4430;--d2:#2F6B4A;--d3:#08130D;--on-deep:#EAF1EB;--on-deep-muted:#A9BEB0;
  --shadow:rgba(0,0,0,.75);--grain-blend:soft-light;
}
[data-theme="blood-light"]{
  --bg:#FCFAF9;--surface:#FFFFFF;--ink:#1C100B;--muted:#6B5148;--hairline:#F0E4DF;
  --accent:#B0301A;--on-accent:#FFFFFF;--accent-soft:#FBEAE2;
  --h-base:#FBF0EA;--h1:#FCE4D9;--h2:#F3A07F;--h3:#C8361C;--h4:#F8D0BE;
  --d-base:#5E140A;--d1:#8E2412;--d2:#C23A1D;--d3:#3A0C06;--on-deep:#FFF4EF;--on-deep-muted:#F2C9BA;
  --shadow:rgba(94,20,10,.42);--grain-blend:overlay;
}
[data-theme="blood-dark"]{
  --bg:#140A07;--surface:#1D0F0B;--ink:#F8ECE6;--muted:#BFA196;--hairline:#33201A;
  --accent:#FF7A4D;--on-accent:#140A07;--accent-soft:#2A130D;
  --h-base:#140A07;--h1:#30100A;--h2:#7A2010;--h3:#D24E28;--h4:#220C07;
  --d-base:#2A0E08;--d1:#5E140A;--d2:#A52A15;--d3:#140A07;--on-deep:#F8ECE6;--on-deep-muted:#D9B7AA;
  --shadow:rgba(0,0,0,.78);--grain-blend:soft-light;
}






















/* ---------- Base ---------- */
.site{--gold:#C9A46A;--gold-hi:#F0D9A0;--gold-lo:#A07A2C;--k:9;--sh:780px;--f-d:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--f-b:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--ls:-.05em;--lh:.98;--ease:cubic-bezier(.2,.7,.2,1);--swift:cubic-bezier(.76,0,.24,1);position:relative;background:var(--bg);color:var(--ink);font-family:var(--f-b);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;outline:none}
.skin-serif{--f-d:"Literata",Georgia,"Noto Serif Tamil",serif;--f-b:"Manrope",system-ui,"Noto Sans Tamil",sans-serif;--ls:-.03em;--lh:1.02}
.site *{box-sizing:border-box}
.site h1,.site h2,.site h3,.site p,.site ol,.site ul,.site dl,.site dd{margin:0;padding:0;list-style:none}
.site :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:999px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(20px,5vw,64px)}
.h-xl{font-family:var(--f-d);font-weight:500;font-size:clamp(48px,7.4vw,116px);line-height:var(--lh);letter-spacing:var(--ls)}
.h-l{font-family:var(--f-d);font-weight:500;font-size:clamp(34px,4.6vw,68px);line-height:1.02;letter-spacing:var(--ls)}
.h-m{font-family:var(--f-d);font-weight:500;font-size:clamp(24px,2.6vw,38px);line-height:1.12;letter-spacing:calc(var(--ls)*.7)}
.sub{font-size:clamp(17px,1.5vw,21px);line-height:1.5;max-width:27em;color:var(--muted)}
.cap{font-size:13px;line-height:18px;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.dim{color:var(--muted)}
.dark{color:var(--on-deep)}
.dark .sub,.dark .cap,.dark .dim{color:var(--on-deep-muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 30px;border-radius:999px;background:var(--accent);color:var(--on-accent);font:700 17px/24px var(--f-b);text-decoration:none;white-space:nowrap}
.cta-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.center{align-items:center;text-align:center}

/* ---------- Nav ---------- */
.s-nav{position:absolute;left:0;right:0;top:0;z-index:40;height:76px;pointer-events:none}
.s-nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-d);font-size:22px;font-weight:700;letter-spacing:-.04em;color:inherit}
.s-nav .brand,.nav-end{pointer-events:auto;height:48px;padding:0 18px;border-radius:999px;background:var(--surface);color:var(--ink);border:1px solid var(--hairline)}
.nav-end{display:flex;align-items:center;gap:14px;padding:0 18px 0 6px}
.theme-btn,.skip-btn,.replay-btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 12px;border-radius:999px;border:0;background:transparent;color:inherit;font:500 14px/20px var(--f-b);cursor:pointer}
.replay-btn{width:44px;justify-content:center;padding:0}
.skip-btn{font-weight:600;text-decoration:underline;text-underline-offset:5px}
.swatch{width:14px;height:14px;border-radius:999px;background:linear-gradient(135deg,var(--accent) 50%,var(--gold) 50%)}
.nav-cta{font-weight:600;font-size:15px;color:inherit;text-decoration:underline;text-underline-offset:6px;min-height:44px;display:inline-flex;align-items:center}
.prog{display:none}
.is-live .prog{display:block;position:absolute;right:14px;top:50%;width:2px;height:120px;margin-top:-60px;z-index:40;background:color-mix(in srgb,var(--gold) 30%,transparent);border-radius:2px;overflow:hidden}
.prog i{display:block;width:100%;height:100%;background:var(--gold);transform-origin:top;transition:transform .8s var(--ease)}

/* ---------- Mesh, grain, photos ---------- */
.mesh-layer{position:absolute;inset:-12%;filter:blur(36px);pointer-events:none}
.grain{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:var(--grain-blend);pointer-events:none}
.mesh-hero{background-color:var(--h-base)}
.mesh-hero>.mesh-layer{background:radial-gradient(46% 58% at 10% 14%,var(--h1) 0%,transparent 70%),radial-gradient(36% 48% at 74% 12%,var(--h4) 0%,transparent 72%),radial-gradient(44% 56% at 60% 74%,var(--h2) 0%,transparent 70%),radial-gradient(40% 58% at 92% 92%,var(--h3) 0%,transparent 70%),var(--h-base)}
.mesh-deep{background-color:var(--d-base)}
.mesh-deep>.mesh-layer{background:radial-gradient(50% 62% at 14% 24%,var(--d1) 0%,transparent 72%),radial-gradient(30% 42% at 88% 10%,var(--d2) 0%,transparent 70%),radial-gradient(50% 60% at 70% 104%,var(--d3) 0%,transparent 70%),radial-gradient(34% 46% at 96% 78%,var(--d2) 0%,transparent 72%),var(--d-base)}
.plain{background:var(--bg)}
.ph{background-size:cover;background-position:center}
.bgph{display:none}
.skin-photo .bgph{display:block;position:absolute;inset:0}
.skin-photo .bgph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.36))}
.skin-photo .a-scene{color:var(--on-deep)}
.skin-photo .a-scene .sub,.skin-photo .a-scene .dim{color:var(--on-deep-muted)}
.skin-photo .a-scene .btn{background:var(--on-deep);color:var(--d-base)}

/* ---------- Deck: scenes and steps ---------- */
.k0{--k:0}.k1{--k:1}.k2{--k:2}.k3{--k:3}.k4{--k:4}.k5{--k:5}.k6{--k:6}.k7{--k:7}.k8{--k:8}
.scene{position:relative;isolation:isolate;overflow:hidden;min-height:780px}
.sc{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:120px clamp(20px,5vw,64px) 64px;min-height:inherit;display:flex;flex-direction:column;gap:40px}
.mid{flex-grow:1;display:grid;align-content:center;gap:48px}
.col{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:28px}
.is-live{height:100vh;height:100dvh;overflow:hidden}
/* nothing animates until the deck is armed: no slide-away flash on load, and Replay can snap back to the start */
.is-live:not(.ready) *,.is-live:not(.ready) *::before,.is-live:not(.ready) *::after{transition:none!important;animation:none!important}
.is-live .deck{position:relative;height:100%}
.is-live .scene{position:absolute;inset:0;min-height:0;transition:transform 1.05s var(--swift),clip-path 1.15s var(--swift),visibility 0s linear 0s}
.is-live .scene.next{transform:translateY(100%);visibility:hidden;transition-delay:0s,0s,1.15s}
.is-live .scene.past{transform:translateY(-12%);visibility:hidden;transition-delay:0s,0s,1.15s}
.is-live .scene.circle{clip-path:circle(145% at 50% 56%)}
.is-live .scene.circle.next{transform:none;clip-path:circle(0% at 50% 56%)}
.is-live .scene.scroll{overflow-y:auto;overscroll-behavior:contain}
/* a section being rewound while hidden: it jumps to its first step with nothing animating */
.is-live .scene.snap,.is-live .scene.snap *,.is-live .scene.snap *::before{transition:none!important}
.is-live .sc{height:100%;min-height:0}
.is-live .mid{gap:0}
.is-live .mid>*{grid-area:1 / 1}
/* step primitives: the scene carries --k (its current step); each element carries --i (the step it belongs to) */
.is-live .st,.is-live .so,.is-live .sx,.is-live .sd,.is-live .pop,.is-live .sg{--a:clamp(0,calc(var(--k) - var(--i) + 1),1);--b:clamp(0,calc(var(--k) - var(--i)),1);transition:opacity .7s var(--ease),transform .85s var(--ease);transition-delay:var(--dl,0s)}
.is-live .st{opacity:var(--a);transform:translateY(calc((1 - var(--a))*40px))}
.is-live .so{opacity:calc(1 - var(--a));transform:translateY(calc(var(--a)*-48px))}
.is-live .sx{opacity:calc(var(--a) - var(--b));transform:translateY(calc((1 - var(--a))*56px - var(--b)*56px))}
.is-live .sd{opacity:calc(var(--a) - var(--b)*.6);transform:translateY(calc((1 - var(--a))*28px))}
.is-live .pop{opacity:var(--a);transform:scale(calc(.7 + var(--a)*.3))}
.is-live .sg{transform:scaleX(var(--a));transform-origin:left}
/* page-load entrance */
.is-live .intro{transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--d,0)*.14s)}
.is-live:not(.ready) .intro{opacity:0;transform:translateY(44px)}
.is-live.skip .intro,.is-live.skip .lw,.is-live.skip .o10-n,.is-live.skip .o2-box circle{transition-delay:0s!important;transition-duration:.3s!important}

/* ---------- Gold inlay: grows out of a corner, fades before it reaches the content ---------- */
.inlay{position:absolute;z-index:1;width:min(96vw,1040px);aspect-ratio:1;background-size:contain;background-repeat:no-repeat;background-position:center;pointer-events:none;opacity:.5;-webkit-mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,.55) 30%,transparent 60%);mask-image:radial-gradient(circle,#000 0%,rgba(0,0,0,.55) 30%,transparent 60%)}
.inlay.tr{right:0;top:0;--tx:50%;--ty:-50%}
.inlay.bl{left:0;bottom:0;--tx:-50%;--ty:50%}
.inlay.br{right:0;bottom:0;--tx:50%;--ty:50%}
.inlay.tl{left:0;top:0;--tx:-50%;--ty:-50%}
.inlay{translate:var(--tx) var(--ty);animation:inlay-spin 200s linear infinite}
/* each inlay turns very slowly about its own corner; a second, smaller layer turns the other way */
@keyframes inlay-spin{to{rotate:360deg}}
.inlay.rev{animation-direction:reverse;animation-duration:280s}
.inlay.in{width:min(58vw,620px);opacity:.42}
.jaali-c{position:absolute;z-index:1;width:62%;height:86%;background-repeat:repeat;background-size:140px 140px;pointer-events:none;opacity:.34}
.jaali-c.tr{right:0;top:0;-webkit-mask-image:radial-gradient(circle at 100% 0,#000 0%,transparent 62%);mask-image:radial-gradient(circle at 100% 0,#000 0%,transparent 62%);transform-origin:100% 0}
.jaali-c.bl{left:0;bottom:0;-webkit-mask-image:radial-gradient(circle at 0 100%,#000 0%,transparent 62%);mask-image:radial-gradient(circle at 0 100%,#000 0%,transparent 62%);transform-origin:0 100%}
.is-live .inlay{transition:transform 2.2s var(--ease) .4s,opacity 1.5s ease .4s}
.is-live .jaali-c{transition:transform 2.2s var(--ease) .4s,opacity 1.5s ease .4s}
.is-live .scene:not(.on) .inlay,.is-live:not(.ready) .inlay{transform:scale(.4) rotate(-24deg);opacity:0}
.is-live .scene:not(.on) .jaali-c,.is-live:not(.ready) .jaali-c{transform:scale(.6);opacity:0}
.skin-serif .inlay,.skin-serif .jaali-c{display:none}

/* ---------- Spatial objects: app components held in the scene ---------- */
.obj{display:none}
.obj.card-obj{display:none!important}
.skin-space .obj{display:block;position:absolute;z-index:3;right:clamp(24px,7vw,120px);top:50%;width:min(380px,32vw);transform:translateY(-50%) perspective(1400px) rotateY(-16deg) rotateX(5deg)}
.card-ui{background:var(--surface);color:var(--ink);border-radius:24px;padding:24px;display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:20px;box-shadow:0 50px 90px -34px var(--shadow),0 10px 24px -14px var(--shadow)}
.ui-label{font-size:13px;font-weight:500;color:var(--muted)}
.ui-fig{font-family:var(--f-d);font-size:40px;line-height:44px;font-weight:500;letter-spacing:-.04em}
.ui-bar{display:flex;gap:3px;height:8px}
.ui-bar .seg{background:var(--accent)}
.ui-row{display:flex;justify-content:space-between;gap:12px;padding-block:9px;border-top:1px solid var(--hairline);font-weight:500}
.ui-pill{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;font-weight:600;font-size:14px}
.ui-pill.solid{background:var(--accent);color:var(--on-accent)}
.ui-pill.soft{background:var(--accent-soft);color:var(--ink)}
.ui-q{font-size:17px;line-height:24px;font-weight:500;letter-spacing:-.01em}
.ui-stack{display:grid;gap:10px}
.is-live .ui-stack>*{grid-area:1 / 1}
.is-live .skin-space .obj,.is-live.skin-space .obj{transition:transform 1.1s var(--ease),opacity .8s ease}
.is-live.skin-space .obj{transform:translateY(-50%) perspective(1400px) rotateY(calc(-26deg + var(--k)*3.5deg)) rotateX(calc(9deg - var(--k)*1.2deg)) translateZ(0)}
.is-live.skin-space .scene:not(.on) .obj{transform:translateY(-30%) perspective(1400px) rotateY(-58deg) rotateX(14deg) translateX(140px);opacity:0}
.is-live .ui-row{--a:clamp(0,calc(var(--k) - var(--i) + 1),1);--b:clamp(0,calc(var(--k) - var(--i)),1);opacity:calc(.36 + .64*(var(--a) - var(--b)));transition:opacity .6s ease}
.skin-space .has-obj .sc>*{max-width:calc(100% - min(440px,38vw))}
.skin-space .b-bar{display:none}

/* ---------- iPhone outline with a high-level mock of the app ---------- */
.phone{position:relative;width:296px;aspect-ratio:296/612;border-radius:50px;border:1.5px solid var(--gold);padding:9px;background:color-mix(in srgb,var(--surface) 22%,transparent)}
.is-live .phone{width:auto;height:min(612px,82vh)}
.ph-btn{position:absolute;width:3px;border-radius:2px;background:var(--gold)}
.ph-btn.a{right:-4px;top:26%;height:11%}
.ph-btn.b{left:-4px;top:20%;height:6%}
.ph-btn.c{left:-4px;top:29%;height:9%}
.scr{--pa:var(--d1);position:relative;height:100%;border-radius:41px;overflow:hidden;background:#fff;color:#111418;font-family:"Inter",system-ui,sans-serif;font-size:11px;line-height:15px;letter-spacing:0;text-align:left;display:flex;flex-direction:column}
.ph-isl{position:absolute;left:50%;top:9px;width:78px;height:22px;margin-left:-39px;border-radius:20px;background:#111418;z-index:2}
.ph-stat{display:flex;justify-content:space-between;padding:13px 24px 0;font-weight:600}
.ph-head{display:flex;align-items:center;gap:8px;padding:18px 16px 10px;font-size:17px;line-height:22px;font-weight:500;letter-spacing:-.02em}
.ph-head .sp{flex-grow:1}
.ph-av{width:28px;height:28px;border-radius:99px;display:grid;place-items:center;font-size:10px;font-weight:600;letter-spacing:0}
.ph-av.g{background:#f1f4f2}
.ph-av.s{background:var(--pa);color:#fff}
.ph-body{flex-grow:1;min-height:0;padding:0 16px;display:flex;flex-direction:column;gap:10px}
.ph-lab{display:flex;justify-content:space-between;color:#5b6470;font-weight:500}
.ph-lab b{color:var(--pa);font-weight:600}
.ph-fig{font-size:30px;line-height:34px;font-weight:400;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ph-fig small{font-size:11px;color:#c8372d;letter-spacing:0;margin-left:4px}
.ph-card{position:relative;overflow:hidden;flex:none;border-radius:16px;padding:14px;min-height:88px;color:#fff;background:linear-gradient(135deg,var(--d2),var(--d1) 45%,var(--d3));display:flex;flex-direction:column;gap:2px}
.ph-card .pm{position:absolute;right:-64px;top:-56px;width:210px;height:210px;background-size:contain;background-repeat:no-repeat;opacity:.5}
.ph-card b{position:relative;font-size:15px;line-height:20px;font-weight:600;letter-spacing:-.01em}
.ph-card span{position:relative;opacity:.86}
.ph-card .wmk{position:absolute;right:12px;top:10px;font-weight:700;letter-spacing:-.04em;opacity:1}
.ph-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid #eceef0;font-weight:500}
.ph-row>span:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:9px;background:var(--pa);margin-right:7px;vertical-align:1px}
.is-live .hl{--a:clamp(0,calc(var(--k) - var(--i) + 1),1);--b:clamp(0,calc(var(--k) - var(--i)),1);opacity:calc(.38 + .62*(var(--a) - var(--b)));transition:opacity .6s ease}
.ph-pill{align-self:flex-start;display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:99px;background:color-mix(in srgb,var(--pa) 12%,#fff);font-weight:600}
.ph-tabs{flex:none;display:flex;justify-content:space-around;padding:8px 8px 18px;border-top:1px solid #eceef0;color:#5b6470;font-size:10px;line-height:12px}
.ph-tabs span{display:flex;flex-direction:column;align-items:center;gap:3px}
.ph-tabs .on{color:#111418;font-weight:600}
.ph-tabs svg{width:18px;height:18px}
.ph-stack{display:grid;gap:10px}
.is-live .ph-stack>*{grid-area:1 / 1}
.ph-turn{display:flex;flex-direction:column;gap:8px}
.ph-me{align-self:flex-end;max-width:84%;padding:9px 12px;border-radius:16px 16px 4px 16px;background:var(--pa);color:#fff;font-size:12px;line-height:16px}
.ph-moi{align-self:flex-start;max-width:90%;padding:9px 12px;border-radius:16px 16px 16px 4px;background:#f5f7f6;font-size:12px;line-height:16px}
.ph-in{flex:none;margin-top:auto;margin-bottom:10px;height:36px;border-radius:99px;border:1px solid #eceef0;display:flex;align-items:center;padding:0 14px;color:#6b737d}
.ph-log{padding:7px 0;border-top:1px solid #eceef0;font-size:11.5px;line-height:15px}
.ph-ask{flex:none;margin-top:auto;margin-bottom:10px;padding:12px;border-radius:16px;background:#f5f7f6;display:flex;flex-direction:column;gap:10px;font-size:12px;line-height:16px;font-weight:500}
.ph-btns{display:flex;gap:6px}
.ph-btns span{flex:1;height:32px;border-radius:99px;display:grid;place-items:center;font-weight:600;font-size:11px}
.ph-btns .y{background:var(--pa);color:#fff}
.ph-btns .n{background:#fff}
.skin-space .obj.phone-obj,.skin-photo .obj.phone-obj{width:auto}
.skin-photo .obj{display:block;position:absolute;z-index:3;right:clamp(24px,7vw,120px);top:50%;transform:translateY(-50%) perspective(1400px) rotateY(-16deg) rotateX(5deg)}
/* V2's phone turns with each step, exactly as V3's does */
.is-live.skin-photo .obj{transition:transform 1.1s var(--ease),opacity .8s ease;transform:translateY(-50%) perspective(1400px) rotateY(calc(-26deg + var(--k)*3.5deg)) rotateX(calc(9deg - var(--k)*1.2deg)) translateZ(0)}
.is-live.skin-photo .scene:not(.on) .obj{transform:translateY(-30%) perspective(1400px) rotateY(-58deg) rotateX(14deg) translateX(140px);opacity:0}
.skin-photo .has-obj .sc>*{max-width:calc(100% - min(420px,36vw))}

/* ---------- Scene A · the circle adds up ---------- */
.a-head{display:flex;flex-direction:column;gap:28px;max-width:1000px}
.rows{display:flex;flex-direction:column}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-block:18px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font-family:var(--f-d);font-size:clamp(28px,4.4vw,64px);font-weight:500;letter-spacing:var(--ls);line-height:1.05}
.total{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.total-n{font-family:var(--f-d);font-weight:500;font-size:clamp(88px,17vw,260px);line-height:.9;letter-spacing:-.06em}
/* ---------- Scene B · the whole picture ---------- */
.b-item{display:flex;flex-direction:column;gap:18px}
.b-word{font-family:var(--f-d);font-weight:500;font-size:clamp(56px,10.5vw,164px);line-height:.92;letter-spacing:-.055em}
.skin-space .b-word,.skin-photo .b-word{font-size:clamp(52px,8vw,124px)}
.b-amt{font-size:clamp(18px,1.6vw,22px);font-weight:500;color:var(--gold-hi)}
.b-line{font-family:var(--f-d);font-size:clamp(22px,2.6vw,36px);line-height:1.18;letter-spacing:calc(var(--ls)*.6);max-width:22em}
.bar{display:flex;gap:4px;height:10px}
.seg{border-radius:999px;background:var(--gold-hi)}
.bar-l{display:flex;gap:4px;margin-top:12px;font-size:13px;color:var(--on-deep-muted)}
.bar-l span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* ---------- Scene C · Moi answers ---------- */
.c-q{font-size:clamp(18px,1.8vw,24px);color:var(--muted)}
.c-a{font-family:var(--f-d);font-weight:500;font-size:clamp(34px,5.6vw,84px);line-height:1;letter-spacing:var(--ls);max-width:15em;margin-top:18px}
.skin-space .c-a,.skin-photo .c-a{font-size:clamp(32px,4.4vw,64px)}
.c-why{margin-top:22px}
/* ---------- Scene D · one night ---------- */
/* the clock takes exactly the width of its digits; the log gets everything that is left */
.d-grid{flex-grow:1;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.d-time{font-family:var(--f-d);font-weight:400;font-size:clamp(64px,9.5vw,152px);line-height:.9;letter-spacing:-.06em;white-space:nowrap}
/* with the app card on the right there is one narrower column: clock on top, log beneath */
.skin-space .d-grid,.skin-photo .d-grid{grid-template-columns:minmax(0,1fr);gap:20px;align-content:center}
.skin-space .d-time,.skin-photo .d-time{font-size:clamp(56px,6vw,96px)}
.d-times{display:grid;gap:8px}
.is-live .d-times>*{grid-area:1 / 1}
.d-log li{padding-block:16px;border-top:1px solid rgba(255,255,255,.16);font-size:clamp(18px,1.9vw,27px);letter-spacing:-.02em;line-height:1.25}
.skin-space .d-log li,.skin-photo .d-log li{font-size:clamp(16px,1.4vw,19px);padding-block:10px}
.d-yes{border-top-color:var(--gold)!important;color:var(--gold-hi)}
.dawn{position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 70% at 50% 118%,rgba(240,217,160,.55) 0%,rgba(240,217,160,.16) 45%,rgba(240,217,160,0) 72%);opacity:calc(var(--k)/3);transition:opacity 1.4s ease}
/* ---------- Scene E · buy, or give ---------- */
.e-big{font-family:var(--f-d);font-weight:500;font-size:clamp(56px,10vw,156px);line-height:.94;letter-spacing:-.055em;max-width:9em}
/* ---------- Scene F · the gift grows up ---------- */
.pan-box{flex-grow:1;display:flex;align-items:center}
.pan{--colw:clamp(300px,42vw,620px);display:flex;flex-wrap:wrap;border-top:1px solid var(--gold);width:100%}
.pcol{position:relative;flex:0 0 auto;width:var(--colw);padding:36px 40px 24px 0;display:flex;flex-direction:column;gap:14px}
.pcol::before{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:999px;background:var(--gold)}
.p-age{font-family:var(--f-d);font-weight:500;font-size:clamp(110px,17vw,270px);line-height:.86;letter-spacing:-.06em;color:var(--accent)}
.p-line{font-family:var(--f-d);font-size:clamp(20px,2.2vw,30px);line-height:1.2;letter-spacing:calc(var(--ls)*.6);max-width:14em}
.is-live .pan{flex-wrap:nowrap;width:max-content;transform:translateX(calc(var(--k)*-1*var(--colw)));transition:transform 1.05s var(--swift)}
.is-live .pcol{--a:clamp(0,calc(var(--k) - var(--i) + 1),1);--b:clamp(0,calc(var(--k) - var(--i)),1);opacity:calc(.28 + .72*(var(--a) - var(--b)));transition:opacity .8s ease}
/* ---------- Scene F (V3) · eighteen years in one line: one scroll per age ---------- */
.yr{flex-grow:1;display:flex;flex-direction:column;justify-content:center;gap:24px}
.yr-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.yr-age{font-family:var(--f-d);font-size:clamp(110px,17vw,250px);line-height:.86;font-weight:500;letter-spacing:-.06em;color:var(--accent);font-variant-numeric:tabular-nums;--n:18;counter-reset:n var(--n)}
.yr-age::after{content:counter(n)}
.yr-line{position:relative;height:46px}
.yr-line::before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold)}
.yr-tk{position:absolute;bottom:0;width:2px;height:30px;margin-left:-1px;background:var(--gold)}
.yr-ms{position:relative;height:96px}
.yr-m{position:absolute;top:0;width:min(180px,17vw);font-size:15px;line-height:20px;color:var(--muted)}
.yr-m b{display:block;color:var(--ink);font-weight:600;font-size:17px;margin-bottom:2px}
.is-live .yr-age{transition:--n 1.2s cubic-bezier(.3,0,.2,1)}
.is-live .k0 .yr-age{--n:0}.is-live .k1 .yr-age{--n:5}.is-live .k2 .yr-age{--n:10}.is-live .k3 .yr-age{--n:15}.is-live .k4 .yr-age{--n:18}
.is-live .yr-line{transition:clip-path 1.2s cubic-bezier(.3,0,.2,1)}
.is-live .k0 .yr-line{clip-path:inset(-40px 99.4% -4px 0)}
.is-live .k1 .yr-line{clip-path:inset(-40px 72% -4px 0)}
.is-live .k2 .yr-line{clip-path:inset(-40px 44.2% -4px 0)}
.is-live .k3 .yr-line{clip-path:inset(-40px 16.4% -4px 0)}
.is-live .k4 .yr-line{clip-path:inset(-40px -1% -4px 0)}

/* ---------- V3 · what Moi finds: figures first, a running ledger, the family as one household ---------- */
.rows5 .row{font-size:clamp(24px,3.4vw,50px);padding-block:13px}
.i-cat{font-size:clamp(16px,1.5vw,20px);font-weight:500;color:var(--on-deep-muted)}
.i-fig{font-family:var(--f-d);font-weight:500;font-size:clamp(56px,9vw,132px);line-height:.92;letter-spacing:-.055em;color:var(--gold-hi)}
.i-fig small{font-size:.26em;letter-spacing:-.02em;color:var(--on-deep);margin-left:.3em;white-space:nowrap}
.l-grid{flex-grow:1;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.l-tot{display:grid;gap:8px}
.is-live .l-tot>*{grid-area:1 / 1}
.l-fig{font-family:var(--f-d);font-weight:500;font-size:clamp(64px,10vw,150px);line-height:.9;letter-spacing:-.06em;white-space:nowrap;color:var(--accent)}
.l-list li{display:flex;justify-content:space-between;gap:24px;padding-block:16px;border-top:1px solid var(--hairline);font-size:clamp(17px,1.7vw,22px);letter-spacing:-.015em}
.l-list li:last-child{border-bottom:1px solid var(--hairline)}
.fam-grid{flex-grow:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.fam-t{font-family:var(--f-d);font-weight:500;font-size:clamp(26px,3.2vw,46px);line-height:1.08;letter-spacing:var(--ls)}
.fam{position:relative;width:100%;max-width:540px;aspect-ratio:1.15;justify-self:center}
.fam svg{position:absolute;inset:0;width:100%;height:100%}
.fam line{stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.55}
.fam-n{position:absolute;transform:translate(-50%,-50%);padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.06);font-weight:600;font-size:15px;white-space:nowrap}
.fam-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:132px;height:132px;border-radius:999px;border:1px solid var(--gold);display:grid;place-items:center;text-align:center;font-size:13px;color:var(--on-deep-muted)}
.fam-c b{display:block;font-family:var(--f-d);font-size:26px;font-weight:500;letter-spacing:-.04em;color:var(--on-deep)}
.is-live .fam-n{opacity:.45;transition:opacity .6s ease,background-color .6s ease,color .6s ease,transform .6s var(--ease)}
.is-live .k0 .fam-papa,.is-live .k1 .fam-amma,.is-live .k2 .fam-papa,.is-live .k2 .fam-amma,.is-live .k3 .fam-papa{opacity:1;background:var(--gold-hi);color:#2a1f08;border-color:var(--gold-hi);transform:translate(-50%,-50%) scale(1.12)}

/* ---------- V4 · the lamp: a small light that travels with the reader, plus section rules and a kolam ---------- */
.lg-x{display:none}
.is-live .lg-x{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:36;pointer-events:none;transition:transform 1.5s cubic-bezier(.45,0,.25,1)}
.is-live .lg-y{width:100%;height:100%;transition:transform 1.5s cubic-bezier(.3,1.55,.5,1)}
/* the diya (from component 54): a white-hot core through pale gold and amber to an ember rim, with a layered warm halo */
.lg{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:99px;background:radial-gradient(circle,#fff 0%,#FFF6DE 26%,rgba(255,222,160,.85) 46%,rgba(250,190,110,.35) 72%,rgba(245,170,90,0) 100%);box-shadow:0 0 12px 4px rgba(255,232,190,.5),0 0 40px 14px rgba(250,200,130,.2),0 0 120px 50px rgba(245,180,110,.09);animation:lg-bob 3.4s ease-in-out infinite}
.lg::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px rgba(255,255,255,.85)}
.t2 .lg::after,.t3 .lg::after{display:none}
/* invisible markers in the page: the lamp flies to whichever one belongs to the current step */
.la{display:inline-block;width:0;height:1em;vertical-align:middle}
@keyframes lg-bob{0%,100%{transform:translate(0,0) scale(1)}22%{transform:translate(4px,-5px) scale(1.1)}48%{transform:translate(-2px,-8px) scale(.94)}74%{transform:translate(-5px,-2px) scale(1.06)}}
.is-live .lg-x.t2,.is-live .lg-x.t2 .lg-y{transition-duration:2.15s}
.t2 .lg{left:-3px;top:-3px;width:7px;height:7px;opacity:.6;box-shadow:0 0 10px 3px rgba(240,217,160,.6);animation-duration:2.6s}
.is-live .lg-x.t3,.is-live .lg-x.t3 .lg-y{transition-duration:2.8s}
.t3 .lg{left:-2px;top:-2px;width:4px;height:4px;opacity:.4;box-shadow:0 0 8px 2px rgba(240,217,160,.5);animation-duration:2.1s}
.ros{color:var(--gold);flex:none}
.rule{display:flex;align-items:center;gap:14px;color:var(--gold);margin-bottom:22px}
.rule::after{content:"";flex:1;height:1px;background:currentColor;transform-origin:left}
.is-live .rule::after{transition:transform 1.4s var(--ease) .35s}
.is-live .scene:not(.on) .rule::after{transform:scaleX(0)}
/* the same hairline, opened a different way in each section */
.rule svg{flex:none}
.rule.end{flex-direction:row-reverse}
.rule.end::after{transform-origin:right}
.rule.dots i{flex:none;width:4px;height:4px;border-radius:9px;background:currentColor}
.rule.dots{gap:7px}
.rule.dots::after{margin-left:7px}
.rule.twin{display:block;height:5px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.rule.twin::after{display:none}
.is-live .rule.twin{transform-origin:left;transition:transform 1.4s var(--ease) .35s}
.is-live .scene:not(.on) .rule.twin{transform:scaleX(0)}
.life{position:relative;height:min(46vh,440px);aspect-ratio:1000 / 400;max-width:100%;align-self:center}
.life svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* the line is drawn leg by leg: nothing shows until the lamp has travelled it */
.life .seg{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0}
.is-live .life .seg{--a:clamp(0,calc(var(--k) - var(--i) + 1),1);stroke-dashoffset:calc(1 - var(--a));transition:stroke-dashoffset 1.3s var(--swift)}
/* no visible points on the line: these are only the places the lamp rests */
.life-d{position:absolute;width:9px;height:9px;margin:-4.5px;visibility:hidden}
.life-e{position:absolute;width:min(180px,16vw);font-size:14px;line-height:19px;color:var(--on-deep-muted);transform:translate(var(--tx,-50%),var(--ty,0%))}
.is-live .life-e{transform:translate(var(--tx,-50%),calc(var(--ty,0%) + (1 - var(--a))*16px))}
.life-e b{display:block;font-family:var(--f-d);font-size:clamp(17px,1.7vw,22px);line-height:1.15;font-weight:500;letter-spacing:-.02em;color:var(--on-deep);margin-bottom:4px}
@media (max-width:1100px){.life{height:auto;width:100%}}
.way{display:flex;align-items:center;gap:7px;margin-bottom:22px;color:var(--gold)}
.way::after{content:"";flex:1;height:1px;margin-left:8px;background:currentColor;transform-origin:left}
.is-live .way::after{transition:transform 1.4s var(--ease) .35s}
.is-live .scene:not(.on) .way::after{transform:scaleX(0)}
.wb{flex:none;width:7px;height:7px;border-radius:9px;border:1px solid currentColor}
.wb.on{background:currentColor}
.wb.now{background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 24%,transparent)}
.kolam-s{position:absolute;z-index:1;right:clamp(16px,6vw,96px);top:50%;width:min(40vw,460px);aspect-ratio:1;transform:translateY(-50%);color:var(--gold);pointer-events:none}
.kolam-s path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:0}
.kolam-s circle{fill:currentColor}
.is-live .kolam-s path{transition:stroke-dashoffset 3.2s cubic-bezier(.5,0,.2,1)}
.is-live .kolam-s circle{transition:opacity 1s ease 1.6s}
.is-live:not(.ready) .kolam-s path{stroke-dashoffset:1}
.is-live:not(.ready) .kolam-s circle{opacity:0}
.is-live .kolam-s{transition:opacity .8s ease}
.is-live .k1 .kolam-s,.is-live .k2 .kolam-s{opacity:.16}
.kolam-s.sm{position:absolute;right:28px;top:50%;width:min(34%,300px);opacity:.9}

/* ---------- Last scene: questions, close, footer (scrolls normally) ---------- */
.sect{padding-block:clamp(120px,11vw,168px) 0}
.qa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:10px;padding-block:28px;border-top:1px solid var(--hairline)}
.qa dt{grid-column:1 / span 5;font-weight:600;font-size:18px;letter-spacing:-.015em}
.qa dd{grid-column:7 / span 6;color:var(--muted);font-size:17px}
.close{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;min-height:460px;padding:clamp(40px,7vw,104px);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:32px}
.foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;padding-block:64px 56px;border-top:1px solid var(--hairline)}
.foot-brand{grid-column:1 / span 4;display:flex;flex-direction:column;gap:12px}
.foot-links{grid-column:6 / span 3;display:flex;flex-direction:column;gap:10px}
.foot-links a{text-decoration:none;color:var(--muted);font-size:15px}
.foot-legal{grid-column:9 / span 4;display:flex;flex-direction:column;gap:12px}

/* ---------- Opening studies ---------- */
.o2-box{position:relative;width:min(640px,86vw);aspect-ratio:1;margin:auto;display:grid;place-items:center}
.o2-box svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.o2-box circle{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:1885px;stroke-dashoffset:0}
.is-live .o2-box circle{transition:stroke-dashoffset 2.1s cubic-bezier(.6,0,.2,1) .25s}
.is-live:not(.ready) .o2-box circle{stroke-dashoffset:1885px}
.o2-n{position:absolute;font-family:var(--f-d);font-weight:500;font-size:clamp(18px,2vw,26px);letter-spacing:-.02em;margin:-20px 0 0 -48px;width:96px;text-align:center;background:var(--bg)}
.o3-layer{position:relative;min-height:420px;display:grid;place-items:center;background:var(--bg);color:var(--ink);overflow:hidden}
.is-live .o3-layer{position:absolute;inset:0;z-index:4;transition:opacity .4s linear .15s}
.is-live .o3-t{transition:transform 1.05s cubic-bezier(.7,0,.84,0),opacity .3s linear .15s}
.is-live .k1 .o3-layer{opacity:0;pointer-events:none;transition-delay:.8s}
.is-live .k1 .o3-t{transform:scale(26);opacity:0;transition-delay:0s,.72s}
.o4-ph{position:absolute;inset:0 0 150px 0;clip-path:inset(0 0 0 0 round 0px)}
.is-live .o4-ph{inset:0;transition:clip-path 1.1s var(--swift)}
.is-live .k1 .o4-ph{clip-path:inset(14% 27% 30% 27% round 28px)}
.o4-cap{position:absolute;left:0;right:0;bottom:56px;text-align:center;z-index:2}
.is-live .o4-cap{bottom:9%}
.door{position:relative;display:flex;align-items:center;justify-content:flex-start;padding:48px;isolation:isolate;overflow:hidden;color:var(--ink)}
.is-live .door{position:absolute;top:0;bottom:0;width:50%;padding:0;z-index:4;transition:transform 1.15s var(--swift)}
.is-live .door.l{left:0;justify-content:flex-end;padding-right:.32em}
.is-live .door.r{right:0;padding-left:.32em}
.is-live .k1 .door.l{transform:translateX(-101%)}
.is-live .k1 .door.r{transform:translateX(101%)}
.door>.mesh-layer{top:-12%;bottom:-12%;right:auto;width:224%}
.door.l>.mesh-layer{left:-12%}
.door.r>.mesh-layer{left:-112%}
.o6-grid{flex-grow:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.slot{height:480px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.slot li{display:flex;justify-content:space-between;gap:20px;padding-block:14px;border-top:1px solid var(--hairline);font-size:clamp(17px,1.7vw,22px);letter-spacing:-.015em}
.is-live .slot-in{transform:translateY(200px)}
.is-live.ready .slot-in{animation:slot 2.6s cubic-bezier(.4,0,.2,1) .2s both}
.is-live.skip .slot-in{animation-duration:.3s;animation-delay:0s}
@keyframes slot{from{transform:translateY(200px)}to{transform:translateY(calc(400px - 100%))}}
.is-live .lw{transition:opacity .55s ease;transition-delay:calc(var(--i)*.16s + .2s)}
.is-live:not(.ready) .lw{opacity:.14}
.o8-day{position:absolute;inset:0;background:linear-gradient(180deg,#FBF7EE,#F3E4BC);opacity:0}
.o8-t{position:relative;color:#fff}
.is-live .o8-day{transition:opacity 2.6s linear .6s}
.is-live .o8-t{transition:color 2s linear .9s}
.is-live.ready .o8-day{opacity:1}
.is-live.ready .o8-t{color:#15120a}
.o9-q{transform-origin:0 0}
.is-live .o9-q{transition:transform 1s var(--swift)}
.is-live .k1 .o9-q,.is-live .k2 .o9-q{transform:scale(.3)}
.is-live .o9-rest{margin-top:calc(clamp(64px,12vw,190px)*-.62)}
.o10-row{display:flex;flex-wrap:wrap;gap:8px 48px;justify-content:center}
.is-live .o10-n{transition:transform 1.4s var(--ease),opacity 1.1s ease;transition-delay:var(--dl,0s)}
.is-live:not(.ready) .o10-n{opacity:0;transform:translate(var(--x),var(--y)) scale(var(--s))}
.gone{min-height:600px;display:grid;place-items:center;text-align:center;padding:48px}

@media (max-width:900px){
  .d-grid,.o6-grid,.l-grid,.fam-grid{grid-template-columns:minmax(0,1fr)}
  .fam{max-width:340px}
  .d-grid{gap:20px;align-content:center}
  .d-time{font-size:clamp(56px,14vw,96px)}
  .qa dt,.qa dd,.foot-brand,.foot-links,.foot-legal{grid-column:1 / -1}
  .theme-btn span:last-child{display:none}
  .skin-space .obj,.skin-photo .obj{display:none}
.obj.card-obj{display:none!important}
  .skin-photo .has-obj .sc>*{max-width:100%}
  .skin-space .has-obj .sc>*{max-width:100%}
  .skin-space .b-bar{display:block}
}
/* ---------- Phones: the same deck, one swipe per step; a compact card stands in for the phone mock-up ---------- */
@media (max-width:700px){
  .wrap{padding-inline:20px}
  .s-nav .wrap{padding-inline:12px}
  .s-nav .brand,.nav-end{height:44px;padding:0 14px}
  .nav-end{padding:0 4px;gap:2px}
  .nav-cta{display:none}
  .prog{right:5px}
  .sc{padding:88px 20px 28px;gap:20px}
  .h-xl{font-size:44px}
  .h-l{font-size:31px}
  .h-m{font-size:22px}
  .sub{font-size:17px}
  .total-n{font-size:66px}
  .row{font-size:26px;padding-block:14px}
  .a-head{gap:20px}
  .b-word,.skin-space .b-word,.skin-photo .b-word{font-size:50px}
  .b-line{font-size:20px}
  .b-item{gap:12px}
  .c-a,.skin-space .c-a,.skin-photo .c-a{font-size:29px;margin-top:12px}
  .d-time,.skin-space .d-time,.skin-photo .d-time{font-size:54px}
  .d-log li,.skin-space .d-log li,.skin-photo .d-log li{font-size:15px;padding-block:8px}
  .d-grid{gap:14px!important}
  .e-big{font-size:50px}
  .kolam-s{width:64vw;right:-18vw;top:74%;opacity:.5}
  .rule,.way{margin-bottom:14px}
  .life{margin-bottom:96px}
  .life-e{left:50%!important;top:100%!important;margin-top:16px;width:90%;--tx:-50%!important;--ty:0%!important;text-align:center!important}
  .is-live .life-e{opacity:calc(var(--a) - var(--b))}
  .i-fig{font-size:54px}
  .l-fig{font-size:58px}
  .l-grid,.fam-grid{gap:18px!important}
  .l-list li{font-size:15px;padding-block:9px}
  .fam-t{font-size:22px}
  .fam{max-width:250px}
  .fam-n{font-size:12px;padding:6px 11px}
  .fam-c{width:84px;height:84px}
  .fam-c b{font-size:17px}
  .rows5 .row{font-size:22px;padding-block:10px}
  .p-age,.yr-age{font-size:104px}
  .pan{--colw:82vw}
  .has-obj .sc{padding-bottom:196px}
  .has-obj .sub{display:none}
  .b-bar{display:none!important}
  .skin-space .obj.card-obj,.skin-photo .obj.card-obj{display:block!important;position:absolute;z-index:3;left:16px;right:16px;top:auto;bottom:20px;width:auto;transform:none!important}
  .is-live.skin-space .scene:not(.on) .obj.card-obj,.is-live.skin-photo .scene:not(.on) .obj.card-obj{opacity:0}
  .card-ui{padding:16px 18px;gap:8px;border-radius:20px;font-size:14px}
  .ui-fig{font-size:30px;line-height:34px}
  .ui-q{font-size:15px;line-height:21px}
  .ui-line{display:flex;justify-content:space-between;gap:12px;font-weight:500}
  .yr{gap:16px}
  .yr-top{flex-direction:column;align-items:flex-start;gap:10px}
  .yr-top .h-m{text-align:left!important;max-width:none!important;font-size:20px}
  .yr-ms{display:grid;height:auto;min-height:66px;margin-top:12px}
  .yr-m{position:static;width:auto;left:0!important;grid-area:1 / 1}
  .is-live .yr-m{opacity:calc(var(--a) - var(--b))}
  .sect{padding-top:104px}
  .close{padding:32px 24px;min-height:320px;gap:22px}
  .inlay{opacity:.34}
}
@media (prefers-reduced-motion:reduce){.site *{animation:none!important}.is-live *{transition-duration:.01s!important;transition-delay:0s!important}}