/* Deliberately monochrome: solid icon cuts and dry-brush button shapes. */
:root{--bg:#f4f4f4;--surface:#fafafa;--surface-raised:#e8e8e8;--text:#242424;--muted:#595959;--faint:#707070;--blue:#333;--amber:#333;--button:#252525;--button-text:#fff;--line:#00000024;--ink-edge:polygon(5% 15%,15% 11%,26% 12%,34% 8%,48% 10%,59% 7%,74% 9%,87% 8%,96% 12%,93% 17%,98% 20%,96% 25%,99% 30%,96% 35%,98% 43%,96% 49%,99% 54%,96% 61%,98% 69%,94% 73%,97% 80%,91% 84%,78% 87%,63% 90%,49% 88%,34% 92%,23% 89%,10% 89%,3% 84%,6% 78%,2% 73%,5% 66%,2% 59%,4% 53%,1% 49%,4% 40%,2% 34%,6% 27%,3% 22%)}
body:before{filter:grayscale(1)}
.icon{fill:currentColor;stroke:none;stroke-width:0}
.orbit-mark{color:#252525}
.orbit-mark:before{inset:5px;background:currentColor;border:0;border-radius:48% 51% 46% 54%;transform:rotate(-13deg)}
.orbit-mark:after{height:9px;top:10px;background:currentColor;border:0;clip-path:polygon(0 35%,30% 0,62% 0,100% 35%,100% 65%,69% 100%,35% 100%,0 65%);transform:rotate(-38deg)}
.orbit-mark i{width:5px;height:5px;background:#333}
.app-icon.blue,.app-icon.amber,.device-icon{color:#262626;background:transparent;border:0;box-shadow:none}
.app-icon .icon{width:23px;height:23px}.device-icon .icon{width:22px;height:22px}
.mouse-art{filter:brightness(0) opacity(.82);opacity:.9}
.big-battery{background:#303030;border-color:#303030;border-radius:10px;box-shadow:none}
.battery-cap{background:#303030}.battery-fill{background:#ffffff08;border:0;border-radius:3px}
.big-battery>span:not(.battery-bolt),.big-battery small,.battery-bolt{color:#f5f5f5}
.glass-play{background:transparent;border:0;box-shadow:none}.glass-play .icon{fill:currentColor;color:#292929;width:43px;height:43px}
.lab-core{background:#292929;border:0;box-shadow:none;border-radius:45% 51% 43% 52%}.lab-core .icon{color:#f3f3f3}
.landscape{filter:grayscale(1)}.play-preview .icon{margin-left:2px;fill:currentColor}

/* Clip only the pigment, leaving labels and focus outlines uncut.
   CSS geometry works on file:// too; external SVG masks are blocked there. */
.button,.nav-download,.hero-bottom button,.play-preview{position:relative;isolation:isolate;background:transparent;border:0;border-radius:0;box-shadow:none;--pigment:#262626;color:#fff;transition:color .18s ease,transform .18s ease}
.button:before,.nav-download:before,.hero-bottom button:before,.play-preview:before{content:'';position:absolute;inset:-3px -7px;z-index:-1;pointer-events:none;background:var(--pigment);clip-path:var(--ink-edge);transition:opacity .2s ease;opacity:.95}
.button:after,.nav-download:after,.hero-bottom button:after{content:'';position:absolute;inset:5px -3px;z-index:-1;pointer-events:none;opacity:.14;background:repeating-linear-gradient(178deg,transparent 0 7px,#ffffff60 7.5px,transparent 8px 13px);clip-path:var(--ink-edge)}
.button:hover,.nav-download:hover,.hero-bottom button:hover,.play-preview:hover{background:transparent;box-shadow:none;transform:none}
.button:hover:before,.nav-download:hover:before,.hero-bottom button:hover:before,.play-preview:hover:before{opacity:.78}
.button:active,.nav-download:active{transform:scale(.98);background:transparent;box-shadow:none}
.button-text,.hero .button-text{--pigment:#d8d8d8;color:#303030;background:transparent;border:0;box-shadow:none}
.button-small{--pigment:#303030;color:#fff}.hero-actions .button-text{border:0}
.hero-bottom button{position:absolute;--pigment:#e1e1e1;color:#444}
.play-preview{--pigment:#ededed;color:#252525;border-radius:0;backdrop-filter:none}
.play-preview:hover{transform:translate(-50%,-50%)}
.play-preview:before{inset:0;transform:rotate(-6deg)}
.showcase-switcher{border:0;background:transparent;box-shadow:none;padding:8px;gap:4px}
.tab-glass{background:#333;border-radius:0;clip-path:var(--ink-edge)}
.showcase-switcher button[aria-selected=true],.showcase-switcher button[aria-selected=true]:hover{color:#fff}
.showcase-switcher button{font-size:17px;padding-inline:21px}
.button:focus-visible,.nav-download:focus-visible,.hero-bottom button:focus-visible,.play-preview:focus-visible{outline:2px solid #555;outline-offset:7px}
.water-touch{position:fixed;width:108px;height:108px;pointer-events:none;z-index:100;contain:strict}
@media(max-width:700px){.showcase-switcher button{font-size:14px;padding-inline:12px}.hero-actions{gap:20px}.hero-actions .button{padding-inline:14px}.tab-glass{top:8px}}
@media(max-width:360px){.showcase-switcher button{padding-inline:8px;font-size:13px}.hero-actions{gap:13px}}
@media(prefers-reduced-motion:reduce){.water-touch{display:none}.button:active,.nav-download:active{transform:none}}