:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f4f1ec;--panel:#fff;--control:#faf8f5;--field:#fff;--text:#1d1b19;--muted:#6c665f;--border:#ddd6cc;--border-hover:var(--muted);--accent:#c2410c;--on-accent:#fff;--focus:#c2410c;--slider:var(--accent);--stage:#ebe6de;--format-edge:#bdb4a7;--zoom-button:#ffffffeb;--link:var(--accent);--scrollbar:#cfc7bb;--invite:#fdf3ec;--tour-dim:#140e0894;--tour-ring:var(--accent);--fig-photo:#ddd3c6;--fig-hill:#b3a493;--fig-tile:#d6b495;color:var(--text);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#1b1916;--panel:#24211d;--control:#2d2925;--field:#1f1c19;--text:#e6e0d6;--muted:#aaa196;--border:#3d3832;--border-hover:#6b635a;--focus:#f08a4b;--slider:#e0702f;--stage:#141210;--format-edge:#ffffff24;--zoom-button:#2d2925eb;--link:#f08a4b;--scrollbar:#4d473f;--invite:#2f2620;--tour-dim:#000000ad;--tour-ring:#f08a4b;--fig-photo:#4a433b;--fig-hill:#6f665a;--fig-tile:#9a7a5e}.collage-svg{--grout:#fff}*{box-sizing:border-box}body{background:var(--bg);margin:0}body.no-scroll{overflow:hidden}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.app{flex-direction:column;min-height:100vh;display:flex}.app-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;display:flex}@media (width<=800px){.app-header{padding:12px 16px}}.app-title{color:var(--text);white-space:nowrap;margin:0;font-size:20px;font-weight:700;text-decoration:none}.header-actions{align-items:center;gap:8px;min-width:0;display:flex}.help-menu{position:relative}.help-menu-button{min-height:40px;font:inherit;border:1px solid var(--border);background:var(--control);color:var(--text);cursor:pointer;white-space:nowrap;border-radius:10px;align-items:center;gap:6px;padding:0 12px;font-size:14px;display:inline-flex}.help-menu-button:hover{border-color:var(--border-hover)}.help-menu-icon{background:var(--accent);width:18px;height:18px;color:var(--on-accent);border-radius:50%;place-items:center;font-size:12px;font-weight:700;display:inline-grid}.help-menu-list{z-index:9;border:1px solid var(--border);background:var(--panel);border-radius:10px;min-width:200px;margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 8px 24px #00000029}.help-menu-list[hidden]{display:none}.help-menu-list a,.help-menu-list button{width:100%;font:inherit;text-align:left;color:var(--text);cursor:pointer;background:0 0;border:0;border-radius:6px;padding:10px 12px;font-size:14px;text-decoration:none;display:block}.help-menu-list a:hover,.help-menu-list button:hover{background:var(--control)}.help-menu-list [aria-current=page]{font-weight:600}@media (width<=420px){.app-title{font-size:18px}.theme-option{padding:0 10px}.theme-label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.theme-toggle{border:1px solid var(--border);background:var(--control);border-radius:10px;flex-shrink:0;padding:2px;display:inline-flex}.theme-option{min-height:36px;font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:0 12px;font-size:14px}.theme-option:hover{color:var(--text)}.theme-option[aria-pressed=true]{background:var(--panel);color:var(--text);box-shadow:0 0 0 1px var(--border);font-weight:600}.app-main{flex:1;grid-template-columns:300px 1fr;align-items:start;gap:24px;padding:24px;display:grid}@media (width<=800px){.app-main{grid-template-columns:minmax(0,1fr);padding:16px}}.app-main[hidden]{display:none}.controls{background:var(--panel);border:1px solid var(--border);border-radius:12px;flex-direction:column;align-self:start;gap:18px;padding:20px;display:flex}@media (width>=801px) and (height>=500px){.app{--header-h:65px}.app-header{z-index:5;height:var(--header-h);background:var(--bg);padding-block:0;position:sticky;top:0}.controls{top:calc(var(--header-h) + 24px);max-height:calc(100vh - var(--header-h) - 48px);max-height:calc(100dvh - var(--header-h) - 48px);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;scroll-padding-block:16px;position:sticky;overflow-y:auto}}.control-group{flex-direction:column;gap:14px;display:flex}.control-group+.control-group{border-top:1px solid var(--border);padding-top:18px}.group-title{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;font-size:11px;font-weight:700}.help-field{flex-direction:column;gap:8px;display:flex;position:relative}.help-field[hidden]{display:none}.help-button{z-index:1;width:26px;height:26px;font:inherit;border:1px solid var(--border);background:var(--control);color:var(--muted);cursor:pointer;border-radius:50%;place-items:center;padding:0;font-size:13px;font-weight:700;line-height:1;display:grid;position:absolute;top:-5px;right:0}.help-button:before{content:"";position:absolute;inset:-6px -8px -2px}.help-button:hover{border-color:var(--border-hover);color:var(--text)}.help-button[aria-expanded=true]{border-color:var(--accent);background:var(--accent);color:var(--on-accent)}.help-text{border:1px solid var(--border);background:var(--control);color:var(--text);border-radius:8px;padding:10px 12px;font-size:13px;line-height:1.45}.help-text[hidden]{display:none}.help-text p{margin:0 0 6px}.help-more{color:var(--link)}.tour-invite{border:1px solid var(--accent);background:var(--invite);border-radius:10px;flex-direction:column;gap:10px;padding:12px;display:flex}.tour-invite p{margin:0;font-size:14px;line-height:1.4}@media (width<=800px){.controls{gap:14px}.control-group{gap:12px}.control-group+.control-group{padding-top:14px}.tour-invite{flex-flow:wrap;align-items:center;gap:8px 12px;padding:10px 12px}.tour-invite p{flex:180px;font-size:13px}}[data-tour],.zoom-viewport{scroll-margin:calc(var(--header-h,0px) + 16px) 16px 16px}.tour-backdrop{z-index:30;position:fixed;inset:0}.tour-spotlight{z-index:31;box-shadow:0 0 0 2px #fff, 0 0 0 5px var(--tour-ring), 0 0 0 9999px var(--tour-dim);pointer-events:none;border-radius:10px;transition:top .2s,left .2s,width .2s,height .2s;position:fixed}.tour-spotlight[hidden]{display:none}@media (prefers-reduced-motion:reduce){.tour-spotlight{transition:none}}.tour-popover{z-index:32;border:1px solid var(--border);background:var(--panel);width:min(340px,100vw - 24px);color:var(--text);border-radius:12px;flex-direction:column;gap:12px;padding:16px;display:flex;position:fixed;box-shadow:0 12px 32px #0000004d}.tour-count{color:var(--muted);margin:0;font-size:12px;font-weight:600}.tour-title{margin:2px 0 4px;font-size:17px}.tour-text{margin:0;font-size:14px;line-height:1.45}.tour-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.tour-nav{gap:8px;display:flex}.help-page{width:100%;max-width:980px;color:var(--text);flex-direction:column;gap:40px;margin:0 auto;padding:32px 24px 48px;display:flex}@media (width<=800px){.help-page{gap:32px;padding:20px 16px 40px}}.help-page h1{margin:0 0 8px;font-size:32px}.help-page [tabindex="-1"]:focus{outline:none}.help-page h1,.help-concept{scroll-margin-top:calc(var(--header-h,0px) + 16px)}.help-lead{max-width:640px;color:var(--muted);margin:0 0 16px;font-size:17px;line-height:1.5}.help-page .button{text-decoration:none}.help-section h2{margin:0 0 16px;font-size:22px}.help-steps{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0;padding:0;list-style:none;display:grid}.help-step,.help-concept{border:1px solid var(--border);background:var(--panel);border-radius:12px;flex-direction:column;gap:10px;padding:14px;display:flex}.help-concept:target{border-color:var(--accent)}.help-step h3,.help-concept h3{margin:0 0 4px;font-size:16px;line-height:1.3}.help-step h3{align-items:baseline;gap:8px;display:flex}.help-step p,.help-concept p{margin:0;font-size:14px;line-height:1.5}.help-step-number{background:var(--accent);width:22px;height:22px;color:var(--on-accent);border-radius:50%;flex:none;place-items:center;font-size:12px;display:inline-grid}@media (width<=600px){.help-steps{grid-template-columns:minmax(0,1fr)}.help-step{flex-direction:row;align-items:flex-start}.help-step>.help-figure{flex:0 0 104px}}.help-concepts{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;display:grid}.help-concept p.help-example{color:var(--muted);font-size:13px}.help-figure{background:var(--stage);border-radius:8px;padding:8px}.help-figure svg{width:100%;height:auto;max-height:110px;display:block}.help-figure.small svg{max-height:104px}.help-footer{margin:0}.fig-photo{fill:var(--fig-photo)}.fig-hill{fill:var(--fig-hill)}.fig-tile{fill:var(--fig-tile)}.fig-accent{fill:var(--accent)}.fig-panel{fill:var(--panel);stroke:var(--border);stroke-width:1px}.fig-word{letter-spacing:1px;fill:var(--text);font:800 13px system-ui,sans-serif}.fig-caption{fill:var(--muted);font:600 10px system-ui,sans-serif}.fig-line{fill:none;stroke:var(--text);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round}.fig-crop{fill:none;stroke:#fff;stroke-width:2px;stroke-dasharray:4 3}.fig-swatch-a{fill:#f1dcc3}.fig-swatch-b{fill:#f6c3ab}.fig-swatch-c{fill:#b9d7f0}.field,.uploader{flex-direction:column;gap:8px;display:flex}.field[hidden]{display:none}.field-label{color:var(--muted);font-size:13px;font-weight:600}.field input[type=range]{accent-color:var(--slider)}.text-input{border:1px solid var(--border);background:var(--field);color:var(--text);text-transform:uppercase;border-radius:8px;width:100%;min-width:0;padding:8px 12px;font-size:22px;font-weight:700}.select-input{font:inherit;border:1px solid var(--border);background:var(--field);color:var(--text);border-radius:8px;width:100%;min-width:0;min-height:40px;padding:8px 10px;font-size:15px}.background-row{align-items:stretch;gap:8px;display:flex}.color-input{border:1px solid var(--border);background:var(--field);cursor:pointer;border-radius:8px;flex:none;width:48px;min-height:40px;padding:3px}.button-row{flex-wrap:wrap;gap:8px;display:flex}.button{font:inherit;border:1px solid var(--border);background:var(--control);color:var(--text);cursor:pointer;border-radius:8px;align-items:center;padding:8px 14px;font-size:14px;display:inline-flex}.button:hover:not(:disabled){border-color:var(--border-hover)}.button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.button:disabled{opacity:.45;cursor:not-allowed}.button.compact{gap:6px;padding:6px 12px;font-size:13px}.hint{color:var(--muted);margin:0;font-size:12px}.preview{flex-direction:column;gap:12px;min-width:0;display:flex}.stats{color:var(--muted);flex-wrap:wrap;gap:6px 16px;min-height:18px;font-size:13px;display:flex}.preview-canvas{flex:1;justify-content:center;align-items:flex-start;min-height:260px;display:flex}.preview-canvas>.preview-empty{align-self:center}.collage-frame{flex-direction:column;gap:8px;width:100%;display:flex}.collage-frame.is-fullscreen{z-index:10;background:var(--bg);padding:12px;position:fixed;inset:0}.zoom{flex-direction:column;flex:1;gap:8px;min-height:0;display:flex;position:relative}.zoom-viewport{background:var(--stage);touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:zoom-in;border-radius:12px;height:clamp(260px,55vh,680px);min-height:96px;max-height:min(680px,75svh);position:relative;overflow:hidden}.zoom-viewport.is-zoomed{touch-action:none;cursor:grab}.is-fullscreen .zoom-viewport{flex:1;height:auto;max-height:none}.zoom-content{transform-origin:0 0;width:100%;height:100%;padding:8px}.zoom-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.zoom-controls{gap:6px;display:flex}.zoom-button{min-width:38px;height:38px;font:inherit;border:1px solid var(--border);background:var(--zoom-button);color:var(--text);cursor:pointer;border-radius:8px;font-size:18px;font-weight:600}.zoom-button.zoom-fit{padding:0 10px;font-size:14px}.zoom-button:disabled{opacity:.45;cursor:default}.collage-svg{width:100%;height:100%;display:block}.format-edge{fill:none;stroke:var(--format-edge);stroke-width:1px;vector-effect:non-scaling-stroke}.collage-svg image,.collage-svg .slot-hit{cursor:pointer}.lightbox{z-index:20;background:#000000e0;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:16px;display:flex;position:fixed;inset:0}.lightbox-image{object-fit:contain;border-radius:6px;max-width:100%;max-height:calc(100% - 64px)}.lightbox-bar{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;max-width:100%;display:flex}.lightbox-bar .button{white-space:nowrap;flex-shrink:0}.lightbox-error{color:#ffb4a8;text-align:center;margin:0;font-size:14px}.lightbox-name{text-align:center;color:#fff;text-overflow:ellipsis;white-space:nowrap;flex:100%;min-width:0;font-size:14px;overflow:hidden}.framing-editor{border:1px solid var(--border);background:var(--panel);width:min(720px,100%);height:100%;max-height:760px;color:var(--text);border-radius:12px;flex-direction:column;gap:10px;padding:12px;display:flex}.framing-title{color:var(--muted);text-align:center;margin:0;font-size:14px}.framing-stage{background:var(--stage);touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;border-radius:8px;flex:1;min-height:0;position:relative;overflow:hidden}.framing-stage:active{cursor:grabbing}.framing-stage img{pointer-events:none;max-width:none;position:absolute}.framing-context{opacity:.35}.framing-window{outline:2px solid #fff;position:absolute;overflow:hidden;box-shadow:0 0 0 1px #00000080}.framing-loading{color:var(--muted);place-items:center;display:grid;position:absolute;inset:0}.framing-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.framing-zoom,.framing-actions{align-items:center;gap:8px;display:flex}.framing-zoom .button{height:38px}.letter-base{fill:var(--grout)}.preview-empty{color:var(--muted)}.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}.swap-banner{border:1px solid var(--accent);background:var(--panel);color:var(--text);border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:8px 8px 8px 12px;font-size:14px;font-weight:600;display:flex}.swap-source rect{fill:none;vector-effect:non-scaling-stroke}.swap-source-halo{stroke:#0000008c;stroke-width:6px}.swap-source-line{stroke:#fff;stroke-width:3px;stroke-dasharray:8 5}.is-swapping .collage-svg image,.is-swapping .collage-svg .slot-hit{cursor:crosshair}.photo-picker{border:1px solid var(--border);background:var(--panel);width:min(720px,100%);max-height:100%;color:var(--text);border-radius:12px;flex-direction:column;gap:10px;padding:12px;display:flex}.picker-title{text-align:center;margin:0;font-size:16px}.picker-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;min-height:0;padding:3px;display:grid;overflow-y:auto}.picker-item{background:var(--stage);min-width:0;color:var(--text);font:inherit;cursor:pointer;border:2px solid #0000;border-radius:8px;flex-direction:column;gap:4px;padding:4px;display:flex;position:relative}.picker-item:hover{border-color:var(--border)}.picker-item.is-current{border-color:var(--accent)}.picker-item img{aspect-ratio:1;object-fit:cover;border-radius:5px;width:100%;display:block}.picker-name{text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.picker-badge{background:var(--accent);color:var(--on-accent);border-radius:999px;padding:2px 6px;font-size:11px;font-weight:700;position:absolute;top:8px;left:8px}.picker-bar{justify-content:flex-end;display:flex}.custom-shape-row{flex-wrap:wrap;align-items:center;gap:6px 10px;display:flex}.shape-dialog{z-index:20;background:#0009;padding:16px;display:flex;position:fixed;inset:0;overflow-y:auto}.shape-panel{border:1px solid var(--border);background:var(--panel);width:min(720px,100%);color:var(--text);border-radius:12px;flex-direction:column;gap:12px;margin:auto;padding:16px;display:flex}.shape-panel.is-dragging{outline:2px dashed var(--accent);outline-offset:-6px}.shape-title{margin:0;font-size:18px}.shape-intro{font-size:13px}.shape-previews{grid-template-columns:1fr 1fr;gap:12px;display:grid}.shape-figure{flex-direction:column;gap:6px;min-width:0;margin:0;display:flex}.shape-figure figcaption{color:var(--muted);text-align:center;font-size:12px}.shape-stage{aspect-ratio:1;border:1px solid var(--border);background:var(--stage);border-radius:8px;place-items:center;padding:8px;transition:opacity .12s;display:grid;overflow:hidden}.shape-stage.is-stale{opacity:.6}.shape-checker{background-color:#fff;background-image:conic-gradient(#e6e1da 25%, transparent 0 50%, #e6e1da 0 75%, transparent 0);background-size:16px 16px}.shape-stage canvas,.shape-stage svg{object-fit:contain;width:100%;max-width:100%;height:100%;max-height:100%;display:block}.shape-fill{fill:var(--accent)}.shape-drop{color:#6c665f;width:100%;height:100%;font:inherit;cursor:pointer;background:0 0;border:0;font-size:13px}.shape-empty{color:var(--muted);text-align:center;font-size:13px}.shape-controls{flex-wrap:wrap;align-items:flex-end;gap:12px 20px;display:flex}.shape-controls .field{flex:180px}.shape-check{cursor:pointer;align-items:center;gap:8px;min-height:40px;font-size:14px;display:inline-flex}.shape-check input{width:18px;height:18px;accent-color:var(--slider)}.shape-summary,.shape-problem{min-height:1.4em;margin:0;font-size:13px}.shape-problem{color:var(--accent);font-weight:600}.shape-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.shape-bar-end{gap:8px;margin-left:auto;display:flex}.shape-bar .button{min-height:40px}.zoom-content{position:relative}.text-layer{pointer-events:none;width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;inset:8px;overflow:visible}.text-overlay{pointer-events:auto;cursor:grab;touch-action:none;outline:none}.text-overlay.is-dragging{cursor:grabbing}.text-layer.is-passive .text-overlay{pointer-events:none}.text-overlay-hit{fill:#0000}.text-overlay-box{fill:none;stroke:var(--focus);stroke-width:2px;stroke-dasharray:6 4;vector-effect:non-scaling-stroke;pointer-events:none}.text-overlay:focus-visible .text-overlay-box{stroke-width:3px;stroke-dasharray:none}.text-overlays,.text-editor{flex-direction:column;gap:12px;display:flex}.text-editor{border:1px solid var(--border);background:var(--panel);border-radius:10px;padding:12px}.text-area{font:inherit;border:1px solid var(--border);background:var(--field);color:var(--text);resize:vertical;border-radius:8px;width:100%;min-width:0;padding:8px 10px;font-size:16px}.text-list{flex-wrap:wrap;gap:6px;display:flex}.text-chip{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font:inherit;border:1px solid var(--border);background:var(--control);color:var(--text);cursor:pointer;border-radius:999px;padding:6px 10px;font-size:13px;overflow:hidden}.text-chip[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600}.swatch-row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.swatch{border:1px solid var(--border-hover);cursor:pointer;border-radius:50%;width:26px;height:26px;padding:0}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--accent)}.swatch-row .color-input{width:40px;min-height:30px}@media (width<=800px){.swatch{width:34px;height:34px}.swatch-row{gap:10px}}.segmented{border:1px solid var(--border);background:var(--control);border-radius:10px;padding:2px;display:flex}.segmented button{min-height:36px;font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:1;padding:0 8px;font-size:14px}.segmented button:hover{color:var(--text)}.segmented button[aria-pressed=true]{background:var(--panel);color:var(--text);box-shadow:0 0 0 1px var(--border);font-weight:600}.text-selected-row{display:none}@media (width<=800px){.text-selected-row{display:flex}}.font-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.font-choice{border:1px solid var(--border);background:var(--control);min-height:48px;color:var(--text);font:inherit;cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px 8px;display:flex}.font-choice:hover{border-color:var(--border-hover)}.font-choice[aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.font-name{fill:currentColor;width:100%;max-width:132px;height:18px;display:block}.font-style{color:var(--muted);font-size:12px}.font-choice[aria-busy=true] .font-style{color:var(--accent)}