/* kit.css: the Studio homepage comp.
   Part A is the site (paper, Playfair, Geist, mono; tokens --p-*).
   Part B is the Foxora Studio UI library every scene builds from (Inter, taupe; tokens --s-*).
   Part C is the line-icon set, drawn as CSS masks so a scene only writes <i class="s-ic s-ic-inbox"></i>.
   Breakpoints: phone < 700px, tablet 700–999px, desktop >= 1000px. Type floor 12px everywhere. */

/* ============================== A. THE SITE ============================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--p-paper);color:var(--p-ink);font:400 16px/1.6 var(--p-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--p-forest);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--p-forest);color:var(--p-paper);padding:12px 16px;border-radius:8px;font-size:14px}
.skip:focus{top:12px}

.wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 40px}
.wrap-wide{width:100%;max-width:1440px;margin:0 auto;padding:0 40px}
@media (max-width:699px){.wrap,.wrap-wide{padding:0 20px}}

/* type */
.label{font:400 12px/1.5 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-faint);text-wrap:balance}
.label-copper{color:var(--p-copper-ink)}
.label .lt{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-right:8px;padding:0 5px;border:1px solid currentColor;border-radius:5px;font-weight:500;letter-spacing:0;vertical-align:1px;line-height:1}
.h1,.h2,.h2c,.h3{font-family:var(--p-serif);font-weight:400;color:var(--p-ink);text-wrap:balance}
.h1{font-size:clamp(44px,5.4vw,86px);line-height:1.02;letter-spacing:-.045em}
.h2{font-size:clamp(34px,3.4vw,52px);line-height:1.06;letter-spacing:-.035em}
.h2c{font-size:clamp(36px,3.9vw,60px);line-height:1.05;letter-spacing:-.035em}
.h3{font-size:clamp(28px,2.4vw,36px);line-height:1.1;letter-spacing:-.03em}
.h1 .l,.h2 .l,.h2c .l{display:block}
.h1 em,.h2 em,.h2c em,.h3 em{font-style:italic;color:var(--p-copper);letter-spacing:-.03em}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--p-sub);max-width:58ch;text-wrap:pretty}
.body{font-size:17px;line-height:1.6;color:var(--p-sub);text-wrap:pretty}
.small{font-size:14px;line-height:1.5;color:var(--p-sub)}

/* buttons and links */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:6px;border:1px solid transparent;font:600 15px/1 var(--p-sans);white-space:nowrap;cursor:pointer;transition:background .2s var(--p-ease),border-color .2s var(--p-ease),color .2s var(--p-ease)}
.btn-primary{background:var(--p-forest);color:var(--p-paper)}
.btn-primary:hover{background:var(--p-forest-hover)}
.btn-line{background:var(--p-white);color:var(--p-ink);border-color:rgba(35,41,35,.3);box-shadow:0 1px 0 rgba(35,41,35,.06)}
.btn-line:hover{border-color:var(--p-ink);background:#fff}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn .arr{font-weight:400;font-size:1.05em;line-height:1}
.link{display:inline-flex;align-items:center;gap:6px;color:var(--p-ink);font-weight:600;border-bottom:1px solid rgba(35,41,35,.3);padding-bottom:1px;transition:border-color .2s}
.link:hover{border-bottom-color:var(--p-ink)}
.link-quiet{font-weight:400;color:var(--p-sub);border-bottom-color:rgba(93,97,87,.35)}
@media (max-width:699px){.btn{height:48px}.btn-sm{height:44px}.link{min-height:44px;border-bottom:0;text-decoration:underline;text-decoration-color:rgba(35,41,35,.3);text-underline-offset:4px}}

/* ticks: "Free plan · 200 credits a month · No card required" */
.ticks{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--p-sub)}
.ticks li{display:inline-flex;align-items:center;gap:7px}
.ticks li::before{content:"";width:15px;height:15px;flex:none;background:var(--p-forest);-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;height:64px;background:rgba(246,243,235,.92);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .25s}
.site-head.is-scrolled{border-bottom-color:var(--p-line)}
.site-head .wrap{display:flex;align-items:center;gap:36px;height:64px;max-width:1360px}
.brand{display:inline-flex;align-items:center;flex:none;min-height:44px}
.brand img{width:98px;height:34px}
.nav{display:flex;align-items:center;gap:28px;font-size:14px}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;color:var(--p-ink);white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s var(--p-ease)}
.nav a:hover::after,.nav a[aria-current="page"]::after,body[data-nav="studio"] .nav a[data-nav-item="studio"]::after,body[data-nav="runtime"] .nav a[data-nav-item="runtime"]::after,body[data-nav="fennec"] .nav a[data-nav-item="fennec"]::after,body[data-nav="grip"] .nav a[data-nav-item="grip"]::after,body[data-nav="pricing"] .nav a[data-nav-item="pricing"]::after,body[data-nav="changelog"] .nav a[data-nav-item="changelog"]::after,body[data-nav="about"] .nav a[data-nav-item="about"]::after{transform:none}
.head-right{display:flex;align-items:center;gap:22px;margin-left:auto}
.signin{display:inline-flex;align-items:center;min-height:44px;font-size:14px;white-space:nowrap}
.signin:hover{text-decoration:underline;text-underline-offset:4px}
.menu-btn{display:none;width:44px;height:44px;margin-right:-10px;border:0;background:none;border-radius:99px;cursor:pointer;place-content:center;gap:6px;padding:0}
.menu-btn i{display:block;width:22px;height:1.5px;background:var(--p-ink);border-radius:2px;transition:transform .3s var(--p-ease)}
.menu-btn[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.menu-panel{position:fixed;left:0;right:0;top:64px;z-index:49;max-height:calc(100vh - 64px);overflow:auto;background:var(--p-paper);border-bottom:1px solid var(--p-line);padding:8px 20px 24px;box-shadow:0 24px 40px -30px rgba(32,58,49,.35)}
.menu-panel[hidden]{display:none}
.menu-panel a.mi{display:flex;flex-direction:column;justify-content:center;min-height:60px;padding:8px 0;border-bottom:1px solid var(--p-line)}
.menu-panel .mi b{font:600 16px/1.3 var(--p-sans)}
.menu-panel .mi span{font-size:14px;line-height:1.4;color:var(--p-sub)}
.menu-panel .menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.menu-panel .menu-actions .btn{width:100%}
@media (max-width:1079px){.nav{gap:20px}.site-head .wrap{gap:24px}}
@media (max-width:959px){.nav,.signin{display:none}.menu-btn{display:inline-grid}.head-right{gap:6px}}
/* a 320 window with a classic 15px scrollbar lays out at 305: the logo, the button and the menu need 316 with a 24px
   gap, so the gap narrows (head-right's auto margin still pushes the pair to the right edge wherever there is room) */
@media (max-width:339px){.site-head .wrap{gap:12px}}
@media (min-width:960px){.menu-panel{display:none!important}}

/* ---------- hero ---------- */
.hero{padding:112px 0 0}
.chip-new{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 16px 0 6px;border:1px solid var(--p-line);border-radius:6px;background:rgba(255,252,246,.7);font-size:14px;color:var(--p-ink);transition:border-color .2s}
.chip-new:hover{border-color:rgba(35,41,35,.4)}
.chip-new b{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:4px;background:var(--p-forest);color:var(--p-paper);font-weight:600;font-size:13px}
.chip-new .arr{color:var(--p-sub)}
.hero .eyebrow{margin-top:32px}
.hero .h1{margin-top:18px}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;margin-top:36px}
.start{display:flex;flex-direction:column;gap:16px;min-width:0}
.start-btns{display:flex;flex-wrap:wrap;gap:12px}
.proof-line{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--p-sub)}
.proof-line::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--p-copper);flex:none}
.hero-stage{margin-top:72px}
@media (max-width:1099px){.hero-row{grid-template-columns:1fr;gap:32px}}
@media (max-width:699px){
  .hero{padding-top:48px}
  .chip-new{min-height:44px;font-size:13px;line-height:1.35;padding:6px 14px 6px 6px;border-radius:6px;flex-wrap:nowrap}
  .hero .eyebrow{margin-top:24px}
  .hero .h1{font-size:clamp(40px,11.4vw,48px);letter-spacing:-.04em}
  .hero-row{margin-top:24px}
  .start-btns{flex-direction:column}
  .start-btns .btn{width:100%}
  .hero-stage{margin-top:40px}
}

/* ---------- the wash: every light tint runs edge to edge ----------
   One ground for every light-tinted block: the stage a live scene sits in, the Why panel (.why-panel, also on
   /organisations and /research), and any other panel that opts in with class="wash" and a data-tint.
   The box keeps its width, centring and padding (a stage: max 1360, padding 56/48); only its colour runs edge to edge.
   ::before is the wash. It spans the window (inset-inline:-100vmax, cut at the window's inner edges by
   main{overflow-x:clip}, so it never scrolls sideways and never depends on 100vw or the scrollbar), sits under
   every line of text (z-index:-1, and a washed box makes no stacking context), and carries the faint blueprint grid.
   One eased mask lifts it out of the paper above the box and settles it back into the paper below:
   --wash-up/--wash-down reach past the box, --wash-in/--wash-out are the lengths of the two fades.
   --wash-a is the tint at the box's top edge, --wash-b at its bottom edge; every point is --wash-a or lighter.
   Layout is untouched: the space above and below each box is what it was.
   A box that opts in keeps no ground of its own: no background, no radius, no ::before of its own (the wash is its
   ::before), no overflow:hidden (it would cut the wash back to the box) and no stacking context (isolation, opacity,
   transform, z-index), or the wash's fades would paint over the text just above and below the box.
   A dark band (.deep) is not a wash: forest cannot melt into paper without a muddy middle, so it stays a full-bleed
   band with straight edges. */
main{overflow-x:clip}
/* registration crosses mark a sheet's corners; a stage has no corners now, so crosses set beside one go */
.bp-cross:has(~ .stage){display:none}
.stage,.why-panel,.wash{--wash-up:96px;--wash-down:120px;--wash-in:240px;--wash-out:280px;position:relative}
.stage{max-width:1360px;margin:0 auto;padding:56px 48px}
.stage::before,.why-panel::before,.wash::before{content:"";position:absolute;top:calc(-1 * var(--wash-up));bottom:calc(-1 * var(--wash-down));left:-100vmax;right:-100vmax;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(35,41,35,.05) 1px,transparent 1px) 0 calc(var(--wash-up) - 1px)/40px 40px,linear-gradient(90deg,rgba(35,41,35,.05) 1px,transparent 1px) calc(100vmax - 1px) 0/40px 40px,linear-gradient(180deg,var(--wash-a,var(--p-sand)) var(--wash-up),var(--wash-b,var(--p-paper)) calc(100% - var(--wash-down)));
  --m-in:rgb(0 0 0/0) 0,rgb(0 0 0/.043) calc(var(--wash-in)*.125),rgb(0 0 0/.156) calc(var(--wash-in)*.25),rgb(0 0 0/.316) calc(var(--wash-in)*.375),rgb(0 0 0/.5) calc(var(--wash-in)*.5),rgb(0 0 0/.684) calc(var(--wash-in)*.625),rgb(0 0 0/.844) calc(var(--wash-in)*.75),rgb(0 0 0/.957) calc(var(--wash-in)*.875),#000 var(--wash-in);
  --m-out:#000 calc(100% - var(--wash-out)),rgb(0 0 0/.957) calc(100% - var(--wash-out)*.875),rgb(0 0 0/.844) calc(100% - var(--wash-out)*.75),rgb(0 0 0/.684) calc(100% - var(--wash-out)*.625),rgb(0 0 0/.5) calc(100% - var(--wash-out)*.5),rgb(0 0 0/.316) calc(100% - var(--wash-out)*.375),rgb(0 0 0/.156) calc(100% - var(--wash-out)*.25),rgb(0 0 0/.043) calc(100% - var(--wash-out)*.125),rgb(0 0 0/0) 100%;
  -webkit-mask-image:linear-gradient(180deg,var(--m-in),var(--m-out));mask-image:linear-gradient(180deg,var(--m-in),var(--m-out))}
/* the tints: a stage or a .wash picks one with data-tint; the Why panel carries its own sage.
   linen is the WRAP figure's ground (#efe9e1, its --panel), for when that figure becomes a wash */
.stage[data-tint="sand"],.wash[data-tint="sand"]{--wash-a:var(--p-sand);--wash-b:#f3ece1}
.stage[data-tint="cream"],.wash[data-tint="cream"]{--wash-a:#f1e7d6;--wash-b:var(--p-cream)}
.stage[data-tint="sage"],.wash[data-tint="sage"]{--wash-a:#dfe6d7;--wash-b:#edefe5}
.stage[data-tint="apricot"],.wash[data-tint="apricot"]{--wash-a:var(--p-apricot);--wash-b:#f4ebe0}
.stage[data-tint="mint"],.wash[data-tint="mint"]{--wash-a:#d6e2d4;--wash-b:#e9eee4}
.stage[data-tint="linen"],.wash[data-tint="linen"]{--wash-a:#efe9e1;--wash-b:#f3efe7}
.why-panel{--wash-a:var(--p-sage);--wash-b:#edefe5}
/* the hero's stage runs into the paper under it: no fade below the box, the tint reaches paper at 88% and ::after
   fades the scene itself out across the full width */
.stage--fade{--wash-down:0px;padding-bottom:0}
.stage--fade::before{background:linear-gradient(rgba(35,41,35,.05) 1px,transparent 1px) 0 calc(var(--wash-up) - 1px)/40px 40px,linear-gradient(90deg,rgba(35,41,35,.05) 1px,transparent 1px) calc(100vmax - 1px) 0/40px 40px,linear-gradient(180deg,var(--wash-a,var(--p-sand)) var(--wash-up),var(--p-paper) calc(var(--wash-up) + (100% - var(--wash-up)) * .88));-webkit-mask-image:linear-gradient(180deg,var(--m-in),#000 72%,rgb(0 0 0/.35) 100%);mask-image:linear-gradient(180deg,var(--m-in),#000 72%,rgb(0 0 0/.35) 100%)}
.stage--fade::after{content:"";position:absolute;left:-100vmax;right:-100vmax;bottom:0;height:88px;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(246,243,235,0),var(--p-paper))}
@media (max-width:1099px){.stage,.why-panel,.wash{--wash-up:72px;--wash-down:96px;--wash-in:200px;--wash-out:232px}.stage{padding:40px 32px}.stage--fade{--wash-down:0px;padding-bottom:0}}
@media (max-width:699px){.stage,.why-panel,.wash{--wash-up:40px;--wash-down:56px;--wash-in:128px;--wash-out:152px}.stage{margin-inline:-20px;padding:28px 14px}.stage--fade{--wash-down:0px;padding-bottom:0}.stage--fade::after{height:56px}}
/* Without overflow:clip (Safari 15 and older) <main> must not fall back to overflow-x:hidden: that turns its overflow-y
   to auto, makes it a scroll container and unsticks every position:sticky inside it (the changelog bar, the pricing
   table head, the legal contents list). There the wash spans the window instead (every washed box is centred in it)
   and the root hides the half scrollbar a 100vw can overshoot by. This block must stay AFTER the wash rules above:
   it has their specificity, so placed before them their left/right:-100vmax wins and the wash runs three windows wide. */
@supports not (overflow:clip){html{overflow-x:hidden}.stage::before,.why-panel::before,.wash::before,.stage--fade::after{left:calc(50% - 50vw);right:calc(50% - 50vw)}}

/* ---------- proof row ---------- */
.proof-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:32px;margin-top:40px;padding:22px 0;border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line)}
.proof-row .apps{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 0;font:600 17px/1.4 var(--p-sans);color:var(--p-faint);letter-spacing:-.01em}
.proof-row .apps li{white-space:nowrap}
.proof-row .apps li+li::before{content:"·";margin:0 14px;color:var(--p-line);font-weight:400;color:#a9aa9c}
.proof-row .docs{display:inline-flex;align-items:center;min-height:44px;font:400 12px/1.4 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-faint);white-space:nowrap}
.proof-row .docs:hover{color:var(--p-ink)}
@media (max-width:1099px){.proof-row{grid-template-columns:1fr auto;gap:12px 24px}.proof-row .apps{grid-column:1/-1;grid-row:2;justify-content:flex-start}}
@media (max-width:699px){
  .proof-row{grid-template-columns:1fr;gap:6px;padding:18px 0 8px}
  .proof-row .apps{grid-row:auto;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -20px;padding:4px 20px 8px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .proof-row .apps::-webkit-scrollbar{display:none}
}

/* ---------- sections ---------- */
.sect{padding:152px 0 0}
.sect-rule{border-top:1px solid var(--p-line);padding-top:72px}
/* the first Studio section follows the proof row, which already draws the rule */
#studio.sect{padding-top:112px}
#studio .sect-rule{border-top:0;padding-top:0}
@media (max-width:699px){#studio.sect{padding-top:64px}}
@media (max-width:1099px){.sect{padding-top:112px}.sect-rule{padding-top:56px}}
@media (max-width:699px){.sect{padding-top:80px}.sect-rule{padding-top:40px}}

/* the Workspace (Studio) chapter shape: label + headline + lines left, three features + Explore right, then the scene */
.ws-head{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:64px;align-items:start}
.ws-head .h2{margin-top:22px}
.ws-head .body{margin-top:24px;max-width:52ch}
.feats{border-top:1px solid var(--p-line)}
.feats li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:4px 14px;padding:16px 0;border-bottom:1px solid var(--p-line)}
.feats .fi{grid-row:span 2;width:20px;height:20px;margin-top:2px;background:var(--p-copper-ink)}
.feats b{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:600 16px/1.35 var(--p-sans);color:var(--p-ink)}
.feats span{font-size:15px;line-height:1.5;color:var(--p-sub)}
.feats .st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:4px;background:rgba(40,102,51,.1);font:500 12px/1 var(--p-mono);letter-spacing:.04em;color:#23592d}
.feats .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ws-explore{margin-top:26px}
.ws-stage{margin-top:72px}
@media (max-width:1099px){.ws-head{grid-template-columns:1fr;gap:32px}.ws-head .body{max-width:62ch}.ws-stage{margin-top:48px}}
@media (max-width:699px){.ws-head .h2{margin-top:16px}.ws-head .body{margin-top:16px;font-size:16px}.ws-stage{margin-top:32px}.ws-explore .btn{width:100%}}

/* centred section header (How it works, Why) */
.sect-center{text-align:center;max-width:860px;margin:0 auto}
.sect-center .h2c{margin-top:20px}
.sect-center .lede{margin:22px auto 0;max-width:60ch}
.slot-block{margin-top:64px}
@media (max-width:699px){.slot-block{margin-top:40px}}

/* Why: one sage wash (the wash rules above paint it edge to edge); the scene fills its box with the ruled band (.why-band) */
.why-panel{max-width:1360px;margin:0 auto;padding:104px 64px 88px}
.why-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(35,41,35,.16);border-bottom:1px solid rgba(35,41,35,.16)}
.why-cell{display:flex;flex-direction:column;padding:32px 28px 36px;border-left:1px solid rgba(35,41,35,.16)}
.why-cell:first-child{border-left:0;padding-left:0}
.why-cell:last-child{padding-right:0}
.why-vignette{min-height:168px;display:flex;align-items:center;justify-content:center;margin-bottom:28px}
.why-title{font:400 24px/1.2 var(--p-serif);letter-spacing:-.02em;color:var(--p-ink);text-wrap:balance}
.why-line{margin-top:10px;font-size:15px;line-height:1.55;color:var(--p-sub);text-wrap:pretty}
@media (max-width:1099px){.why-panel{padding:80px 40px 64px}.why-band{grid-template-columns:repeat(2,minmax(0,1fr))}.why-cell:nth-child(3){border-left:0;padding-left:0}.why-cell:nth-child(n+3){border-top:1px solid rgba(35,41,35,.16)}.why-cell:nth-child(2){padding-right:0}}
@media (max-width:699px){.why-panel{margin-inline:-20px;padding:64px 20px 48px}.why-band{grid-template-columns:1fr}.why-cell{border-left:0!important;padding:28px 0!important}.why-cell+.why-cell{border-top:1px solid rgba(35,41,35,.16)}.why-vignette{min-height:0;justify-content:flex-start;margin-bottom:20px}}

/* Agents of Things: the page's one deep band. Full bleed with straight edges on purpose: forest is a wall, not a wash
   (see the wash note above). isolation makes it a stacking context above the washes' z-index:-1, so where a wash's
   last, already-faded pixels reach it (the Studio page's first stage at 700-1099) they fall under the band */
.deep{position:relative;isolation:isolate;margin-top:152px;padding:136px 0 128px;background:var(--p-forest);color:var(--p-paper)}
.deep::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(219,230,217,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(219,230,217,.06) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.35))}
.deep .label{color:var(--p-gold)}
.deep .h2{color:var(--p-paper)}
.deep .h2 em{color:var(--p-gold)}
.deep .body{color:var(--p-mint)}
.deep .ws-head{align-items:end}
.status-dev{display:inline-flex;align-items:center;gap:10px;min-height:32px;padding:0 14px;border:1px dashed rgba(213,187,124,.7);border-radius:6px;font:400 12px/1.3 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-gold)}
.status-dev::before{content:"";width:7px;height:7px;border-radius:50%;border:1px solid currentColor}
.deep-stage{margin-top:72px}
@media (max-width:1099px){.deep{margin-top:112px;padding:104px 0 96px}.deep-stage{margin-top:48px}}
@media (max-width:699px){.deep{margin-top:80px;padding:72px 0 64px}.deep-stage{margin-top:32px}.status-dev{min-height:auto;padding:8px 14px}}

/* changelog rail */
.log-head{display:flex;align-items:end;justify-content:space-between;gap:24px}
.log-head .h3{margin-top:14px}
.rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:48px;padding-top:36px}
.rail::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--p-line)}
.rail li{position:relative}
.rail li::before{content:"";position:absolute;left:0;top:-36px;width:15px;height:15px;border-radius:50%;background:var(--p-paper);border:1.5px solid #9a9b8e}
.rail li:first-child::before{background:var(--p-copper);border-color:var(--p-copper);box-shadow:0 0 0 5px rgba(184,83,43,.14)}
.rail time{font:400 12px/1.5 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-faint)}
.rail li:first-child time{color:var(--p-copper-ink)}
.rail b{display:block;margin-top:8px;font:600 17px/1.35 var(--p-sans);color:var(--p-ink)}
.rail p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--p-sub)}
@media (max-width:999px){.rail{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}.rail::before{display:none}.rail li::before{top:-30px}.rail li{padding-top:0}}
@media (max-width:699px){
  .rail{grid-template-columns:1fr;gap:28px;padding:0 0 0 30px;margin-top:32px}
  .rail::before{display:block;left:7px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .rail li::before{left:-30px;top:3px}
}

/* numbers + voice */
.numbers{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end}
.numbers .h2{max-width:13ch}
.community{margin-top:36px;border-top:1px solid var(--p-line)}
.community li{border-bottom:1px solid var(--p-line)}
.community a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;font-size:16px;color:var(--p-ink)}
.community a b{font-weight:600}
.community a .arr{color:var(--p-sub);transition:transform .25s var(--p-ease)}
.community a:hover .arr{transform:translate(2px,-2px)}
.big{text-align:right}
.big-n{font:400 clamp(112px,15vw,236px)/.86 var(--p-serif);letter-spacing:-.05em;color:var(--p-forest)}
.big-n sup{font-size:.5em;vertical-align:.62em;letter-spacing:0;color:var(--p-copper)}
.big-cap{margin-top:18px;font-size:19px;color:var(--p-sub)}
.big .label{margin-top:8px}
.voice{margin-top:120px;padding-top:72px;border-top:1px solid var(--p-line);display:grid;grid-template-columns:minmax(0,2fr) minmax(0,10fr);gap:32px}
.voice .mark{font:400 120px/.8 var(--p-serif);color:var(--p-copper)}
.voice blockquote{margin:0;font:italic 400 clamp(34px,3.6vw,56px)/1.12 var(--p-serif);letter-spacing:-.025em;color:var(--p-ink);text-wrap:balance}
.voice figcaption{margin-top:28px}
.voice .who{font:400 12px/1.5 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-copper-ink)}
.voice .who-line{margin-top:8px;font-size:15px;color:var(--p-sub)}
@media (max-width:999px){.numbers{grid-template-columns:1fr;gap:40px}.big{text-align:left}.voice{grid-template-columns:1fr;gap:8px}.voice .mark{font-size:88px;height:56px}}
@media (max-width:699px){.voice{margin-top:72px;padding-top:48px}.big-cap{font-size:17px}}

/* close */
.close{padding:168px 0 152px;text-align:center}
.close .h2c{margin:0 auto}
.close .btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:40px}
.close .dl{margin-top:22px}
.close .ticks{justify-content:center;margin-top:22px}
@media (max-width:699px){.close{padding:104px 0 96px}.close .btns{flex-direction:column}.close .btns .btn{width:100%}}

/* footer */
.site-foot{background:var(--p-forest);color:var(--p-mint);padding:88px 0 40px;font-size:15px}
.site-foot .wrap{max-width:1360px}
.foot-top{display:flex;align-items:end;justify-content:space-between;gap:32px;padding-bottom:48px;border-bottom:1px solid rgba(219,230,217,.18)}
.foot-top img{width:98px;height:34px}
.foot-top p{max-width:52ch;font:italic 400 22px/1.35 var(--p-serif);color:var(--p-paper);text-align:right;text-wrap:balance}
.foot-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:32px;padding:48px 0 56px}
.foot-cols h3{font:400 12px/1.5 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-gold);margin-bottom:12px}
.foot-cols a{display:inline-flex;align-items:center;min-height:34px;color:var(--p-mint);line-height:1.35;padding:4px 0}
.foot-cols a:hover{color:var(--p-paper);text-decoration:underline;text-underline-offset:4px}
.foot-base{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 32px;padding-top:28px;border-top:1px solid rgba(219,230,217,.18);font-size:14px}
.foot-base .ent{color:var(--p-mint)}
.foot-base .right{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.foot-base .ind{font:italic 400 17px/1.3 var(--p-serif);color:var(--p-paper)}
.motion-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:1px solid rgba(219,230,217,.35);border-radius:6px;background:transparent;color:var(--p-paper);font:400 12px/1 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.motion-toggle:hover{border-color:var(--p-mint)}
.motion-toggle .mt-dot{width:8px;height:8px;border-radius:50%;background:var(--p-gold)}
.motion-toggle[aria-pressed="true"] .mt-dot{background:transparent;border:1px solid var(--p-gold)}
.motion-toggle:disabled{opacity:.8;cursor:default}
@media (max-width:1099px){.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:699px){
  .site-foot{padding-top:64px}
  .foot-top{flex-direction:column;align-items:flex-start}.foot-top p{text-align:left;font-size:20px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px 20px}
  .foot-cols a{min-height:44px}
  .foot-base{flex-direction:column;align-items:flex-start}
}

/* ============================== B. FOXORA STUDIO UI (light, taupe) ============================== */
/* motion helpers on top of kit-base: data-fx="rise" arrives from 14px lower and a little slower;
   data-fx="fade" only fades. Every other [data-fx] uses kit-base's 6px rise. */
.js-motion [data-scene]:not(.is-done) [data-fx="rise"]:not(.on){transform:translateY(14px)}
.js-motion [data-scene]:not(.is-done) [data-fx="fade"]:not(.on){transform:none}
[data-scene] [data-fx="rise"]{transition-duration:.6s}
/* Scenes: <div class="scene scene-<id>" data-scene="<id>"> … </div>. Every piece below is the finished state. */
.scene{position:relative;font-family:var(--s-sans);color:var(--s-t1)}
.scene-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px}
.s-honesty{font:400 12px/1.4 var(--s-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--s-t3)}
.s-replay{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 10px;margin-right:-10px;border:0;border-radius:8px;background:none;font:500 12px/1 var(--s-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--s-t2);cursor:pointer}
.s-replay:hover{color:var(--s-t1);background:rgba(68,62,55,.07)}
.s-replay .s-ic{width:14px;height:14px}
@media (max-width:699px){.s-replay{min-height:44px}}

/* the window */
.s-window{position:relative;overflow:hidden;background:var(--s-bg);border:1px solid var(--s-line-2);border-radius:var(--s-r-card);box-shadow:0 1px 2px rgba(28,25,20,.05),0 24px 48px -20px rgba(40,32,24,.20),0 60px 120px -60px rgba(40,32,24,.28);font:400 13px/1.5 var(--s-sans);color:var(--s-t1);text-align:left}
.s-titlebar{position:relative;display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;background:var(--s-side);border-bottom:1px solid var(--s-line)}
.s-lights{display:flex;gap:8px;flex:none}
.s-lights i{width:12px;height:12px;border-radius:50%;background:#d6cec3;box-shadow:inset 0 0 0 .5px rgba(68,62,55,.18)}
.s-lights--color i:nth-child(1){background:#ec6a5e}.s-lights--color i:nth-child(2){background:#f4bf4f}.s-lights--color i:nth-child(3){background:#61c554}
.s-title{position:absolute;left:50%;transform:translateX(-50%);font:600 13px/1 var(--s-sans);color:var(--s-t2);white-space:nowrap}
.s-titlebar .s-honesty{margin-left:auto}
.s-body{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:0}
.s-body.has-panel{grid-template-columns:232px minmax(0,1fr) 272px}
.s-body.no-side{grid-template-columns:minmax(0,1fr)}
.s-body.no-side.has-panel{grid-template-columns:minmax(0,1fr) 272px}

/* sidebar */
.s-side{display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px 10px;background:var(--s-side);border-right:1px solid var(--s-line)}
.s-ws{display:flex;align-items:center;gap:10px;padding:4px 6px 10px}
.s-ws-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--s-t1);flex:none}
.s-ws-mark img{width:15px;height:15px;filter:invert(1)}
.s-ws-name{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.s-ws-name b{display:flex;align-items:center;gap:4px;font-weight:600;font-size:13px}
.s-ws-name b .s-ic{width:13px;height:13px;color:var(--s-t3)}
.s-ws-name span{font-size:12px;color:var(--s-t3)}
.s-new{display:flex;align-items:center;gap:9px;height:32px;margin:2px 0 8px;padding:0 10px;border:1px solid var(--s-line-2);border-radius:var(--s-r);background:var(--s-bg);font-weight:600;font-size:13px;color:var(--s-t1)}
.s-nav-item{display:flex;align-items:center;gap:10px;height:30px;padding:0 8px;border-radius:var(--s-r);font-size:13px;color:var(--s-t2);white-space:nowrap;min-width:0}
.s-nav-item>span:not(.s-count):not(.s-dot){overflow:hidden;text-overflow:ellipsis}
.s-nav-item .s-ic{color:var(--s-t3)}
.s-nav-item.is-active,.s-new.is-active{background:var(--s-elev-3);color:var(--s-t1);border-color:transparent}
.s-nav-item.is-active .s-ic{color:var(--s-t1)}
.s-count{display:inline-grid;place-items:center;min-width:20px;height:18px;margin-left:auto;padding:0 6px;border-radius:5px;background:var(--s-t1);color:var(--s-on-primary);font:600 12px/1 var(--s-sans)}
.s-group{margin:14px 0 4px;padding:0 8px;font:600 12px/1.4 var(--s-sans);color:var(--s-t3)}
.s-recent{height:28px;padding-left:10px}
.s-recent .s-dot{margin-left:auto}
.s-user{display:flex;align-items:center;gap:10px;margin-top:auto;padding:12px 6px 2px;border-top:1px solid var(--s-line)}
.s-avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#d9cdbd;color:var(--s-t1);font:600 12px/1 var(--s-sans);flex:none}
.s-avatar--lg{width:32px;height:32px}
.s-user-name{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.s-user-name b{font-weight:600;font-size:13px}
.s-user-name span{font-size:12px;color:var(--s-t3)}

/* main pane */
.s-main{display:flex;flex-direction:column;min-width:0;background:var(--s-bg)}
.s-head{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 20px;border-bottom:1px solid var(--s-line);flex-wrap:wrap}
.s-head-title{font-weight:600;font-size:14px;color:var(--s-t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.s-head-crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--s-t2)}
.s-head-crumb .s-ic{width:13px;height:13px;color:var(--s-t3)}
.s-head-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.s-thread{display:flex;flex-direction:column;gap:18px;width:100%;max-width:760px;margin:0 auto;padding:24px 28px}
.s-main-foot{margin-top:auto;padding:0 28px 18px}
.s-main-foot .s-composer{max-width:760px;margin:0 auto}

/* right panel */
.s-panel{display:flex;flex-direction:column;gap:12px;min-width:0;padding:16px;background:var(--s-canvas);border-left:1px solid var(--s-line)}
.s-panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 13px/1.4 var(--s-sans);color:var(--s-t1)}
.s-panel-head a,.s-panel-head .s-link{font-weight:400;font-size:12px}

/* small parts */
.s-ic{display:inline-block;width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;vertical-align:middle}
.s-ic--sm{width:14px;height:14px}.s-ic--lg{width:20px;height:20px}
.s-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--s-t3);flex:none}
.s-dot[data-c="ok"]{background:var(--s-success)}.s-dot[data-c="warn"]{background:#b27a1e}.s-dot[data-c="info"]{background:var(--s-info)}.s-dot[data-c="copper"]{background:var(--p-copper)}
.s-link{color:#255f9c;text-decoration:underline;text-decoration-color:rgba(37,95,156,.35);text-underline-offset:3px}
.s-muted{color:var(--s-t2)}
.s-mono{font-family:var(--s-mono)}
.s-time{font:400 12px/1.4 var(--s-mono);color:var(--s-t3);white-space:nowrap}
.s-kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--s-line-2);border-bottom-width:2px;border-radius:5px;font:500 12px/1 var(--s-mono);color:var(--s-t2)}
.s-rule{height:1px;background:var(--s-line);border:0;margin:0}

/* chips and tags */
.s-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid var(--s-line);border-radius:var(--s-r-sm);background:var(--s-elev);font:400 12px/1 var(--s-sans);color:var(--s-t2);white-space:nowrap}
.s-chip .s-ic{width:13px;height:13px;color:var(--s-t3)}
.s-chip b{font-weight:600;color:var(--s-t1)}
.s-chip--add{background:transparent;border-style:dashed;border-color:var(--s-line-3)}
.s-chip--on{background:var(--s-t1);border-color:var(--s-t1);color:var(--s-on-primary)}
.s-chip--on .s-ic{color:var(--s-on-primary)}
.s-tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--s-line-2);border-radius:4px;background:transparent;font:500 12px/1 var(--s-mono);letter-spacing:.03em;color:var(--s-t2);white-space:nowrap}
.s-tag--ex{text-transform:uppercase;letter-spacing:.06em;border-style:dashed;color:var(--s-t3)}
.s-tags{display:flex;flex-wrap:wrap;gap:6px}

/* buttons inside the product (never real controls in a scene: write them as <span>) */
.s-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:30px;padding:0 13px;border-radius:var(--s-r);border:1px solid var(--s-line-2);background:var(--s-bg);font:600 13px/1 var(--s-sans);color:var(--s-t1);white-space:nowrap}
.s-btn--primary{background:var(--s-primary);border-color:var(--s-primary);color:var(--s-on-primary)}
.s-btn--go{background:var(--p-forest);border-color:var(--p-forest);color:var(--p-paper)}
.s-btn--ghost{border-color:transparent;background:transparent;color:var(--s-t2)}
.s-btn--sm{height:26px;padding:0 10px;font-size:12px}

/* status pills: data-state = live | done | beta | build | running | paused | waiting | dev | neutral */
.s-status{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:5px;background:var(--s-elev-2);font:600 12px/1 var(--s-sans);color:var(--s-t2);white-space:nowrap}
.s-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.s-status[data-state="live"],.s-status[data-state="done"]{background:rgba(40,102,51,.1);color:var(--s-success)}
.s-status[data-state="beta"]{background:rgba(45,111,181,.1);color:#255f9c}
.s-status[data-state="build"],.s-status[data-state="paused"],.s-status[data-state="waiting"]{background:rgba(178,122,30,.13);color:var(--s-warning)}
.s-status[data-state="running"]{background:rgba(45,111,181,.1);color:#255f9c}
.s-status[data-state="running"]::before{content:"⠋";width:auto;height:auto;border-radius:0;background:none;font:500 13px/1 var(--s-mono);animation:s-braille .9s linear infinite}
.s-status[data-state="dev"]{background:transparent;border:1px dashed var(--s-line-3);color:var(--s-t2)}
.s-status[data-state="dev"]::before{background:transparent;border:1px solid currentColor;width:6px;height:6px}
.s-status[data-state="neutral"]{background:var(--s-elev-2);color:var(--s-t2)}

/* the braille throbber: the only loader. It turns only while it (or an ancestor) is data-state="running". */
.s-throb{display:inline-block;width:1em;font:500 13px/1 var(--s-mono);color:var(--s-info);text-align:center}
.s-throb::before{content:"⠋"}
.s-throb[data-state="running"]::before,[data-state="running"] .s-throb::before{animation:s-braille .9s linear infinite}
@keyframes s-braille{0%{content:"⠋"}10%{content:"⠙"}20%{content:"⠹"}30%{content:"⠸"}40%{content:"⠼"}50%{content:"⠴"}60%{content:"⠦"}70%{content:"⠧"}80%{content:"⠇"}90%{content:"⠏"}}

/* show a child only in one state of its DIRECT parent: <span data-state="done" data-state-start="running"><span class="s-if-running">Running…</span><span class="s-if-done">Delivered 08:31</span></span> */
[data-state]:not([data-state="running"])>.s-if-running,[data-state]:not([data-state="done"])>.s-if-done,[data-state]:not([data-state="paused"])>.s-if-paused,[data-state]:not([data-state="waiting"])>.s-if-waiting,[data-state]:not([data-state="todo"])>.s-if-todo,[data-state]:not([data-state="approved"])>.s-if-approved{display:none!important}

/* a running label shimmers (same look as .fx-shimmer in kit-base) */
.s-step[data-state="running"] .s-step-text,.s-tool[data-state="running"] .s-tool-action,.s-shimmer[data-state="running"]{background:linear-gradient(90deg,var(--s-t2) 0%,var(--s-t2) 40%,var(--s-t1) 50%,var(--s-t2) 60%,var(--s-t2) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shimmer 1.6s linear infinite}

/* app monogram tiles: never a real brand logo */
.s-app{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:#e6ddd0;box-shadow:inset 0 0 0 1px rgba(68,62,55,.1);font:600 12px/1 var(--s-sans);letter-spacing:-.02em;color:var(--s-t1);flex:none}
.s-app[data-t="2"]{background:#dde3d6}.s-app[data-t="3"]{background:#e5dbe0}.s-app[data-t="4"]{background:#d9e0e4}.s-app[data-t="5"]{background:#ecdccf}.s-app[data-t="6"]{background:#e3e0cf}
.s-app--sm{width:20px;height:20px;border-radius:5px}
.s-app--lg{width:32px;height:32px;border-radius:8px;font-size:13px}
.s-app-name{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--s-t1)}

/* the user's message */
.s-msg-user{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.s-bubble{max-width:78%;padding:11px 16px;border-radius:var(--s-r-bubble);background:var(--s-elev-2);font-size:14px;line-height:1.55;color:var(--s-t1);text-wrap:pretty}
.s-msg-user .s-tags,.s-msg-user .s-ctx{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}

/* the agent's reply */
.s-byline{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--s-t2)}
.s-byline b{font-weight:600;color:var(--s-t1)}
.s-fox{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--s-t1);flex:none}
.s-fox img{width:13px;height:13px;filter:invert(1)}
.s-prose{font-size:14px;line-height:1.62;color:var(--s-t1);text-wrap:pretty}
.s-prose p+p,.s-prose p+ul,.s-prose ul+p{margin-top:10px}
.s-prose ul{padding-left:18px;list-style:disc}
.s-prose li+li{margin-top:4px}
.s-prose strong{font-weight:600}
.s-prose code{font:400 12.5px/1 var(--s-mono);padding:2px 5px;border-radius:4px;background:var(--s-elev-2)}

/* plan: Plan n/m with done / running / paused / todo rows */
.s-plan{border:1px solid var(--s-line-2);border-radius:var(--s-r-card);background:var(--s-bg);overflow:hidden}
.s-plan-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--s-line);background:var(--s-elev)}
.s-plan-head .s-ic{color:var(--s-t2)}
.s-plan-title{font-weight:600;font-size:13px}
.s-plan-count{font:500 12px/1 var(--s-mono);color:var(--s-t2)}
.s-plan-head .s-time{margin-left:auto}
.s-steps{padding:6px 0}
.s-step{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:start;gap:12px;padding:8px 14px;font-size:13px;line-height:1.45}
.s-step-mark{position:relative;display:grid;place-items:center;width:18px;height:18px;margin-top:0;border-radius:50%;border:1.5px solid var(--s-line-3);color:var(--s-t3)}
.s-step-text{color:var(--s-t1);min-width:0}
.s-step-meta{display:flex;align-items:center;gap:6px;font:400 12px/1.45 var(--s-sans);color:var(--s-t3);white-space:nowrap;text-align:right}
.s-step[data-state="done"] .s-step-mark{border-color:var(--s-success);background:var(--s-success)}
.s-step[data-state="done"] .s-step-mark::after{content:"";width:11px;height:11px;background:var(--s-on-primary);-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat}
.s-step[data-state="done"] .s-step-text{color:var(--s-t2)}
.s-step[data-state="running"] .s-step-mark{border-color:transparent}
.s-step[data-state="running"] .s-step-mark::after{content:"⠋";font:500 14px/1 var(--s-mono);color:var(--s-info);animation:s-braille .9s linear infinite}
.s-step[data-state="paused"] .s-step-mark{border-color:#b27a1e;background:rgba(178,122,30,.12)}
.s-step[data-state="paused"] .s-step-mark::after{content:"";width:6px;height:7px;border-left:2px solid var(--s-warning);border-right:2px solid var(--s-warning)}
.s-step[data-state="paused"] .s-step-meta{color:var(--s-warning)}
.s-step[data-state="todo"] .s-step-text{color:var(--s-t2)}

/* a tool call row */
.s-tool{display:grid;grid-template-columns:24px minmax(0,auto) minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--s-line);border-radius:var(--s-r-lg);background:var(--s-bg);font-size:13px}
.s-tool-action{font-weight:600;white-space:nowrap}
.s-tool-target{color:var(--s-t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--s-mono);font-size:12px}
.s-tool-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--s-t2);white-space:nowrap}
.s-tool[data-state="done"] .s-tool-status{color:var(--s-success)}
.s-tool[data-state="done"] .s-tool-status::before{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:var(--ic-check) center/contain no-repeat;mask:var(--ic-check) center/contain no-repeat}
.s-tool[data-state="waiting"] .s-tool-status{color:var(--s-warning)}
.s-tool[data-state="running"] .s-tool-status{color:#255f9c}
.s-tools{display:flex;flex-direction:column;gap:6px}

/* agents */
.s-agent{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 4px;border:1px solid var(--s-line-2);border-radius:8px;background:var(--s-bg);font-size:13px;white-space:nowrap}
.s-agent-av{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#dcd2c4;font:600 12px/1 var(--s-sans);color:var(--s-t1)}
.s-agent-name{font-weight:600}
.s-agent-role{color:var(--s-t2)}
.s-agent-card{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--s-line-2);border-radius:var(--s-r-card);background:var(--s-bg)}
.s-agent-card-head{display:flex;align-items:center;gap:10px}
.s-agent-card-head .s-agent-av{width:32px;height:32px;border-radius:9px;font-size:13px}
.s-agent-card-head div>b{display:block;font-weight:600;font-size:14px;line-height:1.3}
.s-agent-card-head div>span{display:block;font-size:12px;color:var(--s-t2);line-height:1.35}
.s-agent-card p{font-size:13px;line-height:1.5;color:var(--s-t2)}
.s-agent-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--s-line);border-radius:var(--s-r-lg);background:var(--s-bg);font-size:13px}
.s-agent-row b{font-weight:600}
.s-agent-row .s-tag{margin-left:auto}

/* the approval card: the one justified card */
.s-ask{position:relative;border:2px solid var(--p-copper);border-radius:var(--s-r-lg);background:#fcf4ec;box-shadow:0 18px 40px -24px rgba(147,65,31,.35)}
.s-ask-head{display:flex;align-items:center;gap:9px;padding:12px 16px 10px;font:600 13px/1.35 var(--s-sans);color:var(--p-copper-ink)}
.s-ask-head .s-ic{color:var(--p-copper-ink)}
.s-ask-head .s-time{margin-left:auto}
.s-ask-rows{margin:0 16px;border-top:1px solid rgba(147,65,31,.18)}
.s-ask-rows>div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;padding:9px 0;border-bottom:1px solid rgba(147,65,31,.14);font-size:13px;line-height:1.5}
.s-ask-rows dt{color:var(--s-t2)}
.s-ask-rows dd{color:var(--s-t1)}
.s-ask-rows dd b{font-weight:600}
.s-ask-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px 4px}
.s-ask-foot{padding:6px 16px 14px;font-size:12px;line-height:1.5;color:var(--s-t2)}
.s-ask[data-state="approved"]{border-color:var(--s-success);background:#f1f5ee;box-shadow:none}
.s-ask[data-state="approved"] .s-ask-head{color:var(--s-success)}
.s-ask[data-state="approved"] .s-ask-head .s-ic{color:var(--s-success)}
.s-ask[data-state="approved"] .s-ask-rows,.s-ask[data-state="approved"] .s-ask-rows>div{border-color:rgba(40,102,51,.16)}
.s-ask--mini{box-shadow:none}
.s-ask--mini .s-ask-head{padding:10px 12px 8px}
.s-ask--mini .s-ask-actions{padding:4px 12px 12px}

/* credits meter: set --fill (0–100%); .s-meter-tick at --at marks the ceiling */
.s-meter{--fill:var(--to,0%);display:flex;flex-direction:column;gap:7px;min-width:180px}
.s-meter-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12px;color:var(--s-t2);white-space:nowrap}
.s-meter-head b{font-weight:600;color:var(--s-t1);font-variant-numeric:tabular-nums}
.s-meter-track{position:relative;height:6px;border-radius:999px;background:var(--s-elev-3)}
.s-meter-bar{position:absolute;left:0;top:0;bottom:0;width:var(--fill);border-radius:inherit;background:var(--s-t1);transition:width .9s var(--p-ease)}
.s-meter[data-state="paused"] .s-meter-bar,.s-meter[data-state="waiting"] .s-meter-bar{background:#b27a1e}
.s-meter[data-state="done"] .s-meter-bar{background:var(--s-success)}
.s-meter-tick{position:absolute;left:var(--at,100%);top:-5px;bottom:-5px;width:2px;margin-left:-1px}
.s-meter-tick::before{content:"";position:absolute;inset:0;background:var(--s-t1);border-radius:1px}
.s-meter-tick em{position:absolute;right:0;top:calc(100% + 4px);font:500 12px/1 var(--s-mono);font-style:normal;letter-spacing:.04em;color:var(--s-t2);white-space:nowrap}
.s-meter--ceiling{padding-bottom:18px}
.s-meter--inline{flex-direction:row;align-items:center;gap:10px;min-width:0}
.s-meter--inline .s-meter-track{width:120px;flex:none}
/* motion: a meter with data-fx stays visible and sits at --from until the timeline calls a.show(meter), then fills to --to */
.js-motion [data-scene]:not(.is-done) .s-meter[data-fx]:not(.on){opacity:1;transform:none;--fill:var(--from,0%)}

/* the credits notice */
.s-quota{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 16px;border:1px solid rgba(178,122,30,.35);border-radius:var(--s-r-lg);background:#fbf3e3;font-size:13px;line-height:1.45;color:var(--s-t1)}
.s-quota>.s-ic{color:var(--s-warning)}
.s-quota-text{flex:1 1 320px;min-width:0}
.s-quota-text b{font-weight:600}
.s-quota-text .s-link{margin-left:10px;white-space:nowrap}
.s-quota-plan{font:500 12px/1.3 var(--s-mono);color:var(--s-t2);white-space:nowrap}

/* the handoff report */
.s-handoff{border:1px solid var(--s-line-2);border-radius:var(--s-r-card);background:#fff;box-shadow:0 1px 2px rgba(28,25,20,.05),0 10px 28px -18px rgba(40,32,24,.22);overflow:hidden}
.s-handoff-head{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 12px}
.s-handoff-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(40,102,51,.1);color:var(--s-success);flex:none}
.s-handoff-kicker{font-size:12px;color:var(--s-t2);line-height:1.3}
.s-handoff-title{font-weight:600;font-size:15px;line-height:1.35;color:var(--s-t1);margin-top:2px}
.s-handoff-head .s-time{margin-left:auto}
.s-check{width:100%;border-collapse:collapse;font-size:13px;line-height:1.45}
.s-check th{padding:8px 16px;text-align:left;font:600 12px/1.3 var(--s-sans);color:var(--s-t2);background:var(--s-elev);border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line)}
.s-check td{padding:9px 16px;border-bottom:1px solid var(--s-line);vertical-align:top}
.s-check td:first-child{color:var(--s-t2);width:38%}
.s-check tr:last-child td{border-bottom:0}
.s-ok{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--s-success)}
.s-ok::before{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:var(--ic-check-circle) center/contain no-repeat;mask:var(--ic-check-circle) center/contain no-repeat}
.s-no{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--s-t1)}
.s-handoff-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--s-line);background:var(--s-bg)}
.s-handoff-foot .s-artifact{margin-right:auto}

/* the composer */
.s-composer{border:1px solid var(--s-line-2);border-radius:var(--s-r-card);background:#fffdf9;box-shadow:0 1px 2px rgba(28,25,20,.05),0 8px 24px -16px rgba(40,32,24,.18)}
.s-composer-ctx{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0}
.s-composer-input{min-height:48px;padding:10px 14px 6px;font-size:14px;line-height:1.55;color:var(--s-t1)}
.s-placeholder{color:var(--s-t3)}
.s-composer-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:6px 8px 8px}
.s-pick{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 8px;border-radius:var(--s-r);font:500 12px/1 var(--s-sans);color:var(--s-t2);white-space:nowrap}
.s-pick .s-ic{width:14px;height:14px;color:var(--s-t3)}
.s-pick--on{background:var(--s-elev-2);color:var(--s-t1)}
.s-credits{display:inline-flex;align-items:center;gap:6px;height:26px;margin-left:auto;padding:0 10px;border:1px solid var(--s-line);border-radius:6px;font:500 12px/1 var(--s-sans);color:var(--s-t2);white-space:nowrap;font-variant-numeric:tabular-nums}
.s-credits .s-ic{width:13px;height:13px;color:var(--s-t3)}
.s-send{display:inline-grid;place-items:center;width:30px;height:30px;margin-left:6px;border-radius:50%;background:var(--s-t1);color:var(--s-on-primary);flex:none}
.s-send .s-ic{width:15px;height:15px}
.s-send[data-state="idle"]{background:var(--s-elev-3);color:var(--s-t3)}

/* new-session starters */
.s-starters{display:flex;flex-direction:column;border-top:1px solid var(--s-line)}
.s-starter{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:12px 4px;border-bottom:1px solid var(--s-line)}
.s-starter-lead{display:inline-flex;align-items:center;gap:10px;min-width:170px;font-weight:600;font-size:13px;color:var(--s-t1)}
.s-starter-lead .s-ic{color:var(--s-t2)}
.s-starters-title{font:400 24px/1.25 var(--s-sans);letter-spacing:-.02em;color:var(--s-t1);margin-bottom:18px}

/* a code view with line numbers and a diff tint */
.s-code{border:1px solid var(--s-line-2);border-radius:var(--s-r-lg);background:#fffdf9;overflow:hidden;min-width:0}
.s-code-head{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-bottom:1px solid var(--s-line);background:var(--s-elev);font:400 12px/1 var(--s-mono);color:var(--s-t2)}
.s-diffstat{margin-left:auto;display:inline-flex;gap:8px;font:500 12px/1 var(--s-mono)}
.s-diffstat .add{color:var(--s-success)}.s-diffstat .del{color:#a23a2c}
.s-code-body{padding:8px 0;overflow-x:auto;font-variant-ligatures:none;font:400 12.5px/1.75 var(--s-mono);color:var(--s-t1);scrollbar-width:thin}
.s-ln{display:grid;grid-template-columns:44px 16px max-content;min-width:100%;white-space:pre}
.s-ln-n{padding-right:12px;text-align:right;color:#6f675c;user-select:none;font-size:12px}
.s-ln-s{color:var(--s-t3);font-size:12px}
.s-ln[data-diff="add"]{background:rgba(40,102,51,.1)}
.s-ln[data-diff="add"] .s-ln-s{color:var(--s-success)}
.s-ln[data-diff="del"]{background:rgba(192,57,43,.09)}
.s-ln[data-diff="del"] .s-ln-s{color:#a23a2c}
.s-ln[data-diff="hunk"]{color:var(--s-t3);background:rgba(45,111,181,.06)}
.t-k{color:#8a3b8f}.t-s{color:#2d6a3a}.t-f{color:#255f9c}.t-c{color:#7a7166;font-style:italic}.t-n{color:#9a5a12}.t-t{color:#8b4513}

/* an artifact card */
.s-artifact{display:inline-flex;align-items:center;gap:10px;padding:6px 6px 6px 8px;border:1px solid var(--s-line-2);border-radius:var(--s-r-lg);background:var(--s-bg);max-width:100%;min-width:0}
.s-artifact-icon{display:grid;place-items:center;width:30px;height:34px;border-radius:5px;background:#efe3d6;color:var(--p-copper-ink);flex:none}
.s-artifact-name{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.s-artifact-name b{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-artifact-name span{font-size:12px;color:var(--s-t2)}
.s-artifact .s-btn{margin-left:6px}

/* table, list rows, search field */
.s-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.45}
.s-table th{padding:9px 14px;text-align:left;font:600 12px/1.3 var(--s-sans);color:var(--s-t2);border-bottom:1px solid var(--s-line-2);white-space:nowrap}
.s-table td{padding:11px 14px;border-bottom:1px solid var(--s-line);vertical-align:middle}
.s-table tr.is-dim td{color:var(--s-t3)}
.s-row{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 10px;border-radius:var(--s-r);font-size:13px}
.s-row+.s-row{border-top:1px solid var(--s-line);border-radius:0}
.s-row .s-row-end{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--s-t2);white-space:nowrap}
.s-row .s-ok{font-weight:500;font-size:12px}
.s-field{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:1px solid var(--s-line-2);border-radius:var(--s-r);background:#fffdf9;font-size:13px;color:var(--s-t3)}
.s-field .s-ic{width:14px;height:14px}

/* timeline lines (collapsed events in a thread) */
.s-timeline{display:flex;flex-direction:column;gap:2px}
.s-tl{display:flex;align-items:center;gap:10px;min-height:28px;font-size:13px;color:var(--s-t2)}
.s-tl .s-ic{width:14px;height:14px;color:var(--s-t3)}
.s-tl .s-time{min-width:40px}
.s-tl[data-c="ok"],.s-tl[data-c="ok"] .s-ic{color:var(--s-success)}
.s-tl[data-c="warn"],.s-tl[data-c="warn"] .s-ic{color:var(--s-warning)}

/* file tree and tabs (the IDE view) */
.s-tree{display:flex;flex-direction:column;gap:1px;padding:8px;font-size:13px}
.s-tree-row{--d:0;display:flex;align-items:center;gap:7px;height:28px;padding:0 8px 0 calc(8px + var(--d) * 16px);border-radius:6px;color:var(--s-t2);white-space:nowrap;overflow:hidden}
.s-tree-row .s-ic{width:14px;height:14px;color:var(--s-t3)}
.s-tree-row.is-active{background:var(--s-elev-3);color:var(--s-t1)}
.s-tree-row .s-tree-badge{margin-left:auto;font:500 12px/1 var(--s-mono);color:var(--s-success)}
.s-tabs{display:flex;align-items:flex-end;gap:2px;height:38px;padding:0 8px;border-bottom:1px solid var(--s-line);background:var(--s-elev)}
.s-tab{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;font-size:12px;color:var(--s-t2);white-space:nowrap}
.s-tab .s-ic{width:13px;height:13px}
.s-tab.is-active{background:var(--s-bg);border-color:var(--s-line);color:var(--s-t1);margin-bottom:-1px;height:31px}

/* the quieter "future" window (Agents of Things): dashed, secondary text */
.s-window--future{border-style:dashed;border-color:var(--s-line-3);box-shadow:none}
.s-window--future .s-titlebar{border-bottom-style:dashed}

/* tablet: the sidebar becomes an icon rail, a right panel drops under the main pane */
@media (max-width:999px){
  .s-body,.s-body.has-panel{grid-template-columns:56px minmax(0,1fr)}
  .s-body.no-side,.s-body.no-side.has-panel{grid-template-columns:minmax(0,1fr)}
  .s-window .s-side{padding:10px 8px;align-items:center}
  .s-window .s-side .s-ws-name,.s-window .s-side .s-group,.s-window .s-side .s-recent,.s-window .s-side .s-user-name,.s-window .s-nav-item>span,.s-window .s-new>span{display:none}
  .s-window .s-side .s-nav-item,.s-window .s-side .s-new{width:36px;height:34px;padding:0;justify-content:center}
  .s-window .s-side .s-user{border-top:0;padding:8px 0 0;justify-content:center}
  .s-window .s-side .s-ws{padding:2px 0 8px}
  .s-body.has-panel .s-panel{grid-column:2;border-left:0;border-top:1px solid var(--s-line)}
  .s-body.no-side.has-panel .s-panel{grid-column:1}
}
/* phone: one panel tells the story; the sidebar goes, the thread stacks */
@media (max-width:699px){
  .s-window{font-size:13px;border-radius:12px}
  .s-titlebar{height:36px;padding:0 12px}
  .s-title{display:none}
  .s-lights i{width:10px;height:10px}
  .s-body,.s-body.has-panel,.s-body.no-side.has-panel{grid-template-columns:minmax(0,1fr)}
  .s-window .s-side{display:none}
  .s-body.has-panel .s-panel{grid-column:1}
  .s-head{padding:10px 14px;gap:8px}
  .s-head-right{margin-left:0;width:100%}
  .s-thread{padding:18px 14px;gap:14px}
  .s-main-foot{padding:0 14px 14px}
  .s-bubble{max-width:92%;font-size:14px}
  .s-step{grid-template-columns:18px minmax(0,1fr);gap:10px}
  .s-step-meta{grid-column:2;white-space:normal;text-align:left;margin-top:-4px}
  .s-tool{grid-template-columns:24px minmax(0,1fr) auto}
  .s-tool-target{grid-column:2/-1;grid-row:2}
  .s-ask-rows>div{grid-template-columns:1fr;gap:2px}
  .s-ask-actions .s-btn{flex:1}
  .s-check td:first-child{width:42%}
  .s-check th,.s-check td{padding-left:12px;padding-right:12px}
  .s-meter{min-width:0}
  .s-meter--inline .s-meter-track{width:auto;flex:1}
  .s-head-right .s-meter{flex:1}
  .s-composer-bar{flex-wrap:wrap}
  .s-hide-phone{display:none!important}
  .s-starter-lead{min-width:0;width:100%}
  .s-quota-text .s-link{margin-left:0;margin-right:10px}
  .scene-foot{flex-wrap:wrap;gap:4px 16px}
}
@media (min-width:700px){.s-only-phone{display:none!important}}

/* ============================== C. LINE ICONS (24-grid strokes, as CSS masks) ============================== */
/* icons:start (generated: 67 icons; use <i class="s-ic s-ic-NAME"></i>) */
:root{
  --ic-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --ic-new:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E");
  --ic-inbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 3h5L16 13h5'/%3E%3Cpath d='M5.5 5h13L21 13v6H3v-6z'/%3E%3C/svg%3E");
  --ic-folder:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5H9l2 2.5h8.5A1.5 1.5 0 0 1 21 9v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E");
  --ic-tasks:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12.2l2.4 2.3 4.6-4.8'/%3E%3C/svg%3E");
  --ic-workflow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='6.5' height='5' rx='1.2'/%3E%3Crect x='14.5' y='15' width='6.5' height='5' rx='1.2'/%3E%3Cpath d='M6.2 9v3a3 3 0 0 0 3 3h5.3'/%3E%3C/svg%3E");
  --ic-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --ic-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
  --ic-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --ic-chevron-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --ic-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  --ic-check-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.7 2.7L16.2 9.5'/%3E%3C/svg%3E");
  --ic-x:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --ic-at:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.6'/%3E%3Cpath d='M15.6 8.4v4.8c0 1.6 1 2.6 2.4 2.6s2.5-1.2 2.5-3.8A8.5 8.5 0 1 0 17 19'/%3E%3C/svg%3E");
  --ic-clip:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5l-8.2 8.2a5 5 0 0 1-7.1-7.1l8.5-8.5a3.4 3.4 0 0 1 4.8 4.8l-8.4 8.4a1.7 1.7 0 0 1-2.4-2.4l7.7-7.7'/%3E%3C/svg%3E");
  --ic-arrow-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
  --ic-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ic-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E");
  --ic-sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l1.9 5.1 5.1 1.9-5.1 1.9L12 17.5l-1.9-5.1L5 10.5l5.1-1.9z'/%3E%3C/svg%3E");
  --ic-file:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3C/svg%3E");
  --ic-file-code:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M10.5 12l-2 2 2 2M13.5 12l2 2-2 2'/%3E%3C/svg%3E");
  --ic-file-text:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 15.5h6M9 19h3.5'/%3E%3C/svg%3E");
  --ic-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.5 2.4 3.7 5.2 3.7 8.5s-1.2 6.1-3.7 8.5c-2.5-2.4-3.7-5.2-3.7-8.5S9.5 5.9 12 3.5z'/%3E%3C/svg%3E");
  --ic-monitor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='1.5'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");
  --ic-terminal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1.5'/%3E%3Cpath d='M7 9l3 3-3 3M12.5 15H17'/%3E%3C/svg%3E");
  --ic-bolt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13.5h6L10.5 21 19 10.5h-6z'/%3E%3C/svg%3E");
  --ic-coins:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='6.5' rx='7' ry='3'/%3E%3Cpath d='M5 6.5v5c0 1.7 3.1 3 7 3s7-1.3 7-3v-5M5 11.5v5c0 1.7 3.1 3 7 3s7-1.3 7-3v-5'/%3E%3C/svg%3E");
  --ic-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E");
  --ic-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.5c0 4.6-3.2 8-7.5 9.5-4.3-1.5-7.5-4.9-7.5-9.5V6z'/%3E%3Cpath d='M8.8 12l2.2 2.2 4.2-4.4'/%3E%3C/svg%3E");
  --ic-hand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 11V5.5a1.5 1.5 0 0 1 3 0V11M11 10.5V4a1.5 1.5 0 0 1 3 0v6.5M14 10.5V5.5a1.5 1.5 0 0 1 3 0V14c0 4-2.6 7-6.5 7-2.6 0-4-1.2-5.5-3.4L3.4 15a1.6 1.6 0 0 1 2.5-1.9L8 15V8.5a1.5 1.5 0 0 1 3 0'/%3E%3C/svg%3E");
  --ic-gauge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17a8.5 8.5 0 1 1 16 0'/%3E%3Cpath d='M12 13.5l4-4.5'/%3E%3Cpath d='M4 17h16'/%3E%3C/svg%3E");
  --ic-handoff:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4.5' width='14' height='16.5' rx='1.5'/%3E%3Cpath d='M9 4.5V3h6v1.5M9 13l2.2 2.2L15.5 11'/%3E%3C/svg%3E");
  --ic-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20c1.2-3.6 4-5.4 7.5-5.4s6.3 1.8 7.5 5.4'/%3E%3C/svg%3E");
  --ic-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='3.3'/%3E%3Cpath d='M3 19.5c.9-3.2 3.1-4.8 6-4.8s5.1 1.6 6 4.8'/%3E%3Cpath d='M15.5 5.9a3.2 3.2 0 0 1 0 6.2M17.5 14.9c1.7.6 2.9 2.1 3.5 4.6'/%3E%3C/svg%3E");
  --ic-sliders:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h4M12 17h8'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='10' cy='17' r='2'/%3E%3C/svg%3E");
  --ic-more:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12h.01M12 12h.01M18.5 12h.01' stroke-width='3'/%3E%3C/svg%3E");
  --ic-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h3.5l1.7 4.3-2.2 1.4a11 11 0 0 0 5.8 5.8l1.4-2.2 4.3 1.7V19a1.5 1.5 0 0 1-1.6 1.5C10.4 20 4 13.6 3.5 6.1A1.5 1.5 0 0 1 5 4.5z'/%3E%3C/svg%3E");
  --ic-chat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v10H9.5L5 19.5v-4H4z'/%3E%3C/svg%3E");
  --ic-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.5'/%3E%3Cpath d='M3.5 6l8.5 7 8.5-7'/%3E%3C/svg%3E");
  --ic-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='1.5'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --ic-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5v13l10.5-6.5z'/%3E%3C/svg%3E");
  --ic-code:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 8L4.5 12l4 4M15.5 8l4 4-4 4'/%3E%3C/svg%3E");
  --ic-branch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='5.5' r='2'/%3E%3Ccircle cx='6' cy='18.5' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Cpath d='M6 7.5v9M18 10c0 4-4 4-10.5 7'/%3E%3C/svg%3E");
  --ic-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.8'/%3E%3C/svg%3E");
  --ic-apps:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='4' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='4' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3Crect x='13.5' y='13.5' width='6.5' height='6.5' rx='1.5'/%3E%3C/svg%3E");
  --ic-plan:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l1.5 1.5 3-3M4 13.5l1.5 1.5 3-3M11 7h9M11 14h9M11 19.5h9'/%3E%3C/svg%3E");
  --ic-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.5 2h-15z'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E");
  --ic-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5'/%3E%3C/svg%3E");
  --ic-layers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l8.5 4.5-8.5 4.5L3.5 8z'/%3E%3Cpath d='M3.5 12.5l8.5 4.5 8.5-4.5M3.5 16.5l8.5 4.5 8.5-4.5'/%3E%3C/svg%3E");
  --ic-mic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21'/%3E%3C/svg%3E");
  --ic-sidebar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1.5'/%3E%3Cpath d='M9 4v16'/%3E%3C/svg%3E");
  --ic-receipt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-2-1.4-2 1.4-2-1.4-2 1.4-2-1.4L6 21z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h4'/%3E%3C/svg%3E");
  --ic-factory:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20V10l5 3V10l5 3V6h3l1 4h3v10z'/%3E%3Cpath d='M7 17h2M11 17h2M15 17h2'/%3E%3C/svg%3E");
  --ic-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E");
  --ic-cart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 4.5h2.2l2 11h10.8l1.8-8H7'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.3'/%3E%3Ccircle cx='17' cy='19.5' r='1.3'/%3E%3C/svg%3E");
  --ic-replay:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7'/%3E%3Cpath d='M20 4.5v5h-5'/%3E%3C/svg%3E");
  --ic-send:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l16-8-6 16-2.5-6.5z'/%3E%3Cpath d='M11.5 13.5L20 4'/%3E%3C/svg%3E");
  --ic-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='1.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M4 18l5-5 4 4 3-3 4.5 4.5'/%3E%3C/svg%3E");
  --ic-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V4M4 20h16'/%3E%3Cpath d='M8 16v-4M12 16V8M16 16v-6'/%3E%3C/svg%3E");
  --ic-cpu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.5'/%3E%3Cpath d='M9.5 9.5h5v5h-5zM9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3'/%3E%3C/svg%3E");
  --ic-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 16H3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
  --ic-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --ic-ceiling:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16'/%3E%3Cpath d='M12 20V9M8 13l4-4 4 4'/%3E%3C/svg%3E");
  --ic-person:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3Cpath d='M7.2 17.6c1-2 2.7-3 4.8-3s3.8 1 4.8 3'/%3E%3C/svg%3E");
  --ic-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
  --ic-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E");
  --ic-dollar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M14.8 9.2c-.5-1-1.6-1.6-2.8-1.6-1.6 0-2.8.9-2.8 2.2 0 3 5.8 1.6 5.8 4.4 0 1.3-1.3 2.3-3 2.3-1.3 0-2.5-.6-3-1.7M12 6v1.6M12 16.5V18'/%3E%3C/svg%3E");
}
.s-ic-plus{--i:var(--ic-plus)}
.s-ic-new{--i:var(--ic-new)}
.s-ic-inbox{--i:var(--ic-inbox)}
.s-ic-folder{--i:var(--ic-folder)}
.s-ic-tasks{--i:var(--ic-tasks)}
.s-ic-workflow{--i:var(--ic-workflow)}
.s-ic-clock{--i:var(--ic-clock)}
.s-ic-search{--i:var(--ic-search)}
.s-ic-chevron-down{--i:var(--ic-chevron-down)}
.s-ic-chevron-right{--i:var(--ic-chevron-right)}
.s-ic-check{--i:var(--ic-check)}
.s-ic-check-circle{--i:var(--ic-check-circle)}
.s-ic-x{--i:var(--ic-x)}
.s-ic-at{--i:var(--ic-at)}
.s-ic-clip{--i:var(--ic-clip)}
.s-ic-arrow-up{--i:var(--ic-arrow-up)}
.s-ic-arrow-right{--i:var(--ic-arrow-right)}
.s-ic-external{--i:var(--ic-external)}
.s-ic-sparkle{--i:var(--ic-sparkle)}
.s-ic-file{--i:var(--ic-file)}
.s-ic-file-code{--i:var(--ic-file-code)}
.s-ic-file-text{--i:var(--ic-file-text)}
.s-ic-globe{--i:var(--ic-globe)}
.s-ic-monitor{--i:var(--ic-monitor)}
.s-ic-terminal{--i:var(--ic-terminal)}
.s-ic-bolt{--i:var(--ic-bolt)}
.s-ic-coins{--i:var(--ic-coins)}
.s-ic-pause{--i:var(--ic-pause)}
.s-ic-shield{--i:var(--ic-shield)}
.s-ic-hand{--i:var(--ic-hand)}
.s-ic-gauge{--i:var(--ic-gauge)}
.s-ic-handoff{--i:var(--ic-handoff)}
.s-ic-user{--i:var(--ic-user)}
.s-ic-users{--i:var(--ic-users)}
.s-ic-sliders{--i:var(--ic-sliders)}
.s-ic-more{--i:var(--ic-more)}
.s-ic-phone{--i:var(--ic-phone)}
.s-ic-chat{--i:var(--ic-chat)}
.s-ic-mail{--i:var(--ic-mail)}
.s-ic-calendar{--i:var(--ic-calendar)}
.s-ic-play{--i:var(--ic-play)}
.s-ic-code{--i:var(--ic-code)}
.s-ic-branch{--i:var(--ic-branch)}
.s-ic-eye{--i:var(--ic-eye)}
.s-ic-apps{--i:var(--ic-apps)}
.s-ic-plan{--i:var(--ic-plan)}
.s-ic-bell{--i:var(--ic-bell)}
.s-ic-lock{--i:var(--ic-lock)}
.s-ic-layers{--i:var(--ic-layers)}
.s-ic-mic{--i:var(--ic-mic)}
.s-ic-sidebar{--i:var(--ic-sidebar)}
.s-ic-receipt{--i:var(--ic-receipt)}
.s-ic-factory{--i:var(--ic-factory)}
.s-ic-box{--i:var(--ic-box)}
.s-ic-cart{--i:var(--ic-cart)}
.s-ic-replay{--i:var(--ic-replay)}
.s-ic-send{--i:var(--ic-send)}
.s-ic-image{--i:var(--ic-image)}
.s-ic-chart{--i:var(--ic-chart)}
.s-ic-cpu{--i:var(--ic-cpu)}
.s-ic-warn{--i:var(--ic-warn)}
.s-ic-info{--i:var(--ic-info)}
.s-ic-ceiling{--i:var(--ic-ceiling)}
.s-ic-person{--i:var(--ic-person)}
.s-ic-link{--i:var(--ic-link)}
.s-ic-pen{--i:var(--ic-pen)}
.s-ic-dollar{--i:var(--ic-dollar)}
/* icons:end */

/* ---- two logo rows that scroll in opposite directions (the apps Studio connects to) ---- */
.apps-marquee{margin-top:72px;padding:22px 0 26px;border-top:1px solid var(--p-line);border-bottom:1px solid var(--p-line)}
.apps-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.apps-head .docs{display:inline-flex;align-items:center;min-height:44px;font:400 12px/1.4 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-faint)}
.apps-head .docs:hover{color:var(--p-ink)}
.marquee{--gap:12px;--dur:60s;display:flex;gap:var(--gap);overflow:hidden;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee+.marquee{margin-top:10px}
.marquee-track{display:flex;flex:none;gap:var(--gap);min-width:100%;justify-content:space-around;margin:0;padding:0;list-style:none;animation:marquee var(--dur) linear infinite}
.marquee--rev .marquee-track{animation-direction:reverse;--dur:66s}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - var(--gap)))}}
.app{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 16px 0 12px;border:1px solid var(--p-line);border-radius:8px;background:rgba(255,252,246,.72);white-space:nowrap;font:600 15px/1 var(--p-sans);letter-spacing:-.01em;color:#3a3f38}
.app-logo{display:inline-grid;place-items:center;width:24px;height:24px;flex:none;color:#2d322c}
.app-logo svg{width:20px;height:20px;fill:currentColor;display:block}
html[data-motion="paused"] .marquee-track,html[data-motion="reduced"] .marquee-track{animation:none}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
@media (max-width:699px){.apps-marquee{margin-top:48px}.app{height:42px;font-size:14px;padding:0 12px 0 10px}.marquee{--dur:44s}.marquee--rev .marquee-track{--dur:48s}}
.app-logo svg.is-color{filter:grayscale(1) brightness(.45) contrast(1.4)}

/* ============================== D. SITE PAGES ============================== */
/* Every page below the homepage opens the same way as hero D: a centred page hero on the blueprint
   ground (the 12/60 grid, hatched rails, registration crosses from grip.foxora.dev), on the same golden
   type scale (body x phi = the sub line, body x phi cubed = the headline). Pages add only scoped rules,
   under .pg-<name>. Corners: buttons 6, tags 2-5, panels 10-12; never a pill. */
.bp-ground{position:relative;isolation:isolate;background-image:linear-gradient(rgba(35,41,35,.034) 1px,transparent 1px),linear-gradient(90deg,rgba(35,41,35,.034) 1px,transparent 1px),linear-gradient(rgba(35,41,35,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(35,41,35,.055) 1px,transparent 1px);background-size:12px 12px,12px 12px,60px 60px,60px 60px;background-position:center top}
.bp-ground::after{content:"";position:absolute;inset:auto 0 0 0;height:160px;z-index:-1;background:linear-gradient(180deg,rgba(246,243,235,0),var(--p-paper));pointer-events:none}
.bp-rails{position:absolute;inset:0 0 120px;z-index:-1;pointer-events:none;max-width:1440px;margin:0 auto}
.bp-rails::before,.bp-rails::after{content:"";position:absolute;top:0;bottom:0;width:26px;border-inline:1px solid rgba(35,41,35,.12);background:repeating-linear-gradient(135deg,rgba(35,41,35,.10) 0 1px,transparent 1px 7px)}
.bp-rails::before{left:12px}.bp-rails::after{right:12px}
.bp-cross{position:absolute;width:15px;height:15px;pointer-events:none;z-index:2}
.bp-cross::before,.bp-cross::after{content:"";position:absolute;background:rgba(35,41,35,.45)}
.bp-cross::before{left:7px;top:0;width:1px;height:15px}.bp-cross::after{top:7px;left:0;height:1px;width:15px}
.bp-cross--tl{left:-8px;top:-8px}.bp-cross--tr{right:-8px;top:-8px}.bp-cross--bl{left:-8px;bottom:-8px}.bp-cross--br{right:-8px;bottom:-8px}
/* a blueprint sheet: the panel a figure, film or screen sits on (hero D's stage). Add the four .bp-cross inside. */
.bp-sheet{position:relative;max-width:1360px;margin:0 auto;padding:40px 48px;border:1px solid rgba(35,41,35,.14);border-radius:10px;background:linear-gradient(180deg,rgba(239,230,216,.75),rgba(246,243,235,.6))}
.bp-note{font:400 12px/1.5 var(--p-mono);letter-spacing:.04em;color:var(--p-faint);text-align:center}
/* a blueprint annotation tag (hero D's tags): mono, outlined, square marker */
.bp-tag{display:inline-flex;align-items:center;gap:7px;height:22px;padding:0 8px 0 6px;border:1px solid currentColor;border-radius:2px;background:rgba(251,248,242,.94);font:500 12px/1 var(--p-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--p-faint)}
.bp-tag::before{content:"";width:6px;height:6px;flex:none;background:currentColor}
.bp-tag[data-k="pass"],.bp-tag[data-k="live"]{color:#2f6e4b}
.bp-tag[data-k="ask"],.bp-tag[data-k="next"]{color:#93411f}
.bp-tag[data-k="ask"]::before,.bp-tag[data-k="next"]::before{background:transparent;box-shadow:inset 0 0 0 1px currentColor}
.bp-tag[data-k="stop"]{color:#a8321f;background:#fbefec}
@media (max-width:1023px){.bp-rails{display:none}}
@media (max-width:699px){.bp-sheet{margin-inline:-20px;border-radius:0;border-inline:0;padding:28px 16px}.bp-sheet .bp-cross{display:none}}

/* the page hero */
.pg-hero{--phi:1.618;--body:clamp(17px,1.25vw,20px);--sub:calc(var(--body) * var(--phi));--h1:calc(var(--body) * 4.236);padding:89px 0 0;text-align:center}
.pg-hero--quiet{--h1:calc(var(--body) * 2.618)}
.pg-hero>.wrap{display:flex;flex-direction:column;align-items:center}
.pg-h1{margin-top:21px;max-width:15em;font:400 var(--h1)/1.02 var(--p-serif);letter-spacing:-.045em;color:var(--p-ink);text-wrap:balance}
.pg-h1 .l{display:block}
.pg-h1 em{font-style:italic;color:var(--p-copper);letter-spacing:-.035em}
.pg-sub{margin-top:13px;max-width:26em;font:400 var(--sub)/1.236 var(--p-serif);letter-spacing:-.02em;color:var(--p-ink);text-wrap:balance}
.pg-sub em{font-style:italic;color:var(--p-copper-ink)}
.pg-hero .lede{margin:21px auto 0;max-width:34em;font-size:var(--body);line-height:1.618}
.pg-hero .start{align-items:center;margin-top:34px;gap:13px}
.pg-hero .start-btns,.pg-hero .ticks{justify-content:center}
.pg-hero .meta-line{margin-top:21px;font:400 12px/1.5 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-faint)}
.pg-hero-media{margin-top:55px}
@media (max-width:699px){
  .pg-hero{--body:17px;--sub:min(calc(var(--body) * var(--phi)),7.2vw);--h1:min(calc(var(--body) * 2.618),11.8vw);padding-top:44px}
  .pg-hero--quiet{--h1:min(calc(var(--body) * 2.118),10vw)}
  .pg-hero .start{width:100%;align-items:stretch}
  .pg-hero .start-btns{flex-direction:column}
  .pg-hero .start-btns .btn{width:100%}
  .pg-hero-media{margin-top:34px}
}

/* a film (native controls, captions, poster): <figure class="film"><div class="film-frame"><video …></video></div><figcaption><span>…</span><span>…</span></figcaption></figure> */
.film{max-width:1120px;margin:0 auto}
.film-frame{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#1c1a18;box-shadow:var(--p-shadow)}
.film-frame video,.film-frame img{display:block;width:100%;height:100%;object-fit:cover}
.film figcaption,.shot figcaption{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 16px;margin-top:13px;font:400 12px/1.5 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-faint)}
/* a real screen from Foxora Studio (dark theme captures in /media): always captioned as a real screen */
.shot{margin:0}
.shot-frame{border-radius:10px;overflow:hidden;border:1px solid rgba(35,41,35,.2);background:#1c1a18;box-shadow:var(--p-shadow)}
.shot-frame img{display:block;width:100%;height:auto}
.shot figcaption>span:first-child{display:inline-flex;align-items:center;gap:8px}
.shot figcaption>span:first-child::before{content:"";width:6px;height:6px;background:var(--p-copper)}

/* questions: <div class="faq"><details><summary>Question</summary><div class="a"><p>Answer</p></div></details>…</div> */
.faq{max-width:880px;margin:0 auto;border-top:1px solid var(--p-line);text-align:left}
.faq details{border-bottom:1px solid var(--p-line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;font:400 21px/1.3 var(--p-serif);letter-spacing:-.01em;color:var(--p-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:14px;height:14px;flex:none;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;transition:transform .3s var(--p-ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--p-copper-ink)}
.faq .a{padding:0 0 24px;max-width:64ch}
.faq .a p{font-size:16px;line-height:1.65;color:var(--p-sub)}
.faq .a p+p{margin-top:10px}
.faq .a a{color:var(--p-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(35,41,35,.3)}
@media (max-width:699px){.faq summary{font-size:19px}}

/* rows of facts with a label: <dl class="kv"><div><dt>Label</dt><dd>Value</dd></div>…</dl> */
.kv{border-top:1px solid var(--p-line);text-align:left}
.kv>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px 32px;padding:16px 0;border-bottom:1px solid var(--p-line)}
.kv dt{font:400 12px/1.6 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-faint)}
.kv dd{margin:0;font-size:16px;line-height:1.55;color:var(--p-ink)}
.kv dd a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(35,41,35,.3)}
@media (max-width:699px){.kv>div{grid-template-columns:1fr}}

/* long text (legal, research): <article class="doc"> with h2 numbered by <span class="n">01</span> */
.doc{max-width:760px;margin:0 auto;text-align:left}
.doc h2{display:flex;align-items:baseline;gap:16px;margin-top:55px;padding-top:34px;border-top:1px solid var(--p-line);font:400 clamp(24px,2vw,30px)/1.2 var(--p-serif);letter-spacing:-.02em;color:var(--p-ink)}
.doc h2:first-child{margin-top:0}
.doc h2 .n{flex:none;min-width:32px;font:400 12px/1 var(--p-mono);letter-spacing:.08em;color:var(--p-copper-ink)}
.doc h3{margin-top:34px;font:600 17px/1.4 var(--p-sans);color:var(--p-ink)}
.doc p,.doc li{font-size:17px;line-height:1.7;color:var(--p-sub)}
.doc p{margin-top:13px}
.doc ul,.doc ol{margin-top:13px;padding-left:1.25em}
.doc ul{list-style:square}.doc ol{list-style:decimal}
.doc li+li{margin-top:6px}
.doc li::marker{color:var(--p-copper-ink)}
.doc a{color:var(--p-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(35,41,35,.3)}
.doc strong{color:var(--p-ink);font-weight:600}
@media (max-width:699px){.doc p,.doc li{font-size:16px}}

/* ============================== E. THE LIVE STUDIO DEMO ============================== */
/* <figure class="app-demo" data-scene="proposal"><div class="app-demo-frame"><img class="app-demo-poster" …><iframe …></iframe></div>
   <figcaption><span>…</span><button data-demo-replay>Replay</button></figcaption></figure>
   The frame is the real Foxora Studio (studio-demo/), light theme, on the app's own canvas colour. */
.app-demo{margin:0}
.app-demo-frame{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:12px;background:#e1d9ce;border:1px solid rgba(35,41,35,.16);box-shadow:var(--p-shadow)}
.app-demo-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#e1d9ce}
.app-demo-poster{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top left;transition:opacity .45s var(--p-ease);pointer-events:none}
.app-demo.is-live .app-demo-poster{opacity:0}
.app-demo figcaption{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 16px;margin-top:13px;font:400 12px/1.5 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-faint)}
.app-demo figcaption>span{display:inline-flex;align-items:center;gap:8px}
.app-demo figcaption>span::before{content:"";width:6px;height:6px;flex:none;background:var(--p-copper)}
.app-demo [data-demo-replay]{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--p-faint);cursor:pointer}
.app-demo [data-demo-replay]:hover{color:var(--p-ink)}
.app-demo [data-demo-replay]::before{content:"↻";font-size:14px;letter-spacing:0}
.app-demo.is-wide .app-demo-frame{aspect-ratio:16/10}
.app-demo-note{position:absolute;left:50%;bottom:18px;z-index:3;transform:translate(-50%,6px);margin:0;padding:8px 12px;border:1px solid rgba(35,41,35,.16);border-radius:8px;background:#faf8f4;box-shadow:0 8px 24px -12px rgba(28,25,20,.35);font:400 14px/1.4 var(--p-sans);color:#1c1a18;opacity:0;transition:opacity .25s var(--p-ease),transform .25s var(--p-ease);pointer-events:none;white-space:nowrap}
.app-demo-note.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:699px){.app-demo-note{white-space:normal;width:calc(100% - 32px);text-align:center}}
@media (max-width:1099px){.app-demo:not(.is-wide) .app-demo-frame{aspect-ratio:4/3}}
@media (max-width:699px){
  .app-demo-frame{aspect-ratio:auto;height:min(700px,172vw);border-radius:10px}
  .app-demo [data-demo-replay]{min-height:44px}
}


/* ============================== F. THE STORY'S JOINTS (homepage, 25 Sep 2026) ============================== */
/* The homepage reads as one week at Priya's agency: each chapter's label carries its day in the .lt stamp, and each
   chapter ends on a NEXT cue that hands the reader to the next one. The cue sits on the stage's wash, right-aligned
   under the demo's caption row: <p class="ch-next"><a href="#tuesday"><span class="ch-next-k">Next</span>
   <span class="ch-next-t">…</span><span class="ch-next-a" aria-hidden="true">↓</span></a></p> */
.ch-next{display:flex;justify-content:flex-end;margin-top:28px}
.ch-next a{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 0 0 18px;border-left:1px solid rgba(35,41,35,.2);font:400 12px/1.45 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-ink);text-wrap:balance}
.ch-next-k{flex:none;color:var(--p-copper-ink)}
.ch-next-k::after{content:"·";margin-left:12px;color:var(--p-faint)}
.ch-next-a{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid rgba(35,41,35,.28);border-radius:6px;font:400 14px/1 var(--p-sans);letter-spacing:0;transition:transform .25s var(--p-ease),border-color .2s}
.ch-next a:hover .ch-next-a{transform:translateY(2px);border-color:var(--p-ink)}
.ch-next a:hover .ch-next-t{text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(35,41,35,.35)}
.ch-next--wrap{margin-top:32px}
/* a mono status line under a chapter's body (Fennec: released, where it runs, what is in build) */
.ws-status{margin-top:24px;padding-top:14px;border-top:1px solid var(--p-line);max-width:min(100%,480px);font:400 12px/1.6 var(--p-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--p-faint)}
/* which plan a row needs, set quietly after its name */
.feats .plan{font:400 12px/1.3 var(--p-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--p-faint)}
.ws-explore--two{display:flex;flex-wrap:wrap;gap:12px}
/* the founder's record, at body size */
.voice .who-line--body{font-size:17px;line-height:1.6}
/* the first section after the hero's app rows (they draw their own rule) */
.sect--lead{padding-top:120px}
@media (max-width:1099px){.sect--lead{padding-top:96px}}
@media (max-width:699px){
  .sect--lead{padding-top:64px}
  .ch-next{justify-content:flex-start;margin-top:20px}
  .ch-next a{padding-left:14px;gap:10px}
  .ch-next-k::after{margin-left:10px}
  .ws-explore--two .btn{width:100%}
}
/* the day stamp in a chapter label: the .lt box, set wider for a word */
.label .lt-day{padding:0 8px;letter-spacing:.06em;white-space:nowrap}

/* ==================================================================== F. WRAP: the word (homepage #how) */
/* WRAP · THE WORD
   One conceit: the four letters are the section. W · R · A · P are set across the width at the page's display
   size (the scale of the 3,600+ number), sitting on one ink baseline. Each letter heads the column that hangs
   from it: the family, what it is for, TODAY (the product and its real status) and NEXT (what comes after,
   in development). Ruled columns, never cards: solid rules for what exists, dashed for what is coming.
   A brace gathers the four into the one line the word stands for.
   Three compositions: across (>=1000: the word in one line), hanging (700-999: each letter hangs in the margin
   of its entry), stacked (<700: letter and name share the baseline, the entry runs full width below).
   Everything here is scoped to #how.wa; colours are kit-base tokens or rgba() of the ink, forest and copper. */

#how.wa{--wa-F:clamp(112px,15vw,236px);--wa-g:28px;--wa-sw:6;--wa-rule:rgba(35,41,35,.15);--wa-dash:rgba(35,41,35,.32);--wa-base:rgba(35,41,35,.78)}
#how .wa-stage{padding-top:72px;padding-bottom:64px}

/* ---------- the letters: Playfair's own outlines, as paths, so they can draw in ---------- */
#how .wa-glyph{display:block;height:calc(var(--wa-F) * .742);width:calc(var(--wa-F) * var(--gw));overflow:visible;margin-bottom:calc(var(--wa-F) * -.02)}
#how .wa-glyph path{fill:var(--p-forest);stroke:var(--p-copper);stroke-width:var(--wa-sw);stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:0;stroke-opacity:0}
/* motion, only once wrap.js has armed the word: the outline draws in copper, forest fills it, the outline lets go */
.js-motion.wa-armed #how .wa-glyph:not(.on) path{fill-opacity:0;stroke-opacity:1;stroke-dashoffset:1;transition:none}
#how .wa-glyph.on path{transition:stroke-dashoffset 1.4s cubic-bezier(.55,.05,.25,1),fill-opacity .8s var(--p-ease) 1.05s,stroke-opacity .9s ease 1.5s}
/* Pause or reduced motion: finish at once (kit-base shortens durations but not these delays) */
html[data-motion="paused"] #how .wa-glyph path,html[data-motion="reduced"] #how .wa-glyph path{transition:none!important}

/* ---------- the parts every composition shares ---------- */
#how .wa-cell{min-width:0}
#how .wa-name{font:400 30px/1.1 var(--p-serif);letter-spacing:-.025em;color:var(--p-ink);text-wrap:balance}
#how .wa-for{font-size:15px;line-height:1.55;color:var(--p-sub);text-wrap:pretty}
#how .wa-now{display:flex;flex-direction:column;border-top:1px solid var(--wa-rule)}
#how .wa-next{border-top:1px dashed var(--wa-dash)}
#how .wa-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;min-height:24px}
#how .wa-k{font:500 12px/1.4 var(--p-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--p-copper-ink)}
#how .wa-next .wa-k{color:var(--p-faint)}
#how .wa-prod{margin-top:14px;font:400 26px/1.12 var(--p-serif);letter-spacing:-.02em;color:var(--p-ink);text-wrap:balance}
#how .wa-next .wa-prod{font-style:italic;font-size:23px;line-height:1.18;letter-spacing:-.01em}
#how .wa-meta{display:flex;flex-wrap:wrap;margin-top:8px;font:400 12px/1.5 var(--p-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--p-faint)}
#how .wa-meta span{white-space:nowrap}
#how .wa-meta span+span::before{content:"·";margin:0 .7em}
#how .wa-desc{margin-top:10px;font-size:15px;line-height:1.55;color:var(--p-sub);text-wrap:pretty}
#how .wa-now .wa-desc{margin-bottom:18px}
#how .wa-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-bottom:1px;border-bottom:1px solid rgba(35,41,35,.3);font:600 14px/1.35 var(--p-sans);color:var(--p-ink);transition:border-color .2s}
#how .wa-link:hover{border-bottom-color:var(--p-ink)}
#how .wa-la{display:inline-block;transition:transform .25s var(--p-ease)}
#how .wa-link:hover .wa-la{transform:translateX(2px)}

/* status tags: filled green = use it now; ink outline = limited or written down; dashed = in development */
#how .wa-st{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 9px;border-radius:4px;font:500 12px/1 var(--p-mono);letter-spacing:.04em;white-space:nowrap;color:var(--p-ink);box-shadow:inset 0 0 0 1px rgba(35,41,35,.34)}
#how .wa-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
#how .wa-st[data-state="live"]{background:rgba(40,102,51,.11);box-shadow:none;color:#23592d}
#how .wa-st[data-state="dev"]{box-shadow:none;outline:1px dashed rgba(35,41,35,.42);outline-offset:-1px;color:var(--p-sub)}
#how .wa-st[data-state="dev"]::before{background:transparent;border:1px solid currentColor;width:5px;height:5px}

/* the close: a brace gathers the four columns into one line */
#how .wa-close{display:flex;flex-direction:column;align-items:center;margin-top:44px;text-align:center}
#how .wa-brace{display:grid;grid-template-columns:1fr 1fr;width:100%;height:26px;color:rgba(184,83,43,.8)}
#how .wa-brace i{position:relative}
#how .wa-brace i::before,#how .wa-brace i::after{content:"";position:absolute;border:0 solid currentColor}
/* each half: the arm curls down from the outer column edge, runs in, then turns down into the point */
#how .wa-brace i:first-child::before{left:0;right:13px;top:0;height:13px;border-left-width:1.5px;border-bottom-width:1.5px;border-bottom-left-radius:13px}
#how .wa-brace i:first-child::after{right:0;top:11.5px;width:14.5px;height:14.5px;border-top-width:1.5px;border-right-width:1.5px;border-top-right-radius:13px}
#how .wa-brace i:last-child::before{right:0;left:13px;top:0;height:13px;border-right-width:1.5px;border-bottom-width:1.5px;border-bottom-right-radius:13px}
#how .wa-brace i:last-child::after{left:0;top:11.5px;width:14.5px;height:14.5px;border-top-width:1.5px;border-left-width:1.5px;border-top-left-radius:13px}
#how .wa-kick{margin-top:26px;font:500 12px/1.5 var(--p-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--p-copper-ink);text-wrap:balance}
#how .wa-thesis{margin-top:10px;font:italic 400 clamp(30px,3vw,44px)/1.12 var(--p-serif);letter-spacing:-.025em;color:var(--p-ink);text-wrap:balance}

/* ---------- ACROSS (>=1000): one grid, four columns, the rows shared through subgrid ---------- */
@media (min-width:1000px){
  #how .wa-word{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,auto)}
  #how .wa-fam{display:grid;grid-row:1 / span 4;grid-template-rows:subgrid;min-width:0}
  #how .wa-cell{padding-inline:var(--wa-g)}
  #how .wa-fam:first-child .wa-cell{padding-left:0}
  #how .wa-fam:last-child .wa-cell{padding-right:0}
  /* row 1: the word, on its baseline */
  #how .wa-letter{display:flex;align-items:flex-end;border-bottom:1.5px solid var(--wa-base)}
  /* row 2: the family and what it is for */
  #how .wa-id{padding-top:26px;padding-bottom:30px}
  #how .wa-for{margin-top:12px}
  /* row 3: today; row 4: next */
  #how .wa-now{padding-top:22px;padding-bottom:30px}
  #how .wa-next{padding-top:22px;padding-bottom:6px}
  /* the column rules: solid down to today, dashed through next */
  #how .wa-fam+.wa-fam .wa-id,#how .wa-fam+.wa-fam .wa-now{border-left:1px solid var(--wa-rule)}
  #how .wa-fam+.wa-fam .wa-next{border-left:1px dashed var(--wa-dash)}
}
@media (min-width:1000px) and (max-width:1439px){#how .wa-stage{padding-top:64px}}
@media (min-width:1000px) and (max-width:1199px){
  #how.wa{--wa-g:20px}
  #how .wa-stage{padding-inline:0}
  #how .wa-name{font-size:26px}
  #how .wa-prod{font-size:23px}
  #how .wa-next .wa-prod{font-size:21px}
  #how .wa-for,#how .wa-desc{font-size:14.5px}
  /* the meta runs as a short spec block, one item a line */
  #how .wa-meta{flex-direction:column}
  #how .wa-meta span+span::before{content:none}
}
@media (min-width:1000px) and (max-width:1099px){
  #how .wa-row{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px}
}

/* ---------- HANGING (700-999): the letter hangs in the margin of its entry; today and next side by side ---------- */
@media (max-width:999px){
  #how.wa{--wa-F:clamp(96px,19vw,160px);--wa-sw:8;--wa-lg:calc(var(--wa-F) * .93 + 24px)}
  #how .wa-stage{padding:56px 0 48px}
  #how .wa-word{display:block}
  #how .wa-fam{display:grid;grid-template-columns:var(--wa-lg) minmax(0,1fr) minmax(0,1fr);grid-template-areas:"l nm nm" ". fr fr" ". nw nx"}
  #how .wa-fam+.wa-fam{margin-top:64px}
  #how .wa-id{display:contents}
  #how .wa-letter{grid-area:l;display:flex;align-items:flex-end;border-bottom:1.5px solid var(--wa-base)}
  #how .wa-name{grid-area:nm;display:flex;align-items:flex-end;padding-bottom:calc(var(--wa-F) * .02 + 2px);border-bottom:1.5px solid var(--wa-base);font-size:34px}
  #how .wa-for{grid-area:fr;padding:20px 0 24px;font-size:16px;max-width:56ch}
  #how .wa-now{grid-area:nw;padding:20px 22px 4px 0}
  #how .wa-next{grid-area:nx;padding:20px 0 4px 22px;border-left:1px dashed var(--wa-dash)}
  #how .wa-prod{font-size:24px}
  #how .wa-next .wa-prod{font-size:22px}
  #how .wa-desc{font-size:15px}
  #how .wa-now .wa-desc{margin-bottom:16px}
  #how .wa-meta{flex-direction:column}
  #how .wa-meta span+span::before{content:none}
  #how .wa-brace{display:none}
  #how .wa-close{margin-top:72px}
  #how .wa-close::before{content:"";width:1.5px;height:40px;background:rgba(184,83,43,.8)}
  #how .wa-kick{margin-top:18px}
}

/* ---------- STACKED (<700): letter and name on one baseline, the entry runs full width below ---------- */
@media (max-width:699px){
  #how.wa{--wa-F:clamp(92px,30vw,124px);--wa-sw:10;--wa-lg:calc(var(--wa-F) * .93 + 14px)}
  #how .wa-stage{margin-inline:-20px;padding:40px 20px 36px}
  #how .wa-fam{grid-template-columns:var(--wa-lg) minmax(0,1fr);grid-template-areas:"l nm" "fr fr" "nw nw" "nx nx"}
  #how .wa-fam+.wa-fam{margin-top:60px}
  #how .wa-name{font-size:28px;line-height:1.05}
  #how .wa-for{padding:16px 0 20px;font-size:15.5px}
  #how .wa-now{padding:18px 0 22px}
  #how .wa-next{padding:18px 0 0;border-left:0}
  #how .wa-prod{font-size:24px;margin-top:12px}
  #how .wa-next .wa-prod{font-size:22px}
  #how .wa-meta{flex-direction:row}
  #how .wa-meta span+span::before{content:"·"}
  #how .wa-link{min-height:44px;margin-top:0;border-bottom:0}
  #how .wa-lt{text-decoration:underline;text-decoration-color:rgba(35,41,35,.3);text-underline-offset:4px}
  #how .wa-now .wa-desc{margin-bottom:2px}
  #how .wa-close{margin-top:56px}
  #how .wa-close::before{height:32px}
  #how .wa-thesis{font-size:30px}
}
@media (max-width:359px){
  #how .wa-name{font-size:25px}
}

/* ---------- review pass (25 Sep) ---------- */
/* versions are facts: Playfair's old-style zero set "V2.0" as "V2.o", so the section uses lining figures */
/* set on every element: the font shorthand on names and products resets an inherited value */
#how.wa,#how.wa *{font-variant-numeric:lining-nums}
/* the key: below 1000px the word never stands whole, so it is set once, small, on its own ink baseline,
   as a contents line; each letter jumps to its entry. Hidden where the word already runs across. */
#how .wa-key{display:none}
#how .wa-fam{scroll-margin-top:88px}
@media (max-width:999px){
  #how .wa-key{--wa-kF:clamp(48px,11vw,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 72px}
  #how .wa-key a{display:flex;flex-direction:column;min-height:44px;color:inherit;text-decoration:none}
  /* line-height .82 puts Playfair's baseline on the box's bottom edge, so the rule is the baseline */
  #how .wa-key b{display:block;font:400 var(--wa-kF)/.82 var(--p-serif);letter-spacing:-.02em;color:var(--p-forest);border-bottom:1.5px solid var(--wa-base)}
  #how .wa-key span{display:block;flex:1 0 auto;padding:10px 8px 0 0;font:500 12px/1.35 var(--p-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--p-sub);transition:color .2s}
  #how .wa-key a:hover span{color:var(--p-ink)}
  #how .wa-key a+a span{border-left:1px solid var(--wa-rule);padding-left:10px}
  #how .wa-key a+a b{padding-left:10px}
}
@media (max-width:699px){
  #how .wa-key{margin-bottom:56px}
  #how .wa-key a+a span,#how .wa-key a+a b{padding-left:8px}
  #how .wa-key span{padding-right:0;letter-spacing:.02em}
}
/* narrowest phones: columns sized by their names (PROTOCOLS needs its full 65px), still one unbroken baseline */
@media (max-width:359px){
  #how .wa-key{grid-template-columns:repeat(4,auto)}
}