:root{color-scheme:dark;font:15px system-ui;background:#101318;color:#e5e8ec}*{box-sizing:border-box}body{margin:0}header{padding:20px 26px;border-bottom:1px solid #39424c}h1{margin:10px 0;font-size:26px}a{color:#f2bd70}p{line-height:1.5}header p{margin:0;color:#aab3c0}main{display:grid;grid-template-columns:310px minmax(0,1fr);gap:20px;padding:20px}.controls{background:#1b2028;padding:18px;border-radius:8px}.controls>label{display:block;margin-bottom:16px}select{width:100%;margin-top:6px}button,select{font:inherit;padding:9px;background:#2a323e;color:#f3eee6;border:1px solid #647181;border-radius:4px}button{cursor:pointer}input[type=range]{width:100%;margin-top:8px;accent-color:#e4af66}.check{display:flex!important;align-items:center;gap:9px}.check input{width:18px;height:18px;accent-color:#e4af66}.buttons{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:12px 0}.buttons .check{margin:0}output{float:right;color:#c8d1dc}.viewport{min-width:0}canvas{width:100%;height:auto;display:block;background:#151c24;border:1px solid #3c4959;border-radius:8px;touch-action:none}#status{min-height:25px;margin-top:0}.viewport>p:last-child,#geometry,#details{font-size:13px;color:#b6c1ce}.amber{color:#ffc16e}.cyan{color:#6cecff}.green{color:#97ed9c}@media(max-width:800px){main{grid-template-columns:1fr}.viewport{grid-row:1}header{padding:16px}main{padding:12px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.controls>label{margin:0}.controls p,.buttons{grid-column:1/-1}}@media(max-width:450px){.controls{grid-template-columns:1fr}}
fieldset{min-width:0;border:1px solid #465564;border-radius:6px;margin:12px 0;padding:12px}fieldset label{display:block;margin:10px 0}fieldset button{font-size:13px}.controls{align-self:start;max-height:calc(100vh - 175px);overflow:auto}.viewport{position:sticky;top:16px;align-self:start}@media(max-width:800px){.controls{max-height:none;overflow:visible}.viewport{position:static}fieldset{grid-column:1/-1}}