:root{color:#173e43;--primary:#087e78;--ink:#173e43;--muted:#46666b;--border:#b8ceca;--surface:#fff;background:#f4f8f3;font-family:Malgun Gothic,Apple SD Gothic Neo,sans-serif;font-size:16px;line-height:1.5}*{box-sizing:border-box}[hidden]{display:none!important}body,h1,h2,p{margin:0}h1{letter-spacing:-.04em;font-size:21px}h2{font-size:22px}button,input,summary{font:inherit}button,summary{cursor:pointer;touch-action:manipulation}button{border:1px solid var(--border);min-height:48px;color:var(--ink);background:#fff;border-radius:8px;padding:8px 16px;font-weight:600;line-height:1.35}button:hover:not(:disabled){background:#edf8f3}button:disabled{opacity:.5;cursor:default}button.primary,#pairSubmit{background:var(--primary);border-color:var(--primary);color:#fff}button[aria-pressed=true]{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}:focus-visible{outline-offset:3px;outline:3px solid #ab5400}label{word-break:keep-all;flex-direction:column;gap:6px;min-width:0;display:flex}input:not([type=range],[type=checkbox]){width:100%;min-width:0;min-height:48px;color:var(--ink);border:1px solid #71829a;border-radius:6px;padding:10px}input[type=range]{width:100%;min-height:44px;accent-color:var(--primary);margin:0}summary{min-height:48px;padding:12px 4px}details[open]>summary{margin-bottom:8px}main{max-width:1800px;height:100dvh;min-height:440px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));grid-template-rows:auto minmax(0,1fr) auto;gap:8px;margin:auto;display:grid}.app-header{justify-content:space-between;align-items:center;gap:12px;min-height:48px;display:flex}.brand{display:none}.header-actions{align-items:center;gap:8px;display:flex}.workspace-nav{align-items:center;gap:4px;display:flex}.workspace-nav button,.nav-current{background:0 0;border:0;border-radius:6px;min-height:48px;padding:12px 18px}.nav-current{color:var(--primary);background:#dceee9;font-weight:700}.connection-chip{color:var(--muted);font-size:14px}.connection-chip.connected:before{content:"● ";color:#246744}#fullscreenToggle{min-width:44px;padding:4px;font-size:24px}.drawing-workspace{grid-template-columns:164px minmax(0,1fr);gap:10px;min-height:0;display:grid}.tools{background:#fff;border-radius:8px;grid-template-rows:auto auto minmax(44px,1fr) auto auto auto auto;grid-template-columns:1fr 1fr;gap:6px;min-height:0;padding:8px;display:grid;overflow:auto}.tools h2{display:none}.tools #templateOpen,.tools #colors,.tools .brush-width,.tools #eraser,.tools #reset{grid-column:1/-1}.tools #templateOpen{padding:8px 4px;font-size:14px}.tools #colors{overscroll-behavior:contain;scrollbar-width:thin;grid-template-columns:repeat(2,48px);place-content:start center;gap:8px;min-height:0;padding:3px;display:grid;overflow:auto}#colors button{border:3px solid #0000;border-radius:50%;width:48px;min-width:48px;height:48px;min-height:48px;padding:0;box-shadow:inset 0 0 0 1px #173e4330}#colors button[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 3px #fff}#colors button[aria-pressed=true]:after{content:"✓";color:var(--ink);background:#fff;border-radius:50%;padding:0 3px;font-size:20px}.brush-width{font-size:14px;position:relative}.brush-width output{position:absolute;right:0}.tools #undo,.tools #redo{padding:4px;font-size:24px}.tools #reset{color:var(--muted);background:0 0;border-color:#0000;font-size:14px}.paper{touch-action:none;overscroll-behavior:contain;background:#d5ece5;border-radius:8px;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden;container-type:size}.canvas-viewport{aspect-ratio:4/3;touch-action:none;background:#fff;width:min(100cqw,133.333cqh);overflow:hidden}.canvas-viewport canvas{transform-origin:0 0;will-change:transform;touch-action:none;width:100%;height:100%;display:block}#zoomReset{background:#fffffff0;min-height:44px;padding:6px 12px;font-size:14px;position:absolute;bottom:8px;right:8px}.drawing-footer{flex-direction:row-reverse;align-items:center;gap:12px;min-height:56px;display:flex}.send-actions{flex-shrink:0;align-items:center;gap:8px;display:flex}.send-actions #send{min-width:170px}.send-actions #retry{background:0 0;border-color:#0000}.drawing-status{min-width:0;max-height:64px;color:var(--muted);flex:1;font-size:14px;overflow:auto}#draftStatus{font-size:13px}#status:empty,#connectionAlert:empty{display:none}#connectionAlert{color:#8c331d}dialog{color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:12px;width:min(680px,100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:20px;overflow:auto}.settings-heading{background:var(--surface);justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding:0 0 12px;display:flex}.settings-heading button{flex-shrink:0}.settings-nav{border-bottom:1px solid var(--border);gap:4px;margin-bottom:16px;padding-bottom:12px;display:flex}.settings-nav button{border-color:#0000;flex:1}.settings-nav button[aria-pressed=true]{color:var(--primary);background:#dceee9}#pairing{gap:12px;display:grid}#pairing.name-page>:not(#deviceSettings){display:none}#pairing details{border-top:1px solid var(--border)}#pairing label,#connection label{margin-bottom:12px}#pairedHomes{flex-wrap:wrap;gap:8px;display:flex}#pairNotice:empty{display:none}#pairing details>button{margin:0 6px 8px 0}#deviceSettings>summary,#connection>summary{display:none}#pairCode{letter-spacing:.15em;font-size:24px}#pairSubmit{min-width:180px}.connect-steps{color:var(--muted);margin:8px 0 20px;padding-left:24px}.connect-steps li{padding:4px 0}#connection p{margin-bottom:16px;font-size:14px}#connection p:last-child{margin:16px 0 0}#previewImage{background:repeating-conic-gradient(#e8edf3 0% 25%,#fff 0% 50%) 0/20px 20px;width:100%;margin:16px 0;display:block}#closePreview{width:100%}#artworksDialog{background:#f4f8f3;border:0;border-radius:0;width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:16px 24px;inset:0;overflow:auto}#artworksDialog .settings-heading{z-index:3;background:#f4f8f3;margin:0;padding:12px 0;position:sticky;top:-16px}#artworksNotice{color:var(--muted);min-height:21px;margin:4px 0 12px;font-size:14px}.gallery-toolbar{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.gallery-filters{flex-wrap:wrap;gap:4px;display:flex}.gallery-filters button{background:0 0;border-color:#0000}.gallery-filters button[aria-pressed=true]{background:#fff}.background-picker{margin-right:auto;position:relative}.background-picker>summary{border:1px solid var(--border);background:#fff;border-radius:8px;padding:10px 14px}.background-picker[open]{flex-basis:100%;order:3}.background-picker[open]>summary{display:inline-block}#backgroundChoices{flex-wrap:wrap;gap:12px;display:flex}#backgroundChoices button{text-align:left;width:180px;padding:4px;overflow:hidden}#backgroundChoices img{object-fit:contain;background:#d5ece5;border-radius:4px;width:100%;height:94px;display:block}#backgroundChoices span{padding:6px 8px;display:block}#backgroundChoices button[aria-pressed=true] span:before{content:"✓ "}#backgroundNotice{margin:8px 0;font-size:14px}#backgroundNotice:empty{display:none}#artworksRefresh{background:0 0;border-color:#0000;font-size:14px}#artworksList{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin:16px 0;display:grid}#artworksList article{border:1px solid var(--border);background:#fff;border-radius:10px;align-content:start;gap:6px;min-width:0;padding:8px;display:grid;position:relative}#artworksList article.is-selected{outline:3px solid var(--primary)}#artworksList img{object-fit:contain;image-rendering:auto;background:#f0f3f8;border-radius:4px;width:100%;height:160px}#artworksList p{color:var(--muted);padding:2px 4px;font-size:14px}.artwork-actions{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.artwork-actions>button{flex:1;font-size:14px}.artwork-actions details{position:relative}.artwork-actions summary{padding:12px 8px;font-size:13px;list-style:none}.artwork-actions details[open] .quiet-delete{z-index:2;white-space:nowrap;border:1px solid var(--border);background:#fff;position:absolute;bottom:100%;right:0;box-shadow:0 4px 16px #173e4320}.quiet-delete{color:#a13225}.artwork-select{flex-direction:row;align-items:center;gap:8px;min-height:48px}.artwork-select input{width:24px;height:24px;accent-color:var(--primary)}.bulk-toolbar{z-index:4;border-top:1px solid var(--border);background:#f4f8f3;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 0;display:flex;position:sticky;bottom:-16px}.bulk-toolbar button{font-size:14px}#selectionCount{margin-right:auto}#artworksEmpty{text-align:center;color:var(--muted);padding:40px 12px}#templatesDialog{width:min(920px,100vw - 24px)}#templateChoices{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}#templateChoices button{justify-items:center;gap:8px;min-width:0;display:grid}#templateChoices canvas{width:100%;max-width:180px;height:auto}#templatesDialog>p{color:var(--muted);margin-top:16px;font-size:14px}@media (orientation:portrait),(width<=600px){main{gap:6px;padding:8px}.app-header{flex-wrap:wrap;gap:4px}.app-header h1{font-size:18px}.header-actions{gap:4px}.header-actions button{padding:6px 10px}.connection-chip{font-size:13px}.workspace-nav{flex-basis:100%;order:3}.workspace-nav button,.nav-current{min-height:44px;padding:8px 16px}.drawing-workspace{grid-template-rows:minmax(0,1fr) auto;grid-template-columns:1fr;gap:6px}.paper{grid-row:1}.tools{grid-template-rows:auto auto;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:6px;overflow:visible}.tools #colors{grid-area:1/1/auto/-1;grid-template-rows:repeat(2,44px);grid-template-columns:repeat(12,44px);justify-content:start;gap:4px;max-height:98px;overflow:auto hidden}.tools #colors button{width:44px;min-width:44px;height:44px;min-height:44px}.tools #templateOpen{grid-area:2/1/auto/3}.tools .brush-width{grid-area:2/3/auto/5}.tools #eraser{grid-area:2/5}.tools #undo{grid-area:2/6}.tools #redo{grid-area:2/7}.tools #reset{grid-area:2/8}.tools button{min-height:44px;padding:4px;font-size:14px}.tools #undo,.tools #redo{font-size:24px}.drawing-footer{flex-direction:column;align-items:stretch;gap:2px;min-height:0}.send-actions{justify-content:flex-end;gap:4px}.send-actions button{min-height:44px;padding:8px 12px}.drawing-status{max-height:42px;font-size:13px}#draftStatus{font-size:13px}#artworksDialog{padding:12px}.bulk-toolbar{bottom:-12px}#artworksDialog .settings-heading{top:-12px}#artworksList{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#artworksList img{height:150px}.gallery-toolbar{gap:6px}.gallery-filters button{padding:8px 12px}.settings-heading h2{font-size:20px}#templateChoices{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.tools{grid-template-rows:auto auto auto;grid-template-columns:repeat(4,minmax(0,1fr))}.tools #eraser{grid-area:3/1}.tools #undo{grid-area:3/2}.tools #redo{grid-area:3/3}.tools #reset{grid-area:3/4}.send-actions #send{min-width:125px}.send-actions button{padding:8px;font-size:14px}.app-header h1{font-size:16px}#artworksList img{height:120px}.artwork-actions>button{padding:8px}.artwork-actions summary{padding:12px 4px;font-size:12px}}@media (height<=550px){main{min-height:440px}.drawing-status{max-height:48px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}:root{--paper:#fffaf0;--aqua:#d9f1e9;--shade:0 5px 14px #16474712;--press:.12s;--ease:.19s}body{background:radial-gradient(at 100% 0,#d8f1e9,#0000 60%),#f6f8f2}button{transition:transform var(--press),background var(--press);border-radius:14px;box-shadow:0 2px #16474710}button:active:not(:disabled){box-shadow:none;transform:translateY(1px)}button.primary,#pairSubmit{background:linear-gradient(135deg,#07847c,#076861);border-color:#086c66;box-shadow:0 3px #06524e,0 7px 14px #087e7825}button[aria-pressed=true]{border-color:var(--primary)}.app-header h1{letter-spacing:-.06em;align-items:center;gap:10px;font-size:22px;font-weight:800;display:flex}.app-header h1:before{content:"✦";color:#087e78;width:38px;height:38px;box-shadow:var(--shade);background:linear-gradient(145deg,#ade8d8,#fff0c9);border-radius:14px;place-items:center;display:grid}.workspace-nav{background:#dfefea;border-radius:17px;padding:3px}.nav-current{box-shadow:var(--shade);background:#fff;border-radius:14px}.header-actions>button{background:#ffffffb8}.connection-chip{white-space:nowrap}.tools{background:var(--paper);box-shadow:var(--shade);border:1px solid #fff;border-radius:22px;padding:10px}.palette-hint{color:var(--muted);grid-column:1/-1;justify-content:space-between;padding:0 5px;font-size:12px;display:flex}.tools #colors{scrollbar-color:#829e98 transparent;gap:9px}.tools #colors button{border-color:#173e4330;box-shadow:inset 0 2px 1px #fff9,inset 0 -3px 2px #00000020,0 2px 3px #173e4317}.tools #colors button[aria-pressed=true]{outline:2px solid var(--primary);outline-offset:1px;border-color:#fff;box-shadow:inset 0 0 0 1px #173e4380}.brush-width{background:#f9ecd9;border-radius:14px;min-height:72px;padding:7px 9px}.brush-width output{font-size:12px;right:10px}.brush-width input{z-index:1;position:relative}.brush-width #brushSample{--brush-size:20px;width:calc(var(--brush-size) * .65);height:calc(var(--brush-size) * .65);pointer-events:none;background:#f77840;border-radius:50%;position:absolute;top:8px;left:50%;transform:translate(-50%)}.tools #reset{color:#735345}.paper{background:radial-gradient(circle at 95% 95%,#fff0d2,#0000 65%),linear-gradient(130deg,#bdece9,#dff2e5);border:1px solid #b5dfd4;border-radius:24px}.canvas-viewport{border-radius:12px;box-shadow:0 9px 28px #20595318}.send-actions #send{min-width:174px;min-height:52px}.send-actions #send:after{content:" →";margin-left:8px}.drawing-status{padding-left:4px}.drawing-footer{padding:2px 0 4px}dialog{background:#fcfdf9;border-radius:24px;box-shadow:0 12px 50px #0a3d432c}dialog::backdrop{background:#143d435c}.settings-heading{background:0 0}.settings-nav button[aria-pressed=true]{background:#dcefe6}.effects-setting{flex-direction:row;align-items:center;gap:10px;min-height:44px;margin-bottom:16px;font-size:14px;display:flex}.effects-setting input{width:22px;height:22px;accent-color:var(--primary)}.connect-steps{counter-reset:step;gap:10px;padding:0;list-style:none;display:grid}.connect-steps li{counter-increment:step;flex-wrap:wrap;align-items:center;gap:10px;display:flex}.connect-steps li:before{content:counter(step);color:#075a55;background:#dcefe6;border-radius:50%;flex:0 0 28px;place-items:center;height:28px;font-weight:700;display:grid}#artworksDialog{background:linear-gradient(120deg,#f8faf3,#e9f5ef)}#artworksDialog .settings-heading{background:#f1f8f1}.gallery-toolbar{padding:4px 0}.background-picker>summary{background:linear-gradient(120deg,#d9f1ea,#fff0d9);border-color:#b8d9ce;align-items:center;gap:10px;min-height:52px;display:flex}.background-picker>summary img{object-fit:cover;border-radius:8px;width:52px;height:34px}.background-picker[open]>summary{width:fit-content;display:flex}#artworksList article{border-color:#c9ded3;border-radius:21px;padding:10px;box-shadow:0 3px 12px #16474709}#artworksList img{background:#edf0f8;border-radius:14px;height:178px}#artworksList article:nth-child(3n+2)>img{background:#e8f3e4}#artworksList article:nth-child(3n)>img{background:#fcf1df}#artworksList article.is-selected{outline:3px solid var(--primary);background:#f3fffa}#artworksList p{color:#345c60}.artwork-actions{border-top:1px solid #e0eae1;padding-top:7px}.artwork-actions>[role=switch]{color:var(--ink);box-shadow:none;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;gap:6px;padding:8px 2px;font-size:13px;display:flex}.artwork-actions>[role=switch]:after{content:"";background:radial-gradient(circle at 12px 12px,#fff 8px,#0000 9px),#6c8585;border-radius:18px;flex-shrink:0;width:38px;height:24px}.artwork-actions>[role=switch][aria-checked=true]:after{background:radial-gradient(circle at 26px 12px,white 8px,transparent 9px),var(--primary)}.bulk-toolbar{padding:12px 0 max(12px,env(safe-area-inset-bottom));background:#edf6ef;border-color:#b7d2c8}#artworksEmpty{background:#fff9ec;border-radius:20px;margin:24px 0}.artwork-select{font-weight:700}#artworksList:empty{margin:0}#receiptEffect{z-index:3;white-space:nowrap;color:#075f58;pointer-events:none;background:#fffdf4;border:1px solid #a4d4c2;border-radius:22px;max-width:90%;padding:12px 20px;animation:.85s ease-out both receipt-in;position:absolute;bottom:64px;left:50%;transform:translate(-50%);box-shadow:0 6px 24px #07463a22}#receiptEffect[data-effect=arrived]{background:#fff6d9;border-color:#d9b252}#receiptEffect[data-effect=arrived]:before,#receiptEffect[data-effect=arrived]:after{content:"✦";color:#9e6800;font-size:22px;position:absolute;top:-22px}#receiptEffect[data-effect=arrived]:before{left:10px}#receiptEffect[data-effect=arrived]:after{right:10px}@keyframes receipt-in{0%{opacity:0;translate:0 9px}25%,80%{opacity:1;translate:0}to{opacity:0;translate:0 -4px}}@media (orientation:portrait),(width<=600px){.tools{border-radius:18px;padding:7px}.palette-hint{grid-area:1/1/auto/-1;font-size:11px;line-height:14px}.tools #colors{grid-row:2;gap:5px;max-height:98px}.tools{grid-template-rows:auto auto auto}.tools #templateOpen,.tools .brush-width,.tools #eraser,.tools #undo,.tools #redo,.tools #reset{grid-row:3}.brush-width{min-height:64px;padding:4px 7px}.brush-width output{right:6px}.brush-width #brushSample{top:4px}.app-header h1{font-size:19px}.app-header h1:before{border-radius:10px;width:30px;height:30px}.workspace-nav{flex:1;order:3;justify-content:center}.workspace-nav>*{text-align:center;flex:1}.paper{border-radius:20px}.send-actions #send{min-height:48px}#artworksList img{height:160px}}@media (width<=600px){.tools{grid-template-rows:auto auto auto auto}.tools #eraser,.tools #undo,.tools #redo,.tools #reset{grid-row:4}.app-header h1{gap:4px;font-size:16px}.connection-chip{font-size:12px}.header-actions button{padding:6px 8px}.tools #colors{grid-template-rows:repeat(1,44px);grid-template-columns:repeat(24,44px);max-height:52px}#artworksList img{height:126px}.artwork-actions{flex-direction:column;align-items:stretch}.artwork-actions summary{text-align:center;padding:10px 4px}.send-actions #send{min-width:138px}.send-actions #send:after{display:none}#receiptEffect{padding:10px 12px;font-size:13px}.brush-width{min-height:62px}.tools #templateOpen{font-size:13px}}@media (prefers-reduced-motion:reduce){button,#receiptEffect{transition:none!important;animation:none!important}#receiptEffect:before,#receiptEffect:after{display:none}}:root[data-reduce-motion=true] button,:root[data-reduce-motion=true] #receiptEffect{transition:none!important;animation:none!important}:root[data-reduce-motion=true] #receiptEffect:before,:root[data-reduce-motion=true] #receiptEffect:after{display:none}.scale-control{border:1px solid var(--border);background:#fff;border-radius:12px;min-width:0;padding:10px}.scale-control label{grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:13px;display:grid}.scale-control output{grid-area:1/2}.scale-control input{grid-area:2/1/auto/-1;width:100%;min-width:0;height:44px;padding:0}.scale-control button{min-height:44px;margin-top:5px}#motionToggle{color:var(--primary);margin:8px 0}#motionToggle[aria-checked=false]{background:#fff5da}.artwork-actions details[open]{z-index:2}.artwork-actions details:has(.scale-control){width:100%}.artwork-actions details[open] .scale-control{box-sizing:border-box;width:100%;position:static}.artwork-actions details[open]:has(.scale-control) .quiet-delete{position:static}#artworksList{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}.artwork-actions>.scale-control{box-sizing:border-box;background:0 0;border:0;flex:0 0 100%;order:3;align-items:center;gap:6px;width:100%;padding:2px 0;display:flex}.scale-control label{white-space:nowrap;flex-direction:row;flex:1;gap:8px;min-width:0;display:flex}.scale-control input{flex:1;width:0;min-width:0;height:40px}.scale-control output{text-align:right;font-variant-numeric:tabular-nums;min-width:4ch}.scale-control button{min-height:40px;margin:0;padding:4px 6px;font-size:12px}#artworksList p{margin:0;line-height:1.3}.artwork-actions{row-gap:2px}.artwork-actions details:has(.quiet-delete){width:auto}.artwork-actions summary{padding:8px 4px}@media (width<=600px){.artwork-actions{flex-direction:row;align-items:center}.artwork-actions>[role=switch]{flex:1}.artwork-actions>.scale-control{flex-basis:100%}}