/* A quiet Mac desktop. All optional controls stay in the settings popover. */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.hero-visual { padding-top:0; }
.hero-description { max-width:350px; }
.demo-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; height:32px; margin:0 0 10px; padding:0 3px; color:#b8c0cb; letter-spacing:0; font-size:11px; }
.demo-tools { display:flex; align-items:center; gap:3px; }
.demo-tools>button,.playground-settings>summary,#close-playground { display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:6px; padding:6px; background:transparent; color:#9ca9bc; cursor:pointer; }
.demo-tools>button:hover,.playground-settings>summary:hover,#close-playground:hover { background:#ffffff0d; color:#eef2f9; }
.demo-tools svg,#close-playground svg { width:17px; height:17px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.mac-display { height:auto; min-height:315px; aspect-ratio:1.5; border:1px solid #d8e2f343; border-radius:12px; box-shadow:0 24px 70px #0006; container-type:inline-size; overflow:clip; font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif; isolation:isolate; }
.mac-display .wallpaper { background:#0574a3 url('assets/macos/wallpaper.jpg') center 48%/cover no-repeat; }
.mac-menubar { height:24px; padding:0 12px; gap:15px; background:#d7edf678; color:#122638; font-size:clamp(6px,1.45cqw,11px); backdrop-filter:blur(20px); z-index:60; border-bottom:1px solid #ffffff1c; }
.mac-menubar b { font-weight:600; }
.menu-apple { width:14px; height:18px; fill:currentColor; flex:none; }
.menubar-right { gap:13px; }
.menubar-right svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.menubar-right .menu-battery { width:20px; }
.menubar-right .battery-fill { fill:currentColor; stroke:none; }
.menubar-right img { filter:brightness(.2); width:13px; height:13px; }
.sandbox-stage { position:absolute; inset:34px 0 58px; z-index:2; pointer-events:none; }
.sandbox-window { position:absolute; border:1px solid #00000030; border-radius:9px; overflow:clip; background:#f8f8f8; color:#262626; box-shadow:0 6px 18px #0003,0 0 0 .5px #ffffff80 inset; pointer-events:auto; text-align:left; min-width:120px; }
.sandbox-window[hidden],.window-card[hidden] { display:none; }
.sandbox-window.is-front { box-shadow:0 18px 40px #0004,0 3px 8px #0002,0 0 0 .5px #ffffffc0 inset; }
.sandbox-titlebar { height:35px; padding:0 11px; display:flex; align-items:center; gap:10px; background:linear-gradient(#f7f7f7,#eeeeee); border-bottom:1px solid #00000016; user-select:none; cursor:grab; position:relative; }
.sandbox-titlebar:active { cursor:grabbing; }
.sandbox-traffic { display:flex; gap:6px; align-items:center; z-index:1; flex:none; }
.sandbox-traffic button,.sandbox-traffic>i { width:10px; height:10px; min-width:10px; border:1px solid #00000016; padding:0; border-radius:50%; display:block; background:#ff5f57; }
.sandbox-traffic .window-minimize { background:#febc2e; }
.sandbox-traffic>i { background:#28c840; }
.sandbox-window:not(.is-front) .sandbox-traffic button,.sandbox-window:not(.is-front) .sandbox-traffic>i { background:#cbcbcb; }
.sandbox-window:not(.is-front) .sandbox-titlebar:hover .window-close { background:#ff5f57; }
.sandbox-window:not(.is-front) .sandbox-titlebar:hover .window-minimize { background:#febc2e; }
.window-title { position:absolute; inset:0 70px; display:flex; align-items:center; justify-content:center; font-size:clamp(8px,1.6cqw,12px); font-weight:600; color:#565656; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.sandbox-toolbar-glyphs { display:flex; gap:12px; color:#858585; margin-left:auto; }
.sandbox-toolbar-glyphs svg { width:13px; height:13px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.sandbox-content { height:calc(100% - 35px); overflow:clip; font-size:clamp(8px,1.65cqw,12px); line-height:1.5; }
/* Abstract app content: static shapes, never loading placeholders. */
.content-bar { display:block; width:var(--bar-width); height:clamp(4px,.65cqw,7px); flex:none; border-radius:20px; background:#d7d8da; }
.content-bar.bar-heading { height:clamp(7px,1.1cqw,12px); background:#929497; }
.abstract-paragraph { display:grid; gap:clamp(5px,.7cqw,8px); margin-top:clamp(10px,1.5cqw,17px); }
.abstract-browser,.abstract-notes,.abstract-finder { height:100%; background:#f5f5f6; }
.native-browser-bar { height:36px; display:flex; align-items:center; gap:13px; padding:0 13px; background:#eeeef0; border-bottom:1px solid #d6d6d6; }
.browser-navigation { display:flex; gap:12px; color:#b6b6b6; }
.browser-navigation svg { width:10px; height:13px; }
.browser-address { height:22px; background:#e1e2e4; border-radius:5px; flex:1; display:flex; align-items:center; justify-content:center; }
.browser-address .content-bar { background:#bfc1c5; height:5px; }
.abstract-browser-page { padding:clamp(20px,4cqw,42px) 13%; }
.abstract-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:270px; margin:20px 0 30px; }
.abstract-tiles>div { display:grid; justify-items:center; gap:9px; }
.content-tile { display:block; width:clamp(25px,5cqw,48px); aspect-ratio:1; border-radius:9px; background:#9cbcef; }
.content-tile.purple { background:#b8a2d4; }.content-tile.green { background:#96c5ad; }
.abstract-notes { display:grid; grid-template-columns:29% 1fr; }
.abstract-sidebar { background:#e6e6e9; border-right:1px solid #d6d6da; padding:clamp(8px,1.5cqw,14px); display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
.abstract-sidebar .content-bar { background:#c9cbd0; }
.abstract-selection { width:100%; height:clamp(14px,2cqw,23px); background:#f0d47c; border-radius:5px; }
.abstract-document { padding:clamp(13px,2cqw,23px); min-width:0; }
.abstract-finder { display:grid; grid-template-columns:27% 1fr; }
.abstract-sidebar-row { width:100%; padding:7px 4px; border-radius:4px; }
.abstract-sidebar-row.selected { background:#d0d4dd; }
.abstract-file-list { min-width:0; padding:12px 10px; }
.abstract-file-header { display:flex; justify-content:space-between; padding:2px 0 12px; border-bottom:1px solid #ddd; margin-bottom:5px; }
.abstract-file-row { display:flex; align-items:center; gap:10px; padding:12px 5px; border-radius:4px; }
.abstract-file-row:nth-child(odd) { background:#ebebed; }
.abstract-file-row>.content-bar { max-width:40%; }
.abstract-file-row>span { width:25%; margin-left:auto; }
.finder-folder { width:20px; height:15px; display:block; background:#93c5e9; border-radius:2px; position:relative; flex:none; }
.finder-folder:before { content:''; position:absolute; top:-3px; left:0; height:4px; width:9px; border-radius:2px 3px 0 0; background:#93c5e9; }
.abstract-code { padding:clamp(15px,2.5cqw,28px); height:100%; background:#24252a; display:flex; flex-direction:column; gap:8px; }
.abstract-code-line { display:flex; gap:6px; padding-left:var(--indent); }
.abstract-code .content-bar { height:clamp(4px,.65cqw,7px); background:#888b95; }
.abstract-code .purple { background:#b789c8; }.abstract-code .blue { background:#6b9cdb; }.abstract-code .green { background:#79b496; }.abstract-code .amber { background:#d5ad6c; }
/* Dock and the original CornerWheel cards. */
.demo-dock { position:absolute; z-index:61; bottom:9px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:5px; padding:5px 7px 3px; border:1px solid #ffffff85; border-radius:13px; background:#e6edf25e; backdrop-filter:blur(22px) saturate(1.4); box-shadow:0 3px 16px #0002,inset 0 0 0 .5px #ffffff55; }
.dock-app { padding:0 0 5px; background:transparent; position:relative; transition:transform .16s; border-radius:7px; }
.dock-app:hover { transform:translateY(-4px); }
.dock-app .sample-icon { width:39px; height:39px; margin:0; border:0; border-radius:0; background:none; box-shadow:none; object-fit:contain; }
.dock-app.is-running:after { content:''; width:3px; height:3px; border-radius:50%; background:#2e414f; position:absolute; bottom:0; left:calc(50% - 1.5px); }
.dock-label { position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); background:#eff3f6ee; color:#35414e; box-shadow:0 2px 7px #0002; border-radius:5px; padding:4px 8px; font-size:11px; white-space:nowrap; opacity:0; pointer-events:none; }
.dock-app:hover .dock-label { opacity:1; }.dock-app>i { display:none; }
.wheel-layer { z-index:70; inset:24px 0 0; }
.corner-trigger { z-index:72; width:47px; height:47px; background:radial-gradient(circle at bottom left,#e5f2ffc0,transparent 72%); }
.corner-trigger span { width:10px; height:10px; }
.wheel-open .demo-dock { opacity:.3; pointer-events:none; }
.wheel-open .sandbox-stage,.wheel-open .sandbox-window { pointer-events:none; }
.window-card { width:136px; height:113px; }.selected-card { left:68px; bottom:59px; }
.side-card,.bottom-card { width:112px; height:93px; }.side-card { left:-56px; bottom:137px; }.bottom-card { left:193px; bottom:-44px; }
.right-corner .selected-card { left:auto; right:68px; }.right-corner .side-card { left:auto; right:-56px; }.right-corner .bottom-card { left:auto; right:193px; }
.window-card .sample-icon { display:block; border:0; border-radius:0; background:none; box-shadow:none; width:35px; height:35px; object-fit:contain; margin:7px auto 4px; }
.side-card .sample-icon,.bottom-card .sample-icon { width:29px; height:29px; margin-top:5px; }.card-caption { font-size:8px; }
.demo-controls { min-height:35px; margin-top:9px; gap:14px; color:#a2adbc; font-size:11px; }
.cycle-controls { gap:4px; }.cycle-controls button { width:30px; height:28px; border:0; background:transparent; color:#8091a8; }.cycle-controls button:hover { background:#ffffff0d; }
/* Optional settings. */
.playground-settings { position:relative; margin:0; border:0; }
.playground-settings>summary { list-style:none; }.playground-settings>summary::-webkit-details-marker { display:none; }
.playground-settings[open]>summary { background:#ffffff10; color:#e5ecf7; }
.playground-settings-body { position:absolute; top:38px; right:0; z-index:90; width:264px; padding:18px; display:grid; gap:17px; border:1px solid #ffffffd0; border-radius:11px; box-shadow:0 16px 45px #0005; background:#f2f4f8ed; color:#3d4654; backdrop-filter:blur(25px); }
.playground-setting { display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; font-size:11px; }
.playground-setting output { color:#7c8799; font-size:10px; }
.playground-setting input[type=range] { grid-column:1/-1; width:100%; accent-color:#7a92b7; height:4px; margin:4px 0; }
.playground-setting .segmented { width:auto; margin:0; }.playground-setting .segmented button { padding:5px 9px; }
.playground-check { display:flex; align-items:center; gap:8px; font-size:10px; cursor:pointer; }.playground-check input { margin:0; accent-color:#7a92b7; }
#playground-dialog { width:min(1200px,calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 32px); padding:14px 16px 8px; border-radius:16px; border:1px solid #ffffff2b; background:#151a21; text-align:left; overflow:auto; }
.playground-dialog-heading { position:absolute; top:14px; right:15px; z-index:2; }.playground-dialog-heading h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#playground-dialog .hero-visual { max-width:none; margin:0; }
#playground-dialog .demo-heading { padding-right:36px; margin-bottom:10px; }
#playground-dialog .demo-label { font-size:0; }#playground-dialog .demo-label:before { content:'CornerWheel'; font-size:12px; color:#b4becb; }
#playground-dialog #expand-demo { display:none; }
#playground-dialog .mac-display { height:min(67vh,680px); min-height:320px; aspect-ratio:auto; border-radius:9px; box-shadow:none; }
#playground-dialog .mac-menubar { height:27px; font-size:11px; gap:19px; }
#playground-dialog .sandbox-stage { inset:42px 0 76px; }
#playground-dialog .demo-dock { bottom:11px; gap:7px; padding:6px 9px 4px; border-radius:16px; }
#playground-dialog .dock-app .sample-icon { width:49px; height:49px; }
#playground-dialog .demo-controls { min-height:38px; margin-top:5px; font-size:12px; }
#playground-dialog .window-card { width:166px; height:130px; }#playground-dialog .side-card,#playground-dialog .bottom-card { width:136px; height:106px; }
#playground-dialog .selected-card { left:82px; bottom:72px; }#playground-dialog .side-card { left:-68px; bottom:162px; }#playground-dialog .bottom-card { left:234px; bottom:-51px; }
#playground-dialog .right-corner .selected-card { left:auto; right:82px; }#playground-dialog .right-corner .side-card { left:auto; right:-68px; }#playground-dialog .right-corner .bottom-card { left:auto; right:234px; }
#playground-dialog .window-card .sample-icon { width:43px; height:43px; margin-top:9px; }
#playground-dialog .card-caption { font-size:9px; }
@media(max-width:1100px) and (min-width:851px) { .hero { grid-template-columns:.9fr 1.15fr; gap:35px; }.hero h1 { font-size:57px; }.mac-display { min-height:310px; }.extra-menu { display:none; } }
@media(max-width:850px) { .hero-visual { max-width:620px; }.hero-description { margin-inline:auto; }.mac-display { min-height:350px; } }
@media(max-width:600px) {
 .mac-display { min-height:270px; aspect-ratio:1.15; }.mac-menubar { height:21px; gap:9px; padding:0 7px; font-size:6px; }.menu-apple { width:11px; height:14px; }.menubar-right { gap:8px; }.menubar-right img { width:11px; height:11px; }.menubar-right svg { width:11px; height:11px; }.menubar-right .menu-battery { display:none; }.extra-menu { display:none; }
 .sandbox-stage { inset:28px 0 48px; }.sandbox-titlebar { height:25px; padding:0 7px; }.sandbox-traffic { gap:4px; }.sandbox-traffic button,.sandbox-traffic>i { width:7px; height:7px; min-width:7px; }.window-title { inset:0 42px; font-size:7px; }.sandbox-toolbar-glyphs { display:none; }.sandbox-content { height:calc(100% - 25px); font-size:8px; } .native-browser-bar { height:26px; padding:0 7px; gap:8px; }.browser-navigation { gap:6px; }.browser-navigation svg { width:7px; }.browser-address { height:17px; }.abstract-sidebar { gap:7px; }.abstract-tiles { gap:10px; margin:14px 0 20px; }.abstract-file-row { gap:5px; padding:10px 2px; }.abstract-file-row>span { display:none; }.finder-folder { width:14px; height:11px; }.abstract-code { gap:6px; }

 .demo-dock { bottom:6px; border-radius:10px; gap:3px; padding:3px 5px 2px; }.dock-app .sample-icon { width:30px; height:30px; }.dock-label { display:none; }.demo-controls { font-size:10px; min-height:37px; }.cycle-controls button { width:34px; height:32px; }
 #playground-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:10px 8px 4px; border-radius:12px; }.playground-dialog-heading { top:10px; right:8px; }#playground-dialog .mac-display { height:65dvh; min-height:340px; border-radius:7px; }#playground-dialog .mac-menubar { height:23px; font-size:6px; gap:8px; }#playground-dialog .sandbox-stage { inset:32px 0 55px; }#playground-dialog .demo-dock { bottom:9px; padding:4px 6px 2px; gap:5px; border-radius:12px; }#playground-dialog .dock-app .sample-icon { width:33px; height:33px; }#playground-dialog .demo-controls { font-size:10px; }
 .window-card,#playground-dialog .window-card { width:110px; height:96px; }.side-card,.bottom-card,#playground-dialog .side-card,#playground-dialog .bottom-card { width:90px; height:79px; }.selected-card,#playground-dialog .selected-card { left:48px; bottom:49px; }.side-card,#playground-dialog .side-card { left:-45px; bottom:115px; }.bottom-card,#playground-dialog .bottom-card { left:157px; bottom:-38px; }.right-corner .selected-card,#playground-dialog .right-corner .selected-card { left:auto; right:48px; }.right-corner .side-card,#playground-dialog .right-corner .side-card { left:auto; right:-45px; }.right-corner .bottom-card,#playground-dialog .right-corner .bottom-card { left:auto; right:157px; }.window-card .sample-icon,#playground-dialog .window-card .sample-icon { width:30px; height:30px; margin-top:5px; }.card-caption,#playground-dialog .card-caption { font-size:7px; }
 .playground-settings-body { right:-32px; width:245px; }
}
@media(prefers-reduced-motion:reduce) { .dock-app { transition:none; } }