/* AstroEngine site. Tokens from the app's Quiet Ledger (DESIGN.md). One sheet for all seven pages. */
@font-face{font-family:Inter;src:url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Schibsted Grotesk, SIL OFL 1.1: assets/fonts/schibsted-grotesk-OFL.txt */
@font-face{font-family:"Schibsted Grotesk";src:url(/assets/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --ground:#f3f3f6;--paper:#ffffff;--plate:#0e0e10;
  --accent:#6e56cf;--accent-hover:#5f48c0;--on-accent:#ffffff;
  --bg:var(--ground);--fg:#16161d;--fg-2:#3b3b46;--fg-3:#62626e;--rule:#dedee6;--rule-soft:#e8e8ee;
  --link:#5b44c7;--focus:#6e56cf;--selection:rgba(110,86,207,.22);--thumb:#b4b4bd;
  --win-line:rgba(22,22,29,.14);--win-shadow:0 18px 40px -18px rgba(22,22,29,.32);--hover:rgba(22,22,29,.06);
  --sans:Inter,"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --display:"Schibsted Grotesk",Inter,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,"Cascadia Mono",Consolas,monospace;
  --gutter:clamp(20px,4.4vw,64px);--max:1320px;--section:clamp(72px,8.4vw,120px);
  --r-sm:4px;--r-btn:8px;--r-win:10px;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
.band{
  --bg:var(--plate);--fg:#ededf1;--fg-2:#c9c9d1;--fg-3:#9898a4;--rule:#2c2c33;--rule-soft:#25252b;
  --link:#ab9bff;--focus:#ab9bff;--selection:rgba(110,86,207,.38);--thumb:#55555f;
  --win-line:rgba(255,255,255,.12);--win-shadow:0 18px 40px -18px rgba(0,0,0,.7);
  color-scheme:dark;
}
/* the dark theme: the app's dark Quiet Ledger (DESIGN.md *-dark) over the whole page, the band's set on a page a step lighter than
   its plate, so a band still reads as its own plate. <html data-theme> is "auto" (follow the system), "light" or "dark" (the
   header toggle, saved). A page without the attribute, such as the portal's /account pages, stays light. The two blocks are one
   set: change both. */
:root[data-theme=dark]{
  --ground:#141417;--paper:#1a1a1e;--plate:#0e0e10;--accent-hover:#775fd2;
  --fg:#ededf1;--fg-2:#c9c9d1;--fg-3:#9898a4;--rule:#2c2c33;--rule-soft:#25252b;
  --link:#ab9bff;--focus:#ab9bff;--selection:rgba(110,86,207,.38);--thumb:#55555f;
  --win-line:rgba(255,255,255,.12);--win-shadow:0 18px 40px -18px rgba(0,0,0,.7);--hover:rgba(237,237,241,.07);
  color-scheme:dark;
}
@media(prefers-color-scheme:dark){:root[data-theme=auto]{
  --ground:#141417;--paper:#1a1a1e;--plate:#0e0e10;--accent-hover:#775fd2;
  --fg:#ededf1;--fg-2:#c9c9d1;--fg-3:#9898a4;--rule:#2c2c33;--rule-soft:#25252b;
  --link:#ab9bff;--focus:#ab9bff;--selection:rgba(110,86,207,.38);--thumb:#55555f;
  --win-line:rgba(255,255,255,.12);--win-shadow:0 18px 40px -18px rgba(0,0,0,.7);--hover:rgba(237,237,241,.07);
  color-scheme:dark;
}}
/* a light screenshot keeps its light window in either theme; the dark windows (.win-dark) set their own colours */
.win-light{--paper:#ffffff;--rule-soft:#e8e8ee;--fg-3:#62626e}

*{box-sizing:border-box;margin:0}
:root{--head:88px}
[id],a,button,input,summary{scroll-margin-top:var(--head)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--thumb) var(--ground);overflow-x:clip}
body{background:var(--ground);color:var(--fg);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--selection)}
img{display:block;max-width:100%;height:auto}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
@media(hover:hover) and (pointer:fine){a:hover{color:var(--fg)}}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:30;background:var(--fg);color:var(--ground);padding:10px 14px;border-radius:var(--r-btn)}
.skip:hover{color:var(--ground)}
.skip:focus{left:8px;color:var(--ground)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--fg);text-wrap:balance}
h1{font-size:clamp(2.125rem,4.2vw,3.75rem);line-height:1.06;letter-spacing:-.03em}
h2{font-size:clamp(1.75rem,3vw,2.625rem);line-height:1.12;letter-spacing:-.03em}
h3{font-size:1.125rem;line-height:1.3;letter-spacing:-.012em}
p{max-width:64ch;text-wrap:pretty}
.lede{font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.55;color:var(--fg-2)}
.note{color:var(--fg-3);font-size:15px}
.hex,code,pre{font-family:var(--mono);font-size:.9em;font-variant-numeric:tabular-nums}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);border-radius:var(--r-btn);font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background-color .14s,border-color .14s,color .14s,transform .16s var(--ease)}
@media(hover:hover) and (pointer:fine){.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--on-accent)}}
.btn:active:not(:disabled){transform:scale(.97)}
.btn.sm{min-height:38px;padding:0 14px;font-size:15px}
.btn.ghost{background:var(--paper);color:var(--fg);border-color:var(--rule)}
@media(hover:hover) and (pointer:fine){.btn.ghost:hover{background:var(--paper);border-color:var(--fg-3);color:var(--fg)}}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;cursor:default}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.plain{font-weight:600}

/* header */
header.top{position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:1px solid var(--rule)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--fg);font:600 19px/1 var(--display);letter-spacing:-.02em;text-decoration:none}
@media(hover:hover) and (pointer:fine){.brand:hover{color:var(--fg)}}
.brand img{height:26px;width:auto}
nav.main{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);margin-left:auto}
.nav-cta{flex:none}
nav.main a{color:var(--fg-2);font-size:15px;font-weight:500;white-space:nowrap;text-decoration:none;padding:8px 0;transition:color .14s}
@media(hover:hover) and (pointer:fine){nav.main a:hover{color:var(--fg)}}
/* the theme toggle, beside Get Access: a moon in the light theme, a sun in the dark one. aria-pressed = dark. */
.theme-btn{flex:none;display:inline-grid;place-items:center;width:38px;height:38px;margin-right:-12px;padding:0;background:transparent;color:var(--fg-2);border:1px solid var(--rule);border-radius:var(--r-btn);cursor:pointer;transition:color .14s,border-color .14s,transform .16s var(--ease)}
.theme-btn:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.theme-btn:hover{color:var(--fg);border-color:var(--fg-3)}}
.theme-btn svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s var(--ease),transform .2s var(--ease),filter .2s var(--ease)}
.theme-btn .sun,:root[data-theme=dark] .theme-btn .moon{opacity:0;transform:scale(.6);filter:blur(2px)}
:root[data-theme=dark] .theme-btn .sun{opacity:1;transform:none;filter:none}
@media(prefers-color-scheme:dark){:root[data-theme=auto] .theme-btn .moon{opacity:0;transform:scale(.6);filter:blur(2px)}:root[data-theme=auto] .theme-btn .sun{opacity:1;transform:none;filter:none}}
/* phones: the header's first row is the mark, the toggle and Get Access, 8 px apart; fingers get 44 px */
@media(max-width:860px),(pointer:coarse){.theme-btn{width:44px;height:44px}}
@media(max-width:860px){.theme-btn{margin:0 8px 0 auto}.theme-btn+.nav-cta{margin-left:0}}
@media(min-width:700px) and (max-height:500px) and (orientation:landscape) and (pointer:coarse){.theme-btn{margin:0 -4px 0 0}}
/* narrow phones: the mark and Get Access step down so the row still holds all three (header.top beats the later 340 px rules) */
@media(max-width:380px){header.top .brand{gap:8px;font-size:17px}header.top .brand img{height:22px}header.top .nav-cta{padding:0 12px}}
@media(max-width:340px){header.top .brand{font-size:15px}header.top .nav-cta{padding:0 10px;font-size:14px}.theme-btn{width:40px;height:40px;margin:0 5px 0 auto;border-color:transparent}}

/* a screenshot in a window: small radius, one hairline, one soft shadow. Images keep their own proportions. */
.win{position:relative;min-width:0;overflow:hidden;background:var(--plate);border:1px solid var(--win-line);border-radius:var(--r-win);box-shadow:var(--win-shadow)}
.win>img{width:100%}
.win>video{display:block;width:100%;height:auto}
.win>picture{display:block}
.win>picture img{display:block;width:100%;height:auto}
.win-light{background:var(--paper)}
.win-bar{display:flex;align-items:center;min-height:32px;padding:0 12px;background:var(--paper);border-bottom:1px solid var(--rule-soft);color:var(--fg-3);font-size:13px;font-weight:500;line-height:1}
.win-dark{--rule-soft:#25252b;--paper:#141417;--fg-3:#a8a8b4;background:#0f0f12}

/* hero: the dark band, so the page opens on the product. It says what it is beside the headline, then shows the two windows together */
.hero{padding:clamp(36px,4vw,56px) 0 clamp(48px,6vw,88px)}
.hero-top{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:20px clamp(32px,4.4vw,64px);align-items:start}
.hero .lede{font-size:clamp(1rem,1.2vw,1.0625rem)}
.hero .actions{margin-top:20px}
.hero .note{margin-top:12px}
.desk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin-top:clamp(28px,3vw,40px)}
.win-chart{grid-area:1/1/2/11;align-self:start;background:var(--paper)}
.win-app{grid-area:1/7/2/-1;align-self:end;margin-bottom:28px;animation:rise .8s var(--ease) both}
@keyframes rise{from{transform:translateY(28px)}}

/* how it works: a real sequence, so the steps sit on one track */
.how{padding:var(--section) 0;background:var(--paper)}
.flow{--gap:clamp(24px,3.6vw,56px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px var(--gap);margin-top:clamp(32px,3.6vw,48px);padding:0;list-style:none;counter-reset:step}
.flow li{position:relative;padding-top:48px;counter-increment:step}
.flow li::before{content:"";position:absolute;top:15px;left:0;right:calc(-1*var(--gap));height:1px;background:var(--rule)}
.flow li:last-child::before{right:0}
.flow h3::before{content:counter(step);position:absolute;top:0;left:0;display:grid;place-items:center;width:31px;height:31px;background:var(--accent);color:var(--on-accent);border-radius:50%;font-size:14px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
.flow p{margin-top:6px;color:var(--fg-2)}
.flow h3::before{z-index:1}
.flow li::after{content:"";position:absolute;top:15px;left:0;right:calc(-1*var(--gap));height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left}
.flow li:last-child::after{right:0}
.flow.go li::after{transform:none;transition:transform .7s var(--ease)}
.flow.go li:nth-child(2)::after{transition-delay:.45s}
.flow.go li:nth-child(3)::after{transition-delay:.9s}
.how-more{margin-top:clamp(20px,2.4vw,28px)}
.how-more .how-notes{margin-top:8px;padding-top:0;border-top:0}
.how-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px clamp(24px,3.6vw,56px);margin-top:clamp(32px,3.6vw,48px);padding-top:clamp(24px,2.6vw,32px);border-top:1px solid var(--rule)}
.how-notes p{color:var(--fg-2)}
.how-notes strong{color:var(--fg);font-weight:600}

/* trading tools */
.features{padding:var(--section) 0}
.sec-head p{margin-top:12px;color:var(--fg-2)}
.sec-lead{display:block;margin-bottom:6px;color:var(--fg);font-size:1.125rem;line-height:1.4;font-weight:500;letter-spacing:-.01em}
.tool{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(20px,2.4vw,32px);align-items:center;margin-top:clamp(56px,6.6vw,96px)}
.tool-text{grid-column:1/6}
.tool>figure{grid-column:6/-1}
.tool.flip .tool-text{grid-column:8/-1;grid-row:1}
.tool.flip>figure{grid-column:1/8;grid-row:1}
.tool-wide .tool-text{grid-column:1/-1;display:grid;grid-template-columns:subgrid;row-gap:12px;align-items:start}
.tool-wide h3{grid-column:1/6;grid-row:1/span 2}
.tool-wide .tool-text p{grid-column:6/-1;margin-top:0}
.tool-wide>figure{grid-column:1/-1;margin-top:clamp(24px,2.8vw,36px)}
.zoom{display:none}
.zoom>video{display:block;width:100%;height:auto}
.more{margin-top:10px}
.more summary{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:var(--link);font-size:15px;font-weight:500;cursor:pointer;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-1.5px) rotate(45deg);transition:transform .2s var(--ease)}
.more[open] summary::after{transform:translateY(1.5px) rotate(-135deg)}
@media(hover:hover) and (pointer:fine){.more summary:hover{color:var(--fg)}}
.more .tool-fig{margin-top:20px}
.tool-wide .more{grid-column:6/-1;margin-top:0}
.tool-wide .more p{margin-top:12px}
.brk{--line:41.6;position:relative;aspect-ratio:1742/852;overflow:hidden;background:#131722;user-select:none;-webkit-user-select:none}
.brk img{display:block;width:100%;height:100%;object-fit:cover;object-position:100% 50%;pointer-events:none;-webkit-user-drag:none}
.brk-line{--v:0;position:absolute;left:0;right:0;top:calc((var(--line) - var(--v))*1%);height:0;border-top:1px solid var(--c)}
.is-tp{--v:var(--tp);--c:#2bbfa8;--t:#0a7d6c;--tt:#fff}
.is-sl{--v:var(--sl);--c:#f0a23a;--t:#f0a23a;--tt:#131722}
.is-pos{--c:#7d9fff;--t:#2962ff;--tt:#fff}
.brk-pill,.brk-tag{position:absolute;top:0;transform:translateY(-50%);font:500 12px/1.3 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.brk-pill{right:92px;display:inline-flex;align-items:center;gap:7px;padding:3px 8px;background:#131722;color:var(--c);border:1px solid var(--c);border-radius:4px}
.brk-pill b{font-weight:600}
.brk-tag{right:0;min-width:76px;padding:3px 7px;background:var(--t);color:var(--tt);text-align:right}
.brk-grab{position:absolute;left:0;right:0;top:-22px;height:44px;cursor:ns-resize;touch-action:none}
.brk-range{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.brk-range[data-row="tp"]:focus-visible~.is-tp .brk-pill,.brk-range[data-row="sl"]:focus-visible~.is-sl .brk-pill{outline:2px solid #fff;outline-offset:2px}
.cmp-stream{aspect-ratio:1328/768}
.oc{padding:clamp(18px,2.4vw,28px);background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-win)}
.limits{margin:12px 0 0;padding:0;list-style:none;color:var(--fg-3);font-size:15px;line-height:1.5}
.limits li{position:relative;padding-left:14px}
.limits li+li{margin-top:5px}
.limits li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--fg-3);border-radius:50%}
.oc-read{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);color:var(--fg-2);font-size:15px;line-height:1.45}
.oc-read b{color:var(--fg);font-weight:600}
.oc-dot{width:8px;height:8px;margin-top:.42em;background:#2f9e6e;border-radius:50%}
.oc-title{color:var(--fg);font-size:15px;font-weight:500}
.oc ol{display:grid;gap:14px;margin:18px 0 0;padding:0;list-style:none}
.oc li{display:grid;grid-template-columns:62px minmax(0,1fr) 76px;align-items:center;gap:12px;font-size:15px}
.oc-k{color:var(--fg-3)}
.oc-v{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.oc-track{display:block;height:14px}
.oc-track i{display:block;width:var(--w);height:100%;background:var(--accent);border-radius:0 4px 4px 0;transform-origin:left}
.is-measured .oc-track i{background:var(--fg-3)}
.oc.arm .oc-track i{transform:scaleX(0)}
.oc.arm.go .oc-track i{transform:none;transition:transform .8s var(--ease)}
.oc.arm.go li:nth-child(2) .oc-track i{transition-delay:40ms}
.oc.arm.go li:nth-child(3) .oc-track i{transition-delay:80ms}
.oc.arm.go li:nth-child(4) .oc-track i{transition-delay:120ms}
.tool h3{font-size:clamp(1.5rem,2.3vw,2rem);line-height:1.16;letter-spacing:-.026em}
.tool-text p{margin-top:12px;color:var(--fg-2)}
.tool-text h3+p{margin-top:14px}
.tool-text .limit{color:var(--fg-3);font-size:15px;line-height:1.5}
.tool-fig{min-width:0}
.tool-fig figcaption{margin-top:12px;color:var(--fg-3);font-size:14px;line-height:1.45}

/* make it yours: the dark section; the closing panel is the other */
.band{background:var(--plate);color:var(--fg)}
.band p{color:var(--fg-2)}
.band .note{color:var(--fg-3)}
.yours{padding:var(--section) 0}
.yours-top{display:grid;grid-template-columns:minmax(340px,4fr) minmax(0,8fr);gap:clamp(32px,4.4vw,64px);align-items:start}
.hero-plate{min-width:0}
.hero-plate figcaption{padding-top:14px;color:var(--fg-3);font-size:14px}
.hold{display:inline-block;padding:4px 0;border:0;background:none;color:var(--link);font:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
.hold[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.hold:hover{color:var(--fg)}}

/* the moving edge */
.cmp{position:relative;overflow:hidden;background:var(--plate);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.cmp img,.cmp video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cmp-a{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.cmp-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.cmp-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.cmp-edge{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:var(--accent);pointer-events:none}
.grip{position:absolute;left:50%;top:34%;width:44px;height:44px;margin:-22px 0 0 -22px;display:grid;place-items:center;background:var(--accent);color:var(--on-accent);border-radius:var(--r-btn);transition:background-color .14s}
@media(hover:hover) and (pointer:fine){.cmp:hover .grip{background:var(--accent-hover)}}
.cmp-range:focus-visible~.cmp-edge .grip{outline:2px solid var(--plate);outline-offset:2px;box-shadow:0 0 0 2px #fff}
.cmp-label{position:absolute;top:12px;padding:4px 8px;pointer-events:none;background:rgba(14,14,16,.88);color:#ededf1;border-radius:var(--r-sm);font:500 13px/1.2 var(--sans);white-space:nowrap}
.cmp-label.is-a{left:12px}
.cmp-label.is-b{right:12px}
.cmp-hero{aspect-ratio:1742/852}
.cmp-glass{width:100%;max-width:824px;aspect-ratio:824/38;border-radius:var(--r-sm)}
.cmp-glass .grip{top:50%;width:clamp(20px,70%,30px);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);margin:0;border-radius:6px}

/* dashboard: three pages behind radio tabs, with or without JS */
.picker.dash-tabs{display:flex;gap:6px;margin-bottom:12px}
.picker.dash-tabs label{padding:0 16px}
@media(hover:hover) and (pointer:fine){.picker.dash-tabs label:hover{background:var(--hover);color:var(--fg)}}
.dash>.win{display:none}
.dash>.win picture img{display:block;width:100%;height:auto}
@supports not selector(:has(a)){.dash:not(.picked)>[data-dash=journal]{display:block}.looks:not(.picked) [data-look=classic]{display:grid;visibility:visible}}
.dash.picked>[data-dash].on{display:block}
.dash:has(#dash-journal:checked) [data-dash=journal],
.dash:has(#dash-trades:checked) [data-dash=trades],
.dash:has(#dash-reports:checked) [data-dash=reports]{display:block}
/* looks */
.looks{display:grid;grid-template-columns:minmax(340px,4fr) minmax(0,8fr);gap:clamp(32px,4.4vw,64px);align-items:start;margin-top:clamp(56px,6.6vw,96px)}
.looks-side h3,.glass-grid h3{font-size:clamp(1.375rem,2vw,1.75rem);line-height:1.2;letter-spacing:-.022em}
.looks-side p{margin:12px 0 20px}
.picker{border:0;padding:0;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.picker input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.picker label{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px;border-radius:var(--r-btn);color:var(--fg-2);font-size:15px;font-weight:500;line-height:1.2;cursor:pointer;transition:background-color .14s,color .14s,transform .16s var(--ease)}
.picker label:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){.picker label:hover{background:#1c1c21;color:var(--fg)}}
.picker input:checked+label{background:var(--accent);color:var(--on-accent)}
.picker input:focus-visible+label{outline:2px solid var(--focus);outline-offset:2px}
.chip{flex:none;display:flex;align-items:flex-end;justify-content:center;gap:3px;width:22px;height:22px;padding:4px 0;background:var(--b);border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.chip i{display:block;width:5px;height:14px;background:var(--u)}
.chip i+i{height:9px;background:var(--d)}
.stage{min-width:0}
.stage-plate{position:relative;aspect-ratio:1742/852;overflow:hidden;background:#000;border:1px solid var(--win-line);border-radius:var(--r-win)}
.look-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.wipe-edge{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--accent);opacity:0;z-index:3;pointer-events:none}
.look-data{display:none;grid-template-columns:minmax(0,1fr) auto;gap:12px 40px;align-items:start;padding-top:16px}
.look-name strong{display:block;font-size:1.125rem;font-weight:600;line-height:1.3;letter-spacing:-.012em;color:var(--fg)}
.look-name span{display:block;margin-top:2px;color:var(--fg-3);font-size:15px}
.swatches{display:flex;gap:28px}
.swatches dt{color:var(--fg-3);font-size:13px;font-weight:500;line-height:1.3}
.swatches dd{display:flex;align-items:center;gap:7px;margin:4px 0 0;color:var(--fg);font-size:15px}
.sw{flex:none;width:16px;height:16px;background:var(--c);border-radius:var(--r-sm);box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.sw.hollow{background:transparent;box-shadow:inset 0 0 0 2px var(--c),0 0 0 1px rgba(255,255,255,.22)}
/* the checked look shows with or without JS */
.looks:has(#look-classic:checked) [data-look=classic],
.looks:has(#look-amber:checked) [data-look=amber],
.looks:has(#look-green:checked) [data-look=green],
.looks:has(#look-greybox:checked) [data-look=greybox],
.looks:has(#look-ticker:checked) [data-look=ticker],
.looks:has(#look-blackmonday:checked) [data-look=blackmonday],
.looks:has(#look-pit:checked) [data-look=pit],
.looks:has(#look-rice:checked) [data-look=rice],
.looks:has(#look-paper:checked) [data-look=paper],
.looks:has(#look-ink:checked) [data-look=ink],
.looks:has(#look-nightshift:checked) [data-look=nightshift],
.looks:has(#look-studio:checked) [data-look=studio]{display:grid;visibility:visible}
.looks.picked [data-look].on{display:grid;visibility:visible}

/* glass */
.glass-grid{display:grid;grid-template-columns:minmax(340px,4fr) minmax(0,8fr);gap:clamp(32px,4.4vw,64px);align-items:end;margin-top:clamp(56px,6.6vw,96px)}
.glass-grid h3+p{margin-top:12px}
.glass-fig{min-width:0;max-width:824px}
.glass-fig figcaption{display:flex;justify-content:space-between;margin-top:8px;color:var(--fg-3);font-size:13px;font-weight:500}

/* wallpaper, candles, scripts: short, and each shot at its own proportions */
.extras{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,3fr);grid-template-rows:repeat(4,auto);gap:0 clamp(24px,3vw,40px);align-items:start;margin-top:clamp(56px,6.6vw,96px)}
.extras article{display:grid;grid-row:span 4;grid-template-rows:subgrid;min-width:0}
.extras .win{align-self:start;margin-top:20px}
.extras p{margin-top:6px;font-size:16px}
.extras .note{margin-top:12px;font-size:14px;color:var(--fg-3)}

/* what can touch your orders, requirements, access, questions */
.trust{padding:var(--section) 0;background:var(--paper)}
.buy,.questions{padding:var(--section) 0 0}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px clamp(32px,4.4vw,64px);align-items:start}
.split>div>p{margin-top:12px;color:var(--fg-2)}
.split-table{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.spec{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.spec thead th{padding:0 12px 8px;text-align:left;color:var(--fg-3);font-size:14px;font-weight:500;border-bottom:1px solid var(--rule)}
.spec thead th:first-child{padding-left:0}
.spec tbody th{width:17%;padding:8px 12px 8px 0;text-align:left;font-weight:500;white-space:nowrap}
.spec td{padding:8px 12px;color:var(--fg-2)}
.spec tbody th,.spec td{vertical-align:baseline}
.spec tbody tr{border-bottom:1px solid var(--rule-soft)}
.spec th a{color:var(--fg);text-decoration:none}
@media(hover:hover) and (pointer:fine){.spec th a:hover{color:var(--link);text-decoration:underline}}
.spec thead th:last-child,.spec td:last-child{width:7.5em;padding-right:0}
.spec td:last-child{color:var(--fg-3)}
.spec .can td:last-child{color:var(--link);font-weight:600}
.needs{margin-top:14px;padding:0 0 0 1.1em;color:var(--fg-2)}
.needs li{margin:6px 0;padding-left:2px}
.needs li::marker{color:var(--fg-3)}
.split>div>.note{margin-top:14px;color:var(--fg-3)}
.offer{padding:clamp(24px,3vw,40px);background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-win);box-shadow:var(--win-shadow)}
.offer h2{font-size:clamp(1.5rem,2.3vw,2rem);letter-spacing:-.026em}
.offer .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;max-width:none;margin-top:14px}
.offer .amount{color:var(--fg);font-size:clamp(1.75rem,2.6vw,2.25rem);font-weight:600;line-height:1.1;letter-spacing:-.03em}
.price-note{color:var(--fg-2)}
.inc-lead{margin-top:20px;padding-top:20px;border-top:1px solid var(--rule-soft);color:var(--fg);font-weight:500}
.included{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin-top:12px;padding:0;list-style:none;color:var(--fg-2)}
.included li{position:relative;padding-left:26px}
.included li::before{content:"";position:absolute;left:0;top:.32em;width:16px;height:16px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.offer .actions{margin-top:24px;gap:12px 20px}
.offer .note{margin-top:16px}
.pending{padding:1px 7px;border:1px dashed var(--fg-3);border-radius:var(--r-sm);color:var(--fg-2)}

/* faq */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{position:relative;display:block;padding:14px 36px 14px 0;font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:1.5px;margin-top:-1px;background:var(--fg-3);transition:transform .2s var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open]>summary::after{transform:rotate(0)}
@media(hover:hover) and (pointer:fine){.faq summary:hover{color:var(--link)}}
.faq details p{padding:0 36px 16px 0;color:var(--fg-2)}

/* close */
.close{padding:var(--section) 0}
.close-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 48px;padding:clamp(32px,4.4vw,60px) clamp(24px,4.4vw,64px);border-radius:var(--r-win)}
.close-panel h2{max-width:13.5em}
.band .btn.ghost{background:transparent;color:var(--fg);border-color:#44444e}
@media(hover:hover) and (pointer:fine){.band .btn.ghost:hover{background:transparent;border-color:var(--fg-3);color:var(--fg)}}

/* footer */
footer.site{padding:clamp(40px,5vw,56px) 0 36px;background:var(--ground);color:var(--fg-3);font-size:15px;border-top:1px solid var(--rule)}
.foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:32px 64px;flex-wrap:wrap}
.foot-cols{display:flex;gap:clamp(40px,7vw,104px);flex-wrap:wrap}
.foot-cols h2{font-size:15px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--fg);margin-bottom:8px}
.foot-cols ul{list-style:none;padding:0}
.foot-cols li{margin:5px 0}
.foot-cols a{color:var(--fg-2);text-decoration:none}
@media(hover:hover) and (pointer:fine){.foot-cols a:hover{color:var(--fg);text-decoration:underline}}
.foot-legal{display:flex;gap:20px;align-items:flex-start;margin-top:36px;padding-top:24px;border-top:1px solid var(--rule)}
.foot-legal p{max-width:78ch}
.foot-legal p+p{margin-top:6px}
.foot-legal .cat{flex:none;width:64px;height:64px;border-radius:var(--r-btn)}

/* a fold: part of the page on a wide screen, a Details on a phone (app.js closes it) */
.more.fold{margin-top:0}
.fold>summary,.more.fold>summary,.faq .fold>summary{display:none}
/* inside its fold this line is no longer matched by .split>div>p, which set these two */
.offer .inc-lead{margin-top:12px;color:var(--fg-2)}
.faq .fold{border:0}
.jump{display:none}

/* the link-not-connected note */
.notice{position:fixed;left:50%;bottom:20px;z-index:40;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:12px 16px;background:var(--fg);color:var(--ground);border-radius:var(--r-btn);font-size:15px;transition:opacity .2s var(--ease),transform .2s var(--ease)}
@starting-style{.notice{opacity:0;transform:translate(-50%,8px)}}
.notice[hidden]{display:none}

/* sub-pages */
.page{padding:clamp(48px,6vw,88px) 0}
.page h1{font-size:clamp(2rem,3.4vw,2.75rem);margin-bottom:14px}
.page h2{font-size:clamp(1.3rem,2vw,1.625rem);letter-spacing:-.02em;margin:36px 0 12px}
.prose{max-width:calc(760px + 2*var(--gutter))}
.prose p,.prose li{margin:0 0 14px;color:var(--fg-2)}
.prose ul{max-width:64ch}
.slot{border:1px dashed var(--fg-3);border-radius:var(--r-btn);padding:20px;color:var(--fg-2)}
/* the download area */
.dl-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:32px clamp(32px,4.4vw,64px);align-items:start;margin-top:28px}
.dl{container-type:inline-size;overflow:hidden;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-win);box-shadow:var(--win-shadow)}
.os{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;min-width:0;padding:20px 24px;border-bottom:1px solid var(--rule-soft)}
.os .btn{flex:none;min-width:13rem}
.os-name{min-width:0}
.os h2{margin:0;font-size:1.25rem;line-height:1.3}
.os.detected h2::after{content:"Your system";margin-left:10px;color:var(--fg-3);font-family:var(--sans);font-size:14px;font-weight:400;letter-spacing:0}
.os-name p{color:var(--fg-3);font-size:15px}
.dl-foot{padding:16px 24px 18px;background:var(--bg);color:var(--fg-2);font-size:15px;line-height:1.55}
.dl-foot strong{color:var(--fg);font-weight:600}
.dl-foot p+p{margin-top:8px}
/* the panel's own width decides, not the window's: beside the screenshot it is narrow on a wide window */
@container(max-width:500px){
  .os{flex-direction:column;align-items:stretch;padding:18px 20px}
  .os .btn{min-width:0}
  .dl-foot{padding:14px 20px 16px}
}
.dl-main>.note{margin-top:12px}
.dl-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:12px clamp(32px,4.4vw,64px);margin-top:clamp(40px,5vw,64px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--rule)}
.page .dl-sec h2{margin:0}
.dl-sec>div{min-width:0}
.dl-sec .actions{margin:18px 0 12px}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px clamp(24px,4vw,56px);margin-top:18px}
.steps h3{margin-bottom:6px}
.steps ol{margin:0;padding-left:1.35em;color:var(--fg-2)}
.steps li{padding-left:.2em}
.steps li+li{margin-top:4px}
.steps li::marker{color:var(--fg-3);font-variant-numeric:tabular-nums}
.steps strong{color:var(--fg);font-weight:600}
.page .wrap>.actions{margin:18px 0 12px}
.log article{padding:24px 0;border-top:1px solid var(--rule)}
.log h2{margin:0 0 6px}
.log time{color:var(--fg-3);font-size:15px;font-variant-numeric:tabular-nums}
.nf{padding:clamp(72px,10vw,128px) 0;text-align:center}
.nf img{width:96px;margin:0 auto 20px;border-radius:var(--r-win)}
.nf p{margin:0 auto}
.nf h1{margin-bottom:24px}
.nf .actions{justify-content:center}

@media(max-width:1100px){
  .swatches{gap:20px}
  .yours-top{grid-template-columns:minmax(0,1fr);gap:28px}
  .glass-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .looks{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .looks-side{display:contents}
  .looks-side h3{order:-3}
  .looks-side p{order:-2;margin:0}
  .stage{order:-1;background:var(--plate);padding-bottom:12px}
}
@media(max-width:960px){
  .hero-top,.tool,.split,.split-table{display:grid;grid-template-columns:minmax(0,1fr)}
  .tool-text,.tool>figure,.tool.flip .tool-text,.tool.flip>figure,.tool-wide .tool-text,.tool-wide>figure{grid-column:1;grid-row:auto}
  .tool-wide .tool-text{display:block}
  .tool-wide .tool-text p{margin-top:12px}
  .tool>figure{margin-top:24px}
  .extras{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;row-gap:32px}
  .extras article{display:block;grid-row:auto}
  #scripts{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,320px);grid-template-rows:auto 1fr;column-gap:clamp(24px,3vw,40px)}
  #scripts h3,#scripts p{grid-column:1}
  #scripts .win{grid-column:2;grid-row:1/3;margin-top:0}
  .dl-top,.dl-sec,.steps{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:1100px) and (orientation:portrait){
  .stage{position:sticky;top:65px;z-index:5}
}
@media(max-width:860px){
  :root{--head:16px}
  header.top{position:static}
  header.top .wrap{flex-wrap:wrap;gap:0;min-height:0;padding-top:12px;padding-bottom:2px}
  .nav-cta{margin-left:auto}
  nav.main{order:3;width:100%;margin:6px 0 0;justify-content:flex-start;flex-wrap:wrap;gap:0 24px}
}
@media(max-width:720px),(pointer:coarse){
  .cmp-glass{aspect-ratio:auto;height:44px}
  .cmp-glass img{object-position:left center}
}
@media(max-width:720px){
  body{font-size:16px}
  nav.main{justify-content:space-between;gap:0 6px}
  nav.main a{font-size:clamp(12.5px,3.6vw,13.5px);padding:10px 0}
  .actions .btn{flex:1 1 auto;padding:0 16px}
  .desk{margin-top:28px}
  .win-chart{grid-area:1/1/2/-1}
  .win-app{grid-area:1/2/2/-1;align-self:start;margin:32vw 0 0}
  .win-bar{min-height:26px;padding:0 10px;font-size:12px}
  .flow,.how-notes{grid-template-columns:minmax(0,1fr)}
  .flow li{padding:4px 0 0 46px}
  .flow li::before{top:0;bottom:-28px;left:15px;right:auto;width:1px;height:auto}
  .flow li:last-child::before{display:none}
  .flow li::after{top:0;bottom:-28px;left:15px;right:auto;width:1px;height:auto;transform:scaleY(0);transform-origin:top}
  .flow li:last-child::after{display:none}
  .zoom{display:block;margin-top:12px}
  .no-phone{display:none}
  .no-phone+.zoom{margin-top:0}
  .brk{aspect-ratio:7/6}
  .brk-pill{right:80px;gap:5px;padding:3px 6px}
  .brk-tag{min-width:68px;padding:3px 5px}
  .cmp-stream{aspect-ratio:680/740}
  .included{grid-template-columns:minmax(0,1fr)}
  .extras{grid-template-columns:minmax(0,1fr)}
  .look-data{grid-template-columns:1fr;gap:10px;padding-top:12px}
  .look-name span{font-size:14px}
  .swatches{gap:14px;justify-content:space-between}
  .swatches dd{font-size:13px;gap:5px}
  .sw{width:13px;height:13px}
  .picker{gap:2px 6px}
  .picker label{font-size:14px;padding:0 6px;gap:7px}
  .spec thead tr,.spec tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .spec thead tr{border-bottom:1px solid var(--rule)}
  .spec thead th{border:0}
  .spec thead th:nth-child(2){display:none}
  .spec thead th:last-child{width:auto;padding:0 0 8px;text-align:right}
  .spec tbody th{grid-column:1;grid-row:1;width:auto;padding:10px 12px 2px 0;white-space:normal}
  .spec td:last-child{grid-column:2;grid-row:1;width:auto;padding:10px 0 2px;text-align:right}
  .spec td:nth-child(2){grid-column:1/-1;grid-row:2;padding:0 0 10px}
  #scripts{display:block;grid-column:auto}
  #scripts .win{max-width:240px;margin-top:20px}
  .foot-legal{flex-direction:column;gap:14px}
  .foot-legal .cat{width:48px;height:48px}
}
@media(max-width:860px) and (orientation:portrait){
  .stage{top:0}
}
@media(min-width:721px) and (max-width:960px){
  .extras{grid-template-columns:minmax(0,1fr)}
  #wallpaper .win,#candles .win{max-width:640px}
}
/* phones: a shorter page. Limits stay in view; explanation sits behind Details */
@media(max-width:720px){
  :root{--section:52px}
  .tool{margin-top:44px}
  .tool>figure{margin-top:18px}
  .tool h3{font-size:1.375rem}
  .looks{margin-top:44px}
  .more.fold{margin-top:10px}
  .more.fold>summary{display:inline-flex}
  .faq .fold>summary{display:block}
  .faq .fold{border-bottom:1px solid var(--rule)}
  .faq .fold[open]{border-bottom:0}
  .faq .fold[open]>summary{border-bottom:1px solid var(--rule)}
  .offer .inc-lead{display:none}
  /* the three extras and the twelve looks each take one swipeable row, with the next one showing at the edge */
  .extras,.looks .picker{display:flex;margin-right:calc(-1*var(--gutter));padding-right:var(--gutter);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .extras::-webkit-scrollbar,.looks .picker::-webkit-scrollbar{display:none}
  /* a touch that starts a swipe is :active before the browser knows it scrolls: no press scale in the swipe row */
  .looks .picker label:active{transform:none}
  .extras{gap:14px;margin-top:44px;padding-bottom:6px;scroll-snap-type:x proximity}
  .extras article{flex:0 0 calc(100% - 24px);scroll-snap-align:start}
  .looks .picker{position:relative;gap:6px}
  .looks .picker label{flex:none;padding:0 12px 0 8px;white-space:nowrap}
  /* the tall Dashboard stills end on a row boundary; the crop is from the bottom only */
  .dash>.win picture img{aspect-ratio:760/1150;object-fit:cover;object-position:top}
  /* the Glass strip ends in the gap after "15m" (source x 342 of 824) at every phone width, not through a button */
  .cmp-glass{aspect-ratio:342/38;height:auto}
  /* capped so the 38 px plate is never drawn more than ~1.17x (soft text at 600-720) */
  .glass-fig{max-width:400px}
  /* Legal sits under Community, beside the longer Product list */
  .foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;width:100%}
  .foot-cols>div:first-child{grid-row:1/span 2}
}
/* fingers: about 44 px where the layout allows */
@media(max-width:860px),(pointer:coarse){
  .btn.sm{min-height:44px}
  nav.main a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0}
  .foot-cols li{margin:0}
  .foot-cols a,a.plain,.spec th a{display:inline-flex;align-items:center;min-height:44px}
  .hold{position:relative}
  .hold::after{content:"";position:absolute;inset:-8px -6px}
}
@media(max-width:860px){
  header.top .wrap{padding-bottom:4px}
  nav.main{margin-top:8px}
}
@media(max-width:720px){
  .spec tbody th{padding:0 12px 0 0}
  .spec td:last-child{display:flex;align-items:center;padding:0}
}
@media(max-width:340px){
  .brand{gap:8px;font-size:17px}
  .brand img{height:22px}
  .btn.sm{padding:0 12px}
  nav.main{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:0 16px}
  nav.main a{justify-content:flex-start;font-size:13.5px}
}
/* a touch screen: only the pill drags a bracket line, so a thumb elsewhere on the chart scrolls the page */
@media(pointer:coarse){
  .brk-grab{left:auto;right:72px;width:132px}
}
/* a phone on its side: Get Access on the first screen, and no clip taller than the screen */
@media(min-width:700px) and (max-height:500px) and (orientation:landscape) and (pointer:coarse){
  header.top .wrap{flex-wrap:nowrap;gap:12px;padding-top:4px;padding-bottom:4px}
  .brand{flex:none;gap:8px;font-size:17px}
  .brand img{height:22px}
  nav.main{order:0;width:auto;margin:0 0 0 auto;flex-wrap:nowrap;justify-content:flex-end;gap:0 12px}
  nav.main a{font-size:14px}
  .nav-cta{flex:none;margin-left:0}
  .btn.sm{padding:0 12px}
}
@media(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .hero{padding:14px 0 32px}
  .hero-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
  .hero h1{font-size:1.625rem}
  .hero-side{display:flex;flex-direction:column}
  .hero .actions{order:-1;margin-top:0}
  .hero .lede{margin-top:12px}
  .win>video{width:auto;max-width:100%;max-height:calc(100vh - 56px);max-height:calc(100svh - 56px);margin:0 auto}
}
/* the jump list on a long page */
@media(max-width:720px),(max-height:500px) and (orientation:landscape) and (pointer:coarse){
  .jump{display:block;margin:0 0 8px}
  .jump ul{margin:0;padding:0;list-style:none}
  .prose .jump li{margin:0}
  .jump a{display:flex;align-items:center;min-height:44px;line-height:1.3;text-decoration:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-property:color,background-color,border-color,opacity!important;transition-delay:0s!important;animation:none!important}.btn:active,.theme-btn:active,.picker label:active,.gsi:active{transform:none!important}.theme-btn svg{transform:none!important;filter:none!important}}