:root{font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:#203e39;background:#f5f7f4;color-scheme:light}*{box-sizing:border-box}body{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overscroll-behavior:none}button,input,select{font:inherit}button{min-height:44px;border:1px solid #dbe3dc;border-radius:12px;background:#fff;color:#244d45;padding:8px 13px;cursor:pointer}button:disabled{opacity:.4}button:focus-visible,input:focus-visible{outline:3px solid #c78b3e;outline-offset:2px}header{padding:calc(12px + env(safe-area-inset-top)) 16px 12px;display:flex;gap:8px;align-items:center;background:#173c37;color:white}header>div{flex:1}strong{font-size:20px;letter-spacing:-.5px}strong span{font-size:12px;margin-left:8px;font-weight:400;opacity:.75}small{display:block;font-size:11px;opacity:.8}header button{color:white;background:#ffffff12;border-color:#ffffff30}main{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 12px}.topline{display:flex;align-items:center;gap:6px;padding:8px 0}.topline>span{flex:1;font-size:12px}.topline button{padding:5px 10px;min-height:38px}#stage{flex:1;min-height:100px;position:relative;border:1px solid #d4ddd5;border-radius:16px;background:#e9eee8;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}#hint{position:absolute;top:12px;left:12px;right:12px;pointer-events:none;font-size:12px;color:#46675d;background:#f8faf2ed;border-radius:9px;padding:6px 10px;width:fit-content;max-width:calc(100% - 24px)}#zoom{position:absolute;bottom:12px;right:12px;padding:4px 8px;background:#ffffffe0;border-radius:8px;font-size:12px;pointer-events:none}.selection{display:flex;align-items:center;gap:8px;padding:10px 0}.selection span{flex:1;font-size:12px;max-height:42px;overflow:auto;overflow-wrap:anywhere}.selection button{font-size:12px;padding:8px}nav{display:flex;gap:5px;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-top:1px solid #dce3dc;background:#fff}nav button{flex:1;min-width:0;padding:5px 1px;font-size:21px;border:0;border-radius:12px;background:transparent}nav span{display:block;font-size:11px}nav .active{background:#173c37;color:#fff}dialog{border:0;border-radius:22px 22px 0 0;padding:20px;padding-bottom:calc(20px + env(safe-area-inset-bottom));max-width:560px;width:100%;max-height:85dvh;margin:auto auto 0;background:#f8faf7;color:#203e39;box-shadow:0 -8px 60px #0002}dialog::backdrop{background:#102e2870}.sheethead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}h2{font-size:20px;margin:0}label{display:block;margin:12px 0}input:not([type=checkbox]),select{display:block;width:100%;padding:11px;border:1px solid #ccd8ce;border-radius:10px;background:white;color:#203e39}input[type=color]{height:50px}input[type=checkbox]{width:20px;height:20px;vertical-align:middle}.row{display:flex;gap:8px}.row>*{flex:1}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{flex:1 1 110px}.primary{background:#173c37;color:white}.danger{color:#a23b32}.muted{font-size:12px;color:#65786d}.project{display:flex;gap:8px;align-items:center;border-bottom:1px solid #dce4dc;padding:12px 0}.project>span{flex:1;overflow-wrap:anywhere}.project small{color:#667a6d}#toast{position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#173c37;color:white;padding:10px 18px;border-radius:12px;max-width:92%;width:max-content;pointer-events:none;opacity:0;transition:opacity .15s;z-index:10}#toast.show{opacity:1}a{color:#246e5b}@media(min-width:900px){main{width:min(1200px,100%);align-self:center}nav{justify-content:center}nav button{flex:0 1 140px}dialog{margin:auto;border-radius:22px}}@media(max-height:500px) and (orientation:landscape){header{padding:5px 12px}.topline{padding:3px 0}.selection{padding:3px 0}nav{padding-top:3px;padding-bottom:calc(3px + env(safe-area-inset-bottom))}nav button{font-size:16px}nav span{display:inline;margin-left:5px}#hint{top:5px;font-size:11px}}

[hidden]{display:none!important}
