:root { --electric:#37def5; --hot:#ff3b62; --paper:#e7e7e7; }
html { color-scheme:dark; }
body {background:#090909;}
.site {background:radial-gradient(ellipse 115% 35% at 50% 44%,#0e0e0e,#020202 65%);}
.site::after {box-shadow:inset 0 0 80px 8px #0008, inset 0 0 0 1px #ffffff12}
.static-noise {opacity:.18; background-size:690px;}
.scanlines {opacity:.18;background:repeating-linear-gradient(to bottom,transparent 0px,transparent 3px,#0006 4px,transparent 5px)}
.glitch-heading {filter:none;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;letter-spacing:-.057em}
.glitch-row {text-shadow:-3px 0 var(--red),3px 0 var(--cyan),0 1px #aaa}
.glitch-heading:hover .glitch-row, .site.is-overdrive .glitch-row {animation:hard-glitch .15s steps(2,end) infinite}
.glitch-heading:hover .glitch-row::before,.site.is-overdrive .glitch-row::before {animation-duration:.4s}
.glitch-heading:hover .glitch-row::after,.site.is-overdrive .glitch-row::after {animation-duration:.33s}
.status-dot {background:#eee;box-shadow:0 0 6px #ddd}
.eyebrow {color:#a3a3a3}
.error-window {border:1px solid #f5f5f5;outline:1px solid #2a2a2a;outline-offset:0;image-rendering:auto;transform:translate3d(var(--drag-x,0px),var(--drag-y,0px),0)}
.window-inner svg {flex-shrink:0}
.error-window.is-shaking {animation:error-shake .4s steps(7) !important}
.error-window.is-fleeing {transition:margin-left .18s, margin-top .18s}
.error-window.is-hidden {display:none}
@keyframes error-shake {0%,100%{translate:0}15%{translate:8px -2px}30%{translate:-6px 1px}50%{translate:5px 1px}70%{translate:-4px -1px}}
.photo-wrap {display:block;position:relative;width:100%;height:auto;aspect-ratio:1.4;overflow:hidden;padding:0;border:1px solid #eaeaea9e;cursor:crosshair;outline-offset:3px;text-align:left;appearance:none;background:#171717 url("../images/night-portrait.webp") center / cover no-repeat}
.photo-wrap img {image-rendering:auto;backface-visibility:hidden}
.photo-wrap > img:first-child {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo-wrap .photo-ghost {position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .16s;object-fit:cover}
.photo-ghost.ghost-a {clip-path:polygon(0 10%,100% 10%,100% 36%,0 36%);filter:grayscale(1) contrast(1.8)}
.photo-ghost.ghost-b {clip-path:polygon(0 52%,100% 52%,100% 83%,0 83%);filter:grayscale(1) invert(1) contrast(2)}
.photo-wrap:hover .ghost-a,.photo-wrap:focus-visible .ghost-a,.photo-wrap.is-distorted .ghost-a {opacity:.72;transform:translateX(10px)}
.photo-wrap:hover .ghost-b,.photo-wrap:focus-visible .ghost-b,.photo-wrap.is-distorted .ghost-b {opacity:.65;transform:translateX(-10px)}
.photo-wrap:hover>img:first-child,.photo-wrap.is-distorted>img:first-child {filter:grayscale(1) contrast(2.1) brightness(.78)}
.photo-code {position:absolute;z-index:4;right:4px;bottom:5px;color:white;background:#111d;font-size:7px;letter-spacing:.04em;padding:3px 4px;opacity:0;transition:opacity .2s}
.photo-wrap:hover .photo-code,.photo-wrap.is-distorted .photo-code {opacity:1}
.photo-block {transform:rotate(-.75deg)}
.footer-control {border:0;padding:0;background:transparent;color:#d2d2d2;font:inherit;font-size:inherit;letter-spacing:inherit}
.footer-control:hover {color:var(--cyan)}

@media (min-width:901px) {
  .site {width:min(calc(100% - 80px),clamp(700px,61vw,870px)); min-height:1650px; height:auto; overflow:hidden; border-inline:1px solid #383838; box-shadow:0 0 0 1px #090909,0 0 140px #000;}
  .header {margin:0 clamp(34px,5.3%,51px);padding-top:36px;}
  .logo {width:56px;height:56px;font-size:50px;}
  .top-nav {gap:clamp(24px,3.1vw,46px)}
  .top-nav button,.top-nav a {font-size:13px}
  .hero {padding:82px 7.5% 0}
  .eyebrow {font-size:11px;margin-bottom:20px}
  .glitch-heading {font-size:clamp(118px,11vw,151px);line-height:.835;letter-spacing:-.062em;transform:none}
  .hero-subline {font-size:10px;margin-top:29px}
  .side-nav {padding:49px 7.5% 0;gap:23px 27px}
  .side-label {font-size:11px;}
  .side-nav button {font-size:13px;}
  .errors {height:505px;margin:49px 3.3% 0}
  .error-window {width:clamp(330px,29vw,390px)}
  .error-window[data-error="404"] {left:22%;top:0}
  .error-window[data-error="403"] {left:2%;top:161px}
  .error-window[data-error="500"] {left:37%;top:316px;width:clamp(315px,28vw,375px)}
  .window-bar {height:32px;font-size:13px}
  .window-inner {min-height:89px;gap:17px;padding:19px 20px 8px}
  .window-inner p {font-size:13px;}
  .window-actions {padding:3px 17px 15px}
  .win-ok {height:32px;font-size:13px}
  .bottom-area {padding:0 7.5% 94px;gap:58px}
  .loading-panel {width:315px;padding:18px 20px}
  .console {max-width:100%}
  .terminal-output,.terminal-question,.terminal-choices button {font-size:14px}
  .photo-block {width:290px;max-width:46%;margin:0 3% 0 auto}
  .photo-block figcaption {font-size:13px}
  .footer {padding:16px 26px;font-size:10px}
}
@media (min-width:901px) and (max-width:1200px) {
 .site {width:min(calc(100% - 36px),780px)}
 .glitch-heading {font-size:clamp(110px,12vw,135px)}
 .error-window {width:345px}
 .error-window[data-error="500"] {width:325px}
}
@media (min-width:901px) and (min-height:1000px) { .site {min-height:1600px} }
@media (max-width:900px) {
  .site {height:auto;min-height:100svh}
  .glitch-heading {transform:none}
  .side-nav {row-gap:20px}
  .photo-block {max-width:60%}
  .footer {justify-content:space-between}
}
@media(max-width:600px) {
  .header {margin:0 6%;}
  .hero {padding-top:60px;}
  .glitch-heading {font-size:clamp(65px,15vw,91px);line-height:.84;letter-spacing:-.056em}
  .hero-subline {font-size:9px}
  .side-nav {gap:15px 19px;padding-top:33px}
  .side-label {width:100%}
  .side-nav button {font-size:11px}
  .errors {margin-top:34px;height:470px}
  .error-window[data-error="404"] {left:18%;top:0}
  .error-window[data-error="403"] {left:2%;top:146px}
  .error-window[data-error="500"] {left:31%;top:291px}
  .bottom-area {padding-bottom:62px;gap:44px}
  .footer {padding:12px 13px}
  .footer-control {font-size:9px}
}
@media(max-width:380px){
 .glitch-heading {font-size:clamp(57px,15vw,68px)}
 .errors {height:454px}
 .error-window[data-error="404"]{left:14%}
 .error-window[data-error="500"]{left:29%;top:284px}
}

.directory-progress {height:3px;background:#252525;margin:-12px 0 20px;overflow:hidden}
.directory-progress span {display:block;width:32%;height:100%;background:#ddd;animation:directory-scan 2.2s ease-in-out infinite alternate}
@keyframes directory-scan {to{transform:translateX(210%)}}
.install-summary {display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;border:1px solid #454545;padding:12px;color:#bbb;font-size:10px;margin-top:18px}

.boot-screen,.shutdown-screen,.terminal-overlay {position:fixed;inset:0;z-index:120;background:#010101;color:#f2f2f2;font-family:var(--mono)}
.boot-screen {display:grid;place-items:center;padding:22px;isolation:isolate}
.boot-screen::after,.shutdown-screen::after,.terminal-overlay::after {content:"";position:absolute;inset:0;pointer-events:none;opacity:.23;background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#ffffff12 4px,transparent 5px)}
.boot-console {width:min(590px,100%);padding:clamp(20px,5vw,36px);border:1px solid #6d6d6d;background:#050505;box-shadow:12px 12px 0 #ffffff12;position:relative;z-index:1}
.boot-tag {color:#888;font-size:11px;letter-spacing:.13em}
.boot-symbol {font:bold 85px/.9 Arial,sans-serif;letter-spacing:-8px;margin:23px 0 27px}
.boot-symbol span {font-family:var(--mono);font-size:40px;font-weight:normal;animation:blink .72s steps(1,end) infinite}
.boot-console h2 {font-size:clamp(17px,3vw,24px);letter-spacing:.045em;margin:0 0 28px}
.boot-log {display:flex;flex-direction:column;gap:10px;min-height:137px;font-size:clamp(11px,2.7vw,13px);color:#ddd}
.boot-log p {margin:0;animation:terminal-type .22s steps(4) both}
.boot-log .error {color:#ff7a86}
@keyframes terminal-type{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
.boot-meter {height:17px;margin-top:21px;padding:2px;border:1px solid #ddd;background:#000}
.boot-meter span {display:block;background:repeating-linear-gradient(90deg,#e9e9e9 0 11px,#686868 11px 13px);width:0;height:100%;transition:width .22s steps(12)}
.boot-foot {display:flex;justify-content:space-between;align-items:center;margin-top:15px;font-size:12px}
.boot-foot button {border:0;background:transparent;color:#ccc;font-size:11px;cursor:pointer}
.boot-foot button:hover {color:#fff;text-decoration:underline}
.boot-screen.is-finishing {animation:boot-close .5s cubic-bezier(.24,.82,.25,1) forwards}
@keyframes boot-close{0%{opacity:1;clip-path:inset(0)}75%{opacity:1;clip-path:inset(49.2% 0 49.2% 0)}100%{opacity:0;clip-path:inset(50% 0 50% 0)}}

.terminal-overlay {z-index:110;display:grid;place-items:center;padding:20px;background:#000d;backdrop-filter:blur(7px)}
.terminal-shell {width:min(710px,100%);min-height:435px;max-height:min(760px,90svh);display:flex;flex-direction:column;background:#040404;border:1px solid #d0d0d0;box-shadow:10px 10px 0 #aaaaaa35;position:relative;z-index:1;animation:modal-in .42s ease-out both}
.terminal-head {display:flex;align-items:center;justify-content:space-between;min-height:38px;background:#ddd;color:#070707;padding:4px 8px 4px 14px;font-weight:700;font-size:12px;letter-spacing:.065em}
.terminal-head button {background:#f1f1f1;border:1px solid #333;color:#000;font:bold 22px Arial;width:26px;height:24px;cursor:pointer}
.terminal-history {flex:1;min-height:260px;overflow:auto;padding:21px 24px;font-size:13px;line-height:1.6;overflow-wrap:anywhere}
.terminal-history p {margin:0 0 12px;white-space:pre-wrap}
.terminal-history .line-user{color:#fff}
.terminal-history .line-response{color:#b6b6b6}
.terminal-history .line-error{color:#ff8995}
.terminal-input-row{display:flex;align-items:center;gap:10px;margin:0 23px 12px;border-top:1px dashed #555;padding-top:15px;color:#ddd;font-size:12px}
.terminal-input-row label {white-space:nowrap}
.terminal-input-row input {width:100%;min-width:0;flex:1;outline:none;color:#fff;background:transparent;border:0;font:inherit;caret-color:#fff}
.terminal-input-row button {border:1px solid #777;background:transparent;color:#eee;padding:4px 7px;cursor:pointer}
.terminal-help {font-size:10px;color:#888;padding:0 24px 17px}

.task-stats {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 25px}
.task-stats>div {border:1px solid #555;padding:11px 9px;display:flex;flex-direction:column;gap:4px}
.task-stats small {font-size:10px;color:#aaa}
.task-stats strong {font-size:clamp(15px,3vw,22px)}
.task-item {display:grid;grid-template-columns:1fr 45px;align-items:center;gap:10px;padding:15px 0;border-top:1px dashed #555}
.task-item b {font-size:12px}.task-item small {display:block;color:#888;font-size:10px;margin-top:4px}
.task-item>span {text-align:right}
.task-meter {height:11px;border:1px solid #777;padding:1px}
.task-meter span {display:block;background:repeating-linear-gradient(90deg,#efefef 0 8px,#777 8px 10px);height:100%;width:var(--load);transition:width .8s steps(12)}
.task-item button {justify-self:end;border:1px solid #777;color:#ddd;background:#111;font-size:10px;padding:5px 10px;cursor:pointer}
.task-item.is-ended {opacity:.47}.task-item.is-ended .task-meter span{width:0}
.task-item.is-ended button {pointer-events:none}
.easter-message {font-size:20px;color:#ddd;font-style:italic}

.shutdown-screen {display:grid;place-items:center;z-index:140;isolation:isolate;text-align:center;padding:20px}
.shutdown-shutter{position:absolute;inset:0;background:#eee;opacity:0;pointer-events:none}
.shutdown-screen.is-entering .shutdown-shutter {animation:crt-collapse .8s ease-out both}
@keyframes crt-collapse {0%{opacity:.85;transform:scaleY(1)}50%{opacity:1;transform:scaleY(.016)}75%{opacity:.6;transform:scaleY(.004) scaleX(.5)}100%{opacity:0;transform:scale(0)}}
.shutdown-line {position:absolute;top:50%;left:50%;width:0;height:2px;opacity:0;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 30px #fff;pointer-events:none}
.shutdown-screen.is-entering .shutdown-line {animation:power-line .85s ease-out both}
@keyframes power-line{0%,25%{opacity:0;width:100%}40%{opacity:1;width:100%}90%{opacity:1;width:0}100%{opacity:0;width:0}}
.shutdown-content {z-index:1;opacity:0;transform:translateY(12px)}
.shutdown-screen.is-finished .shutdown-content {animation:shutdown-reveal .6s forwards}
@keyframes shutdown-reveal {to{opacity:1;transform:translateY(0)}}
.shutdown-content>span {font-size:11px;color:#999;letter-spacing:.2em}
.shutdown-content h2 {font:900 clamp(28px,7vw,72px)/1.1 Impact,'Arial Black',sans-serif;letter-spacing:.02em;margin:22px 0}
.shutdown-content p{font-size:clamp(12px,2vw,17px);color:#ccc}
.shutdown-content button {color:#fff;background:transparent;border:1px solid #ddd;padding:15px 22px;font:inherit;font-size:13px;margin-top:28px;cursor:pointer}
.shutdown-content button:hover {background:#fff;color:#000}
@media(max-width:600px) {
  .terminal-overlay {padding:9px}
  .terminal-shell {min-height:420px;max-height:95svh}
  .terminal-history {padding:16px 12px;font-size:12px}
  .terminal-input-row {margin:0 11px 13px;font-size:10px;gap:5px}
  .terminal-help {padding:0 12px 13px;font-size:9px}
  .task-item {grid-template-columns:1fr auto}
  .task-item button {font-size:9px}
  .boot-console {padding:20px 16px}
}
@media(prefers-reduced-motion:reduce) {
  .photo-ghost,.boot-screen,.shutdown-screen,.shutdown-line,.shutdown-content,.boot-log p,.task-meter span,.directory-progress span {animation:none!important;transition:none!important}
}

.glitch-row,.window-bar,.footer,.terminal-output,.terminal-choices,.modal-body { -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; }
@media (min-resolution:2dppx) { .photo-wrap > img:first-child { image-rendering:auto; } }