:root{color-scheme:dark;--text: #eef3ec;--bg: #202824;--muted: #b1bfb5;--border: #506158;--selected: #bed6bb;--selected-text: #1b3022}:root[data-theme=light]{color-scheme:light;--text: #25382c;--bg: #f7f7f0;--muted: #596854;--border: #c4cdbd;--selected: #294a37;--selected-text: white}.theme{align-items:center}.track{width:32px;height:18px;border-radius:20px;background:var(--border);padding:3px}.track:before{content:"";display:block;background:#fff;width:12px;height:12px;border-radius:100%}.theme[aria-checked=true] .track{background:#568661}.theme[aria-checked=true] .track:before{transform:translate(14px)}*{box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text);background:var(--bg)}main{display:grid;grid-template-columns:285px 1fr;height:100dvh}aside{padding:30px 24px;display:flex;flex-direction:column;gap:28px;overflow:auto}h1{font-family:Georgia,serif;font-weight:500;font-size:31px;letter-spacing:-1px;margin:8px 0}p,small{font-size:13px;color:var(--muted)}p{margin:0}h2{font-size:14px;margin:0 0 12px}.views{display:grid;grid-template-columns:1fr 1fr;gap:6px}button{font:inherit;font-size:13px;padding:10px;border:1px solid var(--border);background:transparent;color:inherit;border-radius:6px;display:flex;justify-content:space-between;cursor:pointer}button[aria-pressed=true]{background:var(--selected);color:var(--selected-text)}label{display:flex;align-items:center;gap:7px;font-size:14px;margin:10px 0;cursor:pointer}input{accent-color:#305d40}small{margin-top:auto;font-size:10px;line-height:1.55}article{position:relative;overflow:hidden}.canvas{position:absolute;inset:0}.canvas canvas{display:block;touch-action:none}.fullscreen{position:absolute;top:16px;right:16px;z-index:1;padding:8px;background:var(--bg)}.fullscreen[aria-pressed=true]{background:var(--bg);color:inherit}article:fullscreen{background:var(--bg)}.guide,.status{position:absolute;background:var(--bg);padding:9px 13px;border-radius:6px;font-size:12px}.guide{bottom:16px;left:16px}.status{top:20px;left:20px}@media(max-width:700px){main{grid-template-columns:1fr;grid-template-rows:minmax(300px,55dvh) auto;height:auto}article{grid-row:1}aside{padding:20px;gap:16px}.guide{font-size:10px}.views{grid-template-columns:repeat(4,1fr)}}
