:root{color-scheme:dark;--gold:#dfc485;--muted:#9baeb0;--edge:#34474a}*{box-sizing:border-box}body{margin:0;background:#0b151a;color:#e6e9df;font:16px/1.7 system-ui,sans-serif}a{color:var(--gold);text-underline-offset:4px}header{padding:22px max(24px,4vw);border-bottom:1px solid var(--edge);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#0b151a}.brand{font-size:14px;letter-spacing:.15em;text-decoration:none;font-weight:700}.brand small{color:#9ccdb6;padding-left:10px}nav{display:flex;flex-wrap:wrap;gap:20px;font-size:14px}main{max-width:1440px;margin:auto;padding:0 4vw 50px}.intro{padding:65px 0 35px;max-width:950px}.eyebrow{color:#a5c6bc;font-size:12px;letter-spacing:.16em;text-transform:uppercase}h1{font:clamp(38px,5vw,70px)/1.1 Georgia,serif;font-weight:400;margin:20px 0}h2{font:28px/1.3 Georgia,serif;font-weight:400}h3{font:22px/1.3 Georgia,serif}.subtitle{font-size:22px;color:#c5d2cc}p{max-width:78ch}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px;margin:10px 0 50px}.stage{min-width:0}#viewport{height:570px;position:relative;background:radial-gradient(ellipse at center,#233c40,#101d22);overflow:hidden;border:1px solid var(--edge);border-radius:8px}#viewport canvas{display:block;touch-action:none}.start{display:grid;place-content:center;text-align:center;height:100%;padding:24px}.seal{font-size:60px;color:var(--gold)}button,select,input{font:inherit}button,select{background:#1a3032;color:#e6e9df;border:1px solid #56706c;border-radius:5px;min-height:44px;padding:9px 15px;cursor:pointer}button:hover,button[aria-pressed=true]{background:#345047;border-color:#d8bd7e}button:disabled{opacity:.4;cursor:default}:focus-visible{outline:3px solid #f0d083;outline-offset:4px}.tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px}.tools label{display:flex;align-items:center;gap:8px;min-height:44px}.tools input[type=range]{width:120px}.hint,.muted{color:var(--muted);font-size:14px}#status{font-size:13px;color:#abc5ba;min-height:25px}.parts{display:grid;gap:8px;margin:24px 0}.parts button{text-align:left}aside{padding:22px;background:#142328;border:1px solid var(--edge);border-radius:8px;align-self:start}aside h2{margin-top:10px}.record{border-top:1px solid var(--edge);padding:26px 0 35px}.record article{border-bottom:1px solid var(--edge);padding:10px 0 20px}.record code{overflow-wrap:anywhere;font-size:12px}details{margin-top:20px}summary{cursor:pointer;color:var(--gold);min-height:44px}select{max-width:100%;width:100%}#filter{max-width:260px;margin:10px 0}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:15px 0 55px}.card{min-height:250px;border:1px solid var(--edge);padding:28px;border-radius:8px;background:linear-gradient(135deg,#1e3336,#122125)}.card h2 a{text-decoration:none;color:#e6e9df}.card .enter{display:inline-block;margin-top:12px}.card[hidden]{display:none}.label{position:absolute;transform:translate(-50%,-50%);font-size:11px;min-height:30px;padding:3px 7px;white-space:nowrap;background:#0c2529e8;border-color:#b59c62;max-width:180px;overflow:hidden;text-overflow:ellipsis}.label[hidden]{display:none}footer{padding:35px 4vw;border-top:1px solid var(--edge);font-size:13px;color:var(--muted)}@media(max-width:1000px){.workbench{grid-template-columns:minmax(0,1fr) 290px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}#viewport{height:480px}header{align-items:flex-start;flex-direction:column}}@media(max-width:700px){main{padding:0 20px 30px}.intro{padding:35px 0 25px}.workbench{display:flex;flex-direction:column;gap:20px}aside{width:100%}#viewport{height:400px}.cards{grid-template-columns:1fr}.subtitle{font-size:19px}header{padding:20px}nav{gap:12px;font-size:13px}.tools button{flex:1;font-size:13px}.label{max-width:135px;font-size:10px}.record{padding:20px 0}h2{font-size:26px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-25px 0 40px;padding:15px 0;color:#a9bbb5;font-size:14px}.pagination span{text-align:center}@media(max-width:700px){.pagination{font-size:12px}.pagination button{padding:8px}}

pre{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;font-size:.8rem;max-width:100%}code{overflow-wrap:anywhere}select{max-width:100%} .record{min-width:0}

body{overflow-wrap:anywhere}

@media(max-width:650px){.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.tools button{width:100%;min-height:44px;line-height:1.4;overflow-wrap:normal}.tools label{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}}
