@font-face{font-family:"Gerstner Programm";src:url("fonts/Gerstner-ProgrammMedium.otf") format("opentype");font-style:normal;font-weight:500;font-display:swap}
*{box-sizing:border-box}body{margin:0;background:#fafaf8;color:#242424;font-family:Arial,Helvetica,sans-serif}header{height:86px;border-bottom:1px solid #deded9;display:flex;align-items:center;justify-content:space-between;padding:0 42px}header a{font-size:13px;letter-spacing:1.8px;font-weight:700;color:inherit;text-decoration:none}header a span{font-weight:400;color:#82827d;margin-left:12px}.edition{font-size:12px;color:#82827d}main{display:grid;grid-template-columns:minmax(0,1fr) 350px;min-height:calc(100vh - 86px)}.stage{padding:32px 42px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0}svg{width:100%;max-width:min(82vh,1000px);overflow:visible}#face{fill:#eee;stroke:#979795;stroke-width:6}#ticks{stroke:#979795;stroke-width:6}svg text{font-family:"Gerstner Programm",Arial,Helvetica,sans-serif;font-weight:500;font-size:80px;letter-spacing:-3px;fill:#0866ff}.stage-footer{width:100%;display:flex;justify-content:space-between;margin-top:14px;color:#92928b;font-size:11px;letter-spacing:.8px}#status{font-size:9px;letter-spacing:1.8px}aside{border-left:1px solid #deded9;padding:38px 28px;background:#fff}.eyebrow{font-size:9px;letter-spacing:1.8px;color:#81817b}h1{font-size:36px;font-weight:400;line-height:1.05;letter-spacing:-1.5px;margin:19px 0 14px}.intro p{font-size:12px;color:#85857f;line-height:1.6;margin:0 0 30px}.control-section{border-top:1px solid #e5e5e0;padding:20px 0}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}h2{font-size:12px;font-weight:600;margin:0}.section-title span{font-size:10px;color:#92928b}.word{width:100%;border:1px solid #deded9;background:#fafaf8;padding:12px;font-size:17px;outline:none;border-radius:2px;margin-bottom:12px}.word:focus{border-color:#0866ff}.color-row{display:flex;align-items:center;gap:7px;margin:8px 0}.color-row>label{font-size:11px;flex:1;color:#74746e}.swatch{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}.rgb{display:flex;gap:4px}.rgb label{position:relative}.rgb span{position:absolute;left:5px;top:9px;font-size:8px;color:#969690}.rgb input{width:45px;border:1px solid #e5e5e0;border-radius:2px;font-size:10px;padding:7px 2px 7px 14px;appearance:textfield}.rgb input::-webkit-inner-spin-button{appearance:none}.transport{display:flex;gap:8px;margin-top:6px}button{cursor:pointer;font-family:inherit;border-radius:2px}#play{background:#242424;border:1px solid #242424;color:white;flex:1;padding:14px;font-size:12px}#playIcon{margin-right:8px;font-size:10px}#reset{border:1px solid #deded9;background:white;width:46px;font-size:22px}button:hover{filter:brightness(.9)}button:focus-visible,input:focus-visible{outline:2px solid #0866ff;outline-offset:3px}.note{font-size:10px;line-height:1.7;color:#92928b;margin-top:18px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(min-width:1500px){aside{padding:48px 32px}main{grid-template-columns:minmax(0,1fr) 390px}}@media(max-width:800px){header{padding:0 22px;height:65px}.edition{display:none}main{grid-template-columns:1fr}.stage{padding:20px}.stage svg{max-width:620px}aside{border-left:0;border-top:1px solid #deded9;padding:28px}.intro h1 br{display:none}.intro p br{display:none}.intro p{margin-bottom:22px}}

.tracking-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:11px;color:#74746e}.tracking-row label span{color:#92928b}.tracking-row input{width:65px;padding:7px;border:1px solid #deded9;font:12px Arial;background:#fafaf8;border-radius:2px}.timeline input{width:100%;margin:8px 0;accent-color:#0866ff;cursor:ew-resize}.timeline output{font-size:11px;font-variant-numeric:tabular-nums;color:#74746e}.timeline-scale{display:flex;justify-content:space-between;font-size:9px;color:#92928b}.timeline p{font-size:10px;color:#92928b;margin:12px 0 0}

.exports{margin-top:24px}.export-buttons{display:grid;gap:8px}.exports button{padding:12px;background:#fff;border:1px solid #deded9;text-align:left;font-size:12px}.exports p{font-size:10px;line-height:1.6;color:#82827d}.exports button:disabled{opacity:.45;cursor:wait}#exportStatus{color:#242424}#cancelExport{font-size:11px}

.size-control{margin-top:14px;font-size:11px;color:#74746e}.size-control label span{color:#92928b}.size-inputs{display:flex;gap:12px;align-items:center;margin-top:8px}.size-inputs input[type=range]{min-width:0;flex:1;accent-color:#0866ff}.size-inputs input[type=number]{width:65px;padding:7px;border:1px solid #deded9;font:12px Arial;background:#fafaf8;border-radius:2px}

#clock{isolation:isolate}.blend-control{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:11px;color:#74746e}.blend-control select{width:150px;padding:8px;border:1px solid #deded9;border-radius:2px;background:#fafaf8;color:#242424;font:12px Arial}.blend-control select:focus-visible{outline:2px solid #0866ff;outline-offset:3px}

.alpha-control{margin-top:14px;font-size:11px;color:#74746e}.alpha-control>div{display:flex;justify-content:space-between}.alpha-control input{width:100%;accent-color:#0866ff;margin:10px 0 6px}.alpha-control output{font-variant-numeric:tabular-nums}.alpha-scale{font-size:9px;color:#92928b}

.intro h1{font-size:28px;line-height:1.15;letter-spacing:-.8px;margin:0 0 30px}

main{min-height:100vh}.stage{position:sticky;top:0;height:100vh} @media(max-width:800px){.stage{position:relative;height:auto}}

.hex-input{width:105px;padding:8px;border:1px solid #e5e5e0;border-radius:2px;background:#fafaf8;font:12px monospace;text-transform:uppercase}.hex-input:invalid{border-color:#c64646}