:root{color-scheme:dark;font:15px/1.5 system-ui,sans-serif;color:#e6e4df;background:#101315}*{box-sizing:border-box}body{margin:0}main{display:grid;grid-template-columns:minmax(0,1fr) 340px;min-height:100vh}#viewport{position:relative;min-height:100vh;background:radial-gradient(ellipse at 50% 40%,#343b3e,#12171a 75%);overflow:hidden}canvas{display:block;width:100%;height:100%;position:absolute;inset:0;touch-action:none}.caption{position:absolute;top:34px;left:40px;pointer-events:none}.caption span{font-size:11px;letter-spacing:.2em;color:#c1af85}h1{font:42px Georgia,serif;margin:7px 0}h2{font:25px Georgia,serif;margin:28px 0 12px}.caption p{color:#a5acad;margin:0}aside{padding:28px;background:#161b1e;border-left:1px solid #343b3f;overflow:auto}a{color:#c9b88e;text-decoration:none}p{color:#acb6ba}.intro{margin-bottom:26px}label:not(.check){display:block;color:#d4dbdc;font-size:13px;margin:18px 0 7px}select,button{font:inherit;color:#e4e9ea;background:#242d32;border:1px solid #455158;border-radius:5px;padding:10px;width:100%}select{font-size:13px}button{cursor:pointer}button:hover{background:#35424a}.row{display:flex;gap:10px;margin-top:12px}input[type=range]{width:100%;accent-color:#c8b589}output{float:right;color:#96a1a6}.check{display:flex;gap:9px;margin-top:19px;font-size:13px}.check input{accent-color:#c8b589}dl{display:grid;grid-template-columns:1fr auto;font-size:12px;margin:30px 0;gap:8px}dt{color:#97a5aa}dd{margin:0;color:#dde5e7}details{border-top:1px solid #344047;padding-top:16px;font-size:12px}summary{cursor:pointer;color:#c9b88e}details p{line-height:1.7}code{font-size:12px;color:#d2c6a8}.foot{font-size:11px;margin-top:24px;color:#718086}#status{position:absolute;left:40px;bottom:62px;color:#c9b88e;font-size:13px;max-width:80%;background:#101719c9;padding:9px 14px;border-radius:5px}.hint{position:absolute;left:40px;bottom:28px;font-size:12px;color:#8d9da3}#status.error{color:#ffd1c5;background:#421d17}@media(max-width:760px){main{grid-template-columns:1fr}#viewport{min-height:65vh}.caption{top:20px;left:22px}h1{font-size:31px}aside{border-left:0;border-top:1px solid #343b3f;padding:24px}.hint,#status{left:22px}}

.catalog-bar{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:auto minmax(200px,1fr) auto 170px auto;align-items:center;gap:14px;padding:12px 24px;background:#161b1e;border-bottom:1px solid #343b3f}.catalog-bar label{margin:0!important}.catalog-bar span{font-size:12px;color:#aab7bd;text-align:right}main{min-height:calc(100vh -80px)}#viewport{min-height:calc(100vh -80px);scroll-margin-top:95px}@media(max-width:760px){.catalog-bar{grid-template-columns:85px minmax(0,1fr);gap:5px 8px;padding:10px 20px}.catalog-bar span{grid-column:2;text-align:left;font-size:11px}#viewport{min-height:65vh}}