:root{--color-primary: #B8442E;--color-on-primary: #FFFFFF;--color-primary-container: #FBE9D6;--color-on-primary-container: #5A2014;--color-secondary: #3F5161;--color-on-secondary: #FFFFFF;--color-secondary-container: #E4E9EF;--color-on-secondary-container: #1A232C;--color-tertiary: #5A7A4E;--color-on-tertiary: #FFFFFF;--color-tertiary-container: #DDE8D6;--color-on-tertiary-container: #1F2E18;--color-error: #9B2C2C;--color-on-error: #FFFFFF;--color-error-container: #F7DCDC;--color-on-error-container: #5A0F0F;--color-background: #FAF7F2;--color-on-background: #0F0F0F;--color-surface: #FAF7F2;--color-surface-container-lowest: #FFFFFF;--color-surface-container-low: #F5F1EA;--color-surface-container: #EFE9DF;--color-surface-container-high: #E5DED1;--color-surface-container-highest: #D8D0C2;--color-on-surface: #0F0F0F;--color-on-surface-variant: #6B6358;--color-ink: #0F0F0F;--color-ink-soft: #1F1F1F;--color-outline: #C9C2B5;--color-outline-variant: #E5E1D8;--color-inverse-surface: #0F0F0F;--color-inverse-on-surface: #FAF7F2;--color-inverse-primary: #F4B89F;--font-display: "Fraunces", Georgia, serif;--font-sans: "Inter", system-ui, -apple-system, sans-serif;--rounded-none: 0px;--rounded-sm: .25rem;--rounded-DEFAULT: .375rem;--rounded-md: .5rem;--rounded-lg: .75rem;--rounded-xl: 1.25rem;--rounded-full: 9999px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 40px;--space-xxl: 64px;--space-gutter: 16px;--space-margin: 24px;--container-max: 1100px;--cell-min: 44px;--cell-target: 56px;--grid-gap: 2px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--color-background);color:var(--color-on-background);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit}button:disabled{cursor:not-allowed;opacity:.5}.app{min-height:100%;display:flex;flex-direction:column}.app-inner{width:100%;max-width:var(--container-max);margin:0 auto;padding:var(--space-lg) var(--space-lg) var(--space-xxl);display:grid;gap:var(--space-lg)}.masthead{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-outline-variant);padding-bottom:var(--space-md)}.masthead h1{font-family:var(--font-display);font-weight:500;font-size:44px;line-height:1;letter-spacing:-.02em;margin:0}.masthead .subtitle{font-size:13px;color:var(--color-on-surface-variant);letter-spacing:.08em;text-transform:uppercase;font-weight:600}.masthead-actions{display:flex;align-items:center;gap:var(--space-xs)}.masthead-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--rounded-DEFAULT);color:var(--color-ink);background:transparent;transition:background 80ms ease,opacity 80ms ease}.masthead-icon-btn:hover:not(:disabled){background:var(--color-surface-container)}.masthead-icon-btn:active:not(:disabled){background:var(--color-surface-container-high)}.masthead-icon-btn:disabled{opacity:.4;cursor:not-allowed}.masthead-divider{display:inline-block;width:1px;height:24px;background:var(--color-outline-variant);margin:0 var(--space-xs)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:var(--space-xl);align-items:start}@media (max-width: 880px){.workspace{grid-template-columns:1fr;gap:var(--space-lg)}}.panel{background:var(--color-surface-container-lowest);border-radius:var(--rounded-lg);padding:var(--space-lg);border:1px solid var(--color-outline-variant)}.panel-quiet{background:var(--color-surface-container-low);border-radius:var(--rounded-md);padding:var(--space-md)}.toolbar{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;margin-bottom:var(--space-lg)}.toolbar .toolbar-group{display:flex;align-items:center;gap:var(--space-xs)}.toolbar .toolbar-group+.toolbar-group{border-left:1px solid var(--color-outline-variant);padding-left:var(--space-md)}.toolbar .grow{flex:1}.segmented{display:inline-flex;padding:3px;background:var(--color-surface-container);border-radius:var(--rounded-DEFAULT);gap:2px}.segmented button{padding:6px 14px;border-radius:calc(var(--rounded-DEFAULT) - 1px);font-size:13px;font-weight:600;color:var(--color-on-surface-variant);transition:background 80ms ease,color 80ms ease}.segmented button:hover{color:var(--color-ink)}.segmented button[aria-pressed=true]{background:var(--color-surface-container-lowest);color:var(--color-ink);box-shadow:0 0 0 1px var(--color-outline-variant) inset}.btn-primary{background:var(--color-ink);color:var(--color-inverse-on-surface);border-radius:var(--rounded-DEFAULT);height:40px;padding:0 20px;font-size:13px;font-weight:600;letter-spacing:.01em;transition:background 80ms ease}.btn-primary:hover:not(:disabled){background:var(--color-ink-soft)}.btn-ghost{border-radius:var(--rounded-DEFAULT);height:40px;padding:0 14px;font-size:13px;font-weight:600;color:var(--color-on-surface);transition:background 80ms ease}.btn-ghost:hover:not(:disabled){background:var(--color-surface-container)}.btn-accent{background:var(--color-primary);color:var(--color-on-primary);border-radius:var(--rounded-DEFAULT);height:40px;padding:0 20px;font-size:13px;font-weight:600}.grid-column{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-md)}.grid-frame{--cell-size: clamp(var(--cell-min), 9vw, var(--cell-target));display:inline-grid;background:var(--color-outline-variant);border:1px solid var(--color-outline);border-radius:var(--rounded-md);gap:var(--grid-gap);padding:var(--grid-gap);user-select:none;-webkit-user-select:none;touch-action:manipulation}.cell{position:relative;width:var(--cell-size);height:var(--cell-size);background:var(--color-surface-container-lowest);display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:calc(var(--cell-size) * .52);font-weight:600;color:var(--color-ink);text-transform:uppercase;transition:background 60ms ease,color 60ms ease;cursor:pointer}.cell.block{background:var(--color-ink)}.cell.highlight{background:var(--color-primary-container)}.cell.active{background:var(--color-primary);color:var(--color-on-primary)}.cell.correct .letter{color:var(--color-tertiary)}.cell.wrong .letter{color:var(--color-error)}.cell.active.correct .letter,.cell.active.wrong .letter{color:var(--color-on-primary)}.cell .number{position:absolute;top:calc(var(--cell-size) * .06);left:calc(var(--cell-size) * .08);font-size:calc(var(--cell-size) * .2);font-weight:600;letter-spacing:0;color:var(--color-on-surface-variant);line-height:1}.cell.active .number{color:var(--color-on-primary);opacity:.85}.cell .letter{line-height:1}.slot-list-section+.slot-list-section{margin-top:var(--space-lg)}.slot-list-section h2{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-on-surface-variant);margin:0 0 var(--space-sm) 4px}.slot-list{display:flex;flex-direction:column;gap:2px}.slot-row{display:grid;grid-template-columns:28px 1fr auto;align-items:baseline;gap:var(--space-sm);padding:10px 12px;border-radius:var(--rounded-DEFAULT);text-align:left;width:100%;font-size:14px;color:var(--color-on-surface);transition:background 80ms ease,color 80ms ease}.slot-row:hover{background:var(--color-surface-container)}.slot-row[aria-current=true]{background:var(--color-primary-container);color:var(--color-on-primary-container)}.slot-row.filled{color:var(--color-on-surface-variant)}.slot-row.solved{color:var(--color-tertiary)}.slot-row.solved .preview{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--color-tertiary);opacity:.85}.slot-row .preview .letter-mark-wrong{color:var(--color-error)}.slot-row .preview .letter-mark-correct{color:var(--color-tertiary)}.slot-row[aria-current=true] .preview .letter-mark-wrong{color:var(--color-error)}.slot-row .num{font-weight:600;font-variant-numeric:tabular-nums}.slot-row .preview{font-family:var(--font-sans);font-weight:600;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-flex;gap:.3em}.slot-row .preview>span{display:inline-block;min-width:.7em;text-align:center}.slot-row .clue{font-family:var(--font-sans);font-weight:400;font-size:13px;line-height:1.35;color:inherit;white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.slot-row[aria-current=true] .clue{color:var(--color-on-primary-container)}.slot-row.solved .clue{color:var(--color-on-surface-variant)}.theme-strip{display:flex;align-items:baseline;gap:var(--space-md);padding:10px 14px;background:var(--color-surface-container-low);border:1px solid var(--color-outline-variant);border-radius:var(--rounded-md);margin-bottom:var(--space-md);flex-wrap:wrap}.theme-label{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-on-surface-variant)}.theme-title{font-family:var(--font-display);font-weight:500;font-size:18px;letter-spacing:-.005em;color:var(--color-ink)}.theme-explanation{font-size:13px;color:var(--color-on-surface-variant);flex:1 1 auto;min-width:0}.clues-banner{display:flex;align-items:center;gap:10px;font-size:12px;padding:10px 12px;margin:0 0 var(--space-md) 0;border-radius:var(--rounded-DEFAULT);font-weight:600;letter-spacing:.04em}.clues-banner.loading{background:var(--color-primary-container);color:var(--color-on-primary-container)}.clues-banner.muted{background:var(--color-surface-container);color:var(--color-on-surface-variant)}.clues-banner.error{background:var(--color-error-container);color:var(--color-on-error-container)}.clues-banner code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;background:#0000000d;padding:1px 4px;border-radius:3px}.dot-spinner{display:inline-flex;align-items:center;gap:3px}.dot-spinner:before,.dot-spinner:after,.dot-spinner{content:""}.dot-spinner{width:24px;height:6px;background:radial-gradient(circle 3px at 3px 3px,currentColor 0 99%,transparent 100%),radial-gradient(circle 3px at 12px 3px,currentColor 0 99%,transparent 100%),radial-gradient(circle 3px at 21px 3px,currentColor 0 99%,transparent 100%);background-repeat:no-repeat;animation:dot-pulse 1.2s ease-in-out infinite}@keyframes dot-pulse{0%,80%,to{opacity:.35}40%{opacity:1}}.slot-row .clue-skeleton{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--color-surface-container) 0%,var(--color-surface-container-high) 50%,var(--color-surface-container) 100%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;margin:4px 0}.slot-row[aria-current=true] .clue-skeleton{background:linear-gradient(90deg,#fff6,#ffffffb3,#fff6);background-size:200% 100%}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.slot-row .clue-missing{font-size:12px;font-style:italic;color:var(--color-on-surface-variant);opacity:.6}.mobile-only{display:none}.mobile-dock{flex-direction:column;width:100%}.active-clue-bar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:10px 8px;background:var(--color-primary-container);color:var(--color-on-primary-container);border-top:1px solid var(--color-outline-variant);border-bottom:1px solid var(--color-outline-variant)}.active-clue-nav{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:28px;line-height:1;font-weight:500;color:var(--color-on-primary-container);border-radius:var(--rounded-DEFAULT);background:transparent}.active-clue-nav:active{background:#00000014}.active-clue-body{display:flex;flex-direction:column;min-width:0;text-align:center;line-height:1.25}.active-clue-direction{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.7}.active-clue-text{font-size:15px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-wrap:break-word}.active-clue-text-loading{display:block;text-align:center;background:linear-gradient(90deg,var(--color-on-primary-container) 0%,rgba(255,255,255,.85) 50%,var(--color-on-primary-container) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:shimmer 1.6s linear infinite}.kbd{display:flex;flex-direction:column;gap:6px;padding:8px 4px max(8px,env(safe-area-inset-bottom)) 4px;background:var(--color-surface-container);user-select:none;-webkit-user-select:none;touch-action:manipulation}.kbd-row{display:flex;gap:4px;justify-content:center}.kbd-key{flex:1 1 0;min-width:0;height:44px;background:var(--color-surface-container-lowest);color:var(--color-ink);border-radius:var(--rounded-DEFAULT);font-family:var(--font-sans);font-size:17px;font-weight:500;border:1px solid var(--color-outline-variant);box-shadow:0 1px 0 var(--color-outline);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.kbd-key:active{background:var(--color-surface-container-high);transform:translateY(1px);box-shadow:none}.kbd-key-wide{flex:1.5 1 0;background:var(--color-surface-container);font-size:20px}@media (max-width: 720px){html,body,#root{overscroll-behavior:none}.app{min-height:100dvh;min-height:100vh;display:flex;flex-direction:column}.app-inner{padding:max(env(safe-area-inset-top),12px) 12px 12px;gap:12px;flex:1 1 auto;min-height:0}.masthead{padding-bottom:12px}.masthead h1{font-size:28px}.masthead .subtitle{display:none}.toolbar{margin-bottom:var(--space-sm);gap:var(--space-sm)}.toolbar .toolbar-group+.toolbar-group{padding-left:var(--space-sm)}.workspace{grid-template-columns:1fr;gap:var(--space-md);justify-items:center}.grid-column{width:100%;align-items:center}.grid-frame{--cell-size: calc( (100vw - 24px - var(--grid-gap) * (var(--puzzle-size, 5) + 1)) / var(--puzzle-size, 5) )}.desktop-only{display:none!important}.toolbar-group.mobile-only,.mobile-dock.mobile-only{display:flex}.mobile-dock{position:sticky;bottom:0;background:var(--color-background);box-shadow:0 -8px 24px #0000000d}.theme-strip{padding:6px 10px;gap:var(--space-sm);margin-bottom:var(--space-sm)}.theme-title{font-size:14px}.theme-explanation{font-size:11px}.banner{padding:var(--space-sm);font-size:13px}}@media (max-width: 360px){.kbd-key{font-size:15px}.active-clue-text{font-size:14px}}.toolbar .btn-icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--rounded-DEFAULT);color:var(--color-ink);background:transparent;transition:background 80ms ease}.toolbar .btn-icon:hover:not(:disabled){background:var(--color-surface-container)}.toolbar .btn-icon:active:not(:disabled){background:var(--color-surface-container-high)}.toolbar-group-right{margin-left:auto}.action-sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f0f0f73;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:100;animation:action-sheet-fade-in .12s ease-out}@keyframes action-sheet-fade-in{0%{opacity:0}to{opacity:1}}.action-sheet{width:100%;max-width:360px;background:#f5f1eaf5;border-radius:20px;padding:8px;box-shadow:0 16px 48px #00000040;display:flex;flex-direction:column;gap:6px;animation:action-sheet-pop .16s cubic-bezier(.2,.8,.2,1)}@keyframes action-sheet-pop{0%{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}.action-sheet-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--color-on-surface-variant);text-align:center;padding:8px 0 4px}.action-sheet-items{display:flex;flex-direction:column;gap:6px}.action-sheet-item,.action-sheet-cancel{width:100%;height:50px;border-radius:12px;font-family:var(--font-sans);font-size:16px;font-weight:500;color:var(--color-ink);background:var(--color-surface-container-lowest);transition:background 80ms ease;-webkit-tap-highlight-color:transparent}.action-sheet-item:hover:not(:disabled),.action-sheet-cancel:hover{background:var(--color-surface-container)}.action-sheet-item:active:not(:disabled),.action-sheet-cancel:active{background:var(--color-surface-container-high)}.action-sheet-item:disabled{color:var(--color-on-surface-variant);opacity:.5;cursor:not-allowed}.action-sheet-item.destructive{color:var(--color-error);font-weight:600}.action-sheet-cancel{font-weight:600;margin-top:8px;background:var(--color-surface-container)}.action-sheet-cancel:hover{background:var(--color-surface-container-high)}.slot-row .meta{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--color-on-surface-variant)}.slot-row[aria-current=true] .meta{color:var(--color-on-primary-container);opacity:.7}.banner-stack{position:relative;width:100%;height:0;z-index:50;pointer-events:none}.banner{position:absolute;left:0;right:0;top:0;border-radius:var(--rounded-md);padding:10px 14px;font-weight:600;font-size:13px;letter-spacing:.01em;display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);pointer-events:auto;box-shadow:0 12px 32px #0f0f0f2e;animation:banner-slide-in .18s cubic-bezier(.2,.8,.2,1)}@keyframes banner-slide-in{0%{transform:translateY(-12px);opacity:0}to{transform:translateY(0);opacity:1}}.banner-success{background:var(--color-tertiary);color:var(--color-on-tertiary)}.banner-error{background:var(--color-error);color:var(--color-on-error)}.banner-info{background:var(--color-ink);color:var(--color-inverse-on-surface)}.banner .close-btn{background:transparent;border-radius:var(--rounded-full);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:inherit;opacity:.7}.banner .close-btn:hover{opacity:1}.success-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f0f0f8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:110;animation:action-sheet-fade-in .16s ease-out}.success-card{width:100%;max-width:360px;background:var(--color-surface-container-lowest);border-radius:20px;padding:32px 24px 20px;box-shadow:0 24px 64px #0000004d;text-align:center;animation:action-sheet-pop .22s cubic-bezier(.2,.8,.2,1)}.success-eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--color-tertiary);margin-bottom:8px}.success-title{font-family:var(--font-display);font-weight:500;font-size:32px;line-height:1.05;letter-spacing:-.015em;color:var(--color-ink);margin:0 0 6px}.success-subtitle{font-size:12px;color:var(--color-on-surface-variant);font-variant-numeric:tabular-nums;letter-spacing:.04em;margin-bottom:24px}.success-actions{display:flex;flex-direction:column;gap:8px}.success-primary,.success-secondary{width:100%;height:48px;border-radius:12px;font-family:var(--font-sans);font-size:15px;font-weight:600;transition:background 80ms ease,color 80ms ease;-webkit-tap-highlight-color:transparent}.success-primary{background:var(--color-ink);color:var(--color-inverse-on-surface)}.success-primary:hover{background:var(--color-ink-soft)}.success-primary:active{background:var(--color-ink-soft);transform:translateY(1px)}.success-secondary{background:transparent;color:var(--color-on-surface-variant)}.success-secondary:hover{background:var(--color-surface-container);color:var(--color-ink)}.main-menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f0f0f73;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:24px;z-index:105;animation:action-sheet-fade-in .12s ease-out}.main-menu{width:100%;max-width:360px;background:var(--color-surface-container-lowest);border-radius:20px;padding:8px;box-shadow:0 20px 56px #00000047;animation:action-sheet-pop .2s cubic-bezier(.2,.8,.2,1)}.main-menu-profile{display:flex;align-items:center;gap:12px;padding:16px 14px 14px}.main-menu-avatar{width:44px;height:44px;border-radius:9999px;background:var(--color-ink);color:var(--color-inverse-on-surface);font-family:var(--font-display);font-weight:500;font-size:20px;display:inline-flex;align-items:center;justify-content:center;letter-spacing:0;flex:0 0 44px}.main-menu-profile-text{display:flex;flex-direction:column;gap:2px;min-width:0}.main-menu-profile-name{font-family:var(--font-sans);font-weight:600;font-size:16px;color:var(--color-ink)}.main-menu-profile-subtitle{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-on-surface-variant)}.main-menu-divider{height:1px;background:var(--color-outline-variant);margin:4px 0 8px}.main-menu-items{display:flex;flex-direction:column;gap:4px}.main-menu-item,.main-menu-close{width:100%;height:48px;border-radius:12px;font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--color-ink);background:transparent;text-align:left;padding:0 16px;transition:background 80ms ease;-webkit-tap-highlight-color:transparent}.main-menu-item.has-submenu{display:flex;align-items:center;justify-content:space-between;gap:12px}.main-menu-item-label{flex:1;text-align:left}.main-menu-item-chevron{display:inline-flex;color:var(--color-on-surface-variant)}.main-menu-submenu-header{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;min-height:40px}.main-menu-back{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;color:var(--color-ink);background:transparent;transition:background 80ms ease;-webkit-tap-highlight-color:transparent}.main-menu-back:hover{background:var(--color-surface-container)}.main-menu-back:active{background:var(--color-surface-container-high)}.main-menu-back-spacer{width:40px;height:40px}.main-menu-submenu-title{font-family:var(--font-sans);font-size:15px;font-weight:600;color:var(--color-ink);text-align:center}.main-menu-item:hover:not(:disabled),.main-menu-close:hover{background:var(--color-surface-container)}.main-menu-item:active:not(:disabled),.main-menu-close:active{background:var(--color-surface-container-high)}.main-menu-item:disabled{color:var(--color-on-surface-variant);opacity:.5;cursor:not-allowed}.main-menu-item.destructive{color:var(--color-error)}.main-menu-close{font-weight:600;margin-top:8px;text-align:center;background:var(--color-surface-container)}.main-menu-close:hover{background:var(--color-surface-container-high)}.skeleton{background:var(--color-surface-container);border-radius:var(--rounded-md);animation:pulse 1.4s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}@keyframes makespell-spin{to{transform:rotate(360deg)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
