:root{font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#eee8da;background:#101722;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button{color:#e8e5dc;background:#26313d;border:1px solid #46505b;border-radius:6px;padding:10px 12px;font-size:12px}button:hover{background:#394653;border-color:#b5bcb6}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #f7ad75;outline-offset:3px}main{max-width:1800px;margin:auto;padding:24px 36px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3b424a;padding-bottom:20px}.brand{font-family:Georgia,serif;font-size:30px;font-style:italic;color:#f6b47d}.brand span{font-family:system-ui;font-style:normal;font-size:10px;letter-spacing:.19em;margin-left:18px;color:#bcc6ca}nav{display:flex;gap:8px}.intro{display:flex;justify-content:space-between;align-items:center;padding:28px 0 32px}.eyebrow{font-size:10px;letter-spacing:.22em;color:#b5bfbf}h1{font-family:Georgia,serif;font-size:clamp(40px,4vw,72px);font-weight:400;line-height:1.04;margin:12px 0 0;letter-spacing:-.035em}h1 em{color:#f0b47d;font-weight:400}.intro p{font-family:Georgia,serif;font-size:24px;line-height:1.4;margin-right:8%}small{display:block;font-family:system-ui;font-size:10px;color:#aab5b9;line-height:1.6}.intro small{margin-top:12px}.work{display:grid;grid-template-columns:minmax(220px,270px) minmax(320px,1fr) minmax(220px,270px);gap:26px}.sectiontitle{font-size:10px;letter-spacing:.15em;color:#b3c0c3;margin:0 0 18px}label{display:block;font-size:11px;color:#b8c3c7;margin:10px 0}input:not([type=range]),select{display:block;background:#1c2734;color:#ede8dc;border:1px solid #43505b;border-radius:5px;padding:8px;width:100%;margin-top:5px;font-size:12px}input[type=color]{min-height:36px;padding:3px}input[type=range]{width:100%;accent-color:#efa570}select{margin-bottom:16px}input[type=number]{min-width:50px}.source{border:10px solid #eee2ce;background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0/16px 16px;margin:18px 0}.source canvas{display:block;width:100%;aspect-ratio:1;image-rendering:pixelated;touch-action:manipulation}.row{display:flex;gap:10px;align-items:center;justify-content:space-between}.row label{flex:1;min-width:0}.row span{font-size:10px;color:#a6b5bc}.stage{background:#18222f;border:1px solid #34414d;border-radius:12px;padding:18px;align-self:start;overflow:hidden}.stagebar{display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:.12em;color:#aebdc5}.stagebar b{color:#f4b784;font-weight:400}.scene{position:relative;width:100%;aspect-ratio:1;margin:16px 0;background:#151e2a;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}.scene canvas{display:block;max-width:100%}.webgl{padding:30px;color:#ffba9e;font-size:14px}.proof{display:flex;align-items:center;gap:18px;border-top:1px solid #3b4855;padding-top:16px}.proof b{font:24px Georgia,serif;color:#a9cfb3}.proof span{font-size:10px;color:#a9b8c0;line-height:1.5}.orbit{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:14px 0}.orbit output{float:right}.accent{background:#edb17c;color:#202a32;border-color:#edb17c}.stage>small{margin-top:16px}.hint{font-size:12px;line-height:1.6;color:#aab8c0;margin-bottom:20px}.region{border-left:2px solid #394957;padding:8px 10px;margin-bottom:10px;background:#18232e}.region.selected{border-left-color:#f0b57f;background:#233240}.regionname{border:0;background:none;padding:0;display:flex;align-items:center;text-align:left;width:100%;font-size:11px;gap:8px}.regionname i{width:9px;height:9px;border-radius:50%;flex:none}.regionname span{margin-left:auto;font-size:9px;color:#b7c2c8}.region label{display:flex;align-items:center;gap:10px;margin:8px 0}.region input[type=number]{width:66px;margin-left:auto;padding:5px}.region input[type=range]{height:6px;margin:0}.exports{display:grid;grid-template-columns:1fr 1fr;gap:8px}.exporttitle{margin-top:28px}.exports button{padding:9px 6px;font-size:10px}footer{margin-top:28px;padding:18px 0;border-top:1px solid #38434e;font-size:12px;color:#aabbc1}footer>p{color:#e8c299}summary{cursor:pointer}details p{max-width:1000px;line-height:1.7}.warning{color:#ffb799}@media(max-width:1100px){main{padding:20px}.work{grid-template-columns:210px 1fr}.work>aside:last-child{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.work>aside:last-child>.sectiontitle,.work>aside:last-child>.hint,.exports{grid-column:1/-1}.region{margin:0}.intro p{margin:0;font-size:20px}}@media(max-width:650px){main{padding:14px}.brand span{display:none}nav{gap:4px}nav button{font-size:10px;padding:7px}.intro{align-items:start;gap:15px}.intro p{font-size:15px;margin-top:30px}.work{display:flex;flex-direction:column}.work>aside:first-child{order:1}.stage{order:0}.work>aside:last-child{order:2;display:block}.source{max-width:320px;margin:15px auto}.region{margin:10px 0}.exports{display:grid}h1{font-size:45px}.stage{padding:12px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}.regionname,.intro h1{white-space:pre-wrap}
