/* Portfolio OS and the requested refinements to the original hardware. */
:root{--display-grain-opacity:.045;--dark-screen-glow-strength:45%;--dark-screen-glow-radius:6px}
html,body{width:100%;height:100dvh;min-height:0;background:#fff;overflow:hidden}
body{display:block}
#machine-host{position:relative;height:100dvh;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#machine-host[data-launching]{pointer-events:none;will-change:transform;z-index:20}
.project-transition-veil{position:fixed;inset:0;z-index:15000;background:#fff;opacity:0;pointer-events:auto;touch-action:none}
html[data-project-transition] .project-viewer-return,html[data-project-transition] .project-viewer-theme{pointer-events:none}
#machine-host .stage{width:375px;height:724px;margin:0;border-radius:0;background:transparent;transform:scale(var(--machine-scale,1));transform-origin:center;flex:none;overflow:visible}
.sr-only{top:0;left:0}
#machine-host .machine{top:18px}
/* Preserve the original outer cast shadow without flattening every live
   speaker, handle and screen into the machine's offscreen filter surface. */
.hardware-filter-defs{position:absolute;pointer-events:none}
.machine-shadow{position:absolute;inset:0;z-index:-1;pointer-events:none;filter:url('#machine-cast-shadow')}
.shadow-corner{left:253px;top:0;width:102px;height:105px;border-radius:30px;background:#000}
.shadow-menu-cap{left:1.6px;top:588.284px;transition:translate 100ms}
.shadow-select-cap{left:89.342px;top:588.219px;transition:translate 100ms}
.machine:has(.back-button:is(:active,.pressing)) .shadow-menu-cap,
.machine:has(.start-button:is(:active,.pressing)) .shadow-select-cap{translate:0 3px}
.hardware-vector{display:block;max-width:none;flex:none}
/* The rear export begins .158px left of the opaque white body. Occlude that
   hidden strip only to y=571, where the source's left edge first curves;
   keep the rear's
   exposed lower contour and its authored placement unchanged. */
#machine-host .black-base{clip-path:polygon(.5px 0,100% 0,100% 100%,0 100%,0 98.321px,.5px 98.321px)}
.loading-copy{font:14px Pixel,monospace;color:#494949}
.skip-link{position:fixed;left:10px;top:-60px;z-index:100;padding:10px;background:#fff;border:2px solid #494949;font:14px Pixel,monospace}.skip-link:focus{top:10px}
#screen-content{z-index:6}#os-root{width:240px;height:320px;font:12px/1.2 Pixel,monospace;position:relative;padding:5px 7px 6px;isolation:isolate;color:var(--ink);overflow:hidden}
/* Static surface grain stays above the OS and below the original glass edge.
   Normal compositing also textures saturated cyan and the inverse dark field. */
#machine-host .screen-grain{background-image:url('./src/display-grain.svg');background-size:96px 96px;mix-blend-mode:normal;opacity:var(--display-grain-opacity);z-index:8;pointer-events:none}
#machine-host .round-screen>.screen-grain{opacity:calc(var(--display-grain-opacity)*.85)}
#machine-host .main-screen{background:var(--screen-bg,var(--screen-color));overflow:clip;transition:box-shadow 100ms}
#machine-host .round-screen{background-color:var(--top-bg,var(--top-color));color:var(--top-ink,#000)}
/* A dark display keeps a visible, restrained halo around its glass edge. */
#machine-host .round-screen[data-inverse="true"]{box-shadow:0 0 var(--dark-screen-glow-radius) color-mix(in srgb,var(--top-color) var(--dark-screen-glow-strength),transparent)}
#machine-host .main-screen[data-inverse="true"]{box-shadow:0 0 var(--dark-screen-glow-radius) color-mix(in srgb,var(--screen-color) var(--dark-screen-glow-strength),transparent)}
#machine-host .screen-toast{background:var(--screen-bg,var(--screen-color))}
/* Bottom controls are lit by their adjacent, independently coloured display. */
#machine-host .base-button:before{background:var(--screen-color);box-shadow:0 5px 12px 3px var(--screen-color)}
#machine-host .base-button:after{background:var(--screen-color);box-shadow:0 -4px 10px 2px var(--screen-color)}
#machine-host .base-label{width:auto;height:auto;font:9px/12px Authentic,sans-serif;letter-spacing:0}
#machine-host .back-button .base-label{left:14px;right:auto;top:43px}
#machine-host .start-button .base-label{left:auto;right:18px;top:43px}
/* Local +Y points toward the rotated switch's bottom-left end. Keep that socket visible under pressure. */
#machine-host .character-switch:active .character-switch-cap{transform:translateY(-.5px) scaleY(.98);box-shadow:inset 1px 1px 2px #0004,inset -1px -1px 1px #ffffff40}
#machine-host .character-switch:active .character-switch-cap::after{opacity:.28}
/* The socket stays fixed; pressing sinks the cap down and right inside it. */
#machine-host .font-key{border:0;background:#171717;box-shadow:inset 1px 1px 2px #0009;transform:none;filter:none;overflow:hidden;transition:none}
#machine-host .font-key::before,#machine-host .font-key::after{display:none}
.polarity-keycap{position:absolute;inset:1px;border-radius:inherit;pointer-events:none;transition:inset 110ms,box-shadow 110ms,filter 110ms}
.white-key .polarity-keycap{background:linear-gradient(#efedeb,#cdc6c1);box-shadow:inset 1px 1px 2px 2px #ffffff80,inset 4px 4px 4px -4px #ffffff80,inset -1px -1px 1px #0008,inset -4px -4px 4px #0004}
.black-key .polarity-keycap{background:linear-gradient(#505050,#242424);box-shadow:inset 1px 1px 1px #ffffff45,inset 2px 2px 3px -2px #ffffff35,inset -1px -1px 1px #0008,inset -3px -3px 4px #0003}
.polarity-keycap::after{content:'';position:absolute;inset:1px;border-radius:inherit;background:radial-gradient(ellipse at 25% 8%,#ffffff80,#ffffff12 38%,transparent 68%),linear-gradient(112deg,#ffffff1a,transparent 35%,#00000008);box-shadow:inset .5px .7px .4px #ffffff90,inset -.5px -.5px .7px #00000038;opacity:.45}
.font-key[aria-pressed="true"] .polarity-keycap{inset:1.8px 1px 1px 1.8px;box-shadow:inset .7px .7px 1.5px #0004,inset -.7px -.7px .8px #ffffff4d}
.font-key:is([aria-pressed="true"],:active) .polarity-keycap::after{opacity:.18}
.font-key:active .polarity-keycap{inset:2.2px 1px 1px 2.2px;filter:brightness(.97);box-shadow:inset .7px .7px 1.5px #0004,inset -.7px -.7px .8px #ffffff4d}
#machine-host .round-screen[data-static="on"]>.round-content{visibility:hidden}
.glass-optics-ready #round-screen>.character-static{filter:url(#round-lens)}
#os-root button{font-family:Pixel,monospace;color:inherit;touch-action:manipulation}
#os-root:focus,.skip-link:focus{outline:none}
/* The cover keeps its original surface; its title carries the selection. */
#os-root button:focus-visible,#os-root button.os-focused{outline:none}
#os-root button:not(.os-hero):is(:focus-visible,.os-focused){background:color-mix(in srgb,var(--ink) 14%,transparent)}
#os-root :is(.os-header-button,.os-app-choice,.os-camera-actions button):is(:focus-visible,.os-focused){background:var(--ink);color:var(--screen-bg,var(--screen-color));border-color:transparent!important}
#os-root .os-project-step:is(:focus-visible,.os-focused){outline:none;background:transparent;color:inherit}
#os-root .os-project-step:active{background:var(--ink);color:var(--screen-bg,var(--screen-color))}
/* One header, one height, on every native OS screen. */
.os-bar{height:24px;min-height:24px;display:grid;grid-template-columns:24px 1fr 24px;align-items:center;border-bottom:2px solid color-mix(in srgb,currentColor 65%,transparent);border-radius:0 0 2px 2px;margin:0 0 5px;padding:0 1px 4px}
.os-count{text-align:center;font:10px/14px Pixel,monospace}
.os-header-button{display:flex;align-items:center;justify-content:center;width:22px;height:19px;padding:1px!important;border-radius:4px}
.os-header-button svg{display:block;width:16px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.os-header-button:disabled{opacity:.35;cursor:default}
#os-root .os-header-button:active,#os-root .os-app-choice:active{background:var(--ink);color:var(--screen-bg,var(--screen-color))}
.os-project{width:226px;height:280px}
.os-hero{display:block;position:relative;width:226px;height:223px;border-style:solid!important;border-color:currentColor!important;border-width:1.5px 3px 3px 1.5px!important;border-radius:5px;overflow:hidden;box-shadow:0 2px 3px #00000012;cursor:pointer}
.hero-surface{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-surface canvas,.hero-surface pre{max-width:100%;max-height:100%;pointer-events:none}
.hero-signal{position:absolute;inset:0;opacity:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 2px,currentColor 2px 3px);z-index:3}
.os-hero.reading .hero-signal{opacity:.2}
.os-project:has(.os-hero:is(:focus-visible,.os-focused)) .os-caption h1{background:var(--ink);color:var(--screen-bg,var(--screen-color))}
.os-caption{height:57px;padding:5px 0 2px;text-align:center;display:flex;flex-direction:column;gap:4px;justify-content:center}
.os-project-title{display:grid;grid-template-columns:20px minmax(0,1fr) 20px;align-items:center;gap:2px}
.os-caption h1{font:17px/21px Pixel,monospace;white-space:nowrap;letter-spacing:0;padding:2px 0;border-radius:3px}
.os-project-step{font:14px/20px Pixel,monospace;width:20px;height:23px;border-radius:4px}
.os-caption p{font:10px/12px Pixel,monospace;white-space:nowrap;opacity:.85}
.os-pending{display:grid;place-items:center;width:100%;height:100%;font:18px/1 Pixel,monospace;opacity:.65}
/* Clip the oversized wallpaper without creating a focus-scroll container. */
.os-launcher{position:relative;width:240px;height:320px;display:flex;align-items:center;justify-content:center;isolation:isolate;overflow:clip}
/* Original Figma188:75:179 columns,109 lines in a295×357 text layer.
   Centre-crop it to the native screen, preserving each authored character. */
.os-wallpaper{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:295px;height:357px;margin:0;padding:0;border:0;background:none;z-index:-1;color:inherit;font:2.998px/3.271px Comic,monospace;white-space:pre;letter-spacing:0;font-variant-ligatures:none;user-select:none;pointer-events:none}
.os-window{width:172.297px;height:70.519px;position:relative}
.os-window-surface{position:absolute;inset:0;background:var(--screen-bg,var(--screen-color));border:solid currentColor;border-width:1.5px 3px 3px 1.5px;border-radius:5px;box-shadow:0 3px 5px #00000016}
.os-logo{position:absolute;width:143.5px;height:22px;left:calc(50% + .5px);top:13.59px;transform:translateX(-50%)}
/* Keep Figma's exact outlines and its 0/4/2/.25 shadow as separate alpha
   layers, so the sharp type never passes through the SVG filter bitmap. */
.os-logo::before,.os-logo::after{content:'';position:absolute;inset:0;background:currentColor;-webkit-mask-size:143.5px 22px;mask-size:143.5px 22px;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mask-mode:alpha}
.os-logo::before{-webkit-mask-image:url('./hardware/assets/figma/knife-os-title-shadow.svg');mask-image:url('./hardware/assets/figma/knife-os-title-shadow.svg')}
.os-logo::after{-webkit-mask-image:url('./hardware/assets/figma/knife-os-title-glyphs.svg');mask-image:url('./hardware/assets/figma/knife-os-title-glyphs.svg')}
.os-boot-track{position:absolute;left:50%;top:44.59px;transform:translateX(-50%);white-space:nowrap;font:6.6px/7.2px Comic,monospace}
.os-ready-window{height:132px}
.os-app-choices{position:absolute;left:12px;right:12px;top:52px;bottom:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.os-app-choice{border:0!important;border-radius:5px;display:grid;place-items:center;box-shadow:none}
.os-app-choice svg{width:25px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#os-root:is([data-view="boot"],[data-view="home"],[data-view="camera"]){padding:0}
.os-camera-host{width:240px;height:320px;position:relative;overflow:hidden}
.os-error{padding:20px;font:13px/1.7 Pixel,monospace;max-width:375px}.os-error button{border-bottom:1px solid currentColor;padding:3px}
@media(max-height:720px){#machine-host{height:100svh;min-height:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}.hero-signal{display:none}}