:root{color-scheme:dark;font-family:Inter,Arial,sans-serif;background:#070a0d;color:#f2f4f7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 65% 45%,#16232666,transparent 52%),#070a0d;min-height:100vh}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 5vw}header a{font-size:23px;font-weight:750;letter-spacing:-1px;color:inherit;text-decoration:none}header a span,.intro h1 span{color:#d8b777}.study-label{font-size:10px;letter-spacing:2px;color:#7b8b97}button{font:inherit;cursor:pointer}#motion-toggle{padding:9px 13px;border:1px solid #2c383e;border-radius:20px;background:#10171c;color:#b4c2ca;font-size:11px}main{display:grid;grid-template-columns:.7fr 1.3fr;align-items:center;max-width:1280px;margin:auto;padding:15px 5vw 40px;min-height:75vh}.eyebrow{font-size:10px;letter-spacing:2px;color:#b5a07a}.intro h1{font-size:clamp(38px,5vw,68px);letter-spacing:-.065em;line-height:1.05;max-width:350px;margin:20px 0}.intro p{color:#82949f;line-height:1.8;font-size:13px}.stage{position:relative;display:grid;place-items:center;min-width:0;height:600px;perspective:1300px;isolation:isolate}.monitor-rig{width:min(100%,570px);transform-style:preserve-3d;will-change:transform}.monitor-float{position:relative;animation:float 6s ease-in-out infinite;transform-style:preserve-3d}.monitor-vector svg{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(12px 20px 15px #0003)}.floor-shadow{position:absolute;width:70%;height:45px;border-radius:50%;bottom:20px;background:radial-gradient(ellipse,#0009,transparent 70%);filter:blur(8px);animation:shadow 6s ease-in-out infinite;z-index:-1}#eyes,#eye-glow{transform-box:fill-box;transform-origin:center;will-change:transform}#eyes{animation:blink 6.4s infinite}#glass-reflection{transition:opacity .5s}#power-switch{transition:filter .2s}.switch-hit{position:absolute;left:59%;top:75%;width:22%;height:13%;border:0;background:transparent;border-radius:10px}.switch-hit:hover~*{opacity:1}.switch-hit:focus-visible{outline:2px solid #f8e1a9;outline-offset:5px}.interaction-note{position:absolute;bottom:-10px;color:#74878b;font-size:10px;letter-spacing:.07em}body.off #eyes,body.off #eye-glow{opacity:0}body.off #power-led{fill:#68502e}#eyes,#eye-glow{transition:opacity .35s}body.paused .monitor-float,body.paused .floor-shadow,body.paused #eyes{animation-play-state:paused}footer{max-width:1280px;margin:auto;padding:20px 5vw 35px;font-size:10px;color:#6d7f8a;display:flex;justify-content:space-between;gap:20px}@keyframes float{0%,100%{transform:translateY(3px) rotateZ(-1deg)}50%{transform:translateY(-10px) rotateZ(.8deg)}}@keyframes shadow{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(.91);opacity:.5}}@keyframes blink{0%,43%,47%,100%{scale:1 1}45%{scale:1 .055}80%,84%{scale:1 1}82%{scale:1 .08}}@media(max-width:750px){header{padding:22px 6vw}.study-label{display:none}main{grid-template-columns:1fr;min-height:0;padding:30px 6vw}.intro{text-align:center}.intro h1{max-width:none;font-size:42px;margin:15px 0 10px}.stage{height:auto;min-height:350px;padding:10px 0 35px}.monitor-rig{max-width:460px}.floor-shadow{bottom:25px}.interaction-note{bottom:0}footer{padding:20px 6vw;flex-direction:column;gap:6px}}@media(prefers-reduced-motion:reduce){.monitor-float,.floor-shadow,#eyes{animation:none!important}.monitor-rig{will-change:auto}}
.switch-hit{z-index:10;left:6%;top:4%;width:88%;height:89%;min-width:44px;min-height:44px;border-radius:20%;transform:translateZ(2px);touch-action:manipulation}
#switch-sun,#switch-moon{pointer-events:none;opacity:1;transition:stroke .25s;stroke-width:6}
html[data-theme="light"] #switch-sun,html:not([data-theme="light"]) #switch-moon{stroke:#fff;filter:drop-shadow(0 1px 2px #0009)}
html[data-theme="light"] #switch-moon,html:not([data-theme="light"]) #switch-sun{stroke:#080b0c;filter:none}
/* A small physical extrusion behind the front face. */
.monitor-depth{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.monitor-depth i{position:absolute;inset:6% 7% 9%;border-radius:19%;background:linear-gradient(120deg,#cfab69,#9c783e 65%,#bb924e);box-shadow:inset -3px -2px 8px #4c341b40;transform:translateZ(-8px)}
.monitor-depth i:nth-child(2){transform:translateZ(-16px)}.monitor-depth i:nth-child(3){transform:translateZ(-24px)}.monitor-depth i:nth-child(4){transform:translateZ(-32px)}.monitor-depth i:nth-child(5){transform:translateZ(-40px)}
.monitor-vector{position:relative;transform:translateZ(1px);backface-visibility:hidden;pointer-events:none}
body.embed{background:transparent!important;min-height:0;height:100vh;overflow:hidden}
body.embed header,body.embed .intro,body.embed footer,body.embed .interaction-note{display:none}
body.embed main{display:block;margin:0;padding:0;width:100%;max-width:none;min-height:0;height:100%}
body.embed .stage{width:100%;height:100%;min-height:0;padding:0;perspective:1000px}
body.embed .monitor-rig{width:86%;max-width:500px}
body.embed .floor-shadow{bottom:5%;height:25px;opacity:.4}
body.embed .monitor-vector svg{filter:drop-shadow(8px 12px 10px #0002)}
body.embed .monitor-float{animation:float 7s ease-in-out infinite}

html.embed{background:transparent!important;color-scheme:normal}

/* Match the host surface explicitly: avoid the browser's white iframe canvas. */
html.embed{background:#070a0d!important;color-scheme:dark}
html.embed body.embed{background:#070a0d!important}
html.embed[data-theme="light"],html.embed[data-theme="light"] body.embed{background:#f4f7fa!important;color-scheme:light}

/* Matched color schemes allow a genuinely transparent embedded canvas. */
html.embed,html.embed body.embed{background:transparent!important;color-scheme:dark}
html.embed[data-theme="light"],html.embed[data-theme="light"] body.embed{background:transparent!important;color-scheme:light}
body.embed .stage{perspective:3200px}
body.embed .monitor-float{animation:none}
.monitor-depth i{inset:6% 7% 9%;box-shadow:none;border-radius:18%;background:linear-gradient(120deg,#e1c389,#aa8448 70%,#c29c5c)}
#night-screen{opacity:0;transition:opacity .6s;pointer-events:none}
body.sleepy #night-screen{opacity:.72}
#sleepy-eyes{display:none;fill:none;stroke:#4aaf60;stroke-width:14;stroke-linecap:round;opacity:.65;filter:drop-shadow(0 0 3px #27ff5528);transform-box:fill-box;transform-origin:center}
body.sleepy #sleepy-eyes{display:block;animation:sleepy-blink 13.5s infinite}
body.sleepy #eyes,body.sleepy #eye-glow{opacity:0}
@keyframes sleepy-blink{0%,92%,98%,100%{scale:1 1}95%{scale:1 .12}}
body.paused #sleepy-eyes{animation-play-state:paused}
body.embed .floor-shadow{opacity:.15}

.monitor-depth i{inset:0;border-radius:0;mask:url('shell-mask.svg') center/100% 100% no-repeat;-webkit-mask:url('shell-mask.svg') center/100% 100% no-repeat;box-shadow:none}
body.embed .floor-shadow{display:none}
body.embed .monitor-vector svg{filter:drop-shadow(5px 9px 9px #00000016)}

#power-fx{opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:center;clip-path:inset(0 round 95px)}

/* Deep CRT housing: a long rear body, shown in a restrained three-quarter view. */
body.embed .monitor-rig{width:58%;max-width:348px;transform:rotateX(-5deg) rotateY(-19deg)}
@property --monitor-shell-night {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
:root { --monitor-material-transition: .65s ease; }
.monitor-depth {
  --monitor-shell-night: 0;
  transition: --monitor-shell-night var(--monitor-material-transition);
}
body.sleepy .monitor-depth { --monitor-shell-night: 1; }
.monitor-depth i {
  --shell-day-weight: calc((1 - var(--monitor-shell-night)) * 100%);
  background: linear-gradient(125deg,
    color-mix(in srgb, #dfc58c var(--shell-day-weight), #344855) 0%,
    color-mix(in srgb, #b79456 var(--shell-day-weight), #25303a) 42%,
    color-mix(in srgb, #9a773e var(--shell-day-weight), #101820) 76%,
    color-mix(in srgb, #b28b4c var(--shell-day-weight), #1d2934) 100%);
}
.monitor-depth i:nth-child(n+55) {
  background: linear-gradient(125deg,
    color-mix(in srgb, #c9ab72 var(--shell-day-weight), #2d4352),
    color-mix(in srgb, #9c7a40 var(--shell-day-weight), #111922) 75%,
    color-mix(in srgb, #b08a4b var(--shell-day-weight), #1b2833));
}
@media(max-width:750px){body.embed .monitor-rig{width:56.3%}}

/* The eye glow must blink with the eye, not remain behind it. */
#eyes,#eye-glow{animation:blink 6.4s infinite;transform-box:fill-box;transform-origin:center}
body.paused #eyes,body.paused #eye-glow{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#eyes,#eye-glow,#sleepy-eyes{animation:none!important}#night-screen{transition:none}}

/* Nighttime graphite material; gold remains the daytime finish. */
body.sleepy{
 --body-1:#535961;
 --body-2:#343a43;
 --body-3:#282e36;
 --body-4:#14191f;
 --body-5:#282f38;
 --side-1:#253641;
 --side-2:#0c1118;
 --side-3:#1e2832;
 --rim-1:#7196ae;
 --rim-2:#444f5d;
 --rim-3:#252d37;
 --rim-4:#101820;
 --rim-5:#344453;
 --casingLight-1:#b0cadd;
 --casingLight-2:#b0cadd;
 --recess-1:#10151b;
 --recess-2:#171e26;
 --recess-3:#29343f;
 --recess-4:#3e4b59;
 --bezel-1:#10171e;
 --bezel-2:#02060b;
 --bezel-3:#111b25;
 --glass-1:#142435;
 --glass-2:#08131e;
 --glass-3:#02070d;
 --shine-1:#a8d9fa;
 --shine-2:#a8d9fa;
 --rocker-1:#c3cbd4;
 --rocker-2:#78848e;
 --rocker-3:#343e47;
 --rocker-4:#141c24;
 --slot-1:#131b23;
 --slot-2:#080d13;
 --slot-cavity-1:#080e15;
 --slot-cavity-2:#1b2631;
 --top-highlight:#9bc7e3;--recess-wall:#25313d;--bevel-top:#101720;--bevel-left:#19232e;--bevel-right:#334454;--bevel-bottom:#475968;
 --slot-edge:#33414d;--slot-top:#0d141c;--slot-left:#1e2b37;--slot-bottom:#465563;--slot-right:#2a3946;--switch-edge:#45515f;--led-edge:#334450;
}
.monitor-vector stop{transition:stop-color var(--monitor-material-transition)}
#monitor-body>path,#screen-recess-walls path,#screen-recess-walls rect,#lower-slot path,#lower-slot rect,#power-switch>rect{transition:fill var(--monitor-material-transition),stroke var(--monitor-material-transition)}
.night-rim{opacity:0;transition:opacity var(--monitor-material-transition)}
body.sleepy .night-rim{opacity:1}
body.sleepy #sleepy-eyes{stroke-width:40;stroke-linejoin:round;opacity:.86;filter:drop-shadow(0 0 5px #27ff5530)}
.rear-shell-light{position:absolute;inset:0;transform:translateZ(-122px) scale(1.014);pointer-events:none;opacity:0;transition:opacity var(--monitor-material-transition)}
.rear-shell-light svg{display:block;width:100%;height:auto;overflow:visible}
body.sleepy .rear-shell-light{opacity:1}
#retro-cat-badge{pointer-events:none}
#boot-screen{opacity:0;pointer-events:none;transition:opacity .3s ease}
body.booting #boot-screen{opacity:1}
#hello-writing,#hello-dot{stroke-dasharray:1;stroke-dashoffset:1}
body.booting #eyes,body.booting #eye-glow{opacity:0}
body.sleepy{--glass-bounce:#6cb2dc}
#glass-reflections{pointer-events:none}
#category-writing{opacity:0;pointer-events:none;transition:opacity .25s ease}
body.writing-category #category-writing{opacity:1}
#category-terminal{fill:#a4ffbc;font:600 54px Menlo,Monaco,"Courier New",monospace;white-space:pre;text-shadow:0 0 10px #4aff8060}
.terminal-prompt{fill:#63da83}
.terminal-caret{fill:#76ed95}
body.writing-category .terminal-caret{animation:terminal-blink .9s step-end .85s infinite}
@keyframes terminal-blink{50%{opacity:0}}
body.writing-category #eyes,body.writing-category #eye-glow,body.writing-category #sleepy-eyes{opacity:0}
@media(prefers-reduced-motion:reduce){#category-writing{transition:none}body.writing-category .terminal-caret{animation:none}}
@media(prefers-reduced-motion:reduce){#boot-screen{transition:none}}
@media(prefers-reduced-motion:reduce){.rear-shell-light,.monitor-depth{transition:none}}
@media(prefers-reduced-motion:reduce){.monitor-vector stop,.night-rim,#monitor-body>path,#screen-recess-walls path,#screen-recess-walls rect,#lower-slot path,#lower-slot rect,#power-switch>rect{transition:none}}

/* The docked assistant has a shallower shell than the full-size monitor. */
@media (max-width: 180px) {
  body.embed .monitor-rig { width: 66%; transform: rotateX(-2deg) rotateY(-7deg); }
  body.embed .monitor-depth { transform: scaleZ(.18); }
}