* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; color: #1d1d1f; color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }
button, a, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid #8e8e93; outline-offset: 2px; }
/* macOS's light appearance on Kinso's grey desktop (for-kinso/desktop.svg; the bar, Dock and menus are kinso.css's light
   values, which this page does not load). Window chrome is the light look too; only the imperfect window stays dark
   (its product is Mac · Dark, and the score's dark grey window becomes it). */
.mac.screen { overflow: visible; --mac-ground: #E8E8E8; --mac-window: #2b2b2d; color: #1d1d1f; color-scheme: light; }
/* The desktop's own .mac-wall paints its wallpaper only after unlocking. Never put it beneath the light. */
html { background: #E8E8E8; }
/* Past the stage's edges, so the bass's shake never shows an edge, and the picture's own soft last row stays off screen. */
.mac .mac-wall { inset: -12px; background: url('/for-kinso/desktop.svg') center / 100% 100% no-repeat, #E8E8E8; }
.mac {
  --bar-bg: rgb(246 246 246 / 58%); --bar-ink: #1D1D1F; --bar-open: #0000001a; --bar-focus: #00000040;
  --menu-bg: rgb(246 246 246 / 82%); --menu-ink: #000000d9; --menu-rim: #ffffff99; --menu-edge: #00000024; --menu-shadow: #00000033; --menu-rule: #0000001a;
  --muted-ink: #6e6e73; --search-ink: #1D1D1F; --search-icon: #6e6e73;
  --dock-bg: rgb(250 250 250 / 46%); --dock-rim: #ffffffb3; --dock-edge: #0000001f; --dock-shadow: #00000024; --dock-run: #000000a6; --dock-rule: #00000026; --dock-focus: #0000008c;
  --label-bg: #f6f6f6ed; --label-ink: #1D1D1F; --label-edge: #00000024;
  --well: #0000000a; --tile: #ffffff8c; --tile-edge: inset 0 0 0 .5px #0000001a; --switch-off: #dcdcdf; --media: #0000000f;
  --light-off: #dcdcdc; --light-off-edge: #0000001f;
  --win-bg: #ececec; --win-ink: #1d1d1f; --win-bar: linear-gradient(#ededed,#e5e5e5); --win-bar-edge: #0000001f; --win-bar-ink: #3d3d3f; --win-bar-idle: #f6f6f6; --win-bar-idle-ink: #b1b1b5;
  --about-mark: #5e5e62; --about-quiet: #86868b; --code-well: #fff;
  --finder-side: #e9e9eccc; --finder-side-edge: #0000001a; --finder-head: #8a8a8e; --finder-item: #1d1d1f; --finder-main: #fff; --finder-tool: #f6f6f6; --finder-rule: #0000001a; --finder-dim: #86868b;
  --button-edge: #00000024; --button-ink: #1d1d1f; --button-bg: linear-gradient(#fff,#f7f7f7);
  --mini-bg: #f5f5f7; --mini-ink: #6e6e73; --mini-head: #ececec; --mini-rule: #d9d9dc; --mini-side: #ececee; --mini-line: #d1d1d6; --mini-line-soft: #e5e5ea; --mini-card-edge: #d1d1d6; --mini-field: #ececee; --mini-bar: #e5e5ea; --mini-mark: #b0b0b5; --mini-page: #ececee;
}
/* Light-look window shadows: a dark hairline and soft shade, no white inner rim. */
.mac .shell-window { box-shadow: 0 0 0 .5px #00000038, 0 22px 56px #00000030, 0 5px 14px #0000001f; }
.mac .shell-window[data-focused="false"] { box-shadow: 0 0 0 .5px #00000026, 0 12px 34px #00000021; }
/* The app windows open one on another in the same place: only the front one casts the shade, or eight would darken into a
   frame round them. */
.mac .replica-window[data-focused="false"] { box-shadow: 0 0 0 .5px #00000026; }
/* Measured macOS 26.6.2 chrome; replicas/panel only, never the embedded product's UI. */
.mac :is(.replica-window, .shell-code-window) { border-radius: 20px; }
.mac :is(.replica-window, .shell-code-window) .shell-lights { left: 9px; top: 9px; height: 14px; gap: 9px; }
.mac :is(.replica-window, .shell-code-window) .shell-light { width: 14px; height: 14px; min-width: 14px; }
.mac :is(.replica-window-claude, .replica-window-terminal, .shell-code-window) .shell-titlebar { display: flex; align-items: center; height: 32px; min-height: 32px; padding: 0 16px 0 84px; text-align: left; background: #fff; border-bottom: 1px solid #e6e6e6; color: #555; font-size: 13px; font-weight: 600; }
.mac :is(.replica-window-chrome, .replica-window-gmail, .replica-window-calendar) { border-radius: 24px; }
.mac :is(.replica-window-chrome, .replica-window-gmail, .replica-window-calendar) .shell-lights { left: 13px; top: 13px; }
.mac .replica-window-finder { border-radius: 32px; background: #fff; }
.mac .replica-window-finder .shell-lights { left: 19px; top: 19px; }
.mac .replica-window-chatgpt .shell-lights { left: 16px; top: 15px; }
.mac .replica-window-opencode .shell-lights { left: 14px; top: 14px; }
body[data-presentation="imperfect"] .mac .shell-code-window { --win-bg: #fff; --win-bar: #fff; --win-bar-idle: #fff; }
.mac .shell-bar, .mac .shell-menu-trigger { height: 30px; }
.mac .shell-bar { background: rgb(211 211 211 / 70%); }
.mac .shell-dock { height: 51px; bottom: 5px; border-radius: 17px; }
.mac .dock-slot { width: 44px; height: 51px; flex-basis: 44px; }
.mac .dock-icon { width: 44px; height: 44px; display: grid; place-items: center; }
.mac .dock-icon img { width: 36px; height: 36px; }
.mac .dock-slot .mac-run { width: 3px; height: 3px; margin-left: -1.5px; bottom: 3px; }
.mac .shell-dock-label { bottom: 61px; }
.mac .shell-dock-divider { height: 32px; margin-bottom: 9px; }
.mac .shell-control-tile input[type="range"] { accent-color: #8e8e93; }
.mac .shell-miniature-viewport { box-shadow: 0 0 0 .5px #0000002e, 0 2px 3px #0000002e; }
/* imperfect's own window is dark, unlit lights and all. */
.mac-window { color-scheme: dark; --light-off: #4d4d51; --light-off-edge: #ffffff14; }
/* The product's frame is unseen until the product says it is the owner's (desktop-beat-demo.mjs data-verified), then fades
   in; until then the window shows imperfect's mark on its dark grey. */
.mac-window .demo iframe { opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.mac-window[data-verified="true"] .demo iframe { opacity: 1; pointer-events: auto; }
.mac-window .imperfect-mark { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 20%; pointer-events: none; user-select: none; transition: opacity .6s ease; }
.mac-window[data-verified="true"] .imperfect-mark { opacity: 0; }
.mac .shell-menu-siri { display: none; }
.desktop-app-note { padding: 30px; }
/* Counter the stage's desktop scaling: readable native-size type on phones too, without a panel or illustration. */
.desktop-reading { position: absolute; left: 50%; top: 50%; width: min(680px, calc(100vw - 40px)); max-height: calc(100vh - 100px); overflow-y: auto; transform: translate(-50%, -50%) scale(var(--reading-scale, 1)); transform-origin: center; color: #29292c; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.55; font-weight: 400; user-select: text; }
.desktop-reading p { margin: 0 0 1.1em; }
.desktop-reading p:last-child { margin-bottom: 0; }
.mac .shell-dock { max-width: calc(100% - 32px); }
#introScreen { position: fixed; inset: 0; z-index: 15; overflow: hidden; }
/* The glitter becomes transparent before it finishes: only the lock may be underneath, never the desktop.
   Keep layout measurable for the shell, but hide it (and all descendants) until the actual unlock. */
body:not([data-phase="desktop"]) { background: #E8E8E8; }
body:not([data-phase="desktop"]) #macScreen { visibility: hidden; opacity: 0; }
.stage { position: absolute; inset: 0; overflow: hidden; background: transparent; touch-action: none; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.still, .layer { position: absolute; inset: 0; overflow: hidden; }
.still img { position: absolute; display: block; transform-origin: 0 0; }
.layer { pointer-events: none; }
.glow { opacity: 0; }
.app-sky { position: absolute; inset: 0; z-index: 2; visibility: hidden; overflow: hidden; background: transparent !important; pointer-events: none; }
.app-sky .macos-wallpaper, .wordmark { display: none !important; }
.rim { position: absolute; inset: 0; pointer-events: none; }
.desktop-scroll { position: absolute; z-index: 30; left: 50%; bottom: 18px; transform: translateX(-50%); margin: 0; color: #fff; font-size: 15px; text-shadow: 0 1px 5px #000; pointer-events: none; }