:root{--bg: #fbf6f0;--surface: #fffdfa;--surface-elev: #ffffff;--ink: #3b2a2a;--ink-muted: #7a6a6a;--ink-faint: #b3a4a4;--blush: #f4c7cb;--rose: #e8a6b0;--peach: #f7d9b6;--sand: #e9d8b6;--mint: #c9e3d0;--sky: #cde0ee;--lilac: #dccae6;--mauve: #b89bc6;--primary: #c58a95;--primary-deep: #a86d7a;--primary-ink: #ffffff;--line: rgba(120, 90, 90, .12);--line-strong: rgba(120, 90, 90, .22);--focus: #b89bc6;--grad-hero: linear-gradient( 135deg, #f7d9b6 0%, #f4c7cb 35%, #dccae6 70%, #cde0ee 100% );--grad-primary: linear-gradient(135deg, #e8a6b0, #c58a95);--r-sm: 8px;--r-md: 14px;--r-lg: 22px;--r-xl: 32px;--r-pill: 999px;--shadow-sm: 0 2px 6px rgba(180, 140, 140, .1);--shadow-md: 0 8px 24px rgba(180, 140, 140, .14);--shadow-lg: 0 18px 48px rgba(180, 140, 140, .18);--font-serif: "Cormorant Garamond", "Georgia", serif;--font-script: "Parisienne", "Brush Script MT", cursive;--font-sans: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", monospace;--t-fast: .15s;--t-base: .22s;--ease: cubic-bezier(.2, .7, .2, 1)}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(60% 40% at 10% 0%,rgba(244,199,203,.45),transparent 70%),radial-gradient(50% 40% at 95% 10%,rgba(220,202,230,.4),transparent 70%),radial-gradient(60% 50% at 80% 100%,rgba(205,224,238,.45),transparent 70%),radial-gradient(50% 40% at 0% 90%,rgba(247,217,182,.4),transparent 70%);background-attachment:fixed}h1,h2,h3{font-family:var(--font-serif);font-weight:600;letter-spacing:.01em;margin:0;color:var(--ink)}h1{font-size:clamp(2rem,4vw + 1rem,3.25rem);line-height:1.05}h2{font-size:clamp(1.5rem,2vw + 1rem,2.25rem);line-height:1.15}h3{font-size:1.25rem}.script{font-family:var(--font-script);font-weight:400;color:var(--primary-deep)}p{margin:0 0 1rem;color:var(--ink)}.muted{color:var(--ink-muted)}a{color:var(--primary-deep);text-decoration:none;border-bottom:1px dotted var(--primary)}a:hover{color:var(--primary)}button{font-family:inherit;font-size:inherit;cursor:pointer}input,select,textarea{font-family:inherit;font-size:inherit;color:var(--ink)}:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}::selection{background:var(--blush);color:var(--ink)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.55rem 1.25rem;border-radius:var(--r-pill);border:1px solid transparent;background:var(--surface-elev);color:var(--ink);font-weight:600;letter-spacing:.01em;box-shadow:var(--shadow-sm);transition:transform var(--t-fast) var(--ease),box-shadow var(--t-base) var(--ease),background var(--t-base) var(--ease),color var(--t-base) var(--ease);text-decoration:none}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}.btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}.btn-primary{background:var(--grad-primary);color:var(--primary-ink);border-color:transparent}.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}.btn-ghost{background:transparent;color:var(--ink);box-shadow:none;min-height:36px;padding:.3rem .7rem}.btn-ghost:hover:not(:disabled){background:#fff9;box-shadow:none}.btn-danger{background:#d98a8a;color:#fff}.btn-sm{min-height:36px;padding:.35rem .9rem;font-size:.9rem}.btn-icon{width:44px;height:44px;padding:0;border-radius:var(--r-pill)}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);padding:1.25rem;position:relative;overflow:hidden}.card-hover{transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad-hero);opacity:.7}.input,.select,.textarea{width:100%;min-height:44px;padding:.55rem .9rem;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface-elev);color:var(--ink);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--mauve);box-shadow:0 0 0 3px #b89bc640}.field{display:flex;flex-direction:column;gap:.4rem}.field-label{font-size:.85rem;font-weight:600;color:var(--ink-muted);letter-spacing:.04em;text-transform:uppercase}.field-hint{font-size:.8rem;color:var(--ink-muted)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:36px;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:var(--r-pill);background:var(--grad-hero);border:1px solid var(--line)}input[type=range]::-moz-range-track{height:8px;border-radius:var(--r-pill);background:var(--grad-hero);border:1px solid var(--line)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--surface-elev);border:2px solid var(--primary);box-shadow:var(--shadow-sm);margin-top:-8px;cursor:pointer}input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--surface-elev);border:2px solid var(--primary);box-shadow:var(--shadow-sm);cursor:pointer}.container{max-width:1200px;margin:0 auto;padding:1.25rem}@media(min-width:900px){.container{padding:2rem}}.stack{display:flex;flex-direction:column}.row{display:flex;align-items:center}.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}.grow{flex:1}.wrap{flex-wrap:wrap}.app-header{position:sticky;top:0;z-index:40;-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);background:#fbf6f0c7;border-bottom:1px solid var(--line)}.app-header-inner{max-width:1200px;margin:0 auto;padding:.65rem 1.25rem;display:flex;align-items:center;gap:1rem}.brand{font-family:var(--font-script);font-size:1.9rem;line-height:1;color:var(--primary-deep);text-decoration:none;position:relative;padding-bottom:4px;white-space:nowrap}.brand:after{content:"";position:absolute;left:4px;right:4px;bottom:0;height:2px;border-radius:2px;background:var(--grad-hero);opacity:.9}.nav-spacer{flex:1}.nav{display:flex;gap:.25rem;align-items:center}.nav-link{border:none;background:transparent;color:var(--ink);padding:.5rem .9rem;border-radius:var(--r-pill);font-weight:600;text-decoration:none;transition:background var(--t-fast) var(--ease)}.nav-link:hover,.nav-link.active{background:#ffffffb3;color:var(--primary-deep)}.page-title{margin:.25rem 0 .5rem}.page-title .script{display:block;font-size:clamp(2.5rem,5vw + 1rem,4rem);line-height:1;margin-bottom:-.4rem}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.2rem .65rem;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--line);font-size:.78rem;font-weight:600;color:var(--ink-muted)}.empty{border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);padding:2.5rem 1.5rem;text-align:center;background:#ffffff80}.library-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}@media(min-width:640px){.library-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:900px){.library-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1200px){.library-grid{grid-template-columns:repeat(4,1fr)}}.library-card{padding:0;display:flex;flex-direction:column}.library-card-fresh{position:relative;isolation:isolate;animation:fresh-card-pop .6s var(--ease, ease) both}.library-card-fresh .fresh-glow{position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;z-index:-1;border-radius:calc(var(--r-lg, 18px) + 6px);padding:3px;background:conic-gradient(from 0deg,var(--blush),var(--peach),var(--sand),var(--mint),var(--sky),var(--lilac),var(--mauve),var(--rose),var(--blush));filter:blur(10px) saturate(1.1);opacity:.95;animation:fresh-swirl 6s linear infinite,fresh-fade 6s ease-out forwards;pointer-events:none}.library-card-fresh .fresh-glow:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:inherit;filter:blur(22px);opacity:.6}@keyframes fresh-swirl{to{transform:rotate(1turn)}}@keyframes fresh-fade{0%{opacity:0}12%{opacity:1}75%{opacity:.9}to{opacity:0}}@keyframes fresh-card-pop{0%{transform:scale(.96);box-shadow:0 0 #0000}60%{transform:scale(1.02)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.library-card-fresh,.library-card-fresh .fresh-glow{animation:none}.library-card-fresh .fresh-glow{opacity:.7}}.library-thumb{aspect-ratio:1 / 1;width:100%;object-fit:cover;display:block;background:var(--surface)}.library-thumb-link{position:relative;display:block}.starter-ribbon{position:absolute;top:.75rem;left:.75rem;display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .65rem;font-family:var(--font-sans);font-size:.72rem;font-weight:700;letter-spacing:.04em;color:#5b3a45;background:linear-gradient(135deg,#f7d9b6,#f4c7cb 55%,#dccae6);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-pill);box-shadow:0 4px 10px #5b3a452e;pointer-events:none;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.starter-ribbon svg{color:var(--mauve)}.library-body{padding:1rem 1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}.library-title{font-family:var(--font-serif);font-size:1.25rem;font-weight:600}.progress{height:8px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}.progress>span{display:block;height:100%;background:var(--grad-primary);border-radius:var(--r-pill);transition:width var(--t-base) var(--ease)}.library-actions{display:flex;gap:.5rem;flex-wrap:wrap}.dropzone{border:2px dashed var(--line-strong);border-radius:var(--r-lg);padding:2.5rem 1.5rem;text-align:center;background:#ffffff80;transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease);cursor:pointer}.dropzone.drag-over{border-color:var(--mauve);background:#dccae640}.creator{display:grid;gap:1.25rem;grid-template-columns:1fr}@media(min-width:900px){.creator{grid-template-columns:1fr 1fr}}.creator-preview{position:sticky;top:76px;align-self:start}.swatch{width:22px;height:22px;border-radius:6px;border:1px solid var(--line-strong);display:inline-block;flex-shrink:0}.thread-table{width:100%;border-collapse:collapse}.thread-table th,.thread-table td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line);font-size:.92rem}.thread-table th{font-weight:600;color:var(--ink-muted);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}.thread-table tr.thread-row-done{text-decoration:line-through;text-decoration-color:#a86d7ab3;text-decoration-thickness:2px;color:var(--ink-muted);opacity:.65}.thread-table tr.thread-row-done .swatch{filter:grayscale(.6)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#3b2a2a59;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;animation:fade-in var(--t-base) var(--ease)}.modal{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);max-width:420px;width:100%;padding:1.5rem}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.pattern-page{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:var(--bg)}.pattern-toolbar{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:#fbf6f0f2;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-wrap:wrap}.pattern-title{flex:1 1 auto;min-width:0}.pattern-title-name{font-family:var(--font-serif);font-size:1.1rem;font-weight:600;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hide-sm{display:inline}@media(max-width:720px){.pattern-toolbar{gap:.4rem;padding:.5rem .75rem}.pattern-title{order:-1;flex:1 1 100%;display:flex;align-items:baseline;gap:.5rem}.pattern-title-name{font-size:1rem}.pattern-title .muted{font-size:.72rem}.hide-sm{display:none}}.pattern-stage{flex:1;position:relative;overflow:hidden;background:radial-gradient(60% 50% at 50% 50%,rgba(255,255,255,.7),transparent 70%),var(--bg)}.pattern-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;touch-action:none}.legend{background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px #b48c8c1f;max-height:45vh;overflow-y:auto;padding:.75rem 1rem 1.25rem;transition:max-height .28s var(--ease, ease),padding .28s var(--ease, ease)}.legend-handle{display:block;width:56px;height:4px;padding:10px 0;margin:-.4rem auto .4rem;border:none;cursor:pointer;background:var(--line-strong);background-clip:content-box;border-radius:999px;box-sizing:content-box;transition:background-color .2s ease,transform .2s ease}.legend-handle:hover{background-color:var(--mauve, var(--line-strong))}.legend-handle:active{transform:scaleX(.92)}.legend-row{display:grid;grid-template-columns:28px 28px 1fr auto;align-items:center;gap:.6rem;padding:.4rem .25rem;border-bottom:1px solid var(--line);cursor:pointer;border-radius:var(--r-sm);transition:opacity .35s var(--ease, ease),filter .35s var(--ease, ease),background .2s var(--ease, ease)}.legend-row:hover{background:#ffffffb3}.legend-row.active{background:#f4c7cb40}.legend-row.done{opacity:.4;filter:grayscale(.5);text-decoration:line-through;text-decoration-color:#a86d7a99}.legend-row.done:hover{opacity:.7}.legend-symbol{font-family:var(--font-mono);font-weight:700;text-align:center;font-size:1.05rem}.legend-meta{display:flex;flex-direction:column;font-size:.85rem;line-height:1.2}.legend-meta small{color:var(--ink-muted)}.legend-count{font-variant-numeric:tabular-nums;color:var(--ink-muted);font-size:.85rem}.pattern-body{display:flex;flex-direction:column;flex:1;min-height:0}@media(min-width:900px){.pattern-body{display:grid;grid-template-columns:1fr 320px;flex:1;min-height:0}.pattern-stage{height:100%}.legend{max-height:none;border-top:none;border-left:1px solid var(--line);box-shadow:-8px 0 24px #b48c8c14}.legend.collapsed{max-height:none;overflow:visible}.legend-handle{display:none}}@media(max-width:899px){.legend.collapsed{max-height:32px;overflow:hidden;padding-top:.5rem;padding-bottom:.5rem}}.seg{display:inline-flex;background:var(--surface);padding:3px;border-radius:var(--r-pill);border:1px solid var(--line)}.seg button{border:none;background:transparent;padding:.35rem .85rem;border-radius:var(--r-pill);color:var(--ink-muted);font-weight:600;font-size:.85rem}.seg button.active{background:var(--grad-primary);color:var(--primary-ink)}.chips{display:flex;gap:.5rem;flex-wrap:wrap}.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem .35rem .35rem;border-radius:var(--r-pill);border:1.5px solid transparent;background:var(--surface);cursor:pointer;font-size:.85rem;transition:border-color var(--t-fast) var(--ease)}.chip:hover{border-color:var(--line-strong)}.chip.active{border-color:var(--primary);background:#f4c7cb33}.chip .swatch{width:18px;height:18px}.crop-area{position:relative;width:100%;aspect-ratio:4 / 5;background:var(--bg);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}.crop-handles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}.crop-handle{position:absolute;width:18px;height:18px;margin-left:-9px;margin-top:-9px;background:var(--surface-elev);border:2px solid var(--primary);border-radius:50%;box-shadow:0 2px 6px #0000002e;pointer-events:auto;touch-action:none}.crop-handle:hover{transform:scale(1.15)}.crop-handle[data-corner=t],.crop-handle[data-corner=b],.crop-handle[data-corner=l],.crop-handle[data-corner=r]{background:var(--primary)}.preview-frame{background:var(--surface-elev);border:1px solid var(--line);border-radius:var(--r-lg);padding:.75rem;box-shadow:var(--shadow-md)}.preview-canvas-wrap{position:relative;width:100%;background:linear-gradient(45deg,#f5efe7 25%,transparent 25%),linear-gradient(-45deg,#f5efe7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f5efe7 75%),linear-gradient(-45deg,transparent 75%,#f5efe7 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;border-radius:var(--r-md);overflow:hidden}.preview-canvas-wrap canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.install-prompt{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0) + 16px);transform:translate(-50%);z-index:1000;display:flex;align-items:center;gap:.85rem;padding:.75rem .9rem;width:min(420px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg, 18px);box-shadow:0 14px 40px #a06e7838,0 2px 6px #a06e7814;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:install-prompt-in .32s cubic-bezier(.2,.8,.2,1)}.install-prompt.closing{animation:install-prompt-out .2s ease forwards}.install-prompt:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,#f7d9b68c,#f4c7cb8c,#dccae68c);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}.install-prompt-icon{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#fff9;box-shadow:inset 0 0 0 1px #c58a9526}.install-prompt-body{flex:1 1 auto;min-width:0}.install-prompt-title{font-family:var(--font-serif);font-weight:600;font-size:1rem;line-height:1.15;color:var(--ink)}.install-prompt-text{font-size:.82rem;color:var(--ink-muted);margin-top:2px;line-height:1.35}.install-prompt-actions{display:flex;align-items:center;gap:.35rem;flex:0 0 auto}@keyframes install-prompt-in{0%{opacity:0;transform:translate(-50%,24px) scale(.96)}to{opacity:1;transform:translate(-50%) scale(1)}}@keyframes install-prompt-out{0%{opacity:1;transform:translate(-50%) scale(1)}to{opacity:0;transform:translate(-50%,12px) scale(.97)}}@media(max-width:480px){.install-prompt{flex-wrap:wrap;width:calc(100vw - 16px);bottom:calc(env(safe-area-inset-bottom,0) + 10px)}.install-prompt-actions{width:100%;justify-content:flex-end}}.library-card-create{position:relative;display:flex;align-items:stretch;text-decoration:none;color:inherit;border:1.5px dashed var(--line-strong);background:radial-gradient(120% 90% at 50% 0%,rgba(220,202,230,.25),transparent 60%),#ffffff8c;min-height:260px;overflow:hidden;transition:transform .2s var(--ease, ease),box-shadow .2s var(--ease, ease),border-color .2s ease,background .2s ease}.library-card-create:hover{border-color:var(--mauve);background:radial-gradient(120% 90% at 50% 0%,rgba(220,202,230,.45),transparent 60%),#ffffffbf}.library-card-create:focus-visible{outline:2px solid var(--mauve);outline-offset:3px}.library-create-inner{margin:auto;text-align:center;padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}.library-create-title{margin:.25rem 0 0;font-family:var(--font-serif);font-weight:600;color:var(--ink)}.library-create-text{margin:0;max-width:22ch;font-size:.9rem}.library-create-cta{margin-top:.5rem}