:root{--stage: #e9e7e4;--surface: rgba(251, 250, 248, .94);--surface-strong: #fbfaf8;--text: #1d1c1a;--muted: #6c675f;--line: rgba(29, 28, 26, .12);--hover: rgba(29, 28, 26, .06);--accent: #8a6a35;--accent-soft: rgba(138, 106, 53, .14);--on-accent: #ffffff;--shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .08);--radius: 16px;--s1: 8px;--s2: 16px;--s3: 24px;--s4: 32px;--tap: 44px;--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;color-scheme:light dark}@media(prefers-color-scheme:dark){:root{--surface: rgba(30, 30, 32, .94);--surface-strong: #1e1e20;--text: #f3f1ed;--muted: #aaa59c;--line: rgba(255, 255, 255, .14);--hover: rgba(255, 255, 255, .08);--accent: #d6b77f;--accent-soft: rgba(214, 183, 127, .18);--on-accent: #1d1c1a;--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28)}}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:var(--stage);font:15px/1.4 var(--font);color:var(--text);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}button{font:inherit;color:inherit}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}:focus{outline:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}canvas#c:focus-visible{outline-offset:-4px}canvas#c,canvas#fade{position:fixed;inset:0;width:100%;height:100%;display:block}canvas#c{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}canvas#fade{pointer-events:none;opacity:0;visibility:hidden}canvas#fade.on{visibility:visible}.title{position:fixed;z-index:2;top:calc(var(--s2) + var(--safe-t));left:calc(var(--s2) + var(--safe-l));max-width:calc(100% - var(--s4) - var(--safe-l) - var(--safe-r));pointer-events:none}.title{display:flex;align-items:center;gap:var(--s1)}.badge{flex:none;padding:4px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.title h1{margin:0;display:inline-block;max-width:100%;min-width:0;padding:6px 12px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow);font-size:14px;font-weight:600;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar{position:fixed;z-index:3;left:calc(var(--s2) + var(--safe-l));right:calc(var(--s2) + var(--safe-r));bottom:calc(var(--s2) + var(--safe-b));display:flex;align-items:center;justify-content:space-between;gap:var(--s1);padding:6px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow);margin:0 auto;max-width:520px}.seg,.tools{display:flex;align-items:center;gap:2px;min-width:0}.seg{flex:1 1 auto}.seg button,.icon{min-width:var(--tap);min-height:var(--tap);display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:16px;background:transparent;cursor:pointer;padding:0 10px;transition:background-color .15s ease,color .15s ease}.seg button{flex:1 1 0;font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--muted)}.icon{padding:0;width:var(--tap);color:var(--text)}@media(hover:hover){.seg button:hover,.icon:hover{background:var(--hover)}}.seg button[aria-pressed=true]{background:var(--accent-soft);color:var(--text)}.icon[aria-pressed=true],.icon[aria-expanded=true]{background:var(--accent-soft);color:var(--accent)}.seg button:active,.icon:active{transform:scale(.97)}.fs-exit,#btnFullscreen[aria-pressed=true] .fs-enter{display:none}#btnFullscreen[aria-pressed=true] .fs-exit{display:inline}.sheet{position:fixed;z-index:4;left:calc(var(--s2) + var(--safe-l));right:calc(var(--s2) + var(--safe-r));bottom:calc(var(--s2) + var(--safe-b) + var(--bar-h, 56px) + var(--s1));margin:0 auto;max-width:520px;max-height:calc(100dvh - var(--bar-h, 56px) - 96px - var(--safe-t) - var(--safe-b));overflow-y:auto;overscroll-behavior:contain;padding:var(--s2) 0 var(--s1);border-radius:20px;background:var(--surface-strong);box-shadow:var(--shadow);transform-origin:bottom center;animation:sheet-in .22s cubic-bezier(.2,.8,.2,1)}@keyframes sheet-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.sheet-title{margin:0 var(--s2) var(--s1);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.swap-row{margin:0 0 var(--s1)}.swap-row h3{margin:var(--s1) var(--s2) 4px;font-size:13px;font-weight:600}.chips{display:flex;gap:var(--s1);overflow-x:auto;overscroll-behavior-x:contain;padding:2px var(--s2) var(--s1);scroll-padding-inline:var(--s2);scroll-snap-type:x proximity;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:var(--s1);min-height:var(--tap);padding:0 14px 0 12px;border-radius:999px;border:1px solid var(--line);background:transparent;cursor:pointer;font-size:14px;white-space:nowrap}.chip[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft);font-weight:600}@media(hover:hover){.chip:hover{background:var(--hover)}}.dot{width:16px;height:16px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px #0000002e}.actions{display:grid;gap:4px;padding:0 var(--s1)}.action{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:52px;padding:0 var(--s1) 0 12px;border:0;border-radius:14px;background:transparent;cursor:pointer;text-align:left;font-size:16px}@media(hover:hover){.action:hover{background:var(--hover)}}.action svg{color:var(--accent)}.hint,.toast{position:fixed;z-index:5;left:50%;bottom:calc(var(--s2) + var(--safe-b) + var(--bar-h, 56px) + var(--s2));transform:translate(-50%);margin:0;padding:10px 16px;border-radius:999px;max-width:calc(100% - var(--s4));background:var(--surface);box-shadow:var(--shadow);font-size:13px;text-align:center;color:var(--text);text-wrap:balance;pointer-events:none;transition:opacity .6s ease}.hint{opacity:0;width:max-content}.hint.on{opacity:1}.toast{opacity:0;transition:opacity .2s ease}.toast.on{opacity:1}.debug{position:fixed;z-index:6;right:calc(var(--s1) + var(--safe-r));top:calc(var(--s1) + var(--safe-t));margin:0;padding:4px 8px;border-radius:8px;background:#0009;color:#fff;font:11px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;pointer-events:none}.splash{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:var(--stage);color:#1d1c1a;transition:opacity .5s ease,visibility .5s}.splash.done{opacity:0;visibility:hidden;pointer-events:none}.splash-inner{width:min(280px,80vw);text-align:center}.brand{margin:0 0 var(--s1);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#6c675f}.splash-name{margin:0 0 var(--s3);font-size:20px;font-weight:500;letter-spacing:.01em;min-height:28px;overflow-wrap:anywhere}.progress{position:relative;height:2px;border-radius:1px;background:#1d1c1a1f;overflow:hidden}.progress span{position:absolute;inset:0;background:#8a6a35;transform-origin:left center;transform:scaleX(0);transition:transform .25s ease-out}.progress.indeterminate span{width:30%;animation:indet 1.2s ease-in-out infinite;transform:none}@keyframes indet{0%{left:-30%}to{left:100%}}.message{position:fixed;inset:0;z-index:11;display:grid;place-items:center;padding:var(--s3);padding-top:calc(var(--s3) + var(--safe-t));padding-bottom:calc(var(--s3) + var(--safe-b));background:var(--stage);color:#1d1c1a;text-align:center}.message-inner{max-width:420px}.message h1{margin:0 0 var(--s1);font-size:22px;font-weight:600;overflow-wrap:anywhere}.message p{margin:0 0 var(--s2);color:#4a4741}.message .brand{color:#6c675f;margin-bottom:var(--s2)}.pill{min-height:var(--tap);padding:0 var(--s3);border-radius:999px;border:0;cursor:pointer;background:#8a6a35;color:#fff;font-weight:600}@media(orientation:landscape)and (max-height:540px){.bar{left:auto;right:calc(var(--s1) + var(--safe-r));top:calc(var(--s1) + var(--safe-t));bottom:calc(var(--s1) + var(--safe-b));flex-direction:column;justify-content:center;max-width:none;margin:0;padding:4px;width:auto}.seg,.tools{flex-direction:column;flex:none}.seg button{flex:none;width:var(--tap);padding:0;font-size:13px}.sheet{left:auto;right:calc(var(--s1) + var(--safe-r) + var(--bar-w, 56px) + var(--s1));top:calc(var(--s1) + var(--safe-t));bottom:calc(var(--s1) + var(--safe-b));width:min(360px,55vw);max-height:none;margin:0;transform-origin:right center}.hint,.toast{bottom:calc(var(--s2) + var(--safe-b));left:calc(50% - var(--bar-w, 56px) / 2)}.title{top:calc(var(--s1) + var(--safe-t));left:calc(var(--s1) + var(--safe-l))}}@media(min-width:768px)and (min-height:541px){.title{top:calc(var(--s3) + var(--safe-t));left:calc(var(--s3) + var(--safe-l))}.title h1{font-size:15px}.bar{bottom:calc(var(--s3) + var(--safe-b));max-width:460px}.sheet{bottom:calc(var(--s3) + var(--safe-b) + var(--bar-h, 56px) + var(--s1));max-width:460px}.hint,.toast{bottom:calc(var(--s3) + var(--safe-b) + var(--bar-h, 56px) + var(--s2))}}@media(prefers-reduced-motion:reduce){*:not(#fade),*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.sheet-edit{max-height:min(55dvh,calc(100dvh - var(--bar-h, 56px) - 120px));padding-bottom:0}.sheet-edit .chips{flex-wrap:wrap;overflow:visible;scroll-snap-type:none;padding-bottom:4px}@media(pointer:fine){.sheet-edit .chip{min-height:34px;padding:0 12px 0 10px;font-size:13px}.sheet-edit .dot{width:14px;height:14px}}.edit-layer{padding:var(--s1) 0;border-top:1px solid var(--line)}.edit-layer:first-of-type{border-top:0}.edit-head{display:flex;align-items:baseline;gap:var(--s1);margin:0 var(--s2) 4px;min-width:0}.edit-head h3{margin:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.edit-path{flex:1 1 auto;min-width:0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cls-badge{flex:none;margin-left:auto;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line)}.sliders{display:grid;gap:0;padding:0 var(--s2) var(--s1)}.slider{display:grid;grid-template-columns:76px 1fr 56px;align-items:center;gap:var(--s1);min-height:var(--tap);font-size:13px}.slider span{color:var(--muted)}.slider output{text-align:right;font-variant-numeric:tabular-nums;font-size:13px}.slider input[type=range]{width:100%;height:var(--tap);margin:0;accent-color:var(--accent);touch-action:pan-x}.chip.reset{justify-self:start;margin-top:4px;min-height:40px;font-size:13px}@media(orientation:landscape)and (max-height:540px){.sheet-edit{max-height:none}}.picker-wrap{margin:0 0 4px}.pick-row{display:flex;align-items:center;gap:var(--s1);min-height:var(--tap);flex-wrap:wrap}.swatch-btn{width:var(--tap);height:var(--tap);padding:6px;border-radius:12px;border:1px solid var(--line);background:transparent;cursor:pointer;flex:none}.swatch-btn.small{width:36px;height:36px;padding:5px;border-radius:10px}.swatch-btn[aria-expanded=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.swatch-btn .sw{display:block;width:100%;height:100%;border-radius:8px;box-shadow:inset 0 0 0 1px #0000002e}.pick-label{font-size:13px;color:var(--text)}.pick-label.muted{color:var(--muted)}.hex{width:92px;min-height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text);font:13px/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:lowercase}.hex:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.picker{display:grid;gap:12px;padding:8px 0 4px}.picker .sv{position:relative;height:150px;border-radius:12px;touch-action:none;cursor:crosshair;background-image:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,#fff0)}.picker .hue{position:relative;height:28px;border-radius:14px;touch-action:none;cursor:ew-resize;margin:8px 0;background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.picker .hue:before{content:"";position:absolute;inset:-8px 0}.picker .knob{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #00000059,0 1px 4px #0000004d;pointer-events:none}.picker .hue .knob{top:50%}@media(min-width:900px){.sheet-edit{inset:0 0 0 auto;width:380px;max-width:none;max-height:none;margin:0;border-radius:0;padding:calc(var(--s2) + var(--safe-t)) 0 var(--s2);box-shadow:-1px 0 0 var(--line),var(--shadow);animation:col-in .22s cubic-bezier(.2,.8,.2,1)}body:has(#sheetEdit:not([hidden])) .bar{right:calc(380px + var(--s3) + var(--safe-r))}body:has(#sheetEdit:not([hidden])) .hint,body:has(#sheetEdit:not([hidden])) .toast{left:calc((100% - 380px)/2)}}@keyframes col-in{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:none}}.sheet-edit{z-index:3}.sheet-head{display:flex;align-items:center;justify-content:space-between;margin:-8px 4px 0 0}.sheet-head .sheet-title{margin-bottom:0}.sheet-close{color:var(--muted)}