@font-face {
  font-family: "Barlow Condensed";
  src: url("assets/barlow-condensed-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --page: #eae2db;
  --page-text: #261d1b;
  --page-muted: #5f4c47;
  --page-link: #a52a37;
  --panel: #fff9f4;
  --input: #fffdfb;
  --text: #2b211f;
  --muted: #68544e;
  --stroke: #9c7d73;
  --strong: #d6b5aa;
  --ink: #9a2734;
  --accent: #a52a37;
  --button: #a52a37;
  --button-text: #fff7f5;
  --badge: #f6d5cf;
  --badge-text: #721e2b;
  --scene: #fff6ef;
  --scene-ink: #281f1d;
  --light: #f76972;
  --line-art: #a15b5f;
  --grid: #8c3b3725;
  --error: #8a1728;
  --sans: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", var(--sans);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{min-height:100vh;margin:0;background:var(--page);color:var(--page-text);font-family:var(--sans);line-height:1.5}
a{color:inherit;text-underline-offset:.21em}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button[hidden],[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--page-link);outline-offset:4px}
.machine :focus-visible{outline-color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;z-index:10;inset:12px auto auto 12px;transform:translateY(-160%);background:var(--panel);color:var(--text);padding:8px 16px}
.skip:focus{transform:none}
.wrap,.top-inner{max-width:1140px;width:calc(100% - 64px);margin-inline:auto}
.topbar{background:#fffaf6;border-bottom:1px solid #d5c4ba}
.top-inner{height:67px;display:flex;align-items:center;justify-content:space-between;gap:15px}
.wordmark{display:inline-flex;align-items:center;gap:0;color:var(--page-text);text-decoration:none;font-size:25px;font-weight:850;letter-spacing:-.07em;line-height:1;white-space:nowrap}
.wordmark img{width:36px;height:36px;margin-right:9px}
.wordmark span{color:var(--page-link)}
.powered{font-size:12px;color:var(--page-muted);text-decoration:none;white-space:nowrap}
.powered strong{font-size:18px;color:var(--page-text);font-weight:850;letter-spacing:-.055em;margin-left:2px}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(44px,7.25vw,98px);letter-spacing:-.09em;line-height:.98;margin-bottom:15px;font-weight:880}
h1 em{font-style:normal;color:var(--ink)}
.machine{--radius:13px;position:relative;isolation:isolate;aspect-ratio: 2.42;min-height:345px;color-scheme:light;border:1px solid #d1aba0;border-radius:var(--radius);background:var(--scene);overflow:hidden;color:var(--scene-ink);box-shadow:0 18px 38px #69363219}
.frame-grid,.frame-halo,.frame-circle{position:absolute;inset:0;pointer-events:none}
.frame-grid{background-image:radial-gradient(circle,var(--grid) 1px,transparent 1px);background-size:24px 24px;background-position:center center;mask-image:radial-gradient(ellipse,#000 30%,#0003 88%)}
.frame-halo{background:radial-gradient(ellipse at 51% 57%,#efb9af 0%,#f5d7cb 28%,transparent 66%),var(--scene);z-index:-1}
.frame-circle{inset:54% auto auto 50%;height:72%;aspect-ratio:1;border:1px solid #a52a3752;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 18px #ae394112,0 0 64px #c9524f24,inset 0 0 54px #b53c421a}
.art-wrap{position:absolute;top:50%;left:50%;width:min(100%,880px);aspect-ratio:920/470;transform:translate(-50%,-53%);pointer-events:none}
.pc-art{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(2px 13px 10px #46262b45)}
.piece{transform:translate(var(--dx,0px),var(--dy,0px)) scale(var(--size,1));transform-box:fill-box;transform-origin:center;transition:transform .67s cubic-bezier(.18,.76,.19,1),opacity .52s ease}
.guides{opacity:0;transition:opacity .45s ease}
.machine[data-open="true"] .guides{opacity:.78}
.machine[data-open="true"] .piece-case{--dx:0px;--dy:0px;--size:.77;opacity:.73}
.machine[data-open="true"] .piece-board{--dx:190px;--dy:-85px;--size:1.02}
.machine[data-open="true"] .piece-cpu{--dx:-260px;--dy:-150px;--size:1.57}
.machine[data-open="true"] .piece-ram{--dx:77px;--dy:-145px;--size:1.42}
.machine[data-open="true"] .piece-ssd{--dx:250px;--dy:-9px;--size:1.44}
.machine[data-open="true"] .piece-psu{--dx:241px;--dy:-4px;--size:1.23}
.machine[data-open="true"] .piece-gpu{--dx:-278px;--dy:-112px;--size:1.28}
.machine[data-open="true"] .piece-front{--dx:-102px;--dy:66px;--size:.52;opacity:.85}
.machine[data-open="true"] .piece-glass{--dx:115px;--dy:9px;--size:.52;opacity:.22}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--button);color:var(--button-text);border:1px solid transparent;border-radius:5px;padding:11px 18px;min-height:46px;font-weight:800;font-size:14px;text-decoration:none;white-space:normal}
.button:hover{filter:brightness(.91)}
.button span[aria-hidden]{font:700 19px/1 var(--sans)}
h2{font-size:clamp(29px,4.4vw,49px);line-height:1.06;letter-spacing:-.068em;margin-bottom:8px;font-weight:850}
label{display:block;font-size:13px;font-weight:750;margin:0 0 5px}
label span{font-weight:500;color:var(--muted)}
input:not([type="checkbox"]),select,textarea{width:100%;border:1px solid var(--stroke);background:var(--input);color:var(--text);border-radius:5px;padding:10px 12px;min-height:46px;font-size:16px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.82}
textarea{resize:vertical;display:block}
input:disabled{opacity:.65}
.form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.text-button{padding:8px 4px;min-height:44px;border:0;background:none;color:var(--ink);font-weight:750;text-decoration:underline;text-underline-offset:3px}
.field-message{font-weight:750;font-size:13px;color:var(--error);margin:9px 0}
.last p{color:var(--page-muted)}
.micro{color:var(--muted);font-size:12px;margin:12px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:13px}
.form-actions p{margin:0}
.last a{display:inline-block;color:var(--page-link);margin-top:9px;font-weight:750;font-size:14px}
@media(max-width:850px){
.machine{aspect-ratio:2.12}
.art-wrap{width:min(100%,760px)}
}
@media(max-width:650px){
.wrap,.top-inner{width:calc(100% - 32px)}
.top-inner{height:56px}
.wordmark{font-size:21px}.wordmark img{width:30px;height:30px;margin-right:7px}
.powered{font-size:10px}.powered strong{font-size:15px}
.machine{height:auto;min-height:0;aspect-ratio:1.2}
.art-wrap{width:min(135%,700px);transform:translate(-50%,-56%)}
.form-grid{grid-template-columns:1fr;gap:10px}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}.piece,.guides{transition:none}
}
@media(min-width:851px){
.machine{aspect-ratio:2.8}
.art-wrap{width:min(96%,774px)}
}
.machine{scroll-margin-top:12px}
.machine-trigger{position:absolute;z-index:3;left:50%;bottom:21px;width:min(72%,330px);height:83%;transform:translateX(-50%);display:flex;align-items:flex-end;justify-content:center;padding:0;background:none;border:0;border-radius:12px;color:inherit}
.machine-trigger .button{box-shadow:0 3px 12px #0e122329;white-space:nowrap}
.machine-trigger:hover .button,.machine-trigger:focus-visible .button{filter:brightness(.91)}
.machine[data-open="true"]{aspect-ratio:auto;min-height:0}
.machine[data-open="true"] .art-wrap{top:56%;width:min(66%,745px);transform:translate(-50%,-50%)}
.piece-cooling{opacity:0}
.machine[data-open="true"] .piece-cooling{opacity:1;--dx:-301px;--dy:68px;--size:1.25}
.exploded{position:relative;z-index:2;padding:clamp(16px,2.2vw,25px);text-align:left}
.components-help{color:var(--scene-ink);font-size:14px;margin:6px 0 17px;max-width:50ch}
.collapse{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-height:40px;padding:5px 9px;border:1px solid var(--stroke);background:var(--panel);color:var(--text);border-radius:5px;font:700 11px/1.2 var(--mono)}
.collapse span{font:700 16px/1 var(--sans)}
.collapse:hover{background:#f4ddd4}
.component-grid{display:grid;grid-template-columns:minmax(160px,25%) minmax(0,1fr) minmax(160px,25%);gap:10px 0}
.component{position:relative;min-width:0;background:var(--panel);color:var(--text);border:1px solid var(--strong);border-radius:7px;padding:8px 10px 9px;box-shadow:0 5px 15px #68352b19}
.component:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.component:nth-child(odd){grid-column:1}
.component:nth-child(even){grid-column:3}
.component label{display:flex;align-items:center;gap:8px;width:fit-content;cursor:text;margin:0 0 4px;font-size:14px;line-height:1.15}
.component label span{font-weight:800;color:inherit}
.part-illustration{flex:none;width:36px;height:24px;overflow:visible}
.component input{padding:7px 8px;min-height:39px;background:var(--input)}
.component input:focus-visible{outline-offset:1px}
.notice{margin:20px 0 0}
@media(min-width:741px){
  .component::after{content:"";position:absolute;top:50%;width:clamp(13px,3.2vw,39px);border-top:1px dashed var(--line-art);opacity:.76;pointer-events:none}
  .component:nth-child(odd)::after{left:100%}
  .component:nth-child(even)::after{right:100%}
  .component:nth-child(3),.component:nth-child(4){grid-row:2}
  .component:nth-child(5),.component:nth-child(6){grid-row:3}
  .component:nth-child(7),.component:nth-child(8){grid-row:4}
}
@media(max-width:740px){
  .machine[data-open="true"] .art-wrap{top:94px;width:min(100%,530px);transform:translateX(-50%)}
  .component-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:clamp(153px,41vw,230px)}
  .component:nth-child(n){grid-column:auto}
}
@media(max-width:650px){
  .art-wrap{width:min(112%,700px);transform:translate(-50%,-62%)}
  .machine-trigger{bottom:10px}
  .component label{font-size:13px}
  .component input{min-height:44px}
}
@media(max-width:480px){
  .machine[data-open="true"] .art-wrap{top:111px;width:108%}
  .component-grid{grid-template-columns:1fr;margin-top:clamp(144px,42vw,205px)}
  .component{padding:7px 9px 9px}
  .components-help{font-size:12px}
  .collapse{min-height:44px}
}
@media(max-width:480px){
  .machine[data-open="true"] .art-wrap{top:132px}
  .component-grid{margin-top:clamp(170px,54vw,245px)}
}
@media(min-width:741px) and (max-width:940px){
  .component label{font-size:12px;gap:6px}
  .part-illustration{width:28px}
  .component input{font-size:14px}
}
.component .component-title{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:14px;font-weight:800;line-height:1.15}
.drive-fields{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 7px}
.drive-fields label{margin:0}
.drive-fields input{min-width:0}
.fault-details{margin-bottom:13px}
@media(min-width:741px) and (max-width:940px){.component .component-title{font-size:12px;gap:6px}}
.scene-effects{position:absolute;inset:0;overflow:hidden;border-radius:inherit;isolation:isolate;pointer-events:none}
.machine[data-open="true"]{overflow:visible}
.machine:focus-within,.component:focus-within{z-index:4}
.typeahead{position:relative;min-width:0;align-self:stretch}
.suggestions{position:absolute;z-index:5;inset-block-start:calc(100% + 3px);inset-inline-start:0;width:min(max(100%, 240px), calc(100vw - 58px));max-width:340px;color:var(--text);background:var(--panel);border:1px solid var(--strong);border-radius:5px;box-shadow:0 6px 18px #52312b29}
.typeahead.opens-up .suggestions{inset-block-start:auto;inset-block-end:calc(100% + 3px)}
.suggestion-options{max-height:13rem;overflow:auto;overscroll-behavior:contain}
.suggestion-options [role="option"]{padding:9px 11px;font-size:13px;line-height:1.28;cursor:pointer;overflow-wrap:anywhere}
.suggestion-options [role="option"] + [role="option"]{border-top:1px solid var(--stroke)}
.suggestion-options [role="option"]:hover,.suggestion-options [aria-selected="true"]{background:var(--badge);color:var(--badge-text)}
.suggestion-message{padding:9px 11px;font-size:12px;color:var(--muted)}
@media(min-width:741px){.component:nth-child(even) .suggestions{inset-inline-start:auto;inset-inline-end:0}}
@media(min-width:481px) and (max-width:740px){.component:nth-child(even) .suggestions{inset-inline-start:auto;inset-inline-end:0}}
@media(max-width:650px){.suggestion-options [role="option"]{min-height:44px;display:flex;align-items:center}}
@media(max-width:480px){.drive-fields .suggestions{inset-inline-start:auto;inset-inline-end:0}}
.sell{margin-top:22px}
.machine{width:100%;min-width:0;min-height:490px;aspect-ratio:2.33}
.sale-title {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 23px clamp(18px,6vw,105px) 11px;
  color: var(--scene-ink);
  font: 800 clamp(44px, 8.3vw, 96px)/.92 var(--display);
  letter-spacing: -.025em;
  text-align: center;
}
.sale-title em {
  display: inline-block;
  color: var(--accent);
  white-space: nowrap;
}
.machine[data-open="true"] .sale-title{font-size:clamp(32px,5.5vw,66px)}
.machine[data-step="closed"] .art-wrap{top:55%;width:min(96%,830px)}
.machine[data-step="closed"] .machine-trigger{height:70%}
.machine-trigger .button,.spec-actions .button{box-shadow:0 5px 0 #691822,0 10px 20px #5e27263a}
.machine[data-step="specs"] .collapse{position:absolute;z-index:3;top:18px;right:18px}
.machine[data-step="specs"] .art-wrap{top:48%}
.machine[data-step="specs"] .frame-circle{height:56%;top:49%}
.exploded{padding-top:0}
.components-help{max-width:62ch;margin:0 auto 15px;text-align:center}
.components-help:focus,.contact-step h2:focus{outline:none}
.spec-actions{margin-top:20px;text-align:center}
.spec-error{max-width:620px;margin:10px auto 0;color:var(--error)}
.component.is-missing{border-color:var(--error);box-shadow:0 0 0 1px var(--error)}
.part-choices{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.part-choices button{display:inline-flex;align-items:center;min-height:29px;padding:3px 7px;border:1px solid var(--stroke);border-radius:4px;background:var(--input);color:var(--text);font-size:11px;font-weight:700;line-height:1.2}
.part-choices button:hover{border-color:var(--ink)}
.part-choices button[aria-pressed="true"]{background:var(--badge);color:var(--badge-text);border-color:var(--ink)}
.button:disabled,.text-button:disabled{cursor:wait;opacity:.65}
.machine[data-step="contact"] .art-wrap,.machine[data-step="done"] .art-wrap{display:none}
.contact-step{position:relative;z-index:2;width:min(650px,calc(100% - 30px));margin:12px auto 24px;padding:clamp(16px,3vw,32px);background:var(--panel);color:var(--text);border:1px solid var(--strong);border-radius:7px;text-align:left}
.contact-step h2{font-size:clamp(25px,3.5vw,38px);margin-bottom:16px}
.contact-step .micro a{color:var(--ink)}
.contact-step .form-actions{gap:15px}
.last{display:block;padding:30px 0 38px}
.last h2{font-size:clamp(24px,3vw,33px)}
.last a{margin-top:0}
@media(max-width:740px){
  .machine[data-step="specs"] .frame-circle{height:245px;top:207px}
  .machine[data-step="specs"] .art-wrap{top:83px}
  .sale-title{padding-inline:18px}
  .machine[data-step="specs"] .sale-title{text-align:left;padding-right:106px}
  .machine[data-step="specs"] .collapse{top:15px;right:12px}
  .components-help{text-align:left}
}
@media(max-width:650px){
  .sell{margin-top:16px}
  .machine{min-height:360px;aspect-ratio:auto}
  .part-choices button{min-height:36px;padding-inline:9px}
}
@media(max-width:480px){
  .machine[data-step="specs"] .frame-circle{height:160px;top:205px}
  .machine[data-step="specs"] .art-wrap{top:126px}
  .sale-title{font-size:clamp(43px,11vw,55px)}
  .machine[data-open="true"] .sale-title{font-size:clamp(31px,8.8vw,41px)}
}


.scene-effects::after {
  position: absolute;
  right: 12%;
  bottom: 18%;
  left: 12%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg,transparent,#a52a375c,transparent);
}
.machine[data-open="true"] .scene-effects::after {
  display: none;
}
.machine-trigger:focus-visible,
.spec-actions .button:focus-visible,
.collapse:focus-visible {
  outline-color: var(--scene-ink);
}
.contact-step .button {
  background: var(--button);
  color: var(--button-text);
}
@media (prefers-reduced-motion: no-preference) {
  .machine[data-step="closed"] .pc-art { transition: transform .28s ease, filter .28s ease; }
  .machine[data-step="closed"]:has(.machine-trigger:is(:hover, :focus-visible)) .pc-art {
    transform: translateY(-5px);
    filter: drop-shadow(3px 18px 14px #46262b55);
  }
}
@media (max-width: 650px) {
  .machine[data-step="closed"] .art-wrap { width: min(112%,700px); top: 58%; }
}