:root{color:#24221f;font-synthesis:none;text-rendering:optimizelegibility;background:#ece9e3;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Noto Sans JP,Noto Sans KR,PingFang TC,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{overscroll-behavior:none;min-height:100dvh}button,select{font:inherit;-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}.app-shell{background:#ece9e3;grid-template-rows:auto minmax(0,1fr);min-height:100dvh;display:grid}.topbar{min-height:64px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:#f8f6f1f0;border-bottom:1px solid #24221f14;justify-content:space-between;align-items:flex-end;gap:16px;display:flex}.topbar h1,.topbar p{margin:0}.topbar h1{font-size:17px;font-weight:650;line-height:1.2}.eyebrow{color:#7a746b;letter-spacing:.14em;font-size:10px;margin-bottom:3px!important}.locale-picker select{color:#39352f;background:#fffdf9;border:1px solid #d7d2c8;border-radius:10px;max-width:144px;min-height:36px;padding:0 28px 0 10px}.editor-shell{grid-template-rows:minmax(0,1fr) auto;min-height:0;display:grid}.viewport-frame{isolation:isolate;background:radial-gradient(circle at 50% 26%,#ffffffb8,#0000 37%),linear-gradient(#e9e5de 0%,#dfdbd3 100%);min-height:0;position:relative;overflow:hidden}.page-viewport{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.page-viewport .konvajs-content,.page-viewport canvas{touch-action:none!important}.viewport-hud{z-index:5;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:8px;display:flex;position:absolute;inset:12px 12px auto}.viewport-hud__status,.viewport-fit-button,.viewport-history-button,.viewport-gesture-hint{-webkit-backdrop-filter:blur(12px);background:#fffdf9e0;border:1px solid #37312a14;box-shadow:0 5px 18px #2d251a0f}.viewport-hud__status{color:#6b655c;border-radius:10px;gap:2px;min-width:0;max-width:min(62%,260px);padding:7px 9px;display:grid}.viewport-hud__status strong{color:#39342e;letter-spacing:.04em;font-size:10px;font-weight:700}.viewport-hud__status span{text-overflow:ellipsis;white-space:nowrap;font-size:10px;line-height:1.25;overflow:hidden}.viewport-hud__actions{pointer-events:auto;align-items:center;gap:5px;display:flex}.viewport-history-button{color:#3f3a33;cursor:pointer;border-radius:10px;place-items:center;width:34px;height:34px;padding:0;font-size:18px;font-weight:650;line-height:1;display:grid}.viewport-history-button:disabled{opacity:.38;cursor:default}.viewport-history-button:not(:disabled):active{transform:scale(.96)}.viewport-fit-button{color:#3f3a33;pointer-events:auto;cursor:pointer;border-radius:10px;flex:none;min-height:34px;padding:0 10px;font-size:11px;font-weight:650}.viewport-fit-button:active{transform:scale(.97)}.viewport-gesture-hint{z-index:5;color:#756e64;text-align:center;white-space:nowrap;pointer-events:none;border-radius:999px;max-width:calc(100% - 28px);padding:6px 10px;font-size:10px;line-height:1.25;position:absolute;inset:auto auto 12px 50%;transform:translate(-50%)}.tool-dock{padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:#faf8f4fa;border-top:1px solid #24221f14;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;display:grid}.tool-dock button{color:#625d55;background:0 0;border:0;border-radius:12px;align-content:center;place-items:center;gap:3px;min-width:0;min-height:52px;font-size:11px;line-height:1.2;display:grid}.tool-dock button.is-active{color:#2f2b26;background:#eee7db}.tool-dock button:disabled{opacity:.42}.tool-icon{place-items:center;height:21px;font-size:18px;line-height:1;display:grid}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=420px){.viewport-hud{inset-inline:8px}.viewport-hud__status{max-width:46%}.viewport-fit-button{padding-inline:8px;font-size:10px}.viewport-gesture-hint{bottom:8px}}@media (width>=760px){.tool-dock{border:1px solid #24221f14;border-radius:18px;width:min(560px,100% - 24px);margin:0 auto 14px;box-shadow:0 10px 30px #2d251a14}.viewport-hud{inset-inline:max(18px,50% - 360px)}}@media (prefers-reduced-motion:reduce){.viewport-fit-button:active{transform:none}}.paper-brush-panel{z-index:6;-webkit-backdrop-filter:blur(14px);background:#fffdf9f0;border:1px solid #37312a17;border-radius:14px;grid-template-columns:auto minmax(0,1fr) minmax(138px,28%) minmax(118px,18%) auto;align-items:center;gap:8px;padding:8px;display:grid;position:absolute;inset:auto 12px 44px;box-shadow:0 6px 22px #2d251a14}.paper-tool-mode{background:#f3efe8;border:1px solid #d7d2c8;border-radius:10px;align-items:center;gap:2px;padding:2px;display:inline-flex}.paper-tool-mode button{color:#71695f;white-space:nowrap;background:0 0;border:0;border-radius:7px;min-height:28px;padding:0 8px;font-size:9px;font-weight:650}.paper-tool-mode button.is-active{color:#2f2b26;background:#fffdf9;box-shadow:0 1px 3px #2d251a1a}.paper-brush-panel__paper{gap:1px;min-width:0;display:grid}.paper-brush-panel__paper>span,.paper-brush-panel__paper small,.paper-brush-panel__size span{color:#766f65;font-size:9px;line-height:1.25}.paper-brush-panel__paper strong{color:#35312c;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:650;line-height:1.25;overflow:hidden}.paper-brush-panel__paper small.is-ready{color:#56715a}.paper-brush-panel select{color:#39352f;background:#fffdf9;border:1px solid #d7d2c8;border-radius:10px;width:100%;min-width:0;height:34px;padding:0 28px 0 9px;font-size:10px}.paper-brush-panel select:disabled{opacity:.5}.paper-brush-panel__size{gap:3px;min-width:0;display:grid}.paper-brush-panel__size span{justify-content:space-between;gap:5px;display:flex}.paper-brush-panel__size strong{color:#48423a;font-weight:700}.paper-brush-panel__size input[type=range]{accent-color:#6e665b;width:100%;min-width:0}.paper-brush-panel__actions{justify-content:flex-end;align-items:stretch;gap:5px;display:flex}.paper-brush-panel__actions button{color:#514b43;white-space:nowrap;background:#fffdf9;border:1px solid #d7d2c8;border-radius:10px;min-height:34px;padding:0 9px;font-size:9px;font-weight:650}.paper-brush-panel__actions button:not(:disabled):active{background:#eee7db}.paper-brush-panel__actions button:disabled{opacity:.42}.paper-brush-panel__clear{color:#514b43;background:#fffdf9;border:1px solid #d7d2c8;border-radius:10px;min-height:34px;padding:0 10px;font-size:10px;font-weight:650}.paper-brush-panel__clear:disabled{opacity:.42}@media (width<=620px){.paper-brush-panel{grid-template-columns:minmax(0,1fr) minmax(128px,44%) auto;inset-inline:8px}.paper-tool-mode{grid-column:1/-1;justify-self:start}.paper-brush-panel__size{grid-column:1/3}.paper-brush-panel__actions{grid-column:1/-1;justify-content:stretch}.paper-brush-panel__actions button{flex:1 1 0}.viewport-gesture-hint{bottom:198px}}@media (width<=390px){.paper-brush-panel{grid-template-columns:minmax(0,1fr) minmax(116px,46%)}.paper-tool-mode,.paper-brush-panel__size,.paper-brush-panel__actions{grid-column:1/-1}.paper-brush-panel__actions button{padding-inline:6px;font-size:8px}.viewport-gesture-hint{bottom:196px}}@media (width>=760px){.paper-brush-panel{width:min(720px,100% - 36px);margin-inline:auto}}.persistence-status{color:#7a746b}.persistence-status--saved,.persistence-status--restored,.persistence-status--ready{color:#5f735f}.persistence-status--error,.persistence-status--recovery-error,.persistence-status--unavailable{color:#9a5d4e}.p0-qa-toggle{z-index:50;color:#2f2b26;background:#fffdf9f5;border:1px solid #24221f29;border-radius:11px;min-width:42px;min-height:36px;font-size:11px;font-weight:750;position:fixed;inset-block-start:calc(76px + env(safe-area-inset-top));inset-inline-end:10px;box-shadow:0 8px 24px #2d251a1f}.p0-qa-panel{z-index:50;color:#35312c;-webkit-backdrop-filter:blur(18px);background:#fffdf9f7;border:1px solid #24221f24;border-radius:14px;width:min(360px,100vw - 20px);max-height:min(72dvh,680px);padding:10px;font-size:11px;position:fixed;inset-block-start:calc(76px + env(safe-area-inset-top));inset-inline-end:10px;overflow:auto;box-shadow:0 14px 40px #2d251a2e}.p0-qa-panel__header,.p0-qa-panel__actions,.p0-qa-runtime>div,.p0-qa-check{align-items:center;display:flex}.p0-qa-panel__header{justify-content:space-between;gap:10px;margin-bottom:9px}.p0-qa-panel__header>div{gap:1px;min-width:0;display:grid}.p0-qa-panel__header strong{font-size:12px}.p0-qa-panel__header span,.p0-qa-panel__note,.p0-qa-check small{color:#756f66;font-size:9px;line-height:1.45}.p0-qa-panel__header button{color:#655e55;background:#f1ece4;border:0;border-radius:9px;width:30px;height:30px;font-size:18px;line-height:1}.p0-qa-panel__actions{flex-wrap:wrap;gap:5px;margin-bottom:9px}.p0-qa-panel__actions button{color:#514b43;background:#fffdf9;border:1px solid #d7d2c8;border-radius:9px;min-height:31px;padding:0 8px;font-size:9px;font-weight:700}.p0-qa-panel button:disabled{opacity:.45}.p0-qa-runtime{background:#f4f0e9;border-radius:10px;gap:3px;margin:0 0 10px;padding:8px;display:grid}.p0-qa-runtime>div{justify-content:space-between;gap:10px}.p0-qa-runtime dt{color:#746d63}.p0-qa-runtime dd{text-align:end;margin:0;font-weight:650}.p0-qa-checks{gap:5px;margin-bottom:10px;display:grid}.p0-qa-checks__summary{font-size:10px;font-weight:700}.p0-qa-check{background:#f4f0e9;border-radius:9px;grid-template-columns:auto minmax(0,1fr);gap:1px 6px;min-width:0;padding:6px 7px;display:grid}.p0-qa-check strong{letter-spacing:.04em;grid-row:1/3;align-self:start;min-width:31px;font-size:8px}.p0-qa-check span{font-size:10px;font-weight:650}.p0-qa-check--pass strong{color:#55705a}.p0-qa-check--warn strong{color:#8b6b39}.p0-qa-check--fail strong{color:#9a5548}.p0-qa-manual{border:1px solid #ddd7cd;border-radius:10px;gap:6px;margin:0;padding:8px;display:grid}.p0-qa-manual legend{color:#514b43;padding-inline:4px;font-size:10px;font-weight:700}.p0-qa-manual label{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:7px;line-height:1.35;display:grid}.p0-qa-manual input{margin:1px 0 0}.p0-qa-panel__note{margin:8px 1px 0}.p0-qa-panel__note code{color:#514b43;font-size:9px}@media (width<=620px){.p0-qa-panel{width:auto;max-height:min(48dvh,430px);inset-block-start:auto;inset-block-end:calc(74px + env(safe-area-inset-bottom));inset-inline:8px}.p0-qa-toggle{inset-block-start:auto;inset-block-end:calc(78px + env(safe-area-inset-bottom));inset-inline-end:8px}}.paper-brush-panel.is-inactive{opacity:.72}.ink-panel{z-index:6;-webkit-backdrop-filter:blur(14px);background:#fffdf9f0;border:1px solid #37312a17;border-radius:14px;grid-template-columns:auto auto auto minmax(120px,1fr) minmax(120px,1fr) auto;align-items:center;gap:8px;padding:8px;display:grid;position:absolute;inset:auto 12px 44px;box-shadow:0 6px 22px #2d251a14}.ink-mode,.ink-tool-mode{background:#f3efe8;border:1px solid #d7d2c8;border-radius:10px;align-items:center;gap:2px;padding:2px;display:inline-flex}.ink-mode button,.ink-tool-mode button{color:#71695f;white-space:nowrap;background:0 0;border:0;border-radius:7px;min-height:28px;padding:0 8px;font-size:9px;font-weight:650}.ink-mode button.is-active,.ink-tool-mode button.is-active{color:#2f2b26;background:#fffdf9;box-shadow:0 1px 3px #2d251a1a}.ink-panel__color,.ink-panel__range{gap:3px;min-width:0;display:grid}.ink-panel__color span,.ink-panel__range span,.ink-panel__status{color:#766f65;font-size:9px;line-height:1.25}.ink-panel__range span{justify-content:space-between;gap:5px;display:flex}.ink-panel__range strong{color:#48423a;font-weight:700}.ink-panel__range input[type=range]{accent-color:#6e665b;width:100%;min-width:0}.ink-panel__color input[type=color]{background:#fffdf9;border:1px solid #d7d2c8;border-radius:9px;width:42px;height:32px;padding:3px}.ink-panel__status{text-align:right;white-space:nowrap;min-width:92px}.ink-panel__eraser-size{grid-column:span 3}@media (width<=720px){.ink-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;inset-inline:8px}.ink-mode{grid-column:1/-1;justify-self:start}.ink-tool-mode{justify-self:start}.ink-panel__range{grid-column:span 1}.ink-panel__status{text-align:left;grid-column:1/-1}.ink-panel__eraser-size{grid-column:1/-1}.ink-panel+.viewport-gesture-hint{bottom:178px}}@media (width<=420px){.ink-panel{grid-template-columns:auto minmax(0,1fr)}.ink-mode{grid-column:1/-1}.ink-tool-mode,.ink-panel__color{align-self:end}.ink-panel__range{grid-column:1/-1}.ink-panel+.viewport-gesture-hint{bottom:220px}}