:root{color:#26322c;font-synthesis:none;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--green:#3d7a4a;--green-dark:#285d35;--accent:#3d7a4a;--link:#285d35;--focus-ring:#285d35;--paper:#fffef9;--field:#fff;--border:#d5dbd3;--control-border:#818b84;--shadow:0 8px 28px #22382a21;--muted:#626f69;--label:#53605a;--ink:#202622;--selected:#edf7ef;--backdrop:#1a271f52;--swatch-border:#0003;--hint:#ffffffe0;--hint-text:#526059;--header-start:#346f42;--header-end:#43824d;--toast:#283c30;--danger:#9b2929;--danger-border:#c27676;--warning:#9b5b18;--notice-text:#5a4313;--notice:#fff6df;--notice-border:#ecd9a6;--thumbnail-frame:#e9ece6;--spinner-track:#bed2c2;--canvas-surround:#f7f4ed;--canvas-label-band:#f7f4edf5;--canvas-label:#53605a;--tap-size:42px;--tap-min-width:auto;--compact-tap-size:34px;--field-size:40px;--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);background:#f3f0e8;font-family:Inter,Hiragino Sans,Yu Gothic,system-ui,sans-serif}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;color:#e2e8e3;--accent:#7dbb88;--link:#8fcb9b;--focus-ring:#8fcb9b;--paper:#212824;--field:#29312c;--border:#3c4741;--control-border:#7a867f;--green:#428150;--shadow:0 8px 28px #00000073;--muted:#a5b2aa;--label:#b6c2ba;--ink:#e2e8e3;--selected:#24392b;--backdrop:#0000008c;--swatch-border:#ffffff4d;--hint:#212824e6;--hint-text:#b6c2ba;--header-start:#1f4228;--header-end:#2d5a36;--toast:#34503e;--danger:#f2a0a0;--danger-border:#b06464;--warning:#eeb36a;--notice-text:#f1dca6;--notice:#352c1a;--notice-border:#5e4b22;--thumbnail-frame:#2c3430;--spinner-track:#3c4741;--canvas-surround:#1c221f;--canvas-label-band:#1c221ff5;--canvas-label:#b6c2ba;background:#171c19}}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}.visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}button,input,select{font:inherit}button{min-width:var(--tap-min-width);min-height:var(--tap-size);border:1px solid var(--control-border);background:var(--paper);color:inherit;cursor:pointer;border-radius:10px;padding:8px 13px}@media (hover:hover){button:hover{border-color:var(--accent)}}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}button.primary,button.active{color:#fff;background:var(--green);border-color:var(--green)}button.danger{color:var(--danger);border-color:var(--danger-border)}button:disabled{opacity:.45;cursor:not-allowed}.app-shell{grid-template-rows:auto 1fr auto;min-width:0;height:100%;display:grid}.app-header{min-width:0;min-height:64px;padding:8px max(14px, var(--safe-right)) 8px max(14px, var(--safe-left));color:#fff;background:linear-gradient(120deg, var(--header-start), var(--header-end));z-index:5;justify-content:space-between;align-items:center;gap:12px;display:flex;box-shadow:0 2px 12px #00000029}.app-title{flex:auto;min-width:0}.app-header h1{letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap;max-width:100%;margin:0;font-size:1.1rem;overflow:hidden}.header-actions{flex:0 auto;align-items:center;gap:7px;min-width:0;display:flex}.header-guide,.header-document{min-height:var(--tap-size);color:#fff;background:#0000001a;border:1px solid #ffffffbf;border-radius:10px;justify-content:center;align-items:center;padding:8px 13px;font-size:min(1rem,20px);text-decoration:none;display:inline-flex}@media (hover:hover){.header-guide:hover,.header-document:hover{border-color:#fff}}.header-guide:focus-visible,.header-document:focus-visible{outline-offset:2px;outline:3px solid #fff}.workspace{grid-template:auto auto minmax(0,1fr) auto auto/minmax(0,1fr);min-width:0;min-height:0;display:grid;position:relative}.primary-tools{padding:8px max(8px, var(--safe-right)) 8px max(8px, var(--safe-left));background:var(--paper);border-bottom:1px solid var(--border);z-index:3;align-items:center;gap:7px;display:flex;overflow-x:auto}.primary-tools button{flex:none}.color-tool{background:var(--field);align-items:center;gap:6px;padding:4px 6px 4px 9px;font-size:.8rem;display:flex}.color-tool-swatch{border:1px solid var(--swatch-border);border-radius:7px;width:30px;height:30px;display:block}.stitch-tool{text-align:left;background:var(--field);align-items:center;gap:7px;min-width:170px;padding:4px 8px;display:flex}.stitch-tool>span:first-child{width:32px;height:32px;color:var(--ink);flex:0 0 32px;display:block}.stitch-tool-name{white-space:nowrap;flex:1}.stitch-tool-chevron{color:var(--muted);font-size:1.1rem}.stitch-picker-backdrop,.color-picker-backdrop{z-index:12;background:var(--backdrop);place-items:end center;padding-top:24px;display:grid;position:fixed;inset:0}.stitch-picker,.color-picker{width:min(100%,760px);max-height:min(82vh,760px);max-height:min(82dvh,760px);padding:14px max(14px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));background:var(--paper);border-radius:18px 18px 0 0;overflow:auto;box-shadow:0 -12px 40px #14261b3d}.stitch-picker-heading,.color-picker-heading{z-index:2;background:var(--paper);justify-content:space-between;align-items:center;gap:12px;margin:-14px 0 8px;padding:14px 0 9px;display:flex;position:sticky;top:-14px}.stitch-picker-heading>div,.color-picker-heading>div{min-width:0}.stitch-picker-heading>button,.color-picker-heading>button{white-space:nowrap;flex:none}.stitch-picker-heading h2,.color-picker-heading h2{margin:0;font-size:1.15rem}.stitch-picker-heading p,.color-picker-heading p{color:var(--muted);margin:2px 0 0;font-size:.76rem}.stitch-category h3,.color-picker h3{color:var(--label);margin:15px 0 7px;font-size:.86rem}.stitch-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;display:grid}.stitch-option{text-align:center;grid-template-rows:50px auto auto;place-items:center;gap:3px;min-width:0;min-height:104px;padding:7px 4px;display:grid}.stitch-option.selected{border-color:var(--accent);background:var(--selected);box-shadow:inset 0 0 0 1px var(--accent)}.stitch-option-symbol{width:min(92px,100%);height:50px;color:var(--ink);display:block}.stitch-option-symbol svg{stroke-width:2.5px}.stitch-option-symbol svg>*{vector-effect:non-scaling-stroke}.stitch-option-name{overflow-wrap:anywhere;max-width:100%;font-size:.78rem;line-height:1.25}.stitch-option small{color:var(--muted);font-size:.68rem}.color-picker{width:min(100%,480px)}.used-color-grid{grid-template-columns:repeat(auto-fill, minmax(max(44px, var(--tap-size)), 1fr));gap:8px;display:grid}.used-color{width:100%;min-width:max(44px, var(--tap-size));min-height:max(44px, var(--tap-size));aspect-ratio:1;border:1px solid var(--swatch-border);border-radius:10px;padding:0}@media (hover:hover){.used-color:hover{border-color:var(--accent)}}.used-color.selected{box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--accent)}.color-picker-note{color:var(--muted);margin:0;font-size:.8rem}.used-color-grid+.color-picker-note{margin-top:8px}.color-picker-custom{min-height:max(44px, var(--tap-size));align-items:center;gap:10px;font-size:.9rem;display:flex}.color-picker-custom input{width:max(44px, var(--tap-size));height:max(44px, var(--tap-size));border:1px solid var(--control-border);background:var(--field);border-radius:6px;flex:none;padding:2px}.color-picker-custom code{color:var(--muted);font-size:.8rem}.canvas-wrap{min-height:0;margin-left:var(--safe-left);margin-right:var(--safe-right);position:relative;overflow:hidden}.board-canvas{touch-action:none;-webkit-user-select:none;user-select:none;cursor:crosshair;width:100%;height:100%;display:block}.board-canvas.mode-erase{cursor:cell}.gesture-hint{color:var(--hint-text);background:var(--hint);pointer-events:none;border-radius:12px;padding:5px 8px;font-size:.68rem;position:absolute;bottom:8px;right:8px}.gesture-hint.is-hidden{opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s linear .6s}.selection-actions{z-index:3;border:1px solid var(--border);background:var(--paper);max-width:calc(100% - 20px);box-shadow:var(--shadow);border-radius:14px;flex-wrap:wrap;grid-row:4;justify-content:center;justify-self:center;gap:7px;margin:7px 0;padding:7px;display:flex}.selection-actions button{white-space:nowrap;font-size:min(1rem,20px)}.action-bar{min-width:0;padding:8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));background:var(--paper);border-top:1px solid var(--border);z-index:3;flex-wrap:wrap;gap:8px;display:flex}.action-bar button{white-space:nowrap;padding-inline:8px;font-weight:700}.action-bar>button{flex:1 0 0;min-width:max-content}.history-tools.grid-panel-open{display:none}.history-tools{flex:none;gap:6px;margin-left:auto;display:flex}.history-tools button{min-width:var(--tap-size);justify-content:center;align-items:center;gap:4px;padding-inline:0;display:flex}.history-icon{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:1.3em;height:1.3em}.history-label{display:none}.primary-tools{grid-row:1}.backup-reminder{grid-row:2}.canvas-wrap{grid-row:3}.action-bar{grid-row:5}.backup-reminder{min-width:0;padding:6px max(10px, env(safe-area-inset-right)) 6px max(10px, env(safe-area-inset-left));color:var(--notice-text);background:var(--notice);border-bottom:1px solid var(--notice-border);flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.82rem;display:flex}.backup-reminder p{flex:14em;margin:0;line-height:1.4}.backup-reminder-actions{gap:6px;margin-left:auto;display:flex}.backup-reminder-actions button{min-height:var(--compact-tap-size);white-space:nowrap;padding:4px 12px}.drawer{z-index:10;max-height:min(72vh,650px);overscroll-behavior:contain;max-height:min(72dvh,650px);padding:14px max(14px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));background:var(--paper);border-radius:18px 18px 0 0;position:fixed;inset:auto 0 0;overflow:auto;box-shadow:0 -12px 40px #14261b38}.drawer-heading{background:var(--paper);z-index:2;justify-content:space-between;align-items:center;margin:-14px -2px 12px;padding:14px 2px 8px;display:flex;position:sticky;top:-14px}.drawer-heading .history-tools{border:0;flex-direction:row;margin:0;padding:0}.drawer-heading h2{margin:0;font-size:1.15rem}.drawer-heading>button{white-space:nowrap}.drawer h3{color:var(--label);margin:18px 0 8px;font-size:.9rem}.document-list,.block-list{gap:8px;margin-top:12px;display:grid}.document-list{margin-bottom:0;padding:0;list-style:none}.documents-note{margin:14px 2px 0;font-size:.85rem}.documents-note a{color:var(--link)}.document{border:1px solid var(--border);border-radius:12px;grid-template-columns:auto minmax(0,1fr);gap:6px;min-width:0;padding:6px;display:grid}.document-select{min-width:var(--compact-tap-size);cursor:pointer;grid-row:span 2;place-items:center;display:grid}.document-select input{width:22px;height:22px;accent-color:var(--accent);cursor:pointer;margin:0}.document-selection{bottom:calc(-20px - env(safe-area-inset-bottom));z-index:1;padding:10px 2px calc(20px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--paper);grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;margin-top:12px;display:grid;position:sticky}.document-selection p{margin:0;font-size:.85rem}.document.active{border-color:var(--accent);background:var(--selected)}.document>button,.block-list div>button:first-child{text-align:left;background:0 0;border:0}.document small,.block-list small{color:var(--muted);display:block}.document-open{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-width:0;padding:4px;display:grid}.document-thumbnail-frame{border:1px solid var(--border);background:var(--thumbnail-frame);border-radius:8px;width:64px;height:64px;display:block;overflow:hidden}.document-thumbnail{object-fit:contain;width:100%;height:100%;image-rendering:pixelated;display:block}.document-thumbnail.downscaled{image-rendering:auto}.document-text{gap:2px;min-width:0;display:grid}.document-name{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.document-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.document-actions button{min-width:0;min-height:var(--compact-tap-size);padding:5px 7px;font-size:.8rem}.block-list div{border:1px solid var(--border);border-radius:12px;grid-template-columns:1fr auto;gap:6px;padding:5px;display:grid}.button-grid{grid-template-columns:repeat(2,1fr);gap:7px;display:grid}.size-inputs{grid-template-columns:1fr 1fr auto;align-items:end;gap:8px;display:grid}.size-inputs label,.export-controls label{color:var(--label);gap:4px;font-size:.8rem;display:grid}.size-inputs input,.export-controls select{min-height:var(--field-size);border:1px solid var(--control-border);width:100%;color:inherit;background:var(--field);border-radius:8px;padding:5px 8px}.grid-controls>.danger{width:100%;margin-top:20px}.background-presets{grid-template-columns:repeat(3,1fr);gap:7px;display:grid}.background-preset{justify-content:center;align-items:center;gap:8px;display:flex}.background-preset[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600}.background-swatch{border:1px solid var(--swatch-border);border-radius:50%;flex:none;width:18px;height:18px}.background-custom{margin-top:6px}.export-controls{gap:8px;display:grid}.export-controls h3{margin-bottom:0}.export-controls p{color:var(--muted);margin:0;font-size:.8rem}.export-controls label:has(input[type=range]){grid-template-columns:1fr auto}.export-controls label:has(input[type=range]) input{grid-column:1/2;width:100%}.export-controls output{grid-area:2/2}.export-controls .button-grid{grid-template-columns:1fr}.recommend{font-weight:700;color:var(--warning)!important}.busy,.toast{z-index:20;box-shadow:var(--shadow);border-radius:14px;position:fixed;left:50%;transform:translate(-50%)}.busy{background:var(--paper);align-items:center;gap:10px;padding:14px 18px;display:flex;top:50%}.toast{bottom:calc(78px + env(safe-area-inset-bottom));color:#fff;background:var(--toast);width:max-content;max-width:calc(100% - 30px);padding:10px 14px}.toast-action{color:#fff;background:0 0;border-color:#ffffffbf;margin:8px 0 0 auto;font-weight:700;display:block}.spinner{border:3px solid var(--spinner-track);border-top-color:var(--accent);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading{place-items:center;width:100%;height:100%;display:grid}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.gesture-hint.is-hidden{transition:none}}@media (max-width:759px){.app-header{padding-left:max(10px, var(--safe-left));padding-right:max(10px, var(--safe-right));gap:8px}.app-header h1{font-size:1rem}.header-actions{gap:5px}.header-guide,.header-document{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:96px;padding-inline:9px;overflow:hidden}.primary-tools{padding:6px max(6px, var(--safe-right)) 6px max(6px, var(--safe-left));scrollbar-width:thin;gap:5px}.primary-tools>button{padding-inline:8px}.primary-tools>.stitch-tool{flex:170px;min-width:58px}.stitch-tool-name{text-overflow:ellipsis;min-width:0;overflow:hidden}.stitch-tool-chevron{display:none}}@media (min-width:760px) and (min-height:501px){.app-header{min-height:74px;padding-left:max(24px, var(--safe-left));padding-right:max(24px, var(--safe-right))}.app-header h1{font-size:1.35rem}.workspace{grid-template:auto auto minmax(0,1fr) auto/minmax(0,1fr) max-content}.primary-tools,.backup-reminder{padding-left:max(16px, var(--safe-left));padding-right:max(16px, var(--safe-right));grid-column:1/3}.canvas-wrap{grid-area:3/1;margin-right:0}.action-bar{min-width:calc(6rem + var(--safe-right));border-left:1px solid var(--border);min-height:0;padding:12px calc(8px + var(--safe-right)) 12px 8px;border-top:0;grid-template:repeat(4,auto) 1fr/minmax(0,1fr);grid-area:3/2/5;align-content:start;display:grid;overflow-y:auto}.action-bar>button{min-width:0}.history-tools{border-top:1px solid var(--border);flex-direction:column;margin:6px 0 0;padding-top:12px}.history-tools button{padding-inline:4px;font-size:.8rem}.history-label{display:inline}.drawer{border-radius:18px 0 0 18px;width:390px;max-height:none;inset:74px 0 0 auto;box-shadow:-12px 0 40px #14261b33}.toast{bottom:24px}.selection-actions{margin-bottom:max(7px, env(safe-area-inset-bottom));grid-area:4/1}.stitch-picker-backdrop,.color-picker-backdrop{place-items:center;padding:24px}.stitch-picker,.color-picker{border-radius:18px}.stitch-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:1180px) and (min-height:501px){.action-bar{min-width:calc(7.375rem + var(--safe-right));padding-left:12px;padding-right:calc(12px + var(--safe-right))}.gesture-hint{font-size:.76rem}}.paste-actions{grid-row:2;align-items:center;font-size:.82rem}.workspace:has(.paste-actions){grid-template-rows:auto auto auto minmax(0,1fr) auto auto}.workspace:has(.paste-actions) .backup-reminder{grid-row:3}.workspace:has(.paste-actions) .canvas-wrap{grid-row:4}.workspace:has(.paste-actions) .selection-actions:not(.paste-actions){grid-row:5}.workspace:has(.paste-actions) .action-bar{grid-row:6}@media (min-width:760px) and (min-height:501px){.paste-actions{grid-column:1/3}.workspace:has(.paste-actions){grid-template-rows:auto auto auto minmax(0,1fr) auto}.workspace:has(.paste-actions) .action-bar{grid-row:4/6}}@media (orientation:landscape) and (max-height:500px){.drawer{border-radius:18px 0 0 18px;width:min(390px,50vw);max-height:none;inset:64px 0 0 auto;box-shadow:-12px 0 40px #14261b33}}.app-heading-row{flex-wrap:wrap;align-items:baseline;column-gap:10px;min-width:0;display:flex}.app-tagline,.app-document-name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.app-tagline{margin:0;font-size:.72rem}.app-document-name{margin:2px 0 0;font-size:.76rem}@media (max-width:420px){.app-tagline{font-size:.66rem}.app-document-name{font-size:.68rem}}.share-dialog-backdrop{z-index:30;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));background:var(--backdrop);place-items:center;display:grid;position:fixed;inset:0}.share-dialog{border:1px solid var(--border);background:var(--paper);width:min(100%,420px);box-shadow:var(--shadow);border-radius:18px;padding:20px}.share-dialog h2{overflow-wrap:anywhere;margin:0 0 8px;font-size:1.05rem;line-height:1.5}.share-dialog p{margin:0 0 16px;font-size:.9rem;line-height:1.6}.share-dialog-actions{justify-content:flex-end;gap:8px;display:flex}.share-dialog-actions button{white-space:nowrap}