:root{font:16px/1.5 system-ui,sans-serif;color:#263a32;background:#f6f6f3}*{box-sizing:border-box}body{margin:0}main{max-width:1060px;margin:0 auto;padding:44px 24px}h1{font:400 48px/1.12 Georgia,serif;letter-spacing:-.035em;margin:0 0 12px}header>p{max-width:560px;margin:0 0 28px;color:#5d6d64}.controls{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-bottom:24px;font-size:14px}.controls label{display:flex;gap:10px;align-items:center}.toggle{white-space:nowrap}select{font:inherit;background:white;padding:8px;border:1px solid #ccd7d0;border-radius:8px}input{accent-color:#24a68e}output{min-width:35px;font-variant-numeric:tabular-nums}.scene{position:relative;height:570px;overflow:auto;background:repeating-linear-gradient(0deg,transparent 0 69px,#dfeae680 69px 71px),repeating-linear-gradient(90deg,transparent 0 69px,#dfeae680 69px 71px);border-radius:18px;padding:28px 10% 100px}.paper{background:white;padding:36px 48px;box-shadow:0 4px 24px #263a3212;font:18px/1.65 Georgia,serif;color:#344138;max-width:690px;margin:auto}.paper h2{font:400 30px/1.2 Georgia,serif;margin:0 0 26px}.paper h3{font:400 22px/1.3 Georgia,serif;margin-top:30px}.paper p{margin:0 0 20px}.bar{--fg-radius:40px;position:sticky;bottom:0;display:flex;align-items:center;gap:18px;width:calc(100% + 70px);margin:25px -35px -68px;padding:6px 10px;min-height:68px}.tools{display:flex;gap:12px}.tool{display:grid;place-items:center;width:48px;height:48px;padding:4px;cursor:pointer;color:inherit;font:inherit}.tool.round{--fg-etch-radius:50%;border-radius:50%;width:54px;height:54px}.chip{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;pointer-events:none}.blue{background:#29a5f2;color:#fff;font:36px/1 Georgia,serif}.pink{background:#e775ac;color:#f9e770;font:31px/1 Georgia,serif}.green{width:46px;height:46px;border-radius:50%;background:#24a68e;color:white;font:600 36px/1 system-ui,sans-serif}#action{flex:1;text-align:right;font-size:13px;color:#455e50}:focus-visible{outline:3px solid #136f60;outline-offset:5px}.status{font-size:13px;color:#5d6d64;margin:16px 0}footer{font-size:13px;color:#5d6d64}a{color:#177968}.tool:not(.fg-etch){border:1px solid transparent;background:transparent;box-shadow:none}@media(max-width:640px){main{padding:28px 16px}h1{font-size:40px}.controls{gap:12px}.scene{height:570px;padding:20px 20px 90px}.paper{padding:28px 22px;font-size:17px}.bar{width:calc(100% + 24px);margin-left:-12px;margin-right:-12px;gap:10px}.tools{gap:8px}#action{font-size:12px}}@media(forced-colors:active){.scene{background:Canvas}.paper{border:1px solid CanvasText}.chip{forced-color-adjust:none}#action{color:CanvasText}}

.controls input[type=number]{font:inherit;width:6.5em;padding:8px;border:1px solid #ccd7d0;border-radius:8px;background:white;color:inherit}