/* The brief pins a dark, cinematic look, so both theme branches resolve to the same dark tokens. */
:root{
  --bg:#050507; --surface:#131313; --surface-2:#1c1c1c; --ink:#f5f5f7; --muted:rgba(235,235,245,.6);
  --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.2);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--display);
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#050507;--ink:#f5f5f7;--muted:rgba(235,235,245,.6)}}
:root[data-theme="dark"]{--bg:#050507;--ink:#f5f5f7;--muted:rgba(235,235,245,.6)}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{margin:0}
body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45;overflow:hidden;-webkit-font-smoothing:antialiased}
body::after{content:none;position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}

.app{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr)}

/* ---------- header ---------- */
.top{display:flex;align-items:center;gap:24px;padding:20px clamp(20px,3.5vw,52px) 12px;position:relative;z-index:5}
.brand{font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:.06em;color:var(--ink);text-decoration:none;white-space:nowrap;text-transform:uppercase}
.search{position:relative;flex:1;max-width:560px;margin-inline:auto}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.search input{width:100%;height:44px;border-radius:22px;border:1px solid var(--line);background:transparent;padding:0 42px 0 42px;font-size:14.5px;letter-spacing:.01em;outline:none;transition:border-color .25s,background .25s}
.search input::placeholder{color:#777}
.search input:focus{border-color:var(--line-strong);background:rgba(255,255,255,.06)}
.search input::-webkit-search-cancel-button{display:none}
.q-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1}
.q-clear:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.tools{display:flex;align-items:center;gap:8px}
.btn{height:40px;padding:0 16px;border:1px solid var(--line);border-radius:20px;background:transparent;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;letter-spacing:.01em;color:var(--muted);white-space:nowrap;transition:border-color .25s,background .25s,color .25s}
.btn:hover{border-color:var(--line-strong);color:var(--ink);background:transparent}
.btn svg{width:16px;height:16px}
.btn .count{font-family:var(--mono);font-size:12px;color:var(--muted)}
.chips{display:inline-flex}
.chips i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1.5px var(--bg);margin-left:-4px}
.chips i:first-child{margin-left:0}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:20px;padding:3px;height:40px}
.seg button{border:0;background:transparent;border-radius:15px;padding:0 12px;font-size:14px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.1);color:var(--ink)}

/* ---------- filters ---------- */
.filters{display:flex;align-items:center;gap:22px;padding:2px clamp(20px,3.5vw,52px) 8px;position:relative;z-index:5}
.spectrum{display:flex;gap:2px;flex:0 1 440px;min-width:220px}
.spectrum button{flex:1;height:26px;border:0;background:transparent;padding:0;display:flex;align-items:center;position:relative}
.spectrum button::before{content:"";display:block;width:100%;height:2px;border-radius:1px;background:var(--c);opacity:.75;transition:height .3s var(--ease),opacity .3s}
.spectrum.filtered button::before{opacity:.22}
.spectrum button[aria-pressed="true"]::before{height:6px;opacity:1}
.spectrum button:hover::before{opacity:1}
.sort select{height:30px;border:0;border-radius:15px;background-color:transparent;color:var(--muted);padding:0 26px 0 8px;font-size:13px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238e8e8e' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.sort select:hover{color:var(--ink)}
.sort select option{background:#131313;color:var(--ink)}
.sort select:disabled{opacity:.35}
.status{margin:0 0 0 auto;font-size:12.5px;letter-spacing:.01em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- colour card ---------- */
.card{--w:190px;position:relative;display:block;width:var(--w);height:calc(var(--w)*1.586);font-size:calc(var(--w)/10);
  border:0;padding:0;margin:0;border-radius:.72em;overflow:hidden;isolation:isolate;text-align:left;color:var(--t);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.05) 1px 2px,transparent 2px 4px),
    linear-gradient(158deg,#6c7075 0%,#cfd2d5 36%,#8b8f94 60%,#babdc1 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 1.4em 2.8em -1.2em rgba(0,0,0,.95);
  -webkit-tap-highlight-color:transparent;backface-visibility:hidden}
.card[data-tone="light"]{--t:rgba(255,255,255,.88);--emb:0 -.035em 0 rgba(0,0,0,.35),0 .04em 0 rgba(255,255,255,.14)}
.card[data-tone="dark"]{--t:rgba(0,0,0,.68);--emb:0 .045em 0 rgba(255,255,255,.34),0 -.02em 0 rgba(0,0,0,.18)}
.paint{position:absolute;inset:0;width:100%;height:100%;display:block}
.p0{fill:var(--p0)}.p1{fill:var(--p1)}.p2{fill:var(--p2)}.p3{fill:var(--p3)}.p4{fill:var(--p4)}
.sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.05) 44%,rgba(255,255,255,.38) 49%,rgba(255,255,255,.1) 53%,transparent 61%);
  background-size:280% 100%;background-position:100% 0;transition:background-position 1.2s var(--ease)}
.card:hover .sheen,.card:focus-visible .sheen{background-position:0 0}
.c-name{position:absolute;left:.5em;bottom:.8em;writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.05em;font-size:var(--nf,1em);line-height:1;
  white-space:nowrap;max-height:calc(100% - 1.8em);overflow:hidden;text-overflow:ellipsis;text-shadow:var(--emb)}
.c-hex{position:absolute;right:.6em;top:.85em;writing-mode:vertical-rl;font-family:var(--mono);font-weight:500;font-size:.66em;letter-spacing:.16em;
  color:rgba(0,0,0,.62);text-shadow:0 .05em 0 rgba(255,255,255,.4)}
.c-emblem{position:absolute;left:50%;top:50%;width:4.8em;height:4.8em;margin:-2.4em 0 0 -2.4em;border-radius:50%;
  border:.06em solid currentColor;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:1em;box-shadow:var(--embb,none)}
.c-emblem::before{content:"";position:absolute;inset:.28em;border-radius:50%;border:.035em solid currentColor;opacity:.45}
.c-emblem span{font-size:.52em;letter-spacing:.08em;line-height:1.4;text-shadow:var(--emb)}
.card.mini .c-name,.card.mini .c-hex,.card.mini .c-emblem{display:none}
.card .c-emblem{display:none}

/* ---------- stage & ring ---------- */
.stage{grid-row:3;grid-column:1;position:relative;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.stage.dragging{cursor:grabbing}
.scene{position:absolute;left:50%;top:41%;width:1440px;height:900px;margin:-450px 0 0 -720px;transform:scale(var(--s,1));perspective:800px;pointer-events:none}
.ring{position:absolute;left:50%;top:50%;transform-style:preserve-3d;will-change:transform}
.ring .card{position:absolute;left:calc(var(--w)/-2);top:calc(var(--w)*-.793);pointer-events:auto;opacity:.7;transition:opacity .35s}
.ring .card:hover{opacity:1}
.ring-card .c-emblem{display:none}
.stage{cursor:grab}
.ring .card:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),0 1.4em 2.8em -1.2em rgba(0,0,0,.95)}
.fog{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 36% 48% at 50% 40%,rgba(10,10,10,.86),rgba(10,10,10,0) 72%),
    linear-gradient(to bottom,var(--bg) 0,rgba(10,10,10,0) 12%,rgba(10,10,10,0) 64%,rgba(10,10,10,.78) 100%),
    linear-gradient(to right,rgba(10,10,10,.55),rgba(10,10,10,0) 12%,rgba(10,10,10,0) 88%,rgba(10,10,10,.55))}
.feature-wrap{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);perspective:1100px;z-index:2}
.feature-card{--w:clamp(160px,30vh,330px);--rx:2deg;--ry:-7deg;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease),opacity .25s;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 3em 6em -2em rgba(0,0,0,1),0 0 0 1px rgba(0,0,0,.5)}
.feature-card .sheen{transition:background-position .9s var(--ease)}
.hero-gl,.hero-sparks{position:absolute;z-index:2;pointer-events:none}
.stage.hero-gl-on .feature-card{background:transparent;box-shadow:0 3em 6em -2.4em rgba(0,0,0,.85)}
.stage.hero-gl-on .feature-card>*{opacity:0}
.headline{position:absolute;left:50%;bottom:clamp(14px,3.2vh,40px);transform:translateX(-50%);width:min(94vw,1500px);margin:0;z-index:3;
  text-align:center;font-weight:500;text-transform:uppercase;letter-spacing:-.035em;line-height:.92;
  font-size:clamp(30px,min(6.2vw,7.6vh),108px);color:var(--ink);text-wrap:balance;overflow-wrap:normal;pointer-events:none}
.headline.in{animation:hl-in .7s var(--ease) both}
.headline .hw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .03em .12em;margin:0 -.03em -.12em}
.headline .hw>span{display:inline-block;transform:translateY(112%);transition:transform 1s cubic-bezier(.22,1,.36,1)}
.headline.rise .hw>span{transform:none}
.headline.leave .hw>span{transform:translateY(-112%);transition:transform .42s cubic-bezier(.6,0,.8,.3)}
@media (prefers-reduced-motion:reduce){.headline .hw>span{transition:none!important;transform:none!important}}
@keyframes hl-in{from{opacity:0;transform:translate(-50%,.18em)}to{opacity:1;transform:translate(-50%,0)}}
.empty{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:4;width:min(420px,86vw);margin:0;padding:22px 24px;
  background:rgba(19,19,19,.94);border:1px solid var(--line);border-radius:14px;text-align:center;color:var(--ink);font-size:15px}
.stage.is-empty .feature-wrap,.stage.is-empty .headline{opacity:.12}
.hint{position:absolute;left:clamp(20px,3.5vw,52px);bottom:22px;margin:0;font-size:12px;color:#5c5c5c;z-index:3;transition:opacity .6s;max-width:30ch}
.hint.gone{opacity:0}
.strip{display:none}

/* ---------- grid view ---------- */
.grid{grid-row:3;grid-column:1;overflow-y:auto;position:relative;overscroll-behavior:contain}
.grid-inner{position:relative}
.grid .card{position:absolute;left:0;top:0}

/* ---------- detail ---------- */
.detail{position:fixed;inset:0;z-index:40;background:rgba(10,10,10,.93);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:grid;grid-template-columns:minmax(300px,40%) 1fr;opacity:0;transition:opacity .35s var(--ease)}
.detail.open{opacity:1}
.detail-left{display:grid;place-items:center;perspective:1200px;padding:40px;position:relative}
.detail-card{--w:min(340px,24vw,34vh);transition:transform .6s var(--ease)}
.detail-right{overflow-y:auto;padding:clamp(64px,9vh,104px) clamp(24px,6vw,88px) 72px clamp(16px,3vw,48px)}
.detail-inner{max-width:620px}
.close{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:18px;z-index:2}
.d-name{margin:0;font-size:clamp(32px,4.2vw,58px);line-height:.96;font-weight:500;letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.d-sub{margin:10px 0 0;color:var(--muted)}
.d-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.btn.primary{background:var(--ink);color:#0a0a0a;border-color:var(--ink);font-weight:500}
.btn.primary:hover{background:#fff}
.formats{margin-top:28px;border-top:1px solid var(--line)}
.fmt{display:grid;grid-template-columns:76px 1fr auto;align-items:center;width:100%;padding:15px 0;border:0;border-bottom:1px solid var(--line);background:transparent;text-align:left}
.fmt:hover{background:transparent}
.fmt:hover .v{color:#fff}
.fmt .k{font-size:12px;letter-spacing:.04em;color:var(--muted)}
.fmt .v{font-family:var(--mono);font-size:15px}
.fmt .a{font-size:12.5px;color:var(--muted);opacity:0;transition:opacity .2s}
.fmt:hover .a,.fmt:focus-visible .a{opacity:1}
.fmt:hover .a{color:var(--ink)}
.d-sec{margin-top:46px}
.d-sec h3{margin:0 0 5px;font-size:15px;font-weight:500;letter-spacing:.01em}
.d-sec .note{margin:0 0 14px;font-size:13px;color:var(--muted)}
.scale{display:flex;height:52px;border-radius:8px;overflow:hidden}
.scale button{flex:1;border:0;padding:0;background:var(--c);position:relative;transition:flex .3s var(--ease)}
.scale button:hover,.scale button:focus-visible{flex:1.8}
.scale button.base{flex:1.6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.scale-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.harm{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px 28px}
.harm h4{margin:0 0 12px;font-size:12.5px;font-weight:400;color:var(--muted)}
.minis{display:flex;gap:10px;flex-wrap:wrap}
.mini-item{display:flex;flex-direction:column;gap:6px;width:76px;border:0;background:transparent;padding:0;text-align:left}
.mini-item .card{--w:76px;pointer-events:none}
.mini-item .mn{font-size:12px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini-item .mh{font-family:var(--mono);font-size:11px;color:var(--muted)}
.mini-item:hover .mn{text-decoration:underline;text-underline-offset:2px}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ctile{border-radius:12px;padding:16px 18px;border:1px solid var(--line)}
.ctile .aa{font-size:38px;font-weight:500;letter-spacing:-.03em;line-height:1}
.ctile .ratio{font-family:var(--mono);font-size:14px;margin-top:10px}
.badges{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.badge{font-size:11.5px;letter-spacing:.02em;padding:2px 9px;border-radius:10px;border:1px solid currentColor}
.badge.pass{background:currentColor}
.badge.pass span{color:var(--bgc)}
.badge.fail{opacity:.6;border-style:dashed}

/* ---------- palette drawer ---------- */
.scrim{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.5);opacity:0;transition:opacity .3s}
.scrim.open{opacity:1}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:45;width:min(420px,100vw);background:#101010;border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .45s var(--ease);display:flex;flex-direction:column;
  padding:calc(18px + env(safe-area-inset-top,0px)) 22px calc(18px + env(safe-area-inset-bottom,0px))}
.drawer.open{transform:none}
.drawer-head{display:flex;align-items:baseline;gap:10px}
.drawer-head h2{margin:0;font-size:18px;font-weight:500;letter-spacing:-.01em}
.drawer-head .count{color:var(--muted);font-size:13px}
.drawer-head #drawer-close{margin-left:auto}
.drawer-body{overflow-y:auto;margin-top:16px;flex:1}
.pal-list{list-style:none;margin:0;padding:0}
.pal-list li{display:grid;grid-template-columns:auto 40px 1fr auto;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);background:#101010}
.pal-list li.dragging{opacity:.9;box-shadow:0 10px 30px rgba(0,0,0,.6);position:relative;z-index:2}
.grip{width:28px;height:36px;border:0;background:transparent;color:var(--muted);cursor:grab;touch-action:none;display:grid;place-items:center}
.grip:active{cursor:grabbing}
.sw{width:44px;height:44px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);border:0;padding:0}
.pal-list .pn{font-size:14px;line-height:1.25}
.pal-list .ph{font-family:var(--mono);font-size:12px;color:var(--muted)}
.linkbtn{border:0;background:transparent;color:var(--muted);font-size:13px;padding:6px}
.linkbtn:hover{color:var(--ink)}
.pal-empty{color:var(--muted);font-size:14px;margin:8px 0 0}
.export{margin-top:26px}
.export h3{margin:0 0 12px;font-size:14px;font-weight:500}
.tabs{display:flex;gap:4px;border:1px solid var(--line);border-radius:17px;padding:3px;width:max-content}
.tabs button{border:0;background:transparent;border-radius:13px;padding:4px 12px;font-size:13px;color:var(--muted)}
.tabs button[aria-selected="true"]{background:rgba(255,255,255,.1);color:var(--ink)}
.code{margin:12px 0 0;background:#0a0a0a;border:1px solid var(--line);border-radius:10px;padding:14px;font-family:var(--mono);font-size:12px;line-height:1.55;
  overflow:auto;max-height:260px;white-space:pre;user-select:text;-webkit-user-select:text}
.png-out{margin-top:12px}
.png-out img{width:100%;border-radius:10px;display:block;border:1px solid var(--line)}
.png-out p{font-size:12px;color:var(--muted);margin:8px 0 0}
.export .btn{margin-top:12px}

.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translate(-50%,16px);z-index:60;background:rgba(24,24,24,.92);color:var(--ink);border:1px solid var(--line-strong);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  padding:9px 18px;border-radius:20px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s,transform .35s var(--ease);max-width:90vw}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- studio ---------- */
.app.v-studio .filters{display:none}
.studio{grid-row:3;grid-column:1;overflow-y:auto;overscroll-behavior:contain;position:relative}
.st-wrap{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:clamp(28px,5vw,88px);max-width:1480px;margin:0 auto;padding:6px clamp(20px,3.5vw,52px) 120px}
.st-side{position:sticky;top:10px;align-self:start;display:flex;flex-direction:column;gap:18px;padding-top:10px}
.st-eyebrow,.st-label{margin:0;font-size:12px;letter-spacing:.03em;color:var(--muted)}
.st-card-wrap{perspective:1000px}
.st-card{--w:220px;transition:transform .6s var(--ease)}
.st-name{margin:0;font-size:26px;font-weight:500;letter-spacing:-.02em;line-height:1.1}
.st-desc{margin:5px 0 0;color:var(--muted);font-size:13px}
.st-field{display:flex;gap:6px;align-items:center}
.st-hexbox{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:40px;border:1px solid var(--line);border-radius:20px;padding:0 14px;transition:border-color .2s}
.st-hexbox:focus-within{border-color:var(--line-strong)}
.st-hexbox input{flex:1;min-width:0;border:0;background:transparent;font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;outline:none;text-transform:uppercase;padding:0}
.st-hexbox.bad{border-color:rgba(255,139,122,.6)}
.st-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.btn.icon{width:40px;padding:0;justify-content:center;flex:0 0 auto}
.st-sliders{display:grid;gap:13px}
.sl{display:grid;grid-template-columns:74px 1fr 38px;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.sl output{font-family:var(--mono);font-size:12px;text-align:right;color:var(--ink)}
.sl input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--track,#333);outline:none;margin:0;cursor:pointer}
.sl input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.5)}
.sl input::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.5)}
.sl input:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.st-recent{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.st-recent button{width:22px;height:22px;border-radius:50%;border:0;padding:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:transform .2s var(--ease)}
.st-recent button:hover{transform:scale(1.15)}
.st-main{min-width:0}
.st-nav{position:sticky;top:0;z-index:4;display:flex;gap:2px;overflow-x:auto;padding:10px 0 14px;margin-bottom:4px;background:linear-gradient(var(--bg) 72%,rgba(10,10,10,0));scrollbar-width:none}
.st-nav::-webkit-scrollbar{display:none}
.st-nav a{flex:0 0 auto;font-size:13px;color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:15px;transition:color .2s,background .2s}
.st-nav a:hover{color:var(--ink)}
.st-nav a[aria-current="true"]{color:var(--ink);background:rgba(255,255,255,.08)}
.st-sec{padding:46px 0 38px;border-top:1px solid var(--line);scroll-margin-top:54px}
.st-sec:first-of-type{border-top:0;padding-top:14px}
.st-head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
.st-num{font-family:var(--mono);font-size:12px;color:var(--muted)}
.st-head h2{margin:0;font-size:24px;font-weight:500;letter-spacing:-.02em}
.st-head p{margin:0 0 0 auto;font-size:12.5px;color:var(--muted);max-width:46ch;text-align:right}
.studio .note{margin:0 0 14px;font-size:13px;color:var(--muted)}
.st-sub{margin-top:44px}
.st-sub h3,.blk h3{margin:0 0 4px;font-size:16px;font-weight:500;letter-spacing:-.01em}
.blk h4{margin:0 0 4px;font-size:14px;font-weight:500}
.chips-row{display:flex;flex-wrap:wrap;gap:6px}
.chip{height:32px;padding:0 13px;border:1px solid var(--line);border-radius:16px;background:transparent;font-size:13px;color:var(--muted);transition:color .2s,border-color .2s,background .2s;white-space:nowrap}
.chip:hover{color:var(--ink);border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:rgba(255,255,255,.1);border-color:transparent;color:var(--ink)}
.fsel{height:32px;border:1px solid var(--line);border-radius:16px;background-color:transparent;color:var(--ink);padding:0 28px 0 12px;font-size:13px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237c7c7c' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.fsel.on{border-color:var(--line-strong);background-color:rgba(255,255,255,.06)}
.fsel option{background:#131313;color:var(--ink)}
.fsel.lg{height:40px;border-radius:20px;padding:0 34px 0 14px;font-size:14px}
.btn.sm{height:34px;font-size:13px;padding:0 13px}
.linkbtn.sm{font-size:12.5px;padding:4px 8px}

/* analysis */
.an-lede{font-size:clamp(19px,1.9vw,25px);line-height:1.32;letter-spacing:-.015em;margin:0 0 26px;max-width:40ch;font-weight:400;color:var(--ink)}
.an-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.stat{background:var(--bg);padding:15px 18px}
.stat .k{font-size:12px;color:var(--muted)}
.stat .v{font-size:20px;margin-top:6px;letter-spacing:-.01em}
.stat .s{font-size:12px;color:var(--muted);margin-top:1px}
.fmt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fchip{display:inline-flex;gap:10px;align-items:center;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:17px;background:transparent;font-family:var(--mono);font-size:12.5px;transition:border-color .2s}
.fchip span{font-family:var(--sans);color:var(--muted);font-size:11.5px;letter-spacing:.04em}
.fchip:hover{border-color:var(--line-strong)}
.temp{margin-top:34px}
.temp-bar{position:relative;height:4px;border-radius:2px;background:linear-gradient(90deg,#d9612c,#e3ad4b,#8f8f8f,#49a1c7,#3d5ad2);margin:14px 0 9px}
.temp-bar i{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--c);transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--bg),0 0 0 3px rgba(255,255,255,.55);transition:left .5s var(--ease)}
.temp-lbl{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:24px}

/* strips */
.pstrip{display:flex;height:84px;border-radius:14px;overflow:hidden}
.pstrip.sm{height:52px;border-radius:10px}
.pstrip.lg{height:110px;border-radius:16px}
.psw{flex:1;border:0;padding:0;background:var(--c);position:relative;transition:flex .4s var(--ease);min-width:0}
.psw:hover,.psw:focus-visible{flex:1.8}
.psw span{position:absolute;left:10px;bottom:8px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;opacity:0;transition:opacity .2s;white-space:nowrap}
.psw[data-tone=light] span{color:rgba(255,255,255,.92)}
.psw[data-tone=dark] span{color:rgba(0,0,0,.72)}
.psw:hover span,.psw:focus-visible span{opacity:1}
.psw:focus-visible{outline-offset:-3px}

/* palette rows */
.plist{display:grid;gap:28px}
.prow{display:grid;gap:10px}
.pmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ptitle{font-size:14px;font-weight:500}
.ptitle small{font-weight:400;color:var(--muted);font-size:12.5px;margin-left:6px}
.match{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--muted);white-space:nowrap}
.match i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.16)}
.match i:nth-of-type(4){margin-right:7px}
.match.m1 i:nth-of-type(-n+1),.match.m2 i:nth-of-type(-n+2),.match.m3 i:nth-of-type(-n+3),.match.m4 i:nth-of-type(-n+4){background:var(--ink)}
.pact{margin-left:auto;display:flex;gap:0}
.two .pact{margin-left:-8px;width:100%}
.pmeta{row-gap:4px}
.pwhy{margin:0;font-size:13px;line-height:1.5;color:var(--muted);max-width:82ch}
.filters2{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:26px}
.filters2 .count{font-size:12.5px;color:var(--muted);margin-left:auto}
.more{margin-top:24px}
.empty-note{padding:28px;border:1px dashed var(--line-strong);border-radius:14px;color:var(--muted);font-size:14px;text-align:center}

/* explorer */
.ex-flow{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.ex-step{display:grid;gap:7px}
.ex-base{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 15px;border:1px solid var(--line);border-radius:20px;font-family:var(--mono);font-size:13px}
.ex-base i{width:14px;height:14px;border-radius:50%}
.ex-arrow{color:var(--muted);height:40px;display:flex;align-items:center;font-size:15px}
.seg.sm{height:40px;border-radius:20px}
.seg.sm button{min-width:36px;padding:0 10px;border-radius:16px}
.ex-from{display:flex;align-items:center;gap:10px;margin:-6px 0 18px;font-size:13px;color:var(--muted)}
.ex-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.ccard{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#0d0d0d;animation:rise .55s var(--ease) both}
.ccard:nth-child(2){animation-delay:.04s}.ccard:nth-child(3){animation-delay:.08s}.ccard:nth-child(4){animation-delay:.12s}.ccard:nth-child(5){animation-delay:.16s}.ccard:nth-child(6){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cc-prev{height:168px;position:relative;display:flex;align-items:flex-end;justify-content:space-between;padding:12px;gap:8px}
.cc-prev[data-tone=light]{color:rgba(255,255,255,.92)}
.cc-prev[data-tone=dark]{color:rgba(0,0,0,.74)}
.cc-label{font-size:12px;letter-spacing:.01em}
.cc-copy{border:1px solid currentColor;background:transparent;color:inherit;border-radius:14px;height:28px;padding:0 11px;font-size:12px;opacity:.75;transition:opacity .2s}
.cc-copy:hover{opacity:1}
.cc-body{padding:12px 14px 12px}
.cc-name{margin:0 0 8px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-row{display:flex;justify-content:space-between;gap:8px;width:100%;border:0;border-top:1px solid var(--line);background:transparent;padding:6px 0;font-size:11px;color:var(--muted);text-align:left}
.cc-row b{font-family:var(--mono);font-weight:400;color:var(--ink);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-row:hover b{color:#fff}
.cc-use{margin-top:4px;padding:5px 0;font-size:12.5px}
.verdict{display:flex;gap:14px;align-items:baseline;margin:20px 0 0;flex-wrap:wrap}
.verdict p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:74ch;flex:1;min-width:260px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.png-prev{margin-top:14px}
.png-prev img{width:100%;max-width:640px;display:block;border-radius:12px;border:1px solid var(--line)}
.png-prev p{font-size:12px;color:var(--muted);margin:8px 0 0}

/* mood & use case */
.uc-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:30px;margin-top:24px;align-items:start}
.uc-why{margin:0 0 18px;font-size:14px;line-height:1.5;color:var(--ink);max-width:52ch}
.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px 12px}
.role{border:0;background:transparent;padding:0;text-align:left;display:grid;gap:5px;min-width:0;align-content:start}
.role i{display:block;height:56px;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:transform .25s var(--ease)}
.role:hover i{transform:translateY(-2px)}
.role b{font-weight:500;font-size:12.5px}
.role span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.role em{font-style:normal;font-size:11px;color:var(--muted)}
.mock{border-radius:18px;padding:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.um-card{border:1px solid;border-radius:14px;padding:18px}
.um-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.um-logo{width:22px;height:22px;border-radius:7px}
.um-bar{flex:1;height:6px;border-radius:3px}
.um-card h4{margin:0 0 4px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.um-card p{margin:0 0 16px;font-size:13px}
.um-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.um-btn{font-size:12.5px;padding:7px 14px;border-radius:9px;font-weight:500}
.um-ghost{border:1px solid}
.um-chip{font-size:11.5px;padding:3px 9px;border-radius:10px;font-weight:500}
.um-status{display:flex;gap:14px;margin-top:16px;padding-top:12px;border-top:1px solid;font-size:12px;flex-wrap:wrap}
.um-status span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.sm-slide{aspect-ratio:16/9;border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sm-slide h4{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em}
.sm-slide p{margin:6px 0 0;font-size:12px}
.sm-bars{display:flex;align-items:flex-end;gap:10px;margin-top:auto;height:44%}
.sm-bars i{flex:1;border-radius:4px 4px 0 0}
.sm-poster{aspect-ratio:4/5;max-width:300px;border-radius:14px;position:relative;overflow:hidden;padding:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.sm-poster .pc{position:absolute;right:-14%;top:20%;width:72%;aspect-ratio:1;border-radius:50%}
.sm-poster .pb{position:absolute;left:0;right:0;bottom:24%;height:9%}
.sm-poster h4{position:relative;margin:0;font-size:40px;line-height:.9;font-weight:700;letter-spacing:-.04em;text-transform:uppercase;max-width:6ch}
.sm-poster p{position:absolute;left:24px;bottom:18px;margin:0;font-size:12px;font-weight:500}
.wt{display:flex;height:190px;border-radius:14px;overflow:hidden}
.wt i{background:var(--c);display:flex;align-items:flex-end;padding:9px;font-style:normal;font-size:11px;min-width:0;white-space:nowrap;overflow:hidden}
.wt i[data-tone=light]{color:rgba(255,255,255,.9)}
.wt i[data-tone=dark]{color:rgba(0,0,0,.7)}
.mood-list{display:grid;gap:26px;margin-top:24px}

/* accessibility */
.ac-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
.ac-prev{border-radius:18px;padding:28px;min-height:290px;display:flex;flex-direction:column;gap:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .3s,color .3s}
.ac-aa{font-size:64px;font-weight:500;letter-spacing:-.03em;line-height:1}
.ac-large{font-size:24px;margin:6px 0 0;letter-spacing:-.01em}
.ac-small{font-size:15px;margin:0;max-width:40ch;line-height:1.5}
.ac-ui{display:flex;gap:14px;align-items:center;margin-top:auto}
.ac-btnm{border:1.5px solid;border-radius:18px;padding:7px 16px;font-size:14px}
.ac-input{width:110px;height:34px;border:1.5px solid;border-radius:8px}
.ac-pickers{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.acp{display:grid;gap:7px;flex:1;min-width:150px}
.acp-presets{display:flex;gap:2px;flex-wrap:wrap}
.acp-presets button{border:0;background:transparent;color:var(--muted);font-size:12px;padding:3px 7px;border-radius:8px}
.acp-presets button:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.ac-swap{margin-top:19px}
.ac-ratio{margin:24px 0 12px;display:flex;align-items:baseline;gap:8px}
.ac-ratio b{font-size:46px;font-weight:500;letter-spacing:-.03em;line-height:1}
.ac-ratio span{color:var(--muted);font-size:14px}
.checks{border-top:1px solid var(--line);margin-bottom:18px}
.check{display:grid;grid-template-columns:1fr auto 64px;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.check .t{color:var(--muted);font-family:var(--mono);font-size:12px}
.pf{font-size:12px;display:inline-flex;align-items:center;gap:6px;justify-self:end}
.pf::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pf.pass{color:#86d7a0}
.pf.fail{color:#ff8e7e}
.alts-wrap{margin-top:22px}
.alts{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:12px}
.alt{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:transparent;padding:0;text-align:left;transition:border-color .2s;animation:rise .45s var(--ease) both}
.alt:hover{border-color:var(--line-strong)}
.alt .ap{height:84px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:500;letter-spacing:-.02em}
.alt .ab{padding:10px 12px 12px;display:grid;gap:3px;font-size:12.5px}
.alt .ab b{font-weight:500}
.alt .ab span{color:var(--muted);font-size:12px}
.alt .ab code{font-family:var(--mono);font-size:12px}
.alt .ab u{text-decoration:none;color:var(--ink);font-size:12px;margin-top:4px}
.tp-bgs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:16px}
.tp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
.tp-prev{border-radius:18px;padding:26px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);display:flex;flex-direction:column;gap:10px;transition:background .3s}
.tp-prev h4{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.tp-prev p{margin:0;font-size:14px;line-height:1.5}
.tp-prev .tp-link{font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.tp-prev hr{border:0;border-top:1px solid;margin:8px 0;width:100%}
.tp-icons{display:flex;gap:14px}
.tp-icons svg{width:22px;height:22px}
.tp-list{border-top:1px solid var(--line)}
.tp-row{display:grid;grid-template-columns:28px 1fr auto auto;gap:12px;align-items:center;padding:10px 0;border:0;border-bottom:1px solid var(--line);background:transparent;width:100%;text-align:left;font-size:13.5px}
.tp-row i{width:28px;height:28px;border-radius:8px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tp-row code{font-family:var(--mono);font-size:12px;color:var(--muted)}
.tp-row small{font-family:var(--mono);font-size:11.5px;color:var(--muted);min-width:52px;text-align:right}
.tp-row:hover code{color:var(--ink)}

/* shades */
.range-row{display:flex;align-items:center;gap:14px;margin-bottom:22px;font-size:13px;color:var(--muted)}
.range-row .sl{grid-template-columns:auto 200px 30px}
.scale-rows{display:grid;gap:14px}
.srow{display:grid;grid-template-columns:74px 1fr;gap:16px;align-items:center}
.srow > span{font-size:12.5px;color:var(--muted)}
.sstrip{display:flex;height:44px;border-radius:10px;overflow:hidden}
.sstrip button{flex:1;border:0;padding:0;background:var(--c);min-width:0;transition:flex .3s var(--ease)}
.sstrip button:hover,.sstrip button:focus-visible{flex:2.2}
.sstrip button.base{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.sysscale{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:6px;margin-top:14px}
.sys{border:0;background:transparent;padding:0;text-align:left;display:grid;gap:6px;min-width:0;align-content:start}
.sys i{height:64px;border-radius:10px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sys.base i{box-shadow:0 0 0 1.5px var(--bg),0 0 0 2.5px var(--ink)}
.sys b{font-size:12px;font-weight:500}
.sys span{font-family:var(--mono);font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis}

/* gradients */
.grads{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.gtile{display:grid;gap:10px;min-width:0;align-content:start}
.gprev{width:100%;aspect-ratio:16/10;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ghead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ghead b{font-weight:500;font-size:14px}
.gtile .note{margin:0}
.gcode{margin:0;font-family:var(--mono);font-size:11.5px;line-height:1.6;color:#b9b9b9;background:#0d0d0d;border:1px solid var(--line);border-radius:10px;padding:10px 12px;white-space:pre-wrap;word-break:break-all;user-select:text;-webkit-user-select:text}

/* ---------- studio: editorial premium pass ---------- */
.st-wrap{gap:clamp(36px,6vw,110px);padding-top:10px}
.st-eyebrow,.st-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6f6f6f}
.st-side{gap:22px;padding-top:14px}
.st-name{font-family:var(--serif);font-weight:500;font-size:30px;letter-spacing:-.005em;line-height:1.08}
.st-desc{font-size:12.5px;color:#6f6f6f;margin-top:8px}
.st-hexbox{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.025)}
.btn.icon{border-color:rgba(255,255,255,.07)}
.sl{grid-template-columns:70px 1fr 38px;font-size:12px}
.sl input{height:4px;border-radius:2px}
.sl input::-webkit-slider-thumb{width:14px;height:14px}
.sl input::-moz-range-thumb{width:14px;height:14px}
.st-recent button{width:20px;height:20px}

.st-nav{padding:14px 0 18px;gap:0}
.st-nav a{font-size:12.5px;padding:6px 13px}
.st-sec{padding:96px 0 20px;border-top:0;scroll-margin-top:60px}
.st-sec:first-of-type{padding-top:26px}
.st-head{display:block;margin-bottom:40px}
.st-num{display:block;font-size:11px;letter-spacing:.14em;color:#5f5f5f;margin-bottom:14px}
.st-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.2vw,44px);letter-spacing:-.01em;line-height:1.02}
.st-head p{margin:14px 0 0;text-align:left;max-width:56ch;font-size:14px;color:#7a7a7a}
.st-sub{margin-top:72px}
.st-sub h3{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:-.005em;margin-bottom:8px}
.studio .note{color:#747474}

/* analysis */
.an-lede{font-size:clamp(21px,2vw,27px);line-height:1.35;letter-spacing:-.018em;max-width:34ch;margin-bottom:12px}
.an-sub{font-size:14.5px;line-height:1.6;color:#7f7f7f;max-width:58ch;margin:0 0 44px}
.an-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 36px;background:none;border:0;border-radius:0;overflow:visible}
.stat{background:none;padding:16px 0 0;border-top:1px solid var(--line)}
.stat .k{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#666}
.stat .v{font-size:28px;font-weight:400;margin-top:12px;letter-spacing:-.02em}
.stat .s{font-size:12.5px;margin-top:4px;color:#6f6f6f}
.fmt-chips{margin-top:40px;gap:4px}
.fchip{border:0;background:rgba(255,255,255,.035);height:36px;border-radius:18px;padding:0 15px;transition:background .2s}
.fchip:hover{background:rgba(255,255,255,.08)}
.temp{margin-top:72px}
.temp .blk h3{font-family:var(--serif);font-weight:500;font-size:24px}
.temp-bar{height:2px;margin:22px 0 12px}
.temp-lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#5f5f5f}
.two{gap:36px;margin-top:40px}

/* chips: borderless tabs */
.chip{border-color:transparent;background:transparent;color:#7d7d7d;height:34px;padding:0 14px;border-radius:17px}
.chip:hover{border-color:transparent;background:rgba(255,255,255,.05)}
.chip[aria-pressed="true"]{background:rgba(255,255,255,.1);color:var(--ink)}
.chips-row{gap:2px}

/* palette rows */
.plist{gap:52px}
.prow{gap:14px}
.pstrip{height:104px;border-radius:18px}
.pstrip.sm{height:60px;border-radius:12px}
.two .pstrip{height:84px}
.psw span{left:12px;bottom:10px;font-size:10.5px;letter-spacing:.08em}
.pmeta{gap:16px}
.ptitle{font-size:15px;font-weight:500;letter-spacing:-.005em}
.ptitle small{font-size:12px;color:#666;margin-left:8px}
.match{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#777}
.match i{width:5px;height:5px}
.pwhy{font-size:13.5px;line-height:1.6;color:#727272;max-width:66ch}
.pact .linkbtn{color:#8a8a8a}
@media (hover:hover){
  .prow .pact{opacity:0;transform:translateX(4px);transition:opacity .25s,transform .35s var(--ease)}
  .prow:hover .pact,.prow:focus-within .pact{opacity:1;transform:none}
}
.two .pact{display:none}

/* refine */
.refine-bar{display:flex;align-items:center;gap:14px;margin-bottom:34px}
.refine-bar .count{font-size:12px;letter-spacing:.06em;color:#666;margin-left:auto}
.refine-n{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--ink);color:#0a0a0a;font-size:11px;font-weight:600;margin-left:2px;padding:0 5px}
.filters2{margin:-14px 0 40px;padding:18px;border-radius:18px;background:rgba(255,255,255,.025);gap:6px}
.fsel{border-color:transparent;background-color:rgba(255,255,255,.04)}
.fsel:hover{background-color:rgba(255,255,255,.07)}
.fsel.on{border-color:transparent;background-color:rgba(255,255,255,.12)}

/* explorer */
.ex-flow{gap:16px;margin-bottom:34px}
.ex-base,.fsel.lg{border:0;background-color:rgba(255,255,255,.04)}
.ex-arrow{color:#4f4f4f}
.seg.sm{border-color:transparent;background:rgba(255,255,255,.04)}
.ex-cards{gap:18px}
.ccard{border:0;background:none;border-radius:0;overflow:visible}
.cc-prev{height:220px;border-radius:20px;padding:14px}
.cc-copy{opacity:0;border-color:transparent;background:rgba(0,0,0,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cc-prev[data-tone=dark] .cc-copy{background:rgba(255,255,255,.35)}
.ccard:hover .cc-copy,.cc-copy:focus-visible{opacity:1}
.cc-body{padding:16px 2px 0}
.cc-name{font-size:14px;font-weight:500;margin-bottom:10px}
.cc-row{border-top:0;padding:3px 0;font-size:10.5px;letter-spacing:.08em;color:#5f5f5f}
.cc-row b{font-size:11.5px;color:#a9a9a9;letter-spacing:0}
.cc-use{color:#7a7a7a;margin-top:8px}
.verdict{margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.verdict p{font-size:14px;color:#7f7f7f}
.actions{margin-top:22px;gap:8px;align-items:center}
.actions .btn{border-color:rgba(255,255,255,.08)}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:10px;height:10px;transition:transform .3s var(--ease)}
.menu[open] summary svg{transform:rotate(180deg)}
.menu-pop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;min-width:210px;padding:6px;border-radius:14px;background:rgba(24,24,24,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 50px rgba(0,0,0,.55);display:grid;animation:rise .25s var(--ease) both}
.menu-pop button{border:0;background:transparent;text-align:left;padding:9px 12px;border-radius:9px;font-size:13px;color:#cfcfcf}
.menu-pop button:hover{background:rgba(255,255,255,.07);color:#fff}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:4px 6px}

/* use cases */
.uc-body{gap:48px;margin-top:40px}
.uc-why{font-size:15px;line-height:1.6;color:#a5a5a5;max-width:48ch;margin-bottom:28px}
.roles{gap:20px 14px}
.role i{height:64px;border-radius:12px}
.role b{font-size:12.5px;margin-top:4px}
.role span{color:#6f6f6f}
.role em{color:#5a5a5a;font-size:10.5px}
.mock{border-radius:22px;padding:28px}

/* accessibility */
.ac-grid{gap:40px}
.ac-prev{border-radius:22px;padding:34px;min-height:320px}
.ac-ratio b{font-family:var(--serif);font-weight:500;font-size:60px;letter-spacing:-.02em}
.checks{border-top:0}
.check{border-bottom-color:rgba(255,255,255,.06)}
.st-hexbox.slim{height:34px}
.tp-prev{border-radius:22px;padding:30px}

/* shades */
.sstrip{height:52px;border-radius:12px}
.srow{grid-template-columns:84px 1fr}
.srow > span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#666}
.sys i{height:76px;border-radius:12px}

/* gradients */
.grads{gap:40px 24px}
.gprev{border-radius:20px}
.ghead b{font-family:var(--serif);font-weight:500;font-size:20px}
.gcode-wrap summary{list-style:none;cursor:pointer;font-size:12.5px;color:#7a7a7a;width:max-content}
.gcode-wrap summary::-webkit-details-marker{display:none}
.gcode-wrap summary:hover{color:var(--ink)}
.gcode-wrap .gcode{margin-top:10px}

/* downloads (only shown when the viewer supports file saves) */
[data-dl]{display:none!important}
.has-dl [data-dl]{display:inline-flex!important}
.has-dl [data-nodl]{display:none!important}

@media (max-width:980px){
  .st-wrap{grid-template-columns:1fr;gap:10px}
  .st-side{position:relative;top:auto;display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px 18px;align-items:start}
  .st-eyebrow{grid-column:1/-1}
  .st-card-wrap{grid-row:span 2}
  .st-card{--w:118px}
  .st-field,.st-sliders,.st-recent-wrap{grid-column:1/-1}
  .st-head p{display:none}
  .uc-body,.ac-grid,.tp,.two{grid-template-columns:1fr}
  .sysscale{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:719px){
  .st-wrap{padding:4px 16px 90px}
  .srow{grid-template-columns:1fr;gap:6px}
  .range-row .sl{grid-template-columns:auto 1fr 30px;flex:1}
  .pstrip{height:70px}
  .ex-arrow{display:none}
  .check{grid-template-columns:1fr auto 56px}
}

/* ---------- mobile ---------- */
@media (max-width:719px){
  .top{flex-wrap:wrap;gap:10px 8px;padding-top:12px}
  .brand{font-size:15px;letter-spacing:.05em;margin-right:auto}
  .top{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand tools" "views views" "search search";gap:12px 8px;padding:14px 16px 10px}
  .brand{grid-area:brand}.tools{grid-area:tools}
  .views{grid-area:views;display:flex}.views button{flex:1}
  .search{grid-area:search;width:100%;margin:0}
  .brand{overflow:hidden;text-overflow:ellipsis}
  .tools{gap:6px}
  .btn{height:36px;padding:0 10px}
  .seg{height:36px}
  .seg button{padding:0 9px;font-size:13px}
  .filters{padding:2px 16px 8px}
  .strip-card .c-emblem{display:none}
  .search{order:3;flex-basis:100%;max-width:none}
  .btn .lbl{display:none}
  .btn{padding:0 11px}
  .seg button{padding:0 10px}
  .filters{flex-wrap:wrap;gap:8px 12px}
  .spectrum{flex-basis:100%}
  .stage{overflow-y:auto;touch-action:auto;display:flex;flex-direction:column;align-items:center;padding:14px 0 24px;user-select:auto}
  .scene,.fog,.hint{display:none}
  .feature-wrap{position:relative;left:auto;top:auto;transform:none;margin:4px auto 0}
  .feature-card{--w:min(54vw,36vh,250px)}
  .headline{position:relative;left:auto;bottom:auto;transform:none;margin:22px auto 0;width:92vw;font-size:clamp(30px,10.5vw,54px)}
  @keyframes hl-in{from{opacity:0;transform:translateY(.18em)}to{opacity:1;transform:none}}
  .empty{position:relative;left:auto;top:auto;transform:none;margin:0 auto 14px}
  .strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;width:100%;padding:24px 16px 8px;flex-shrink:0;scrollbar-width:none}
  .strip::-webkit-scrollbar{display:none}
  .strip .card{flex:0 0 auto;scroll-snap-align:center}
  .detail{grid-template-columns:1fr;overflow-y:auto;align-content:start}
  .detail-left{padding:64px 20px 8px}
  .detail-card{--w:min(52vw,230px)}
  .detail-right{overflow:visible;padding:20px 20px 60px}
  .contrast{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* ================= iOS glass design language ================= */
@property --a1{syntax:'<color>';inherits:true;initial-value:#1f3fd9}
@property --a2{syntax:'<color>';inherits:true;initial-value:#6a2bd9}
@property --a3{syntax:'<color>';inherits:true;initial-value:#0aa0d9}
:root{
  --muted-2:rgba(235,235,245,.36);
  --glass:rgba(255,255,255,.06); --glass-hi:rgba(255,255,255,.12);
  --glass-blur:blur(30px) saturate(180%);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 0 1px rgba(255,255,255,.07),0 10px 36px -12px rgba(0,0,0,.55);
  --spring:cubic-bezier(.34,1.36,.64,1);
  transition:--a1 1.4s ease,--a2 1.4s ease,--a3 1.4s ease;
}
body{background:#050507;letter-spacing:-.011em}
.app{position:relative;z-index:1}
.ambient{position:fixed;inset:-12%;z-index:0;pointer-events:none;opacity:.78;
  background:
    radial-gradient(38% 42% at 20% 16%,color-mix(in oklab,var(--a1) 60%,transparent),transparent 70%),
    radial-gradient(36% 40% at 84% 22%,color-mix(in oklab,var(--a2) 50%,transparent),transparent 70%),
    radial-gradient(48% 46% at 58% 96%,color-mix(in oklab,var(--a3) 44%,transparent),transparent 72%);
  animation:drift 30s ease-in-out infinite alternate}
.ambient::after{content:"";position:absolute;inset:0;background:radial-gradient(110% 85% at 50% 42%,transparent 35%,rgba(5,5,7,.72))}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2.5%,-2%,0) scale(1.07)}100%{transform:translate3d(-2%,1.5%,0) scale(1.02)}}

/* header */
.top{padding:16px clamp(16px,3vw,44px) 10px;gap:16px}
.brand{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.025em;text-transform:none;display:inline-flex;align-items:center;gap:10px}
.brand::before{content:"";flex:0 0 auto;width:28px;height:28px;border-radius:8px;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.95) 0 18%,transparent 19%),conic-gradient(from 200deg,#ff375f,#ff9f0a,#ffd60a,#30d158,#64d2ff,#0a84ff,#bf5af2,#ff375f);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 1px rgba(255,255,255,.5),0 6px 16px -4px rgba(0,0,0,.6)}
.search svg{left:16px;color:var(--muted)}
.search input{height:42px;border:0;border-radius:21px;background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);font-size:15px;padding:0 42px 0 44px;transition:background .3s,box-shadow .3s}
.search input::placeholder{color:var(--muted-2)}
.search input:focus{background:var(--glass-hi);border:0;box-shadow:var(--glass-shadow),0 0 0 4px rgba(255,255,255,.07)}
.btn{height:40px;padding:0 16px;border:0;border-radius:999px;background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);
  color:var(--ink);font-size:14px;font-weight:500;letter-spacing:-.01em;transition:background .25s,transform .45s var(--spring),box-shadow .25s,opacity .25s}
.btn:hover{background:var(--glass-hi);border:0;color:var(--ink)}
.btn:active{transform:scale(.94)}
.btn.primary{background:#f5f5f7;color:#000;box-shadow:inset 0 1px 0 #fff,0 8px 22px -8px rgba(0,0,0,.6);font-weight:600}
.btn.primary:hover{background:#fff}
.btn.icon{width:40px;border-radius:50%}
.btn .count{color:var(--muted);font-family:var(--sans);font-variant-numeric:tabular-nums}
.linkbtn{color:var(--muted);font-weight:500;border-radius:999px;transition:color .2s,background .2s}
.linkbtn:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.seg{border:0;border-radius:999px;padding:4px;height:42px;background:rgba(255,255,255,.055);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);position:relative}
.seg button{border-radius:999px;color:var(--muted);font-weight:500;font-size:14px;letter-spacing:-.01em;position:relative;z-index:1;transition:color .3s,background .3s,box-shadow .3s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.17);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 12px -4px rgba(0,0,0,.55)}
.views button{flex:1 1 0;min-width:80px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.views button[aria-pressed="true"]{background:transparent;box-shadow:none}
.views::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/3);border-radius:999px;background:rgba(255,255,255,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 4px 14px -4px rgba(0,0,0,.6);transform:translateX(calc(var(--vi,0)*100%));transition:transform .55s var(--spring)}
.views svg{display:none;width:20px;height:20px}

/* filters */
.filters{padding:4px clamp(16px,3vw,44px) 8px}
.spectrum{gap:4px}
.spectrum button::before{height:4px;border-radius:2px;opacity:.8}
.spectrum button[aria-pressed="true"]::before{height:8px;border-radius:4px}
.sort select{height:32px;border-radius:999px;background-color:var(--glass);color:var(--ink);padding:0 30px 0 14px;font-weight:500;box-shadow:var(--glass-shadow)}
.status{color:var(--muted)}

/* cards & gallery */
.c-name{font-weight:600;letter-spacing:.1em}
.headline{font-family:var(--display);font-weight:700;letter-spacing:-.05em;text-transform:none;line-height:.95}
.fog{background:
  radial-gradient(ellipse 34% 46% at 50% 40%,rgba(5,5,7,.62),rgba(5,5,7,0) 72%),
  linear-gradient(to bottom,rgba(5,5,7,0) 62%,rgba(5,5,7,.55) 100%),
  linear-gradient(to right,rgba(5,5,7,.4),rgba(5,5,7,0) 12%,rgba(5,5,7,0) 88%,rgba(5,5,7,.4))}
.stage{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 90px);mask-image:linear-gradient(to bottom,transparent 0,#000 90px)}
.sheet-open .stage{-webkit-mask-image:none;mask-image:none}
.empty{background:rgba(28,28,32,.6);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:0;box-shadow:var(--glass-shadow);border-radius:24px}
.hint{color:var(--muted-2)}

/* detail sheet */
.detail{background:rgba(8,8,12,.72);backdrop-filter:blur(60px) saturate(180%);-webkit-backdrop-filter:blur(60px) saturate(180%)}
.d-name{font-family:var(--display);font-weight:700;text-transform:none;letter-spacing:-.04em;line-height:1}
.d-sub{color:var(--muted)}
.formats{border:0;margin-top:28px;background:var(--glass);border-radius:22px;box-shadow:var(--glass-shadow);padding:0 20px}
.fmt{border-bottom:1px solid rgba(255,255,255,.07)}
.fmt:last-child{border-bottom:0}
.fmt .k{color:var(--muted);font-weight:500}
.d-sec h3{font-family:var(--display);font-weight:650;font-size:20px;letter-spacing:-.025em}
.d-sec .note{color:var(--muted)}
.scale{border-radius:16px}
.ctile{border:0;border-radius:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.badge{border-radius:999px;font-weight:500}

/* palette drawer */
.scrim{background:rgba(0,0,0,.3)}
.drawer{top:10px;right:10px;bottom:10px;width:min(420px,calc(100vw - 20px));border:0;border-radius:32px;background:rgba(24,24,28,.62);
  backdrop-filter:blur(44px) saturate(180%);-webkit-backdrop-filter:blur(44px) saturate(180%);box-shadow:var(--glass-shadow),0 30px 80px -10px rgba(0,0,0,.7);
  transform:translateX(calc(100% + 24px));padding:calc(20px + env(safe-area-inset-top,0px)) 22px calc(20px + env(safe-area-inset-bottom,0px))}
.drawer.open{transform:none}
.drawer-head h2{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.035em}
.pal-list li{background:transparent;border-bottom-color:rgba(255,255,255,.07)}
.sw{border-radius:12px}
.tabs{border:0;background:rgba(255,255,255,.07);border-radius:999px;padding:3px}
.tabs button{border-radius:999px;font-weight:500;padding:5px 14px}
.tabs button[aria-selected="true"]{background:rgba(255,255,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.code{background:rgba(0,0,0,.32);border:0;border-radius:16px}
.png-out img{border:0;border-radius:16px}

/* dynamic-island toast */
.toast{top:calc(14px + env(safe-area-inset-top,0px));bottom:auto;transform:translate(-50%,-18px) scale(.86);background:rgba(0,0,0,.86);border:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 18px 44px -8px rgba(0,0,0,.7);padding:11px 20px 11px 14px;border-radius:999px;font-size:14px;font-weight:500;
  display:inline-flex;align-items:center;gap:9px;transition:opacity .25s,transform .55s var(--spring)}
.toast::before{content:"";flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:#30d158 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.toast.show{transform:translate(-50%,0) scale(1)}

/* studio */
.st-wrap{grid-template-columns:minmax(280px,330px) minmax(0,1fr);gap:20px;padding:4px clamp(16px,3vw,44px) 120px}
.st-side{top:12px;padding:22px;gap:18px;border-radius:32px;background:var(--glass);box-shadow:var(--glass-shadow)}
.st-eyebrow,.st-label{text-transform:none;letter-spacing:-.005em;font-size:13px;font-weight:500;color:var(--muted)}
.st-name{font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.035em;line-height:1.05}
.st-desc{color:var(--muted);font-size:13px}
.st-hexbox{border:0;background:rgba(255,255,255,.07);border-radius:999px;height:44px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.st-hexbox:focus-within{background:rgba(255,255,255,.11)}
.st-field .btn.icon{width:44px;height:44px}
.sl{grid-template-columns:76px 1fr 40px;font-size:13px;font-weight:500;color:var(--muted)}
.sl input{height:6px;border-radius:3px}
.sl input::-webkit-slider-thumb{width:24px;height:24px;box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 3px 8px rgba(0,0,0,.35),0 3px 1px rgba(0,0,0,.08)}
.sl input::-moz-range-thumb{width:24px;height:24px;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.sl output{font-family:var(--sans);font-variant-numeric:tabular-nums;font-weight:500}
.st-recent button{width:24px;height:24px}
.st-nav{top:10px;width:max-content;max-width:100%;margin:0 0 20px;padding:5px;gap:2px;border-radius:999px;background:rgba(30,30,36,.5);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.st-nav a{padding:8px 14px;font-size:13.5px;font-weight:500;letter-spacing:-.01em;border-radius:999px;color:var(--muted)}
.st-nav a[aria-current="true"]{background:rgba(255,255,255,.15);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.st-sec,.st-sec:first-of-type{padding:34px clamp(22px,3vw,40px) 38px;margin-bottom:20px;border-radius:32px;background:var(--glass);box-shadow:var(--glass-shadow);scroll-margin-top:74px}
.st-head{margin-bottom:30px}
.st-num{font-family:var(--sans);font-size:13px;letter-spacing:0;font-weight:600;color:var(--muted-2);margin-bottom:6px}
.st-head h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,2.7vw,36px);letter-spacing:-.04em;line-height:1.05}
.st-head p{font-size:15px;color:var(--muted);margin-top:8px}
.st-sub{margin-top:52px}
.st-sub h3,.temp .blk h3{font-family:var(--display);font-weight:650;font-size:21px;letter-spacing:-.03em}
.studio .note{color:var(--muted)}
.an-lede{font-family:var(--display);font-weight:600;letter-spacing:-.03em}
.an-sub{color:var(--muted)}
.stat{border-top-color:rgba(255,255,255,.08)}
.stat .k{text-transform:none;letter-spacing:-.005em;font-size:13px;font-weight:500;color:var(--muted)}
.stat .v{font-family:var(--display);font-weight:600;letter-spacing:-.035em}
.stat .s{color:var(--muted-2)}
.fchip{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.temp-lbl{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--muted-2)}
.temp-bar{height:6px;border-radius:3px}
.temp-bar i{width:22px;height:22px;box-shadow:0 0 0 3px #fff,0 4px 12px rgba(0,0,0,.5)}
.chip{border-radius:999px;font-weight:500;color:var(--muted);letter-spacing:-.01em}
.chip[aria-pressed="true"]{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px -4px rgba(0,0,0,.5)}
.fsel,.fsel.lg{border:0;border-radius:999px;background-color:rgba(255,255,255,.08);font-weight:500;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.fsel.on{background-color:rgba(255,255,255,.18)}
.filters2{background:rgba(0,0,0,.18);border-radius:24px}
.refine-bar .count{color:var(--muted-2);letter-spacing:0}
.pstrip{border-radius:20px}
.pstrip.sm{border-radius:14px}
.ptitle{font-weight:600;letter-spacing:-.02em}
.ptitle small{color:var(--muted-2);font-weight:500}
.match{text-transform:none;letter-spacing:-.005em;font-size:12px;font-weight:500;color:var(--ink);background:rgba(255,255,255,.08);padding:4px 10px 4px 9px;border-radius:999px}
.match i{background:rgba(255,255,255,.2)}
.pwhy{color:var(--muted)}
.ex-base{border-radius:999px;background:rgba(255,255,255,.08)}
.ex-arrow{color:var(--muted-2)}
.seg.sm{height:40px;padding:3px}
.cc-prev{border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cc-copy{border-radius:999px;font-weight:500}
.cc-name{font-weight:600;letter-spacing:-.015em}
.cc-row{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;color:var(--muted-2)}
.cc-row b{color:rgba(235,235,245,.78)}
.verdict{border-top-color:rgba(255,255,255,.08)}
.menu-pop{border-radius:18px;background:rgba(40,40,46,.72)}
.menu-pop button{border-radius:12px;font-weight:500}
.role i{border-radius:14px}
.role span,.role em{color:var(--muted-2)}
.mock,.ac-prev,.tp-prev{border-radius:26px}
.ac-ratio b{font-family:var(--display);font-weight:700;letter-spacing:-.04em}
.check{border-bottom-color:rgba(255,255,255,.07)}
.alt{border:0;background:rgba(255,255,255,.05);border-radius:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.tp-row{border-bottom-color:rgba(255,255,255,.07)}
.tp-row i{border-radius:9px}
.srow > span{text-transform:none;letter-spacing:-.005em;font-size:13px;font-weight:500;color:var(--muted)}
.sstrip{border-radius:14px}
.sys i{border-radius:14px}
.gprev{border-radius:22px}
.ghead b{font-family:var(--display);font-weight:650;font-size:18px;letter-spacing:-.025em}
.gcode{background:rgba(0,0,0,.3);border:0;border-radius:14px;color:rgba(235,235,245,.72)}
.empty-note{border:0;background:rgba(0,0,0,.18);border-radius:22px}
.ccard{animation-duration:.6s}

@media (max-width:980px){
  .st-wrap{grid-template-columns:1fr}
  .st-side{position:relative;top:auto}
}
/* mobile: floating tab bar */
@media (max-width:719px){
  .top{grid-template-areas:"brand tools" "search search";padding:12px 16px 8px}
  .brand{font-size:17px}
  .views{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;
    width:min(320px,calc(100vw - 40px));height:64px;padding:5px;background:rgba(28,28,32,.58);
    box-shadow:var(--glass-shadow),0 16px 44px -8px rgba(0,0,0,.7)}
  .views::before{top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3)}
  .views button{flex-direction:column;gap:2px;font-size:10.5px;font-weight:600;padding:0;min-width:0}
  .views svg{display:block}
  .stage{padding-bottom:100px}
  .grid{padding-bottom:96px}
  .st-wrap{padding:4px 12px 110px;gap:14px}
  .st-side{padding:18px;border-radius:28px}
  .st-sec,.st-sec:first-of-type{padding:26px 18px 28px;border-radius:28px;margin-bottom:14px}
  .st-nav{top:6px}
  .toast{max-width:calc(100vw - 32px)}
}

/* ================= Liquid Glass system ================= */
@property --a4{syntax:'<color>';inherits:true;initial-value:#9fb4ff}
:root{
  /* glass body: brighter at the top, a refraction lift at the bottom */
  --glass:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.05) 42%,rgba(255,255,255,.035) 70%,rgba(255,255,255,.08) 100%);
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.06) 70%,rgba(255,255,255,.12) 100%);
  --glass-panel:linear-gradient(180deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.035) 30%,rgba(255,255,255,.025) 75%,rgba(255,255,255,.05) 100%);
  --glass-blur:blur(16px) saturate(190%) brightness(1.06);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -1px 0 rgba(255,255,255,.07),
    inset 0 -12px 20px -14px rgba(255,255,255,.26),
    inset 0 10px 18px -14px rgba(255,255,255,.16),
    0 1px 1px rgba(0,0,0,.3),
    0 14px 34px -14px rgba(0,0,0,.7);
  --panel-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -24px 48px -40px rgba(255,255,255,.2),
    0 30px 70px -30px rgba(0,0,0,.75);
  /* bevelled rim: bright top-left, dim sides, bright bottom edge */
  --rim:linear-gradient(170deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 18%,rgba(255,255,255,.035) 48%,rgba(255,255,255,.1) 76%,rgba(255,255,255,.58) 100%);
  /* recessed lens used for every "selected" state */
  --lens:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.12) 100%);
  --lens-shadow:
    inset 0 1px 3px rgba(0,0,0,.45),
    inset 0 -1px 0 rgba(255,255,255,.14),
    inset 1px 0 0 rgba(150,180,255,.16),
    inset -1px 0 0 rgba(255,160,215,.12),
    0 0 0 .5px rgba(255,255,255,.06);
  transition:--a1 1.6s ease,--a2 1.6s ease,--a3 1.6s ease,--a4 1.6s ease;
}

/* ---------- typography: quieter Apple weights ---------- */
body{font-weight:400;letter-spacing:-.012em;font-optical-sizing:auto;font-feature-settings:"kern","calt";text-rendering:optimizeLegibility}
.brand{font-weight:600;letter-spacing:-.022em}
/* wordmark only: larger, two-tone, with a spectrum sweep on hover */
.brand::before{content:none!important;display:none!important}
.brand{font-size:22px;gap:0;line-height:1;padding:4px 2px;border-radius:8px;outline:none}
.brand{position:relative}
.brand .b1{color:var(--ink);transition:color .6s ease}
.brand .bdot{position:absolute;left:-.42em;top:50%;width:.24em;height:.24em;margin-top:-.12em;border-radius:50%;background:var(--live,#fff);transform:scale(0);transition:transform .45s cubic-bezier(.34,1.56,.64,1),background-color .6s ease}
.brand .b2{color:var(--ink);opacity:.6;margin-left:.26em;transition:opacity .45s ease}
.brand:hover .b1,.brand:focus-visible .b1{color:var(--live,var(--ink))}
.brand:hover .bdot,.brand:focus-visible .bdot{transform:scale(1)}
.brand:hover .b2,.brand:focus-visible .b2{opacity:1}
.brand:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
@media (max-width:719px){.brand{font-size:19px}}
@media (prefers-reduced-motion:reduce){.brand .b1,.brand .bdot{transition:none}}
.headline{font-weight:600;letter-spacing:-.045em}
.d-name,.st-name,.drawer-head h2{font-weight:600;letter-spacing:-.035em}
.st-head h2{font-weight:600;letter-spacing:-.038em}
.st-sub h3,.temp .blk h3,.d-sec h3,.ghead b{font-weight:600}
.an-lede{font-weight:500;letter-spacing:-.028em}
.stat .v{font-weight:500;font-variant-numeric:tabular-nums}
.ac-ratio b{font-weight:600}
.ptitle,.cc-name{font-weight:550}
.btn,.seg button,.chip,.st-nav a,.tabs button,.fsel,.linkbtn{font-weight:500}
.c-name{font-weight:600}

/* ---------- background: palette aurora + matte texture ---------- */
.ambient{inset:0;opacity:1;animation:none;overflow:hidden;
  background:radial-gradient(130% 90% at 50% -10%,color-mix(in oklab,var(--a4) 9%,#07080b) 0%,#07080b 55%,#050507 100%)}
.ambient i{position:absolute;display:block;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.ambient .b1{width:70vmax;height:70vmax;left:-18vmax;top:-26vmax;background:radial-gradient(closest-side,color-mix(in oklab,var(--a1) 62%,transparent),transparent);animation:o1 38s ease-in-out infinite alternate}
.ambient .b2{width:60vmax;height:60vmax;right:-20vmax;top:-14vmax;background:radial-gradient(closest-side,color-mix(in oklab,var(--a2) 48%,transparent),transparent);animation:o2 44s ease-in-out infinite alternate}
.ambient .b3{width:80vmax;height:60vmax;left:10vmax;bottom:-28vmax;border-radius:46%;background:radial-gradient(closest-side,color-mix(in oklab,var(--a3) 52%,transparent),transparent);animation:o3 52s ease-in-out infinite alternate}
.ambient .b4{width:44vmax;height:44vmax;left:34vmax;top:18vmax;background:radial-gradient(closest-side,color-mix(in oklab,var(--a4) 22%,transparent),transparent);animation:o4 30s ease-in-out infinite alternate}
/* a slow light sweep, like a reflection crossing glass */
.ambient .b5{inset:-30%;width:auto;height:auto;border-radius:0;mix-blend-mode:soft-light;opacity:.5;
  background:conic-gradient(from 0deg at 50% 50%,transparent 0 40deg,rgba(255,255,255,.18) 70deg,transparent 110deg,transparent 220deg,rgba(255,255,255,.1) 250deg,transparent 290deg);
  animation:sweep 90s linear infinite}
@keyframes o1{to{transform:translate3d(14vmax,10vmax,0) scale(1.12)}}
@keyframes o2{to{transform:translate3d(-12vmax,14vmax,0) scale(.9)}}
@keyframes o3{to{transform:translate3d(-10vmax,-8vmax,0) scale(1.15) rotate(12deg)}}
@keyframes o4{to{transform:translate3d(-18vmax,-6vmax,0) scale(1.3)}}
@keyframes sweep{to{transform:rotate(360deg)}}
.ambient::after{background:radial-gradient(130% 100% at 50% 40%,transparent 40%,rgba(4,4,6,.6) 100%)}
/* matte finish: film grain plus a micro dot grid */
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(rgba(255,255,255,.06) .55px,transparent .75px);
  background-size:220px 220px,5px 5px;opacity:.09}
.grain::after{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,transparent 30%,#000);mask-image:radial-gradient(80% 70% at 50% 40%,transparent 30%,#000)}

/* ---------- shared glass rim ---------- */
.btn,.st-hexbox,.formats,.st-sec{position:relative}
.btn.close{position:fixed}
.btn::after,.search::after,.seg::after,.st-hexbox::after,.st-sec::after,.st-side::after,.st-nav::after,
.drawer::after,.menu-pop::after,.toast::after,.formats::after,.empty::after,.alt::after,.fchip::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.search::after{border-radius:21px}
.search svg,.q-clear{z-index:2}
.st-sec::after,.st-side::after,.drawer::after,.formats::after{opacity:.55}
.toast::after{opacity:.5}
.fchip{position:relative}

/* controls */
.search input{background:var(--glass)}
.search input:focus{background:var(--glass-hi)}
.btn{background:var(--glass);box-shadow:var(--glass-shadow)}
.btn:hover{background:var(--glass-hi)}
.btn:active{transform:scale(.95);box-shadow:var(--glass-shadow),inset 0 2px 6px rgba(0,0,0,.25)}
/* primary: a bright frosted lens with a faint chromatic edge */
.btn.primary{color:#0b0b0e;background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(238,240,246,.9) 55%,rgba(226,229,238,.92) 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.08),inset 2px 0 2px -1px rgba(120,160,255,.35),inset -2px 0 2px -1px rgba(255,140,200,.3),0 10px 26px -10px rgba(0,0,0,.7)}
.btn.primary::after{opacity:.4}
.sort select{background-color:rgba(255,255,255,.07);box-shadow:var(--glass-shadow)}
.fsel,.fsel.lg{background-color:rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(255,255,255,.05),0 6px 16px -10px rgba(0,0,0,.6)}
.fsel.on{background-color:rgba(255,255,255,.16)}

/* segmented controls: glass track, recessed lens thumb */
.seg{background:var(--glass);box-shadow:var(--glass-shadow);padding:5px}
.seg button[aria-pressed="true"]{background:var(--lens);box-shadow:var(--lens-shadow);color:#fff}
.views button[aria-pressed="true"]{background:transparent;box-shadow:none}
.views::before{top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3);background:var(--lens);box-shadow:var(--lens-shadow)}
.views button{color:rgba(235,235,245,.5)}
.views button[aria-pressed="true"]{color:#fff}
.tabs{background:var(--glass);box-shadow:var(--glass-shadow);padding:4px}
.tabs button[aria-selected="true"]{background:var(--lens);box-shadow:var(--lens-shadow);color:#fff}
.chip[aria-pressed="true"]{background:var(--lens);box-shadow:var(--lens-shadow);color:#fff}
.chip:hover{background:rgba(255,255,255,.06)}
.st-nav{background:var(--glass);box-shadow:var(--glass-shadow);padding:5px}
.st-nav a[aria-current="true"]{background:var(--lens);box-shadow:var(--lens-shadow);color:#fff}
.seg.sm{background:var(--glass);box-shadow:var(--glass-shadow)}

/* panels */
.st-sec,.st-sec:first-of-type,.st-side{background:var(--glass-panel);box-shadow:var(--panel-shadow);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
.drawer{background:linear-gradient(180deg,rgba(40,40,48,.62),rgba(22,22,28,.58));box-shadow:var(--panel-shadow),0 40px 90px -20px rgba(0,0,0,.8)}
.formats{background:var(--glass-panel);box-shadow:var(--panel-shadow)}
.menu-pop{background:linear-gradient(180deg,rgba(52,52,60,.72),rgba(34,34,40,.7));backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);box-shadow:var(--panel-shadow),0 24px 60px -16px rgba(0,0,0,.8)}
.toast{background:linear-gradient(180deg,rgba(18,18,22,.86),rgba(4,4,6,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 44px -10px rgba(0,0,0,.8)}
.empty{background:var(--glass-panel);box-shadow:var(--panel-shadow)}

/* inner surfaces */
.st-hexbox{background:var(--lens);box-shadow:var(--lens-shadow)}
.st-hexbox::after{opacity:.35}
.st-hexbox:focus-within{background:linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.2))}
.ex-base{background:var(--lens);box-shadow:var(--lens-shadow)}
.fchip{background:var(--glass);box-shadow:var(--glass-shadow)}
.match{background:var(--lens);box-shadow:var(--lens-shadow)}
.alt{background:var(--glass-panel);box-shadow:var(--panel-shadow)}
.filters2,.empty-note{background:rgba(0,0,0,.2);box-shadow:inset 0 1px 3px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.06)}
.gcode,.code{background:rgba(0,0,0,.32);box-shadow:inset 0 1px 3px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,255,255,.05)}
.cc-copy{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.1));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 10px -4px rgba(0,0,0,.4);color:#fff}
.cc-prev[data-tone=dark] .cc-copy{color:#111;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.35))}
.pstrip,.cc-prev,.sstrip,.role i,.sys i,.gprev,.mock,.ac-prev,.tp-prev{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.07),0 18px 40px -22px rgba(0,0,0,.8)}
.pstrip{position:relative}
.pstrip::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 78%,rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(255,255,255,.12)}

/* sliders: glass pill thumb */
.sl input{height:8px;border-radius:4px;box-shadow:inset 0 1px 2px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.12)}
.sl input::-webkit-slider-thumb{width:30px;height:20px;border-radius:10px;background:linear-gradient(180deg,#fff 0%,#eef0f5 60%,#dfe2ea 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.15),0 4px 10px rgba(0,0,0,.45);transition:transform .35s var(--spring)}
.sl input:active::-webkit-slider-thumb{transform:scale(1.12)}
.sl input::-moz-range-thumb{width:30px;height:20px;border-radius:10px;background:linear-gradient(180deg,#fff,#dfe2ea);box-shadow:0 4px 10px rgba(0,0,0,.45)}
.temp-bar i{box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 0 4px rgba(0,0,0,.15),0 6px 14px rgba(0,0,0,.5)}

/* mobile tab bar: thicker glass */
@media (max-width:719px){
  .views{background:linear-gradient(180deg,rgba(60,60,70,.5),rgba(28,28,34,.55));box-shadow:var(--glass-shadow),0 18px 46px -10px rgba(0,0,0,.8)}
  .views::before{top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/3)}
  .views{padding:6px}
}


/* ---------- expanding search ---------- */
@media (min-width:720px){
  .search{max-width:380px;transition:max-width .8s cubic-bezier(.22,1,.36,1)}
  .search:hover{max-width:560px}
  .search:focus-within,.search:has(input:not(:placeholder-shown)){max-width:660px}
  .search input{transition:background .5s ease,box-shadow .6s ease}
  .search:hover input{background:var(--glass-hi)}
  .search:focus-within input{background:var(--glass-hi);box-shadow:var(--glass-shadow),0 0 0 5px rgba(255,255,255,.055),0 20px 44px -16px rgba(0,0,0,.75)}
  .search::after{transition:opacity .5s ease}
  .search:focus-within::after{opacity:1.0}
  .search svg{transition:color .4s ease,transform .6s cubic-bezier(.22,1,.36,1)}
  .search:is(:hover,:focus-within) svg{color:var(--ink)}
  .search:focus-within svg{transform:translateY(-50%) scale(1.08)}
  .q-hint{position:absolute;right:46px;top:50%;z-index:2;font-size:13px;color:var(--muted-2);white-space:nowrap;pointer-events:none;
    opacity:0;transform:translate(10px,-50%);transition:opacity .25s ease,transform .6s cubic-bezier(.22,1,.36,1)}
  .search:is(:hover,:focus-within) .q-hint{opacity:1;transform:translate(0,-50%);transition-delay:.22s,.18s}
  .search:has(input:not(:placeholder-shown)) .q-hint{opacity:0;transition-delay:0s}
  .q-key{position:absolute;right:11px;top:50%;z-index:2;min-width:22px;height:22px;padding:0 7px;display:grid;place-items:center;border-radius:7px;
    font:500 12px/1 var(--sans);color:var(--muted);background:var(--lens);box-shadow:var(--lens-shadow);pointer-events:none;
    transform:translateY(-50%);transition:opacity .3s ease,transform .5s cubic-bezier(.22,1,.36,1)}
  .search:focus-within .q-key,.search:has(input:not(:placeholder-shown)) .q-key{opacity:0;transform:translateY(-50%) scale(.75)}
}
@media (max-width:719px){.q-hint,.q-key{display:none}}

/* ================= colour-family deck ================= */
.deck{position:relative;flex:0 1 470px;min-width:250px;height:42px;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.deck-track{position:absolute;inset:0;pointer-events:none}
.deck-track .dk{pointer-events:auto}
.dk{position:absolute;left:0;top:0;border:0;padding:0;border-radius:999px;cursor:pointer;background:var(--c);display:grid;place-items:center;overflow:hidden;will-change:transform,width,height;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 10px -4px rgba(0,0,0,.6);transition:opacity .4s ease,filter .4s ease}
.dk b{font-size:12.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;opacity:0;pointer-events:none}
.dk[aria-checked="true"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 16px -6px var(--c),0 4px 10px -4px rgba(0,0,0,.6)}
.dk:focus{outline:none}
.dk:focus-visible{box-shadow:0 0 0 2px #fff,0 4px 10px -4px rgba(0,0,0,.6)}
.deck.dim .dk:not([aria-checked="true"]){opacity:.55;filter:saturate(.75)}
.deck.open .dk{opacity:1;filter:none}
.deck-rail{display:none;position:absolute;left:0;right:0;top:39px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18) 12%,rgba(255,255,255,.18) 88%,transparent);opacity:0;transform:scaleX(.3);transform-origin:0 50%;transition:opacity .4s ease,transform .7s cubic-bezier(.22,1,.36,1);pointer-events:none}
.deck.open .deck-rail{opacity:1;transform:none}
.deck-label{position:absolute;z-index:50;left:74px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap;transition:opacity .3s ease,transform .55s cubic-bezier(.34,1.36,.64,1)}
.deck.open .deck-label{opacity:0;transform:translate(14px,-50%);pointer-events:none}
.deck-label b{color:var(--ink);font-weight:600;letter-spacing:-.01em}
.deck-label .n{color:var(--muted-2);font-variant-numeric:tabular-nums}
.deck-label .hintx{display:inline-flex;align-items:center;gap:6px}
.deck-label .hintx svg{width:12px;height:12px;opacity:.6}
.deck-label .x{width:22px;height:22px;border:0;border-radius:50%;display:grid;place-items:center;color:var(--muted);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.25);transition:color .2s,transform .4s cubic-bezier(.34,1.36,.64,1)}
.deck-label .x:hover{color:var(--ink);transform:scale(1.08)}
.deck-label .x svg{width:9px;height:9px}
.deck-tip{position:absolute;left:0;top:44px;z-index:20;pointer-events:none;white-space:nowrap;font-size:12px;font-weight:500;padding:5px 11px;border-radius:999px;
  background:linear-gradient(180deg,rgba(48,48,56,.92),rgba(22,22,28,.94));box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 10px 22px -8px rgba(0,0,0,.7),0 0 0 .5px rgba(255,255,255,.06);opacity:0;will-change:transform,opacity}
.deck-tip b{font-weight:600}
.deck-tip span{color:var(--muted);margin-left:6px;font-variant-numeric:tabular-nums}
@media (max-width:719px){.deck{flex-basis:100%;min-width:0}}

.fx{color-scheme:dark;
  --bg:#050507;--ink:#f5f5f7;--muted:rgba(235,235,245,.6);--muted-2:rgba(235,235,245,.38);--line:rgba(255,255,255,.08);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.36,.64,1);
  --glass:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.05) 42%,rgba(255,255,255,.035) 70%,rgba(255,255,255,.08) 100%);
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,.08) 45%,rgba(255,255,255,.06) 70%,rgba(255,255,255,.12) 100%);
  --panel:linear-gradient(180deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.035) 30%,rgba(255,255,255,.025) 75%,rgba(255,255,255,.05) 100%);
  --blur:blur(16px) saturate(190%) brightness(1.06);
  --gshadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(255,255,255,.07),inset 0 -12px 20px -14px rgba(255,255,255,.26),inset 0 10px 18px -14px rgba(255,255,255,.16),0 1px 1px rgba(0,0,0,.3),0 14px 34px -14px rgba(0,0,0,.7);
  --pshadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -24px 48px -40px rgba(255,255,255,.2),0 30px 70px -30px rgba(0,0,0,.75);
  --rim:linear-gradient(170deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 18%,rgba(255,255,255,.035) 48%,rgba(255,255,255,.1) 76%,rgba(255,255,255,.58) 100%);
  --lens:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.12) 100%);
  --lshadow:inset 0 1px 3px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.14),inset 1px 0 0 rgba(150,180,255,.16),inset -1px 0 0 rgba(255,160,215,.12),0 0 0 .5px rgba(255,255,255,.06);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --streak:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");}
.fx button,.fx input,.fx select{font:inherit;color:inherit}
.fx button{cursor:pointer}
.fx .glass,.fx .btn,.fx .chipbtn{position:relative;background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--gshadow)}
.fx .glass::after,.fx .btn::after,.fx .panel::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fx .panel{position:relative;background:var(--panel);box-shadow:var(--pshadow);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%)}
.fx .panel::after{opacity:.5}
.fx .demo.panel{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.fx .demo.panel::after{display:none}
.fx .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:999px;font-size:14px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;transition:background .25s,transform .45s var(--spring)}
.fx .btn:hover{background:var(--glass-hi)}
.fx .btn:active{transform:scale(.95)}
.fx .btn svg{width:16px;height:16px}
.fx .btn.icon{width:40px;padding:0}
.fx .btn.sm{height:34px;padding:0 13px;font-size:13px}
.fx .btn.primary{color:#0b0b0e;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(238,240,246,.9) 55%,rgba(226,229,238,.92));
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.08),inset 2px 0 2px -1px rgba(120,160,255,.35),inset -2px 0 2px -1px rgba(255,140,200,.3),0 10px 26px -10px rgba(0,0,0,.7);font-weight:600}
.fx .btn.primary::after{opacity:.4}
.fx .seg{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--glass);box-shadow:var(--gshadow);position:relative}
.fx .seg::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fx .seg button{border:0;background:transparent;height:32px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:500;color:var(--muted);transition:color .25s,background .25s,box-shadow .25s;white-space:nowrap}
.fx .seg button:hover{color:var(--ink)}
.fx .seg button[aria-pressed="true"]{background:var(--lens);box-shadow:var(--lshadow);color:#fff}
.fx .hexbox{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-radius:999px;background:var(--lens);box-shadow:var(--lshadow)}
.fx .hexbox input{width:84px;border:0;background:transparent;outline:none;font-family:var(--mono);font-size:13px;letter-spacing:.05em;text-transform:uppercase;padding:0}
.fx .dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.fx .fin-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.fx .fin-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.fx .fin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.fx .fin{margin:0;display:grid;gap:12px}
.fx .fin-grid.gl{position:relative}
.fx .fin-grid.gl .fin-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.fx .fin-grid.gl .msph{width:100%;aspect-ratio:1/1.05}
.fx .fin-grid.gl .fin figcaption{text-align:center}
.fx .fin figcaption{font-size:14px;font-weight:550}
.fx .fin figcaption small{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:2px}
.fx .fcard{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:var(--c);transition:transform .6s var(--ease)}
.fx .fin:hover .fcard{transform:translateY(-4px)}
.fx .fcard .lbl{position:absolute;left:16px;bottom:14px;font-size:12px;font-weight:600;letter-spacing:.02em;z-index:3}
.fx .fcard .lbl span{display:block;font-family:var(--mono);font-weight:400;opacity:.75;font-size:11px;margin-top:2px}
.fx [data-tone=light] .lbl{color:rgba(255,255,255,.92)}
.fx [data-tone=dark] .lbl{color:rgba(0,0,0,.72)}
.fx .f-gloss{background:linear-gradient(175deg,var(--hi) 0%,var(--c) 42%,var(--lo) 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -24px 40px -10px rgba(0,0,0,.35),0 24px 40px -24px rgba(0,0,0,.8)}
.fx .f-gloss::before{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.16) 30%,rgba(255,255,255,0) 30.4%),radial-gradient(circle at 78% 12%,rgba(255,255,255,.7) 0 2%,rgba(255,255,255,0) 7%)}
.fx .f-gloss::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.fx .f-matte{background:#efece6;padding:10px 10px 0;box-shadow:0 24px 40px -24px rgba(0,0,0,.8)}
.fx .f-matte .paint{position:absolute;inset:10px 10px 64px;border-radius:12px;background:var(--c)}
.fx .f-matte .paint::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--noise);background-size:200px;mix-blend-mode:soft-light;opacity:.55}
.fx .f-matte .lbl{color:#1d1c1a!important;bottom:16px;left:20px}
.fx .f-matte .lbl span{color:#6b6862}
.fx .f-matte::before{content:"";position:absolute;right:18px;bottom:22px;width:22px;height:22px;border-radius:50%;border:1.5px solid #1d1c1a;opacity:.25}
.fx .f-metal{background:linear-gradient(90deg,var(--mlo) 0%,var(--mhi) 22%,var(--m) 40%,var(--mlo) 58%,var(--mhi) 78%,var(--m) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.3),0 24px 40px -24px rgba(0,0,0,.8)}
.fx .f-metal::before{content:"";position:absolute;inset:0;background:var(--streak);background-size:300px 300px;mix-blend-mode:overlay;opacity:.9}
.fx .f-metal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.25))}
.fx .glass-stage{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#0c0c10}
.fx .glass-stage i{position:absolute;border-radius:50%;filter:blur(2px)}
.fx .glass-stage .s1{width:62%;aspect-ratio:1;left:-12%;top:8%;background:var(--hi)}
.fx .glass-stage .s2{width:48%;aspect-ratio:1;right:-10%;top:42%;background:var(--comp)}
.fx .glass-stage .s3{width:40%;aspect-ratio:1;left:24%;bottom:-10%;background:var(--c)}
.fx .glass-stage .f-glass{position:absolute;inset:14% 12%;aspect-ratio:auto;border-radius:22px;background:linear-gradient(160deg,color-mix(in oklab,var(--c) 34%,rgba(255,255,255,.18)),color-mix(in oklab,var(--c) 22%,rgba(255,255,255,.04)));
  backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -14px 26px -18px rgba(255,255,255,.4),0 20px 40px -20px rgba(0,0,0,.7)}
.fx .f-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fx .f-glass .lbl{color:#fff!important}
.fx .f-silk{background:linear-gradient(125deg,var(--lo) 0%,var(--c) 16%,var(--hi) 27%,var(--c) 38%,var(--lo) 52%,var(--c) 64%,var(--hi2) 76%,var(--c) 88%,var(--lo) 100%);background-size:220% 220%;animation:fx-silk 9s ease-in-out infinite alternate;box-shadow:0 24px 40px -24px rgba(0,0,0,.8)}
.fx .f-silk::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 1px,transparent 1px 3px)}
@keyframes fx-silk{to{background-position:100% 100%}}
.fx .f-velvet{background:radial-gradient(ellipse 80% 70% at 38% 30%,var(--hi) 0%,var(--c) 38%,var(--lo) 78%,var(--lo2) 100%);box-shadow:inset 0 0 50px rgba(0,0,0,.45),0 24px 40px -24px rgba(0,0,0,.8)}
.fx .f-velvet::before{content:"";position:absolute;inset:0;background:var(--noise);background-size:120px;mix-blend-mode:soft-light;opacity:.8}
.fx .ll-stage{position:relative;height:540px;border-radius:26px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(ellipse 70% 50% at 50% 100%,rgba(255,255,255,.06),transparent 70%),linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.4));touch-action:none}
.fx .ll-stage::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));border-top:1px solid rgba(255,255,255,.05)}
.fx .ll-scene{position:relative;perspective:1100px;transform:translateY(-30px)}
.fx .ll-glow{position:absolute;left:50%;bottom:-110px;width:320px;height:90px;border-radius:50%;background:var(--c);filter:blur(42px);opacity:.75;transform:translateX(calc(-50% + var(--gx,0px)));pointer-events:none}
.fx .ll-card{position:relative;width:250px;height:350px;border-radius:26px;background:linear-gradient(170deg,var(--hi) 0%,var(--c) 45%,var(--lo) 100%);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 40px 60px -30px rgba(0,0,0,.85);will-change:transform}
.fx .ll-spec{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,30%) var(--my,20%),rgba(255,255,255,.62) 0%,rgba(255,255,255,.14) 22%,rgba(255,255,255,0) 48%);mix-blend-mode:soft-light;pointer-events:none}
.fx .ll-spec2{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,30%) var(--my,20%),rgba(255,255,255,.35) 0%,rgba(255,255,255,0) 18%);mix-blend-mode:screen;pointer-events:none}
.fx .ll-rim{position:absolute;inset:0;border-radius:inherit;padding:1.6px;background:conic-gradient(from var(--ang,0deg),#ff6ec7,#ffd36e,#7cf8c9,#6ea8ff,#c77dff,#ff6ec7);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:var(--iri,.55);mix-blend-mode:screen;pointer-events:none}
.fx .ll-label{position:absolute;left:22px;bottom:20px;transform:translateZ(30px)}
.fx .ll-label b{display:block;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.025em}
.fx .ll-label span{font-family:var(--mono);font-size:12px;opacity:.75}
.fx [data-tone=dark] .ll-label{color:rgba(0,0,0,.78)}
.fx [data-tone=light] .ll-label{color:#fff}
.fx .ll-reflect{position:absolute;left:0;top:calc(100% + 8px);width:250px;height:350px;border-radius:26px;background:linear-gradient(10deg,var(--hi) 0%,var(--c) 55%,var(--lo) 100%);transform:rotateX(var(--rx2,0deg)) rotateY(var(--ry,0deg)) scaleY(-1);
  -webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 34%);mask-image:linear-gradient(0deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,0) 34%);opacity:.5;filter:blur(1.5px);pointer-events:none}
.fx .ll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-size:12.5px;color:var(--muted-2);white-space:nowrap}
.fx .ll-ctrl{position:absolute;right:16px;top:16px;display:flex;gap:8px}
.fx .mk-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.fx .mk{margin:0;border-radius:24px;overflow:hidden;position:relative;display:grid;place-items:center;min-height:300px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.fx .mk figcaption{position:absolute;left:16px;top:14px;font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;z-index:5}
.fx .mk.phone-wrap{grid-column:span 4;grid-row:span 2;padding:40px 0 30px;background:radial-gradient(ellipse at 50% 30%,color-mix(in oklab,var(--c) 18%,transparent),transparent 70%),rgba(0,0,0,.2)}
.fx .mk.room{grid-column:span 8}
.fx .mk.poster-wrap{grid-column:span 3;background:#d9d5cc}
.fx .mk.fabric-wrap{grid-column:span 3;background:#17171b}
.fx .mk.box-wrap{grid-column:span 3;background:radial-gradient(ellipse at 50% 80%,rgba(255,255,255,.06),transparent 60%),#121216}
.fx .mk.icon-wrap{grid-column:span 3;background:linear-gradient(160deg,#1d1d22,#0d0d10)}
.fx .phone{width:236px;height:486px;border-radius:44px;background:#0a0a0c;padding:10px;box-shadow:inset 0 0 0 2px #2a2a2e,inset 0 0 0 3px #111,0 40px 70px -30px rgba(0,0,0,.9)}
.fx .screen{width:100%;height:100%;border-radius:35px;overflow:hidden;background:#f5f5f7;color:#111;position:relative;display:flex;flex-direction:column}
.fx .island{position:absolute;left:50%;top:9px;transform:translateX(-50%);width:76px;height:22px;border-radius:12px;background:#000;z-index:3}
.fx .sc-hero{padding:44px 18px 22px;background:linear-gradient(160deg,var(--hi),var(--c) 60%,var(--lo));color:var(--on)}
.fx .sc-hero small{font-size:10.5px;font-weight:600;opacity:.8}
.fx .sc-hero h4{margin:4px 0 0;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.fx .sc-body{padding:14px 14px 0;display:grid;gap:9px;flex:1}
.fx .sc-card{background:#fff;border-radius:14px;padding:11px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.fx .sc-card i{width:30px;height:30px;border-radius:9px;background:var(--tint);flex:0 0 auto;display:grid;place-items:center}
.fx .sc-card i::after{content:"";width:12px;height:12px;border-radius:4px;background:var(--cd)}
.fx .sc-card b{display:block;font-size:12px;font-weight:600}
.fx .sc-card span{font-size:10.5px;color:#777}
.fx .sc-btn{margin:4px 0 0;height:38px;border-radius:12px;background:var(--cd);color:var(--ond);display:grid;place-items:center;font-size:12.5px;font-weight:600}
.fx .sc-tab{display:flex;justify-content:space-around;padding:10px 0 18px;border-top:1px solid #e6e6ea;background:rgba(255,255,255,.9)}
.fx .sc-tab i{width:18px;height:18px;border-radius:6px;background:#c9c9cf}
.fx .sc-tab i.on{background:var(--cd)}
.fx .room svg{width:100%;height:100%;display:block}
.fx .poster{width:78%;aspect-ratio:3/4;background:#f1ece2;position:relative;overflow:hidden;box-shadow:0 22px 40px -18px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.15)}
.fx .poster::after{content:"";position:absolute;inset:0;background:var(--noise);background-size:160px;mix-blend-mode:multiply;opacity:.25}
.fx .poster .pc1{position:absolute;width:86%;aspect-ratio:1;border-radius:50%;left:-8%;top:16%;background:var(--c)}
.fx .poster .pc2{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;right:10%;top:12%;background:var(--comp)}
.fx .poster h5{position:absolute;left:9%;bottom:8%;margin:0;font-family:var(--display);font-size:clamp(16px,1.6vw,22px);font-weight:700;line-height:.95;letter-spacing:-.04em;color:#151412;z-index:2}
.fx .poster small{position:absolute;left:9%;top:6%;font-size:8px;font-weight:600;letter-spacing:.14em;color:#151412;z-index:2}
.fx .fabric{width:76%;height:84%;position:relative;clip-path:polygon(0 0,100% 0,100% 88%,92% 93%,84% 89%,74% 95%,64% 90%,54% 96%,44% 91%,33% 96%,22% 90%,11% 95%,0 90%);
  background:linear-gradient(90deg,var(--lo) 0%,var(--c) 7%,var(--hi) 12%,var(--c) 19%,var(--lo) 28%,var(--c) 36%,var(--hi) 43%,var(--c) 52%,var(--lo) 61%,var(--c) 69%,var(--hi) 77%,var(--c) 85%,var(--lo) 94%,var(--c) 100%)}
.fx .fabric::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,rgba(0,0,0,.07) 0 1px,transparent 1px 3px)}
.fx .fabric::after{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,0))}
.fx .rail{position:absolute;top:7%;left:8%;right:8%;height:6px;border-radius:3px;background:linear-gradient(#c9c9cf,#7a7a80);z-index:2}
.fx .fabric-wrap .fabric{margin-top:10%}
.fx .box3d{width:120px;height:150px;position:relative;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-34deg);margin-top:20px}
.fx .box3d .face{position:absolute;inset:0}
.fx .box3d .fr{background:linear-gradient(170deg,var(--hi),var(--c) 50%,var(--c));transform:translateZ(45px);display:flex;flex-direction:column;justify-content:flex-end;padding:12px;color:var(--on)}
.fx .box3d .fr b{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.03em}
.fx .box3d .fr span{font-size:7.5px;letter-spacing:.14em;font-weight:600;opacity:.8}
.fx .box3d .sd{width:90px;left:15px;right:auto;background:linear-gradient(180deg,var(--c),var(--lo));transform:rotateY(90deg) translateZ(60px)}
.fx .box3d .tp{height:90px;top:30px;bottom:auto;background:linear-gradient(90deg,var(--hi2),var(--hi));transform:rotateX(90deg) translateZ(75px)}
.fx .box-shadow{position:absolute;bottom:22%;left:50%;width:170px;height:30px;border-radius:50%;background:rgba(0,0,0,.6);filter:blur(14px);transform:translateX(-46%)}
.fx .appicon{width:110px;height:110px;border-radius:26px;background:linear-gradient(160deg,var(--hi),var(--c) 55%,var(--lo));display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 20px 34px -16px rgba(0,0,0,.8)}
.fx .appicon svg{width:52px;height:52px;color:var(--on)}
.fx .icon-row{display:flex;gap:16px;align-items:center}
.fx .icon-row .appicon.small{width:58px;height:58px;border-radius:14px}
.fx .icon-row .appicon.small svg{width:28px;height:28px}
.fx .icon-cap{text-align:center;font-size:11.5px;margin-top:8px;color:var(--muted)}
.fx .story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:0;border-radius:26px;overflow:hidden;min-height:560px;background:rgba(0,0,0,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.fx .st-plate{position:relative;background:linear-gradient(170deg,var(--hi),var(--c) 50%,var(--lo));padding:30px;display:flex;flex-direction:column;justify-content:space-between}
.fx .st-plate .issue{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.fx .st-plate{container-type:inline-size}
.fx .st-plate .big{font-family:var(--display);font-weight:600;font-size:min(84px,calc(var(--k,10) * 1cqi));line-height:.92;letter-spacing:-.05em;overflow-wrap:normal;word-break:normal;hyphens:manual}
.fx .st-plate .code{font-family:var(--mono);font-size:13px;opacity:.8}
.fx [data-tone=dark].st-plate{color:rgba(0,0,0,.78)}
.fx [data-tone=light].st-plate{color:#fff}
.fx .st-text{padding:34px clamp(22px,3vw,44px);display:flex;flex-direction:column;gap:26px}
.fx .st-moods{display:flex;flex-wrap:wrap;gap:4px 18px;font-family:var(--display);font-weight:500;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.04em;line-height:1.1}
.fx .st-moods span:nth-child(2){color:var(--muted)}
.fx .st-moods span:nth-child(3){color:var(--muted-2)}
.fx .st-lede{margin:0;font-size:16.5px;line-height:1.6;color:rgba(235,235,245,.82);max-width:58ch}
.fx .st-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;border-top:1px solid var(--line);padding-top:22px}
.fx .st-cols h4{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em}
.fx .st-cols ul{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:14px}
.fx .st-pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fx .st-pairs button{border:0;background:transparent;padding:0;text-align:left;display:grid;gap:7px}
.fx .st-pairs i{height:64px;border-radius:14px;background:var(--p);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.06)}
.fx .st-pairs b{font-size:13px;font-weight:550}
.fx .st-pairs span{font-size:11.5px;color:var(--muted-2)}
.fx .st-nums{display:flex;flex-wrap:wrap;gap:8px}
.fx .st-nums span{font-family:var(--mono);font-size:12px;padding:6px 11px;border-radius:999px;background:var(--lens);box-shadow:var(--lshadow);color:rgba(235,235,245,.8)}
.fx .st-nums span em{font-style:normal;font-family:var(--sans);font-size:11px;color:var(--muted-2);margin-right:6px}
.fx .ph-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px;align-items:start}
.fx .drop{position:relative;border-radius:24px;overflow:hidden;min-height:340px;display:grid;place-items:center;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:box-shadow .3s}
.fx .drop.over{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.fx .drop canvas{width:100%;height:auto;display:block}
.fx .drop .empty{text-align:center;padding:30px;color:var(--muted)}
.fx .drop .empty svg{width:34px;height:34px;opacity:.6}
.fx .drop .mark{position:absolute;width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2.5px #fff,0 4px 12px rgba(0,0,0,.6);transition:left .6s var(--ease),top .6s var(--ease);animation:fx-pop .5s var(--spring) both}
@keyframes fx-pop{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1)}}
.fx .wbar{display:flex;height:70px;border-radius:18px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.fx .wbar i{transition:flex .6s var(--ease)}
.fx .plist{display:grid;gap:2px;margin-top:16px}
.fx .prow{display:grid;grid-template-columns:36px 1fr auto auto;gap:12px;align-items:center;border:0;background:transparent;padding:9px 6px;border-radius:12px;text-align:left;transition:background .2s}
.fx .prow:hover{background:rgba(255,255,255,.05)}
.fx .prow i{width:36px;height:36px;border-radius:10px;background:var(--p);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.fx .prow b{font-size:14px;font-weight:550;display:block}
.fx .prow span{font-size:12px;color:var(--muted-2)}
.fx .prow code{font-family:var(--mono);font-size:12px;color:var(--muted)}
.fx .prow small{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--muted);min-width:38px;text-align:right}
.fx .range{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.fx input[type=range]{-webkit-appearance:none;appearance:none;width:150px;height:8px;border-radius:4px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);outline:none;margin:0}
.fx input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:20px;border-radius:10px;background:linear-gradient(180deg,#fff,#dfe2ea);box-shadow:inset 0 1px 0 #fff,0 0 0 .5px rgba(0,0,0,.15),0 4px 10px rgba(0,0,0,.45)}
.fx input[type=range]::-moz-range-thumb{width:30px;height:20px;border:0;border-radius:10px;background:linear-gradient(180deg,#fff,#dfe2ea)}
.fx .cv-rows{display:grid;gap:14px}
.fx .cv-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:center}
.fx .cv-row h4{margin:0;font-size:14px;font-weight:550}
.fx .cv-row p{margin:2px 0 0;font-size:12px;color:var(--muted-2)}
.fx .cv-strip{display:flex;height:56px;border-radius:14px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.fx .cv-strip i{flex:1;position:relative}
.fx .cv-strip i.clash::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,59,48,.85)}
.fx .flag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:1px}
.fx .flag.ok{color:#86d7a0;background:rgba(48,209,88,.12)}
.fx .flag.bad{color:#ff8e7e;background:rgba(255,59,48,.14)}
.fx .cv-chart{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px}
.fx .chart{border-radius:20px;padding:20px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.fx .chart h5{margin:0 0 14px;font-size:12px;font-weight:600;color:var(--muted)}
.fx .bars{display:flex;align-items:flex-end;gap:10px;height:150px}
.fx .bars i{flex:1;border-radius:8px 8px 3px 3px;transition:background .5s}
.fx .legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.fx .legend span{display:inline-flex;align-items:center;gap:6px}
.fx .legend span::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--p)}
.fx .mx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px}
.fx .mx-big{height:220px;border-radius:24px;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.06);transition:background .2s;display:flex;align-items:flex-end;padding:16px}
.fx .mx-big b{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.025em;display:block}
.fx .mx-big span{font-family:var(--mono);font-size:12px;opacity:.75}
.fx .mx-io{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.fx .mx-steps{display:flex;height:46px;border-radius:14px;overflow:hidden;margin-top:14px}
.fx .mx-steps button{flex:1;border:0;padding:0;background:var(--p);transition:flex .35s var(--ease)}
.fx .mx-steps button:hover{flex:1.8}
.fx .mx-steps button.on{box-shadow:inset 0 0 0 2px #fff}
.fx .cmp{display:grid;grid-template-columns:1fr 1fr;height:220px;border-radius:24px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.fx .cmp div{display:flex;align-items:flex-end;padding:16px;font-family:var(--mono);font-size:12px}
.fx .cmp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.fx .cs{border-radius:16px;padding:14px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.fx .cs .k{font-size:11.5px;font-weight:500;color:var(--muted-2)}
.fx .cs .v{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.03em;margin-top:4px}
.fx .cs .s{font-size:12px;color:var(--muted)}
.fx .cmp-say{margin:14px 0 0;font-size:14px;color:rgba(235,235,245,.8);line-height:1.55}
.fx .col-new{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px}
.fx .col-new .hexbox input{width:200px;text-transform:none;font-family:var(--sans);letter-spacing:-.01em;font-size:14px}
.fx .col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.fx .col{border-radius:22px;padding:16px;background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);display:grid;gap:12px;animation:fx-rise .5s var(--ease) both}
@keyframes fx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fx .col h4{margin:0;font-size:15px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px}
.fx .col h4 small{font-size:12px;font-weight:500;color:var(--muted-2)}
.fx .col .strip{display:flex;height:64px;border-radius:14px;overflow:hidden}
.fx .col .strip button{flex:1;border:0;padding:0;background:var(--p);position:relative;transition:flex .35s var(--ease)}
.fx .col .strip button:hover{flex:1.6}
.fx .col .strip button:hover::after{content:"×";position:absolute;inset:0;display:grid;place-items:center;font-size:18px;color:var(--x)}
.fx .col .strip .emptyc{flex:1;display:grid;place-items:center;font-size:12px;color:var(--muted-2);border:1px dashed rgba(255,255,255,.12);border-radius:14px}
.fx .col .acts{display:flex;gap:6px;flex-wrap:wrap}
.fx .share-out{margin-top:22px;display:none;border-radius:20px;padding:16px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.fx .share-out.show{display:block;animation:fx-rise .4s var(--ease)}
.fx .share-out code{display:block;font-family:var(--mono);font-size:12px;color:var(--muted);word-break:break-all;margin:6px 0 12px;user-select:all}
.fx .import{margin-top:26px;border-top:1px solid var(--line);padding-top:22px}
.fx .import h4{margin:0 0 4px;font-size:15px;font-weight:600}
.fx .import .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.fx .import .hexbox{flex:1;min-width:260px}
.fx .import .hexbox input{width:100%;text-transform:none;font-size:12.5px}
.fx .import-prev{margin-top:14px}
@media (max-width:900px){.fx .ph-grid,.fx .mx-grid,.fx .story,.fx .cv-chart{grid-template-columns:1fr}
.fx .st-plate{min-height:320px}
.fx .mk.phone-wrap,.fx .mk.room{grid-column:span 12}
.fx .mk.poster-wrap,.fx .mk.fabric-wrap,.fx .mk.box-wrap,.fx .mk.icon-wrap{grid-column:span 6}
.fx .cv-row{grid-template-columns:1fr;gap:8px}}
@media (max-width:640px){.fx .mk.poster-wrap,.fx .mk.fabric-wrap,.fx .mk.box-wrap,.fx .mk.icon-wrap{grid-column:span 12}
.fx .st-cols{grid-template-columns:1fr}
.fx .ll-stage{height:470px}
.fx .cmp-stats{grid-template-columns:1fr 1fr}
.fx .dhead{flex-wrap:wrap}}
/* ================= Tools menu + sheet ================= */
.btn .chev{width:10px!important;height:10px!important;opacity:.7;transition:transform .45s var(--spring)}
#fx-btn[aria-expanded="true"]{background:var(--glass-hi)}
#fx-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.fx-menu{position:fixed;z-index:60;width:min(600px,calc(100vw - 24px));padding:10px;border-radius:28px;
  background:linear-gradient(180deg,rgba(52,52,62,.66),rgba(26,26,32,.72));backdrop-filter:blur(34px) saturate(190%);-webkit-backdrop-filter:blur(34px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -24px 48px -40px rgba(255,255,255,.2),0 30px 80px -20px rgba(0,0,0,.85),0 0 0 .5px rgba(255,255,255,.08);
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity .22s ease,transform .5s var(--spring)}
.fx-menu::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--rim);opacity:.6;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fx-menu.open{opacity:1;transform:none}
.fxm-head{display:flex;align-items:center;gap:10px;padding:10px 14px 12px;font-size:13px;color:var(--muted)}
.fxm-head b{color:var(--ink);font-weight:600}
.fxm-dot{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 12px var(--c,transparent)}
.fxm-cols{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.fxm-grp{display:grid;gap:2px;align-content:start}
.fxm-grp h3{margin:4px 0 4px;padding:0 12px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.fxm-item{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;border:0;background:transparent;text-align:left;padding:9px 10px;border-radius:16px;color:var(--ink);transition:background .2s,transform .4s var(--spring)}
.fxm-item:hover,.fxm-item:focus-visible{background:rgba(255,255,255,.08);outline:none}
.fxm-item:active{transform:scale(.98)}
.fxm-item b{display:block;font-size:14px;font-weight:600;letter-spacing:-.015em}
.fxm-item span{display:block;font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:1px}
.fxi{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(160deg,var(--hi,#5a7bff),var(--c,#2a49d9) 55%,var(--lo,#162a8a));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2),0 6px 14px -6px rgba(0,0,0,.7)}
.fxi::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 45%)}
.fxi svg{width:20px;height:20px;position:relative;z-index:1;color:var(--on,#fff)}
.fxi.alt{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px -6px rgba(0,0,0,.7)}
.fxi.alt svg{color:var(--c-ui,#fff)}

.fx{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;background:rgba(7,7,10,.9);backdrop-filter:blur(44px) saturate(170%);-webkit-backdrop-filter:blur(44px) saturate(170%);
  opacity:0;transition:opacity .35s ease}
.fx.open{opacity:1}
.fx-bar{display:flex;align-items:center;gap:14px;padding:calc(14px + env(safe-area-inset-top,0px)) clamp(16px,3vw,44px) 10px}
.fx-titles{min-width:0}
.fx-kicker{display:block;font-size:12px;font-weight:600;color:var(--muted-2);letter-spacing:.02em}
.fx-titles h2{margin:1px 0 0;font-family:var(--display);font-weight:600;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.035em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-color{margin-left:auto;display:flex;align-items:center;gap:6px}
.fx-color .hexbox input{width:80px}
.fx-tabs{display:flex;justify-content:center;padding:4px clamp(16px,3vw,44px) 12px}
.fx-tabs .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.fx-tabs .seg::-webkit-scrollbar{display:none}
.fx-tabs button{display:inline-flex;align-items:center;gap:7px}
.fx-tabs button svg{width:15px;height:15px;opacity:.85}
.fx-tabs .sep{width:1px;align-self:stretch;margin:6px 4px;background:rgba(255,255,255,.12)}
.fx-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-mask-image:linear-gradient(transparent 0,#000 18px);mask-image:linear-gradient(transparent 0,#000 18px)}
.fx-inner{max-width:1240px;margin:0 auto;padding:6px clamp(16px,3vw,44px) calc(60px + env(safe-area-inset-bottom,0px))}
.fx .demo{margin-top:0}
.fx .demo.show{animation:fxIn .55s var(--ease) both}
@keyframes fxIn{from{opacity:0;transform:translateY(14px) scale(.995)}to{opacity:1;transform:none}}
.fx .dhead{margin-bottom:22px}
.fx .dhead p{margin:0;font-size:15.5px;color:rgba(235,235,245,.72);max-width:70ch}
.fx-open .views{visibility:hidden}
@media (max-width:719px){
  .fx-menu{left:8px!important;right:8px!important;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:auto;max-height:78vh;overflow-y:auto;transform:translateY(24px);transform-origin:bottom center;border-radius:30px}
  .fx-menu.open{transform:none}
  .fxm-cols{grid-template-columns:1fr}
  .fx-bar{flex-wrap:wrap;gap:10px}
  .fx-color{margin-left:0;width:100%}
  .fx-color .hexbox{flex:1}
  .fx-color .hexbox input{width:100%}
  .fx-tabs{justify-content:flex-start;padding-bottom:8px}
  .fx-tabs button .t{display:none}
  .fx-tabs button[aria-pressed="true"] .t{display:inline}
}

/* ---- M5 icon rail ---- */
.fx-menu.fx-rail{width:auto;padding:6px;border-radius:999px;transform-origin:top right}
.fxr{display:flex;align-items:center;gap:2px}
.fxr-b{position:relative;width:42px;height:42px;border:0;padding:0;border-radius:50%;background:transparent;display:grid;place-items:center;color:rgba(235,235,245,.72);cursor:pointer;
  transition:background .18s,color .2s,transform .4s var(--spring)}
.fxr-b svg{width:20px;height:20px}
.fxr-b:hover,.fxr-b:focus-visible{background:rgba(255,255,255,.09);color:var(--ac,#fff);transform:translateY(-1px);outline:none}
.fxr-b:active{transform:scale(.92)}
.fxr-t{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-4px);white-space:nowrap;font-size:12px;font-weight:500;letter-spacing:-.01em;color:var(--ink);
  padding:5px 10px;border-radius:999px;background:rgba(18,18,22,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px -8px rgba(0,0,0,.7);opacity:0;pointer-events:none;transition:opacity .15s,transform .3s var(--spring)}
.fxr-b:hover .fxr-t,.fxr-b:focus-visible .fxr-t{opacity:1;transform:translate(-50%,0)}
.fxr-s{display:none}
.fxr-dv{width:1px;height:20px;margin:0 5px;background:rgba(255,255,255,.12);flex:0 0 auto}
@media (max-width:719px){
  .fx-menu.fx-rail{border-radius:26px;padding:8px 6px;max-height:none;overflow:visible;bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .fxr{justify-content:space-between}
  .fxr-b{width:auto;flex:1;height:56px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
  .fxr-t{display:none}
  .fxr-s{display:block;font-size:10px;font-weight:500;color:rgba(235,235,245,.6)}
  .fxr-dv{height:30px;margin:0 2px}
}

/* ---- intro: spectrum slit ---- */
.intro-slit{position:fixed;inset:0;z-index:9999;cursor:pointer;overflow:hidden}
.intro-slit .is-veil{position:absolute;inset:0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.intro-slit .is-p{position:absolute;left:0;right:0;background:#050506}
.intro-slit .is-t{top:0;bottom:50%}.intro-slit .is-b{top:50%;bottom:0}
.intro-slit .is-wm{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-100% - clamp(26px,3.6vw,48px)));font-family:var(--display);font-weight:600;font-size:clamp(22px,2.8vw,40px);letter-spacing:-.03em;color:#f5f5f7;white-space:nowrap;opacity:0}
.intro-slit .is-wm i{font-style:normal;opacity:.6;margin-left:.26em}
.intro-slit .is-ln,.intro-slit .is-ln2{position:absolute;left:14%;right:14%;top:50%;height:2px;margin-top:-1px;border-radius:2px}
.intro-slit .is-ln{background:#fff;transform:scaleX(0)}
.intro-slit .is-ln2{opacity:0;background:linear-gradient(90deg,#ff5f6d,#ff9f5a,#ffd35a,#7be08f,#3fc7d9,#4f8cff,#9b6bff,#ff6bc8);box-shadow:0 0 18px 2px rgba(120,160,255,.45)}
/* ---- mockups: bento ---- */
/* tiles: image on top, caption beneath, never overlapping */
.mkb .mb-tile{display:flex;flex-direction:column;min-width:0}
.mkb .mb-tile .mb-art{position:relative;flex:1;min-height:0;border-radius:20px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 20px 44px -24px rgba(0,0,0,.8)}
.mkb .mb-tile .mb-cap{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:10px}
.mkb .mb-tile .mb-cap b{font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.015em}
.mkb .mb-tile .mb-cap span{font-size:12px;color:var(--muted)}
/* layouts */
.mkb .mb-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:330px 300px 420px 460px 360px;gap:18px}
.mkb .mb-bento .mb-t-can{grid-column:1/5;grid-row:3}.mkb .mb-bento .mb-t-key{grid-column:1/3;grid-row:4}.mkb .mb-bento .mb-t-watch{grid-column:3/5;grid-row:4}.mkb .mb-bento .mb-t-glass{grid-column:1/5;grid-row:5}
.mkb .mb-glass{position:absolute;inset:0;background:#02040c}.mkb .mb-glass canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mkb .mb-watch{position:absolute;inset:0;background:#05050a}.mkb .mb-watch canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:ns-resize;touch-action:manipulation}
.mkb .mb-key{position:absolute;inset:0;background:#000}.mkb .mb-key canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;touch-action:manipulation}
.mkb .mb-can{position:absolute;inset:0;background:#000}.mkb .mb-can canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}.mkb .mb-can canvas:active{cursor:grabbing}
.mkb .mb-bento .mb-t-wall{grid-column:1/3;grid-row:1}.mkb .mb-bento .mb-t-app{grid-column:3;grid-row:1/3}.mkb .mb-bento .mb-t-poster{grid-column:4;grid-row:1}
.mkb .mb-bento .mb-t-fabric{grid-column:1;grid-row:2}.mkb .mb-bento .mb-t-box{grid-column:2;grid-row:2}.mkb .mb-bento .mb-t-icon{grid-column:4;grid-row:2}
/* ---- wall ---- */
.mkb .mb-wall canvas{position:absolute;inset:0;width:100%;height:100%}
/* ---- phone ---- */
.mkb .mb-app-bg{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 35%,color-mix(in oklab,var(--c) 22%,#1b1c22),#0d0e12 75%);display:grid;place-items:center;container-type:size}
.mkb .mb-phone{position:relative;height:min(88cqh,calc(84cqw * 2.144));aspect-ratio:9/19.3;border-radius:15%/7%;padding:2.6%;background:linear-gradient(145deg,#8b8f95 0%,#3d4045 14%,#25272b 50%,#45484d 86%,#9a9ea4 100%);box-shadow:0 40px 70px -30px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.18)}
.mkb .mb-phone .mb-scr{position:relative;width:100%;height:100%;border-radius:12.5%/5.8%;overflow:hidden;background:#f3f3f5;font-family:var(--display);container-type:inline-size}
.mkb .mb-phone .mb-scr::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%);pointer-events:none}
.mkb .mb-phone .mb-island{position:absolute;left:50%;top:2.2%;width:30%;height:3.6%;transform:translateX(-50%);border-radius:999px;background:#000;z-index:3}
.mkb .mb-phone .mb-hd{height:36%;padding:22% 9% 0;background:linear-gradient(165deg,color-mix(in oklab,var(--c) 82%,#fff),var(--c) 55%,color-mix(in oklab,var(--c) 75%,#000));color:var(--ink-on)}
.mkb .mb-phone .mb-hd small{display:block;font-size:4cqw;opacity:.8;font-weight:500}
.mkb .mb-phone .mb-hd h6{margin:6% 0 0;font-size:9.2cqw;line-height:1.02;letter-spacing:-.04em;font-weight:700}
.mkb .mb-phone .mb-bd{padding:6% 7%;display:grid;gap:5%}
.mkb .mb-phone .mb-it{display:flex;gap:6%;align-items:center;padding:5% 6%;border-radius:3.5cqw;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.mkb .mb-phone .mb-it i{width:11%;aspect-ratio:1;border-radius:30%;background:color-mix(in oklab,var(--c) 14%,#fff);display:grid;place-items:center}
.mkb .mb-phone .mb-it i::after{content:"";width:46%;aspect-ratio:1;border-radius:30%;background:var(--c)}
.mkb .mb-phone .mb-it b{display:block;font-size:4.4cqw;color:#151518}
.mkb .mb-phone .mb-it span{display:block;font-size:3.6cqw;color:#8a8a90;margin-top:2px}
.mkb .mb-phone .mb-cta{margin:2% 7% 0;padding:5% 0;border-radius:12px;text-align:center;font-size:4.5cqw;font-weight:600;background:var(--c);color:var(--ink-on)}
.mkb .mb-phone .mb-tb{position:absolute;left:0;right:0;bottom:0;height:8%;display:flex;justify-content:space-around;align-items:center;background:rgba(255,255,255,.9);border-top:1px solid rgba(0,0,0,.06)}
.mkb .mb-phone .mb-tb i{width:7%;aspect-ratio:1;border-radius:30%;background:#d6d6da}.mkb .mb-phone .mb-tb i:first-child{background:var(--c)}
/* ---- poster ---- */
.mkb .mb-pwall{position:absolute;inset:0;background:radial-gradient(70% 70% at 40% 25%,#ece8e2,#cfcac3 75%);display:grid;place-items:center}
.mkb .mb-pwall::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.012) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.mkb .mb-sheet{position:relative;height:82%;aspect-ratio:1/1.414;container-type:inline-size;background:#f4f1eb;box-shadow:0 2px 3px rgba(0,0,0,.12),0 26px 40px -18px rgba(40,30,20,.45);display:flex;flex-direction:column;padding:5%}
.mkb .mb-sheet::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.18),transparent 35%,transparent 70%,rgba(0,0,0,.05));pointer-events:none}
.mkb .mb-sheet .mb-pf{position:relative;flex:1;overflow:hidden;background:var(--c)}
.mkb .mb-sheet .mb-pc{position:absolute;right:-18%;top:-12%;width:78%;aspect-ratio:1;border-radius:50%;background:var(--c2)}
.mkb .mb-sheet .mb-pt{position:absolute;left:7%;bottom:6%;right:7%;font-family:var(--display);font-weight:700;font-size:15cqw;line-height:.95;letter-spacing:-.045em;color:var(--ink-on)}
.mkb .mb-sheet .mb-pm{display:flex;justify-content:space-between;gap:4%;padding-top:5%;font-size:3.3cqw;white-space:nowrap;letter-spacing:.14em;text-transform:uppercase;color:#2a2a2e;font-weight:600}
.mkb .mb-clip{position:absolute;top:-2.2%;width:9%;height:4.5%;border-radius:2px;background:linear-gradient(180deg,#3a3b3f,#1c1d20);box-shadow:0 3px 5px rgba(0,0,0,.35);z-index:2}
.mkb .mb-clip.mb-l{left:16%}.mkb .mb-clip.mb-r{right:16%}
/* ---- fabric ---- */
.mkb .mb-fab{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 20%,#2b2724,#141211 75%)}
.mkb .mb-fab .mb-rod{position:absolute;left:8%;right:8%;top:9%;height:2.2%;border-radius:999px;background:linear-gradient(180deg,#b88c62,#6e4b2e);box-shadow:0 4px 8px rgba(0,0,0,.5);z-index:7}
.mkb .mb-fab .mb-drape{position:absolute;left:12%;right:12%;top:10%;bottom:4%}
/* ---- packaging ---- */
.mkb .mb-pk{position:absolute;inset:0;background:radial-gradient(75% 65% at 50% 35%,#e9e6e1,#c8c3bc 80%);perspective:900px;display:grid;place-items:center}
.mkb .mb-pk .mb-shadow{position:absolute;left:50%;top:76%;width:46%;height:9%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(40,30,20,.45),transparent);filter:blur(4px)}
.mkb .mb-box{--w:38%;position:relative;width:var(--w);aspect-ratio:1/1.3;transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(-30deg);transition:transform .25s ease-out;margin-top:-4%}
.mkb .mb-box .mb-f{position:absolute;inset:0;transform-style:preserve-3d}
.mkb .mb-box .mb-fr{container-type:inline-size;background:linear-gradient(170deg,color-mix(in oklab,var(--c) 92%,#fff),var(--c) 60%);display:flex;flex-direction:column;justify-content:space-between;padding:10% 9%;color:var(--ink-on);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mkb .mb-box .mb-sd{background:linear-gradient(180deg,color-mix(in oklab,var(--c) 70%,#000),color-mix(in oklab,var(--c) 58%,#000))}
.mkb .mb-box .mb-tp{background:linear-gradient(180deg,color-mix(in oklab,var(--c) 80%,#fff),color-mix(in oklab,var(--c) 92%,#fff))}
.mkb .mb-box .mb-fr small{font-size:5.4cqw;letter-spacing:.2em;text-transform:uppercase;opacity:.8;font-weight:600}
.mkb .mb-box .mb-fr b{display:inline-block;max-width:none;font-family:var(--display);font-size:var(--bfs,13cqw);line-height:1;letter-spacing:-.035em}
.mkb .mb-box .mb-fr span{display:block;margin-top:5cqw;font-family:var(--mono);font-size:5.6cqw;opacity:.85}
/* ---- app icon ---- */
.mkb .mb-home{position:absolute;inset:0;container-type:size;background:radial-gradient(60% 60% at 25% 20%,color-mix(in oklab,var(--c) 55%,#fff) 0,transparent 70%),radial-gradient(60% 70% at 85% 85%,color-mix(in oklab,var(--c) 60%,#000) 0,transparent 70%),linear-gradient(160deg,color-mix(in oklab,var(--c) 35%,#9aa) ,#20232b);display:grid;place-items:center}
.mkb .mb-home::before{content:"";position:absolute;inset:0;backdrop-filter:blur(2px)}
.mkb .mb-icons{position:relative;display:grid;grid-template-columns:repeat(4,auto);gap:min(5cqw,7cqh);align-items:start}
.mkb .mb-icon{display:grid;justify-items:center;gap:6px;font-size:min(2.8cqw,3.6cqh);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.mkb .mb-icon i{width:min(14cqw,19cqh);aspect-ratio:1;border-radius:23%;display:grid;place-items:center;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 6px 14px -6px rgba(0,0,0,.4);backdrop-filter:blur(10px)}
.mkb .mb-icon.mb-main i{background:linear-gradient(150deg,color-mix(in oklab,var(--c) 75%,#fff),var(--c) 55%,color-mix(in oklab,var(--c) 80%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 20px -8px rgba(0,0,0,.55);transform:scale(1.18)}
.mkb .mb-icon.mb-main i svg{width:52%;height:52%}
@media (max-width:980px){.mkb .mb-bento{grid-template-columns:1fr 1fr;grid-template-rows:280px 380px 260px 260px 300px 320px 380px 340px}.mkb .mb-bento .mb-t-can{grid-column:1/3;grid-row:5}.mkb .mb-bento .mb-t-key{grid-column:1/3;grid-row:6}.mkb .mb-bento .mb-t-watch{grid-column:1/3;grid-row:7}.mkb .mb-bento .mb-t-glass{grid-column:1/3;grid-row:8}.mkb .mb-bento .mb-t-wall{grid-column:1/3;grid-row:1}.mkb .mb-bento .mb-t-app{grid-column:1;grid-row:2}.mkb .mb-bento .mb-t-poster{grid-column:2;grid-row:2}.mkb .mb-bento .mb-t-fabric{grid-column:1;grid-row:3}.mkb .mb-bento .mb-t-box{grid-column:2;grid-row:3}.mkb .mb-bento .mb-t-icon{grid-column:1/3;grid-row:4}.grp .r2,.grp .r3,.grp .r4{grid-template-columns:1fr;height:auto}.grp .row .mb-tile{height:300px}}
.mkb .mb-drape canvas{position:absolute;inset:0;width:100%;height:100%}
.mkb .mb-tile .mb-cap b{color:var(--ink)}

/* ---- colour-blind check: refined rows ---- */
.fx #fx-d-vision.panel{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.fx #fx-d-vision .toolbar{margin-bottom:16px}
.cvx-rows{display:grid;gap:6px}
.cvx-row{display:grid;grid-template-columns:220px minmax(0,1fr) 150px;gap:20px;align-items:center;padding:10px 12px;border-radius:16px;transition:background .25s}
.cvx-row:hover{background:rgba(255,255,255,.03)}
.cvx-row h4{margin:0;font-weight:600;font-size:15px;letter-spacing:-.015em}
.cvx-row p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.cvx-strip{position:relative;display:grid;gap:6px;padding-bottom:12px}
.cvx-chip{position:relative;display:block;border-radius:12px;transition:background-color .5s ease,box-shadow .25s ease,transform .3s cubic-bezier(.34,1.4,.64,1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 1px 0 rgba(0,0,0,.2)}
.cvx-strip .cvx-chip{height:58px}
.cvx-chip.clash{box-shadow:0 0 0 2px #0b0b0e,0 0 0 3.5px #ffb547}
.cvx-strip .cvx-chip.hot{transform:translateY(-3px)}
.cvx-strip svg{position:absolute;left:0;right:0;bottom:0;height:12px;width:100%;overflow:visible;pointer-events:none}
.cvx-st{justify-self:end}
.cvx-pill{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.cvx-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.cvx-pill.ok{color:#7fe0a6;background:rgba(127,224,166,.1)}.cvx-pill.bad{color:#ffc56b;background:rgba(255,181,71,.12)}.cvx-pill.base{color:var(--muted);background:rgba(255,255,255,.06)}
.cvx-chart{margin-top:22px;padding:20px;border-radius:20px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cvx-ch-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.cvx-ch-h b{font-size:14.5px;font-weight:600}
.cvx-ch-h .seg{flex-wrap:wrap}
.cvx-bars{display:flex;align-items:flex-end;gap:3%;height:170px;padding:0 2%;border-bottom:1px solid rgba(255,255,255,.1);background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 42px)}
.cvx-bars .cvx-chip{flex:1;border-radius:9px 9px 3px 3px}
.cvx-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;color:var(--muted)}
.cvx-legend span{display:inline-flex;align-items:center;gap:7px}.cvx-legend i{width:10px;height:10px;border-radius:3px;transition:background-color .5s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.cvx-tip{position:fixed;z-index:10000;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));padding:8px 11px;border-radius:12px;background:rgba(22,22,28,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px -10px rgba(0,0,0,.8);font-size:12px;white-space:nowrap;color:#f2f2f4;opacity:0;transition:opacity .15s}
.cvx-tip.on{opacity:1}.cvx-tip i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.cvx-tip code{font-family:var(--mono,ui-monospace,monospace);font-size:11px}
@media (max-width:860px){.cvx-row{grid-template-columns:1fr;gap:10px}.cvx-st{justify-self:start}}
@media (prefers-reduced-motion:reduce){.cvx-chip,.cvx-legend i{transition:none}}
.fx .cvx-seg{display:inline-flex;flex-wrap:wrap;max-width:100%;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);position:relative}
.fx .cvx-seg button{position:relative;z-index:1;height:32px;padding:0 15px;border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:500;color:var(--muted);background:transparent;cursor:pointer;transition:color .25s}
.fx .cvx-seg button[aria-pressed="true"]{color:#fff}
.fx .cvx-seg .thumb{position:absolute;top:3px;bottom:3px;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px -6px rgba(0,0,0,.6);transition:left .45s var(--ease),width .45s var(--ease),top .45s var(--ease)}
.fx .cvx-rows{display:grid;gap:6px;margin-top:18px}
.fx .cvx-row{display:grid;grid-template-columns:220px minmax(0,1fr) 150px;gap:20px;align-items:center;padding:10px 12px;border-radius:16px;transition:background .25s}
.fx .cvx-row:hover{background:rgba(255,255,255,.03)}
.fx .cvx-row h4{margin:0;font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.015em}
.fx .cvx-row p{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.fx .cvx-strip{position:relative;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:6px;padding-bottom:12px}
.fx .cvx-strip svg{position:absolute;left:0;right:0;bottom:0;height:12px;width:100%;overflow:visible;pointer-events:none}
.fx .cvx-chip{display:block;position:relative;height:58px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 1px 0 rgba(0,0,0,.2);transition:background-color .5s ease,box-shadow .25s ease,transform .3s cubic-bezier(.34,1.4,.64,1)}
.fx .cvx-chip.clash{box-shadow:0 0 0 2px #0b0b0f,0 0 0 3.5px #ffb547}
.fx .cvx-chip.hot{transform:translateY(-3px)}
.fx .cvx-st{justify-self:end}
.fx .cvx-pill{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.fx .cvx-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.fx .cvx-pill.ok{color:#7fe0a6;background:rgba(127,224,166,.1)}.fx .cvx-pill.bad{color:#ffc56b;background:rgba(255,181,71,.12)}.fx .cvx-pill.base{color:var(--muted);background:rgba(255,255,255,.06)}
.fx .cvx-chart{margin-top:22px;padding:20px;border-radius:20px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.fx .cvx-ch-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.fx .cvx-ch-h b{font-family:var(--display);font-size:14.5px;font-weight:600}
.fx .cvx-bars{display:flex;align-items:flex-end;gap:3%;height:170px;padding:0 2%;border-bottom:1px solid rgba(255,255,255,.1);background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 42px)}
.fx .cvx-bars .cvx-chip{flex:1;border-radius:9px 9px 3px 3px}
.fx .cvx-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;color:var(--muted)}
.fx .cvx-legend span{display:inline-flex;align-items:center;gap:7px}.fx .cvx-legend i{width:10px;height:10px;border-radius:3px;transition:background-color .5s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.cvx-tip{position:fixed;z-index:10050;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));padding:8px 11px;border-radius:12px;background:rgba(22,22,28,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px -10px rgba(0,0,0,.8);font-size:12px;color:#f2f2f4;white-space:nowrap;opacity:0;transition:opacity .15s}
.cvx-tip.on{opacity:1}.cvx-tip i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin:0 5px 0 0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.cvx-tip code{font-family:var(--mono);font-size:11px}
@media (max-width:860px){.fx .cvx-row{grid-template-columns:1fr;gap:10px}.fx .cvx-st{justify-self:start}}
@media (prefers-reduced-motion:reduce){.fx .cvx-chip,.fx .cvx-seg .thumb,.fx .cvx-legend i{transition:none!important}}
.fx .ph2-tb{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.fx .ph2-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:0;border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;color:#111114;background:#f2f2f4;box-shadow:0 6px 18px -8px rgba(0,0,0,.6);transition:transform .2s,background .2s}
.fx .ph2-btn:hover{transform:translateY(-1px);background:#fff}.fx .ph2-btn svg{width:16px;height:16px}
.fx .ph2-btn:focus-within,.fx .ph2-btn:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px}
.fx .ph2-samples{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.fx .ph2-thumb{width:56px;height:40px;border:0;padding:0;border-radius:10px;overflow:hidden;cursor:pointer;background:#222;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 4px 12px -6px rgba(0,0,0,.6);transition:transform .25s cubic-bezier(.34,1.4,.64,1),box-shadow .2s}
.fx .ph2-thumb canvas{width:100%;height:100%;display:block}
.fx .ph2-thumb:hover{transform:translateY(-2px)}.fx .ph2-thumb[aria-pressed="true"]{box-shadow:0 0 0 2px #0b0b0f,0 0 0 3.5px #fff}
.fx .ph2-split{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:stretch}
.fx .ph2-stage{position:relative;min-height:380px;border-radius:20px;overflow:hidden;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);display:grid;place-items:center;transition:box-shadow .25s,background .25s}
.fx .ph2-stage.is-empty{background:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 12px,transparent 12px 24px),rgba(255,255,255,.02)}
.fx .ph2-stage.over{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);background:rgba(255,255,255,.05)}
.fx .ph2-stage canvas.photo{display:block;max-width:100%;max-height:100%;width:auto;height:auto}
.fx .ph2-es{display:grid;justify-items:center;gap:10px;text-align:center;color:var(--muted);font-size:13.5px;padding:20px}
.fx .ph2-es svg{width:34px;height:34px;opacity:.6}.fx .ph2-es b{color:var(--ink);font-weight:600;font-size:14.5px}
.fx .ph2-pin{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;box-shadow:0 0 0 2.5px #fff,0 6px 14px rgba(0,0,0,.55);transform:scale(0);animation:ph2pin .5s cubic-bezier(.34,1.56,.64,1) forwards;transition:box-shadow .2s;pointer-events:auto;cursor:pointer;z-index:2}
.fx .ph2-pin.hot{box-shadow:0 0 0 2.5px #fff,0 0 0 7px rgba(255,255,255,.28),0 6px 14px rgba(0,0,0,.55)}
@keyframes ph2pin{to{transform:scale(1)}}
.fx .ph2-res{display:flex;flex-direction:column;min-width:0}
.fx .ph2-res-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.fx .ph2-res-h b{font-family:var(--display);font-size:15px;font-weight:600}
.fx .ph2-step{display:inline-flex;align-items:center;gap:2px;height:34px;padding:3px;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);font-size:12.5px;color:var(--muted)}
.fx .ph2-step button{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:var(--ink);font-size:16px;cursor:pointer;transition:background .2s}
.fx .ph2-step button:hover{background:rgba(255,255,255,.1)}.fx .ph2-step button:disabled{opacity:.3;cursor:default}
.fx .ph2-step span{min-width:72px;text-align:center}
.fx .ph2-cov{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px;margin-bottom:14px}
.fx .ph2-cov:empty{background:rgba(255,255,255,.05)}
.fx .ph2-cov i{transition:flex .5s ease,background-color .5s}
.fx .ph2-list{display:grid;gap:4px}
.fx .ph2-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto 48px;align-items:center;gap:12px;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background .2s}
.fx .ph2-row:hover,.fx .ph2-row.hot{background:rgba(255,255,255,.05)}
.fx .ph2-row i{width:34px;height:34px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.fx .ph2-row b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fx .ph2-row small{font-size:11.5px;color:var(--muted)}
.fx .ph2-row code{font-family:var(--mono);font-size:11.5px;color:var(--muted)}.fx .ph2-row em{font-style:normal;font-family:var(--mono);font-size:11.5px;text-align:right}
.fx .ph2-row.ghost{cursor:default}.fx .ph2-row.ghost i,.fx .ph2-row.ghost .gl{background:rgba(255,255,255,.05);box-shadow:none}.fx .ph2-row.ghost .gl{display:block;height:10px;border-radius:6px}
.fx .ph2-row.pick{background:rgba(255,255,255,.04)}
.fx .ph2-foot{margin-top:14px;font-size:12px;color:var(--muted-2,rgba(235,235,245,.45))}
.fx .ph2-loupe{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 3px #fff,0 14px 30px -8px rgba(0,0,0,.7);overflow:hidden;opacity:0;transition:opacity .15s;z-index:3;background:#000}
.fx .ph2-loupe canvas{width:100%;height:100%;image-rendering:pixelated}
.fx .ph2-loupe::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:3px;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(0,0,0,.4)}
.fx .ph2-tag{position:absolute;transform:translate(-50%,72px);padding:6px 10px 6px 7px;border-radius:999px;display:flex;gap:7px;align-items:center;font-size:12px;white-space:nowrap;background:rgba(18,18,22,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);pointer-events:none;opacity:0;transition:opacity .15s;z-index:3}
.fx .ph2-tag i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.fx .ph2-tag code{font-family:var(--mono);font-size:11px;color:var(--muted)}
.fx .ph2-stage.on .ph2-loupe,.fx .ph2-stage.on .ph2-tag{opacity:1}.fx .ph2-stage.lp{cursor:crosshair}.fx .ph2-stage.lp.on{cursor:none}
@media (max-width:860px){.fx .ph2-split{grid-template-columns:1fr}.fx .ph2-stage{min-height:260px}}
@media (hover:none){.fx .ph2-loupe,.fx .ph2-tag{display:none}}
@media (prefers-reduced-motion:reduce){.fx .ph2-pin{animation:none;transform:none}.fx .ph2-cov i{transition:none}}
/* mockups: trimmed bento (app, app icon, can, keycap, watch, glass) */
.mkb .mb-bento{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:460px 360px 460px}
.mkb .mb-bento .mb-t-app{grid-column:1;grid-row:1/3}.mkb .mb-bento .mb-t-can{grid-column:2/5;grid-row:1}
.mkb .mb-bento .mb-t-icon{grid-column:2/4;grid-row:2}.mkb .mb-bento .mb-t-key{grid-column:4;grid-row:2}
.mkb .mb-bento .mb-t-watch{grid-column:1/3;grid-row:3}.mkb .mb-bento .mb-t-glass{grid-column:3/5;grid-row:3}
@media (max-width:980px){.mkb .mb-bento{grid-template-columns:1fr 1fr;grid-template-rows:300px 440px 320px 380px 340px}
  .mkb .mb-bento .mb-t-can{grid-column:1/3;grid-row:1}.mkb .mb-bento .mb-t-app{grid-column:1;grid-row:2}.mkb .mb-bento .mb-t-icon{grid-column:2;grid-row:2}
  .mkb .mb-bento .mb-t-key{grid-column:1/3;grid-row:3}.mkb .mb-bento .mb-t-watch{grid-column:1/3;grid-row:4}.mkb .mb-bento .mb-t-glass{grid-column:1/3;grid-row:5}}
/* mockups: every tile square */
.mkb .mb-bento{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:none!important;grid-auto-rows:auto!important}
.mkb .mb-bento .mb-tile{grid-column:auto!important;grid-row:auto!important}
.mkb .mb-bento .mb-art{flex:none;aspect-ratio:1/1}
@media (max-width:980px){.mkb .mb-bento{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:560px){.mkb .mb-bento{grid-template-columns:minmax(0,1fr)!important}}
/* mockups: app icon, wave switch */
.mkb .mbh{position:absolute;inset:0;overflow:hidden;container-type:inline-size;font-family:var(--display);user-select:none;-webkit-user-select:none}
.mkb .mbh-wp{position:absolute;inset:-4%;background:radial-gradient(55% 50% at 25% 20%,color-mix(in oklab,var(--c) 45%,#fff) 0,transparent 70%),radial-gradient(60% 65% at 85% 85%,color-mix(in oklab,var(--c) 75%,#000) 0,transparent 70%),linear-gradient(160deg,color-mix(in oklab,var(--c) 40%,#8796a8),color-mix(in oklab,var(--c) 30%,#1d2029));transition:filter .45s}
.mkb .mbh.mbh-dark .mbh-wp{filter:brightness(.45) saturate(1.1)}
.mkb .mbh-sb{position:absolute;left:6cqw;right:6cqw;top:3.5cqw;display:flex;justify-content:space-between;font-size:3.3cqw;font-weight:600;color:#fff;z-index:2}
.mkb .mbh-seg{position:absolute;left:50%;top:2cqw;transform:translateX(-50%);display:flex;gap:2px;padding:1cqw;border-radius:99px;background:rgba(20,20,26,.5);backdrop-filter:blur(16px);z-index:4;box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.mkb .mbh-seg button{border:0;border-radius:99px;padding:1.1cqw 2.6cqw;font:600 2.5cqw var(--display);color:rgba(255,255,255,.75);background:none;cursor:pointer}
.mkb .mbh-seg button[aria-pressed="true"]{background:rgba(255,255,255,.9);color:#111}
.mkb .mbh-grid{position:absolute;left:18cqw;right:18cqw;top:13.5cqw;display:grid;grid-template-columns:repeat(2,1fr);row-gap:4cqw;justify-items:center;z-index:2}
.mkb .mbh-dock{position:absolute;left:16cqw;right:16cqw;bottom:4cqw;height:20cqw;border-radius:7cqw;display:grid;grid-template-columns:repeat(3,1fr);place-items:center;z-index:2;background:rgba(255,255,255,.16);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.mkb .mbh-ic{display:grid;justify-items:center;gap:1.8cqw;border:0;padding:0;background:none;color:#fff;font:500 3.4cqw var(--display);cursor:pointer;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.mkb .mbh-sq{position:relative;width:20.5cqw;aspect-ratio:1;border-radius:23%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.36),rgba(255,255,255,.14));box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 6px 14px -6px rgba(0,0,0,.45);backdrop-filter:blur(12px);transition:background .45s,box-shadow .45s;transition-delay:var(--d,0ms)}
.mkb .mbh-dock .mbh-sq{width:14.5cqw}
.mkb .mbh-sq svg{width:50%;height:50%;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s;transition-delay:var(--d,0ms)}
.mkb .mbh-ic.main .mbh-sq{background:linear-gradient(150deg,color-mix(in oklab,var(--c) 75%,#fff),var(--c) 55%,color-mix(in oklab,var(--c) 75%,#000));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 20px -8px rgba(0,0,0,.55)}
.mkb .mbh-ic.main .mbh-sq svg{stroke:var(--ink-on)}
.mkb .mbh.mbh-dark .mbh-sq{background:linear-gradient(160deg,#2a2b30,#141518);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 14px -6px rgba(0,0,0,.6)}
.mkb .mbh.mbh-dark .mbh-sq svg{stroke:#d9dade}.mkb .mbh.mbh-dark .mbh-ic.main .mbh-sq svg{stroke:color-mix(in oklab,var(--c) 70%,#fff)}
.mkb .mbh.mbh-tint .mbh-sq{background:linear-gradient(160deg,color-mix(in oklab,var(--c) 32%,#1a1b20),color-mix(in oklab,var(--c) 18%,#0e0f12));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c) 30%,transparent)}
.mkb .mbh.mbh-tint .mbh-sq svg{stroke:color-mix(in oklab,var(--c) 55%,#fff)}
.mkb .mbh.mbh-clear .mbh-sq{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.2px rgba(255,255,255,.55),inset 0 -8px 16px -10px rgba(255,255,255,.25),0 10px 18px -10px rgba(0,0,0,.4);backdrop-filter:blur(14px) saturate(1.5)}
.mkb .mbh.mbh-clear .mbh-sq svg{stroke:rgba(255,255,255,.95)}
.mkb .mbh.mbh-clear .mbh-sq::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(60% 50% at 30% 20%,rgba(255,255,255,.55),transparent 60%);mix-blend-mode:overlay;pointer-events:none}
.mkb .mbh-ring{position:absolute;width:300cqw;aspect-ratio:1;border-radius:50%;border:1.2cqw solid rgba(255,255,255,.55);pointer-events:none;z-index:3}
/* mockups: toolbar carousel (glow) */
.mkb .mbt{position:absolute;inset:0;overflow:hidden;container-type:inline-size;user-select:none;-webkit-user-select:none;font-family:var(--display);outline:none;touch-action:pan-y;
  background:radial-gradient(60% 40% at 50% 50%,color-mix(in oklab,var(--c) 22%,transparent),transparent 72%),linear-gradient(180deg,#0b0d13,#07080c)}
.mkb .mbt:focus-visible{box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.mkb .mbt-ln{position:absolute;left:6%;right:6%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--c) 45%,transparent) 30%,color-mix(in oklab,var(--c) 70%,#fff) 50%,color-mix(in oklab,var(--c) 45%,transparent) 70%,transparent)}
.mkb .mbt-ln.t{top:33%}.mkb .mbt-ln.b{top:67%}
.mkb .mbt-floor{position:absolute;left:50%;top:58%;width:56cqw;height:16cqw;transform:translateX(-50%);border-radius:50%;filter:blur(6cqw);opacity:.5;background:var(--c);pointer-events:none}
.mkb .mbt-cap{position:absolute;left:0;right:0;top:calc(33% - 9cqw);text-align:center;font-size:2.7cqw;letter-spacing:.18em;text-transform:uppercase;color:rgba(200,206,220,.35)}
.mkb .mbt-vp{position:absolute;inset:0;-webkit-mask:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.mkb .mbt-track{position:absolute;left:0;top:50%;height:16cqw;margin-top:-8cqw;display:flex;gap:4cqw;align-items:center;transition:transform .6s cubic-bezier(.32,.72,0,1)}
.mkb .mbt-it{position:relative;flex:none;height:16cqw;width:16cqw;border:0;padding:0;border-radius:99px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7d8597;font:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.06),0 1.5cqw 3cqw -1.6cqw rgba(0,0,0,.8);
  transition:width .6s cubic-bezier(.32,.72,0,1),background .45s,box-shadow .45s,color .3s,transform .25s}
.mkb .mbt-it svg{width:6.2cqw;height:6.2cqw;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mkb .mbt-lb{font-size:5.7cqw;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;max-width:0;opacity:0;margin-left:0;transition:max-width .6s cubic-bezier(.32,.72,0,1),opacity .25s,margin .6s cubic-bezier(.32,.72,0,1)}
.mkb .mbt-it.on .mbt-lb{max-width:36cqw;opacity:1;margin-left:2.4cqw;transition:max-width .6s cubic-bezier(.32,.72,0,1),opacity .35s .22s,margin .6s cubic-bezier(.32,.72,0,1)}
.mkb .mbt-it:not(.on):hover{color:#c6cbd6}.mkb .mbt-it:active{transform:scale(.96)}
.mkb .mbt-it.on{width:var(--w);color:var(--ink-on);background:linear-gradient(180deg,color-mix(in oklab,var(--c) 78%,#fff) 0%,var(--c) 52%,color-mix(in oklab,var(--c) 88%,#000) 100%);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--c) 45%,#fff),inset 0 .8cqw 1.4cqw -.6cqw rgba(255,255,255,.4),0 0 3cqw color-mix(in oklab,var(--c) 55%,transparent),0 0 12cqw color-mix(in oklab,var(--c) 32%,transparent),0 2cqw 4cqw -2cqw rgba(0,0,0,.8)}
.mkb .mbt-dots{position:absolute;left:50%;top:calc(67% + 6cqw);transform:translateX(-50%);display:flex;gap:1.4cqw}
.mkb .mbt-dots i{width:1.4cqw;height:1.4cqw;border-radius:2cqw;background:rgba(255,255,255,.18);transition:width .45s cubic-bezier(.32,.72,0,1),background .45s}.mkb .mbt-dots i.on{width:4.6cqw;background:var(--c)}
@media (prefers-reduced-motion:reduce){.mkb .mbt-track,.mkb .mbt-it,.mkb .mbt-lb{transition:none!important}}