:root{font-family:Georgia,serif;color:#19332f;background:#f6f5f0;font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{max-width:1200px;margin:auto;padding:26px 34px}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #d2d9d0;padding-bottom:18px;font:11px/1.5 system-ui,sans-serif;letter-spacing:.16em}.brand{color:inherit;text-decoration:none;font-weight:650}.proof{color:#63776d}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0 18px}h1{font-size:42px;font-weight:400;margin:0 0 6px}.intro p{margin:0;color:#61746a;font-size:17px}label{font:12px/1.5 system-ui,sans-serif;display:flex;align-items:center;gap:10px;color:#405b50}select,button{font:13px/1.4 system-ui,sans-serif;color:#19332f;background:#fcfcf7;border:1px solid #bccbc0;border-radius:5px;padding:8px 10px}button{cursor:pointer}select{max-width:200px}select:focus-visible,button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #246b60;outline-offset:3px}.viewer{border:1px solid #cad6ca;border-radius:12px;overflow:hidden;background:#dee5df;box-shadow:0 10px 30px #14352b06}.top,.bottom{display:flex;align-items:center;gap:24px;padding:14px 18px;background:#ffffff8c}.top{border-bottom:1px solid #ccd7cd}.top>button{margin-left:auto}.explode input{width:110px;accent-color:#315e53}.explode output{width:30px;font-variant-numeric:tabular-nums}.stage{height:550px;position:relative;background:radial-gradient(ellipse at 48% 36%,#edf0e7,#d9e3db)}canvas{display:block;width:100%;height:100%;touch-action:none}.loading{position:absolute;inset:45% 0 auto;text-align:center;font:14px system-ui,sans-serif;pointer-events:none}.bottom{border-top:1px solid #ccd7cd}.bottom p{font:11px system-ui,sans-serif;margin-left:auto;color:#61746a}.bottom input[type=color]{width:30px;height:30px;padding:0;border:0}.caption{max-width:780px;color:#425c51;font:14px/1.7 system-ui,sans-serif;margin:20px 0 8px}.status{font:11px/1.5 system-ui,sans-serif;color:#738477;margin:0}label:has(input:disabled){opacity:.45}@media(max-width:700px){main{padding:18px 14px}.intro{align-items:flex-end}h1{font-size:34px}.intro p{font-size:14px}.intro>label{display:block}.intro select{display:block;margin-top:6px}.top{gap:12px;flex-wrap:wrap;padding:12px}.top label{gap:7px}.top>button{font-size:11px}.explode{order:3;width:100%}.explode input{flex:1}.stage{height:490px}.bottom{flex-wrap:wrap;gap:10px;padding:12px}.bottom label{font-size:11px;flex:1}.bottom select{max-width:125px}.bottom p{width:100%;margin:3px 0 0;font-size:10px}.proof{font-size:9px}}
.stage{height:clamp(340px,calc(100vh - 330px),550px)} @media(max-width:700px){.stage{height:clamp(340px,calc(100svh - 300px),490px)}}

.embedded main{padding:0;max-width:none}.embedded header,.embedded .intro,.embedded .status{display:none}.embedded .viewer{border:0;border-radius:0;box-shadow:none}.embedded .stage{height:calc(100dvh - 155px);min-height:270px}.embedded .caption{font-size:11px;line-height:1.5;margin:0;padding:10px 16px;max-width:none;min-height:49px;background:#f4f0e6}.embedded .top,.embedded .bottom{gap:14px}.embedded .bottom p{display:none}.embedded .top select{max-width:180px} @media(max-width:700px){.embedded .stage{height:calc(100dvh - 194px)}.embedded .top{gap:8px}.embedded .bottom label{min-width:0}.embedded .bottom select{max-width:120px}}
.embedded{height:100dvh;overflow:hidden}.embedded main{height:100%;display:flex;flex-direction:column}.embedded .viewer{flex:1;min-height:0;display:flex;flex-direction:column}.embedded .stage{flex:1;height:auto;min-height:0}.embedded .top,.embedded .bottom,.embedded .caption{flex-shrink:0}.embedded .caption{min-height:0}.embedded .bottom select{min-height:36px}
@media(max-width:520px){.embedded .bottom{display:grid;grid-template-columns:1fr 1fr;gap:12px}.embedded .bottom label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px}.embedded .bottom select{width:100%;max-width:none;min-width:0;padding:8px 4px}.embedded .bottom input[type=color]{grid-column:2;flex-shrink:0;width:30px}}