:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--active-color:#2563eb;--idle-icon-color:#9aa4b2;font-family:system-ui,sans-serif}body{color:#182231;background:#f4f6f9;margin:0}main{box-sizing:border-box;flex-direction:column;gap:12px;height:100dvh;padding:16px;display:flex}header{justify-content:space-between;align-items:baseline;gap:12px;display:flex}h1{margin:0;font-size:20px}.app-version{color:#68758a;vertical-align:middle;font-size:12px;font-weight:500}output#status{font-variant-numeric:tabular-nums;color:#55637a;font-size:13px}.debug-panel{background:#f8fafc;border:1px solid #dde3ea;border-radius:9px;padding:8px 12px;font-size:12px}.debug-panel summary{cursor:pointer;color:#55637a}.tool-status{font-variant-numeric:tabular-nums;margin:8px 0 4px}.debug-log{color:#55637a;white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border:1px solid #dde3ea;border-radius:6px;height:120px;margin:0 0 6px;padding:6px 8px;font-family:ui-monospace,monospace;font-size:11px;overflow-y:auto}.actions{flex-wrap:wrap;gap:8px;display:flex}button,.actions a{font:inherit;color:inherit;cursor:pointer;background:#fff;border:1px solid #dde3ea;border-radius:6px;padding:5px 11px}.actions a{text-decoration:none}button:disabled{opacity:.45;cursor:default}.segmented-control button[aria-pressed=true]{background:var(--active-color);border-color:var(--active-color);color:#fff}.canvas-stage{flex:1;min-height:0;position:relative}#ink{background-image:linear-gradient(#edf1f5 1px,#0000 1px),linear-gradient(90deg,#edf1f5 1px,#0000 1px);background-size:24px 24px;width:100%;height:100%;display:block}.floating-toolbar{z-index:2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);touch-action:none;-webkit-user-select:none;user-select:none;background:#ffffffeb;border:1px solid #fffc;border-radius:14px;flex-direction:row;align-items:center;gap:4px;padding:7px;display:flex;position:absolute;top:18px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #1822312e}.floating-toolbar.is-pen-near .tool-button{color:var(--idle-icon-color)}.floating-toolbar.is-pen-near .tool-button[aria-expanded=true]{background:#dde3ea}.tool-button{background:0 0;border:0;border-radius:9px;place-items:center;width:44px;height:44px;padding:0;display:grid}.tool-button:hover:not(:disabled):not([aria-expanded=true]){background:#edf1f5}.icon-pen{transform:scaleX(-1)}.tool-toggle .icon-pen{transition:transform .15s ease-out}.tool-toggle[data-tool=eraser] .icon-pen{transform:scaleX(-1)rotate(180deg)}.tool-button[aria-expanded=true]{background:var(--active-color);color:#fff}.tool-button:focus-visible{outline-offset:1px;outline:3px solid #0f766e47}.toolbar-divider{background:#dde3ea;width:1px;height:24px;margin:0 2px}.drag-handle{color:#8995a8;cursor:grab;touch-action:none;background:0 0;border:0;place-items:center;width:24px;height:44px;padding:0;display:grid}.drag-handle:active,.is-dragging .drag-handle{cursor:grabbing}.drag-handle span{font-family:Arial,sans-serif;font-size:20px;line-height:1}.icon{width:20px;height:20px;transition:color .12s ease-out;display:block;position:relative}.icon-glyph{font-family:Arial,sans-serif;font-size:28px;line-height:20px}.icon-gear{font-variant-emoji:text;font-size:26px}.icon-trash{font-variant-emoji:text;font-size:23px}.settings-panel{z-index:3;box-sizing:border-box;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fffffff5;border:1px solid #dde3ea;border-radius:16px;width:min(320px,100% - 32px);padding:18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 16px 44px #18223133}.settings-heading{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;display:flex}.settings-heading h2{margin:0;font-size:16px}.settings-heading div>span{color:#68758a;font-size:12px}#settings-close{color:#182231;background:0 0;border:0;border-radius:7px;flex:none;place-items:center;width:28px;height:28px;padding:0;font-size:22px;line-height:1;display:grid}#settings-close:hover{background:#edf1f5}.setting-row{border:0;border-top:1px solid #edf1f5;grid-template-columns:88px 1fr;align-items:center;gap:12px;margin:0;padding:12px 0;font-size:13px;display:grid}.setting-label{color:#55637a}.segmented-control{background:#edf1f5;border-radius:8px;grid-template-columns:1fr 1fr;gap:4px;padding:3px;display:grid}.segmented-control button{background:0 0;border:0;padding:5px 9px}.color-control{gap:10px;display:flex}.swatch{background:var(--swatch);border:1px solid #1822311f;border-radius:50%;width:26px;height:26px;padding:0}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--swatch);border-color:#0000}.swatch[data-color=\#1d4ed8]{--swatch:#1d4ed8}.swatch[data-color=\#15803d]{--swatch:#15803d}.swatch[data-color=\#b91c1c]{--swatch:#b91c1c}.swatch[data-color=\#182231]{--swatch:#182231}.width-control{grid-template-columns:repeat(3,1fr)}.range-control{grid-template-columns:1fr 38px;align-items:center;gap:8px;display:grid}.range-control input{width:100%;accent-color:var(--active-color)}.range-control output{color:#55637a;font-variant-numeric:tabular-nums;text-align:right}#dump-output{background:#fff;border:1px solid #dde3ea;border-radius:8px;max-height:220px;margin:0;padding:10px;font-size:12px;overflow:auto}#ink[data-tool=eraser]{cursor:crosshair}[hidden]{display:none!important}@media (width<=560px){main{padding:12px}.floating-toolbar{top:12px}.tool-button{width:42px;height:42px}.settings-panel{width:calc(100% - 24px)}}.pen-flip{z-index:1;color:#182231;opacity:.3;pointer-events:none;touch-action:none;-webkit-user-select:none;user-select:none;background:#fff;border:0;border-radius:9px;place-items:center;width:40px;height:40px;padding:0;font-family:Arial,sans-serif;font-size:28px;line-height:1;transition:left .18s cubic-bezier(.25,1,.5,1),top .18s cubic-bezier(.25,1,.5,1),transform .15s ease-out;display:grid;position:absolute;transform:translate(-50%,-50%)scaleX(-1)}.pen-flip.is-flipped{transform:translate(-50%,-50%)scaleX(-1)rotate(180deg)}.pen-flip-image{pointer-events:auto;place-items:center;width:1em;height:1em;display:grid;overflow:hidden}.pen-flip.is-erasing{pointer-events:none;transition:none}.pen-flip.is-erasing .pen-flip-image{pointer-events:none}