@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Fraunces:opsz,wght@9..144,600;9..144,800&display=swap');
:root { --ink:#17231f; --paper:#e6ddc5; --acid:#c6ee61; --rust:#cc5a37; --mist:#7db4a2; --line:rgba(23,35,31,.28); }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); font:14px/1.55 "DM Mono", monospace; background:radial-gradient(circle at 18% 8%,#375b51 0 2%,transparent 23%),linear-gradient(145deg,#152c29,#101715 70%); padding:30px 16px; }
.machine-shell { max-width:850px; margin:auto; background:var(--paper); min-height:calc(100vh - 60px); padding:clamp(24px,5vw,58px); box-shadow:12px 14px 0 #0b1210,0 0 0 1px #799084; position:relative; overflow:hidden; }
.machine-shell:after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.28; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(38,40,27,.09) 4px); mix-blend-mode:multiply; } header,section,footer { position:relative; z-index:1; } .eyebrow { color:#52655d; font-size:11px; letter-spacing:.12em; margin:0; } h1 { font:800 clamp(50px,11vw,94px)/.85 Fraunces,serif; letter-spacing:-.07em; margin:12px 0 18px; } .subtitle { max-width:610px; font-size:16px; margin-bottom:36px; }
.dashboard { display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--ink); border-bottom:1px solid var(--ink); margin-bottom:32px; } .dashboard div { padding:12px 8px 13px 0; border-right:1px solid var(--line); } .dashboard div+div { padding-left:14px; } .dashboard div:last-child { border:0; } .dashboard span { display:block; font-size:10px; color:#627169; } .dashboard strong { font-size:21px; }
.shift-label { color:#607b6d; letter-spacing:.12em; font-size:11px; } h2 { font:600 clamp(29px,5vw,44px)/1 Fraunces,serif; margin:8px 0 14px; max-width:650px; } .brief { font-size:16px; max-width:670px; } .memory-board { border:1px dashed #74867c; padding:13px 16px; margin:25px 0; background:#dbd3bc; } .memory-board b { font-size:11px; letter-spacing:.08em; } .memory-board ul { padding:0; margin:8px 0 0; list-style:none; } .memory-board li:before { content:'↳ '; color:var(--rust); } .memory-board .empty { color:#6a756d; }
.actions { display:grid; gap:10px; margin-top:22px; } .action { text-align:left; border:1px solid var(--ink); background:transparent; padding:16px 18px; color:var(--ink); cursor:pointer; font:inherit; transition:.15s; } .action:hover,.action:focus { background:var(--acid); transform:translate(4px,-3px); box-shadow:-4px 3px 0 var(--ink); outline:none; } .action strong { display:block; font:600 21px/1.1 Fraunces,serif; } .action small { color:#4f6158; } .result { border-left:5px solid var(--rust); padding:14px 17px; background:#f5ebd1; margin-top:24px; } .continue { background:var(--ink); color:var(--paper); border:0; padding:12px 18px; cursor:pointer; font:inherit; margin-top:14px; } .continue:hover { background:#34584d; } .lost { color:var(--rust); font-weight:bold; } .ending { border:3px solid var(--ink); padding:24px; background:var(--acid); } .ending.failure { background:#e9aa8c; } .ending p { max-width:590px; font-size:16px; } footer { display:flex; justify-content:space-between; gap:10px; border-top:1px solid var(--line); margin-top:42px; padding-top:16px; color:#52655d; font-size:11px; } #reset { border:0; border-bottom:1px solid; background:none; font:inherit; cursor:pointer; color:var(--ink); }
@media (max-width:500px) { body { padding:12px; } .machine-shell { min-height:calc(100vh - 24px); padding:26px 21px; } .dashboard strong { font-size:16px; } footer span:last-child { display:none; } }