:root{color:#26322c;font-synthesis:none;--green:#3d7a4a;--green-dark:#285d35;--paper:#fffef9;--border:#d5dbd3;--shadow:0 8px 28px #22382a21;--tap-size:42px;--tap-min-width:auto;--compact-tap-size:34px;--field-size:40px;background:#f3f0e8;font-family:Inter,Hiragino Sans,Yu Gothic,system-ui,sans-serif}*{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(--border);background:var(--paper);color:inherit;cursor:pointer;border-radius:10px;padding:8px 13px}button:hover{border-color:var(--green)}button:focus-visible,input:focus-visible,select:focus-visible,[tabindex="-1"]:focus-visible{outline-offset:2px;outline:3px solid #3d7a4a4d}button.primary,button.active{color:#fff;background:var(--green);border-color:var(--green)}button.danger{color:#9b2929;border-color:#d8aaaa}button:disabled{opacity:.45;cursor:not-allowed}.app-shell{grid-template-rows:auto 1fr auto;min-width:0;height:100%;display:grid}.app-header{color:#fff;z-index:5;background:linear-gradient(120deg,#346f42,#55945e);justify-content:space-between;align-items:center;gap:12px;min-width:0;min-height:64px;padding:8px 14px;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:#ffffff1f;border:1px solid #ffffff8c;border-radius:10px;justify-content:center;align-items:center;padding:8px 13px;font-size:min(1rem,20px);text-decoration:none;display:inline-flex}.header-guide:hover,.header-document:hover{border-color:#fff}.header-guide:focus-visible{outline-offset:2px;outline:3px solid #ffffff73}.workspace{grid-template:auto 1fr auto/minmax(0,1fr);min-width:0;min-height:0;display:grid;position:relative}.primary-tools{border-bottom:1px solid var(--border);z-index:3;background:#fffef9fa;align-items:center;gap:7px;padding:8px;display:flex;overflow-x:auto}.primary-tools button{flex:none}.color-tool{align-items:center;gap:5px;font-size:.8rem;display:flex}.color-tool input{width:var(--tap-size);height:var(--tap-size);background:0 0;border:0;padding:2px}.stitch-tool{text-align:left;background:#fff;align-items:center;gap:7px;min-width:170px;padding:4px 8px;display:flex}.stitch-tool>span:first-child{color:#222;flex:0 0 32px;width:32px;height:32px;display:block}.stitch-tool-name{white-space:nowrap;flex:1}.stitch-tool-chevron{color:#647269;font-size:1.1rem}.stitch-picker-backdrop{z-index:12;background:#1a271f52;place-items:end center;padding-top:24px;display:grid;position:fixed;inset:0}.stitch-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{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{min-width:0}.stitch-picker-heading>button{white-space:nowrap;flex:none}.stitch-picker-heading h2{margin:0;font-size:1.15rem}.stitch-picker-heading p{color:#67756e;margin:2px 0 0;font-size:.76rem}.stitch-category h3{color:#53605a;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(--green);box-shadow:inset 0 0 0 1px var(--green);background:#edf7ef}.stitch-option-symbol{color:#202622;width:min(92px,100%);height:50px;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:#718078;font-size:.68rem}.canvas-wrap{min-height:0;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:#526059;pointer-events:none;background:#ffffffe0;border-radius:12px;padding:5px 8px;font-size:.68rem;position:absolute;bottom:8px;right:8px}.selection-actions{z-index:8;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));border:1px solid var(--border);width:max-content;max-width:calc(100% - 20px);box-shadow:var(--shadow);background:#fffef9f7;border-radius:14px;gap:7px;padding:7px;display:flex;position:fixed;transform:translate(-50%)}.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{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}.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 h2{margin:0;font-size:1.15rem}.drawer-heading>button{white-space:nowrap}.drawer h3{color:#53605a;margin:18px 0 8px;font-size:.9rem}.document-list,.block-list{gap:8px;margin-top:12px;display:grid}.document{border:1px solid var(--border);border-radius:12px;grid-template-columns:1fr auto;gap:6px;padding:6px;display:grid}.document.active{border-color:var(--green);background:#f0f8f1}.document>button,.block-list div>button:first-child{text-align:left;background:0 0;border:0}.document small,.block-list small{color:#718078;display:block}.document>div{align-items:center;gap:4px;display:flex}.document>div button{min-height:var(--compact-tap-size);padding:5px 7px;font-size:.75rem}.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:#53605a;gap:4px;font-size:.8rem;display:grid}.size-inputs input,.export-controls select{min-height:var(--field-size);border:1px solid var(--border);background:#fff;border-radius:8px;width:100%;padding:5px 8px}.grid-controls>.danger{width:100%;margin-top:20px}.export-controls{gap:8px;display:grid}.export-controls h3{margin-bottom:0}.export-controls p{color:#67756e;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}.recommend{font-weight:700;color:#9b5b18!important}.busy,.toast{z-index:20;box-shadow:var(--shadow);border-radius:14px;position:fixed;left:50%;transform:translate(-50%)}.busy{background:#fff;align-items:center;gap:10px;padding:14px 18px;display:flex;top:50%}.toast{bottom:calc(78px + env(safe-area-inset-bottom));color:#fff;background:#283c30;width:max-content;max-width:calc(100% - 30px);padding:10px 14px}.spinner{border:3px solid #bed2c2;border-top-color:var(--green);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}footer{display:none}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (max-width:420px){.app-header{gap:8px;padding-inline:10px}.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{scrollbar-width:thin;gap:5px;padding:6px}.primary-tools>button{padding-inline:8px}.stitch-tool{min-width:136px}}@media (min-width:760px){.app-header{min-height:74px;padding-inline:24px}.app-header h1{font-size:1.35rem}.workspace{grid-template:auto 1fr/minmax(0,1fr) 96px}.primary-tools{grid-column:1/3;padding-inline:16px}.canvas-wrap{grid-area:2/1}.action-bar{border-left:1px solid var(--border);border-top:0;grid-template:repeat(4,auto) 1fr/minmax(0,1fr);grid-area:2/2;align-content:start;padding:12px 8px;display:grid}.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{bottom:18px}.stitch-picker-backdrop{place-items:center;padding:24px}.stitch-picker{border-radius:18px}.stitch-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:1180px){.workspace{grid-template:auto 1fr/minmax(0,1fr) 118px}.action-bar{padding-inline:12px}.gesture-hint{font-size:.76rem}}.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{opacity:.9;margin:0;font-size:.72rem}.app-document-name{opacity:.85;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:#1a271f61;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}
