*{box-sizing:border-box} html{color-scheme:light} body{margin:0;background:#f5f7f0;color:#213e33;font:15px/1.45 "Segoe UI",Arial,sans-serif}header{min-height:72px;padding:12px clamp(18px,4vw,62px);display:flex;align-items:center;gap:18px;background:#fcfdf8;border-bottom:1px solid #d5dfd0}.brand{display:flex;align-items:center;gap:12px;font-size:19px}.brand i{font:italic 31px Georgia;text-align:center;background:#285948;color:#f6d98b;border-radius:11px;width:39px;height:39px}.brand-sub{color:#718271;border-left:1px solid #d9dfd3;padding-left:18px}nav,.actions,.toolbar,.titleline,.caption,.palette{display:flex;align-items:center;gap:8px;flex-wrap:wrap}nav{margin-left:auto}button,input,select,textarea{font:inherit;color:inherit}button,select,input:not([type=checkbox]),textarea{border:1px solid #c8d6c8;border-radius:7px;background:#fffefa;padding:7px 10px}button{cursor:pointer}button:hover:not(:disabled){background:#e6efdf;border-color:#8da78d}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #cf963b;outline-offset:2px}button:disabled{opacity:.5;cursor:default}button.main,button.active{background:#285d4a;border-color:#285d4a;color:#fff}button.main:hover,button.active:hover{background:#1e4b3b}main{max-width:1650px;margin:auto;padding:24px clamp(16px,3vw,50px) 60px}h1,h2,p{margin:0 0 10px}h1{font:normal clamp(27px,3.2vw,46px)/1.1 Georgia,serif;margin:4px 0 0}h2,summary{font-size:16px;font-weight:650}small{color:#6e7d61;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em}.titleline,.caption{justify-content:space-between}.titleline{margin-bottom:21px}.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(252px,300px);gap:18px}.left,aside{min-width:0}.toolbar,.caption{padding:9px 12px;background:#fdfef8}.toolbar{border-radius:10px 10px 0 0;border:1px solid #d3ddcf}.grow{flex:1}.board{background:#e3ebde;overflow:hidden;border:1px solid #cedac9}#board{display:block;width:100%;height:auto;max-height:500px;touch-action:none;cursor:crosshair}.caption{border:1px solid #d3ddcf;border-radius:0 0 10px 10px;font-size:13px;color:#536a58}.section,aside section,aside details,aside #extension:not(:empty),.card{background:#fcfdf8;border:1px solid #d4dfce;border-radius:11px;padding:16px}.section+.section,.section,aside>*+*{margin-top:12px}.palette button{padding:6px 11px}.palette button span{font-size:16px;padding-right:5px;color:#9b7137}#drawActions{margin-top:9px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.field{display:flex;flex-direction:column;font-size:13px;color:#586b59;margin:5px 0;gap:3px}.field input,.field select,.field textarea{width:100%;min-width:0;color:#284535}.field input[type=file]{font-size:12px;padding:5px}aside select[size]{width:100%;padding:3px}option{padding:3px 6px}summary{cursor:pointer}aside details[open] summary{margin-bottom:8px}.card{max-width:760px;margin:8vh auto 0;padding:clamp(18px,4vw,42px)}.card h1{margin-bottom:18px}.card .list{display:grid;gap:8px;margin:18px 0}.list button{text-align:left}dialog{padding:22px;max-width:min(440px,94vw);width:440px;border:1px solid #aebfa9;border-radius:12px;color:#203b30;background:#fafbf4}dialog::backdrop{background:#142c2580}dialog .actions{justify-content:flex-end;margin-top:17px}#toast{position:fixed;z-index:5;bottom:16px;left:50%;transform:translateX(-50%);border-radius:9px;padding:11px 18px;background:#234936;color:white;max-width:95vw}#screen{position:relative;background:#1c2b24;overflow:hidden;border-radius:10px;aspect-ratio:16/9;max-height:76vh}#mount{width:100%;height:100%;touch-action:none}#mount canvas{display:block}#result{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:12px;background:#eff3e7df}#screen:fullscreen{max-height:none;width:100vw;height:100vh;border-radius:0}label input[type=checkbox]{accent-color:#285d4a}.note{display:block;text-align:left;margin:6px 0;width:100%}[hidden]{display:none!important}@media(max-width:840px){.studio{grid-template-columns:1fr}.brand-sub{display:none}header{padding:10px 15px;gap:7px;flex-wrap:wrap}nav button{font-size:12px}main{padding:14px 10px}.titleline{gap:12px}aside{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}aside>*+*{margin:0}.toolbar{font-size:12px}.titleline button{font-size:13px}}
