:root{--color-primary-50: #f0fdf4;--color-primary-100: #dcfce7;--color-primary-200: #bbf7d0;--color-primary-300: #86efac;--color-primary-400: #4ade80;--color-primary-500: #22c55e;--color-primary-600: #16a34a;--color-primary-700: #15803d;--color-primary-800: #166534;--color-primary-900: #14532d;--color-neutral-50: #fafaf9;--color-neutral-100: #f5f5f4;--color-neutral-200: #e7e5e4;--color-neutral-300: #d6d3d1;--color-neutral-400: #a8a29e;--color-neutral-500: #78716c;--color-neutral-600: #57534e;--color-neutral-700: #44403c;--color-neutral-800: #292524;--color-neutral-900: #1c1917;--color-neutral-950: #0c0a09;--color-accent-400: #facc15;--color-accent-500: #eab308;--color-accent-600: #ca8a04;--color-error-400: #f87171;--color-error-500: #ef4444;--color-error-600: #dc2626;--color-warning-400: #fb923c;--color-warning-500: #f97316;--color-info-400: #60a5fa;--color-info-500: #3b82f6;--color-bg: #ffffff;--color-bg-subtle: var(--color-neutral-50);--color-bg-surface: #ffffff;--color-bg-surface-hover: var(--color-neutral-100);--color-bg-elevated: #ffffff;--color-bg-overlay: rgba(0, 0, 0, .5);--color-text: var(--color-neutral-900);--color-text-secondary: var(--color-neutral-600);--color-text-tertiary: var(--color-neutral-500);--color-text-inverse: #ffffff;--color-text-on-primary: #ffffff;--color-border: var(--color-neutral-200);--color-border-strong: var(--color-neutral-300);--color-border-subtle: var(--color-neutral-100);--color-interactive: var(--color-primary-600);--color-interactive-hover: var(--color-primary-700);--color-chrome: var(--color-neutral-800);--color-chrome-hover: var(--color-neutral-700);--color-chrome-text: var(--color-neutral-100);--color-chrome-border: rgba(255, 255, 255, .12);--color-chrome-btn: rgba(255, 255, 255, .1);--color-chrome-btn-hover: rgba(255, 255, 255, .18);--color-chrome-btn-border: rgba(255, 255, 255, .25);--color-modal-bg: var(--color-neutral-800);--color-modal-text: var(--color-neutral-100);--color-modal-border: rgba(255, 255, 255, .1);--color-modal-input-bg: rgba(255, 255, 255, .08);--color-modal-input-border: rgba(255, 255, 255, .2);--font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-mono: "JetBrains Mono", "Fira Code", monospace;--text-xs: .694rem;--text-sm: .833rem;--text-base: 1rem;--text-md: 1.2rem;--text-lg: 1.44rem;--text-xl: 1.728rem;--text-2xl: 2.074rem;--leading-tight: 1.2;--leading-normal: 1.5;--leading-loose: 1.7;--weight-normal: 400;--weight-medium: 500;--weight-semibold: 600;--weight-bold: 700;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 20px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 8px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .08);--shadow-xl: 0 12px 40px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .1);--shadow-glow-green: 0 0 12px rgba(34, 197, 94, .4);--shadow-glow-gold: 0 0 12px rgba(234, 179, 8, .5);--duration-fast: .15s;--duration-normal: .2s;--duration-slow: .3s;--ease-out: cubic-bezier(.33, 1, .68, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-popover: 500;--z-toast: 600;--z-max: 999}.dark{--color-bg: var(--color-neutral-950);--color-bg-subtle: var(--color-neutral-900);--color-bg-surface: var(--color-neutral-800);--color-bg-surface-hover: var(--color-neutral-700);--color-bg-elevated: var(--color-neutral-800);--color-bg-overlay: rgba(0, 0, 0, .7);--color-text: var(--color-neutral-100);--color-text-secondary: var(--color-neutral-400);--color-text-tertiary: var(--color-neutral-500);--color-text-inverse: var(--color-neutral-900);--color-border: var(--color-neutral-700);--color-border-strong: var(--color-neutral-600);--color-border-subtle: var(--color-neutral-800);--color-interactive: var(--color-primary-400);--color-interactive-hover: var(--color-primary-300);--color-chrome: var(--color-neutral-900);--color-chrome-hover: var(--color-neutral-800);--color-chrome-text: var(--color-neutral-100);--color-chrome-border: rgba(255, 255, 255, .08);--color-modal-bg: var(--color-neutral-900);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 8px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4), 0 4px 8px rgba(0, 0, 0, .3);--shadow-xl: 0 12px 40px rgba(0, 0, 0, .5), 0 6px 12px rgba(0, 0, 0, .4)}@media(prefers-color-scheme:dark){:root:not(.light){--color-bg: var(--color-neutral-950);--color-bg-subtle: var(--color-neutral-900);--color-bg-surface: var(--color-neutral-800);--color-bg-surface-hover: var(--color-neutral-700);--color-bg-elevated: var(--color-neutral-800);--color-bg-overlay: rgba(0, 0, 0, .7);--color-text: var(--color-neutral-100);--color-text-secondary: var(--color-neutral-400);--color-text-tertiary: var(--color-neutral-500);--color-text-inverse: var(--color-neutral-900);--color-border: var(--color-neutral-700);--color-border-strong: var(--color-neutral-600);--color-border-subtle: var(--color-neutral-800);--color-interactive: var(--color-primary-400);--color-interactive-hover: var(--color-primary-300);--color-chrome: var(--color-neutral-900);--color-chrome-hover: var(--color-neutral-800);--color-chrome-text: var(--color-neutral-100);--color-chrome-border: rgba(255, 255, 255, .08);--color-modal-bg: var(--color-neutral-900);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 8px rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .4), 0 4px 8px rgba(0, 0, 0, .3);--shadow-xl: 0 12px 40px rgba(0, 0, 0, .5), 0 6px 12px rgba(0, 0, 0, .4)}}*{box-sizing:border-box}body{margin:0;font-family:var(--font-family);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;height:100vh}:focus-visible{outline:2px solid var(--color-interactive);outline-offset:2px;border-radius:var(--radius-sm)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-neutral-400);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-500)}.dark ::-webkit-scrollbar-thumb{background:var(--color-neutral-600)}.dark ::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-500)}.library{width:260px;min-width:260px;background:var(--color-bg-subtle);border-right:1px solid var(--color-border);padding:var(--space-3);display:flex;flex-direction:column;height:100%;overflow:hidden}.library-header{margin-bottom:var(--space-2)}.library-title{margin:0;font-size:var(--text-base);font-weight:var(--weight-semibold);color:var(--color-text)}.library-controls{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-2)}.library-controls-row{display:flex;gap:var(--space-2)}.library-search{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--text-base);font-family:var(--font-family);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text);min-height:40px;transition:border-color var(--duration-fast),box-shadow var(--duration-fast)}.library-search:focus{box-shadow:0 0 0 2px #22c55e33}.library-search:focus{outline:none;border-color:var(--color-interactive)}.library-search::placeholder{color:var(--color-text-tertiary)}.library-filter{flex:1;min-width:0;padding:var(--space-2);font-size:var(--text-sm);font-family:var(--font-family);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text);cursor:pointer;min-height:36px;transition:border-color var(--duration-fast)}.library-filter:focus{outline:none;border-color:var(--color-interactive)}.library-toggle-names{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-surface);cursor:pointer;color:var(--color-text-secondary);flex-shrink:0;transition:border-color var(--duration-fast),color var(--duration-fast)}.library-toggle-names:hover{border-color:var(--color-border-strong);color:var(--color-text)}.library-sort-toggle{display:flex;gap:var(--space-1)}.library-sort-btn{flex:1;padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-family:var(--font-family);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-surface);color:var(--color-text-secondary);cursor:pointer;min-height:32px;transition:background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast)}.library-sort-btn:hover{border-color:var(--color-border-strong)}.library-sort-btn.active{background:var(--color-interactive);color:#fff;border-color:var(--color-interactive)}.library-group-header{font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em;padding:var(--space-2) var(--space-1) var(--space-1);border-bottom:1px solid var(--color-border-subtle);margin-top:var(--space-1)}.library-grid-compact .library-group-header{grid-column:1 / -1}.library-grid{overflow-y:auto;overflow-x:hidden;padding-right:5px}.library-grid::-webkit-scrollbar{width:6px}.library-grid::-webkit-scrollbar-track{background:transparent}.library-grid::-webkit-scrollbar-thumb{background:var(--color-neutral-300);border-radius:var(--radius-full)}.library-grid::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-400)}.dark .library-grid::-webkit-scrollbar-thumb{background:var(--color-neutral-600)}.dark .library-grid::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-500)}.library-grid-names{display:flex;flex-direction:column;gap:var(--space-1)}.library-grid-compact{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);container-type:inline-size;max-width:100%}.library-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:background var(--duration-fast),border-color var(--duration-fast),transform var(--duration-fast);min-width:0;min-height:40px}.library-item:hover{background:var(--color-bg-surface-hover);border-color:var(--color-border-strong)}.library-item-compact{flex-direction:column;justify-content:center;align-items:center;padding:var(--space-1);gap:2px}.library-item-compact:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);z-index:1}.library-item-compact .library-compact-name{display:block;width:100%;font-size:clamp(7px,1.8cqi,11px);line-height:1.1;text-align:center;color:var(--color-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-height:2em;transition:font-size var(--duration-fast)}.library-item-compact:hover .library-compact-name{font-size:11px;overflow:visible;white-space:nowrap;color:var(--color-text);background:var(--color-bg-surface);border-radius:var(--radius-sm);padding:1px 4px;margin:0 -4px;width:auto}.library-icon{display:block;flex-shrink:0;opacity:0;transition:opacity var(--duration-fast) ease-in}.library-icon.icon-loaded{opacity:1}.library-name{font-size:var(--text-xs);color:var(--color-text-secondary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.library-item-links{display:flex;align-items:center;gap:2px;flex-shrink:0}.library-item-link{color:var(--color-text-tertiary);padding:1px;line-height:0;border-radius:3px;transition:color var(--duration-fast)}.library-item-link:hover{color:var(--color-text);background:#00000014}.dark .library-item-link:hover{background:#ffffff14}.library-load-more{padding:var(--space-3) var(--space-1);text-align:center;font-size:var(--text-xs);color:var(--color-text-tertiary)}.library-grid-compact .library-load-more{grid-column:1 / -1}.library-item.hint-highlight,.library-item-compact.hint-highlight{animation:hintPulse .5s ease-in-out 3;border-color:var(--color-accent-400);box-shadow:var(--shadow-glow-gold)}@keyframes hintPulse{0%,to{box-shadow:0 0 6px #eab3084d}50%{box-shadow:0 0 16px #eab308cc}}.library.library-drop-active{background:#ef444414;box-shadow:inset 0 0 20px #ef444426}.element{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:2px solid var(--color-border-strong);border-radius:var(--radius-lg);background:var(--color-bg-surface);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;transition:box-shadow var(--duration-normal),transform var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast)}.element-icon{display:block;width:44px;height:44px;flex:0 0 44px;object-fit:contain;opacity:0;transition:opacity var(--duration-fast) ease-in}.element-icon.icon-loaded{opacity:1}.element:active{cursor:grabbing}.element-library{background:var(--color-bg-subtle)}.element-library .element-icon{width:48px;height:48px;flex-basis:48px}.element-workspace{background:transparent;border:2px solid transparent;box-shadow:none;padding:var(--space-1);border-radius:var(--radius-md);position:relative}.element-workspace:hover{background:var(--color-bg-surface-hover);box-shadow:none;transform:none}.element-workspace.drop-target{border:2px dashed var(--color-neutral-400);background:var(--color-bg-surface-hover)}.element-workspace.drop-new{border:2px solid var(--color-primary-500);background:var(--color-primary-50);box-shadow:var(--shadow-glow-green)}.element-workspace.drop-known{border:2px solid var(--color-neutral-400);background:var(--color-neutral-100);box-shadow:0 0 12px #a8a29e4d}.element-workspace.drop-none{border:2px solid var(--color-error-500);background:#ef444414;box-shadow:0 0 12px #ef44444d}.dark .element-workspace.drop-new{background:#22c55e26}.dark .element-workspace.drop-known{background:#a8a29e1a}.dark .element-workspace.drop-none{background:#ef44441a}.element-name{display:none}.element-library .element-name{display:inline;font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-text);text-transform:uppercase;letter-spacing:.5px}.element:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.element-over{border-color:var(--color-primary-500);box-shadow:var(--shadow-glow-green)}@media(max-width:768px){.element-workspace .element-name{display:block;position:absolute;bottom:-18px;left:50%;transform:translate(-50%);font-size:10px;font-weight:var(--weight-semibold);color:var(--color-text-secondary);white-space:nowrap;pointer-events:none;max-width:80px;overflow:hidden;text-overflow:ellipsis}}.element-workspace.auto-solve-moving{transition:left var(--auto-solve-move-ms, .6s) ease-in-out,top var(--auto-solve-move-ms, .6s) ease-in-out;z-index:var(--z-dropdown);box-shadow:var(--shadow-glow-green);border:2px solid var(--color-primary-500);background:#22c55e1a}.element-workspace.auto-solve-target{box-shadow:var(--shadow-glow-gold);border:2px solid var(--color-accent-400);background:#eab3081a}.element-workspace.element-new{animation:elementPopIn .4s var(--ease-bounce) forwards}@keyframes elementPopIn{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.element-label{position:absolute;bottom:-22px;left:50%;transform:translate(-50%);font-size:var(--text-xs);font-weight:var(--weight-semibold);color:var(--color-text);background:var(--color-bg-elevated);padding:2px var(--space-2);border-radius:var(--radius-sm);white-space:nowrap;pointer-events:none;box-shadow:var(--shadow-sm);z-index:10}.workspace{flex:1;position:relative;background:var(--color-bg);min-height:500px;overflow:hidden}.workspace-over{background:var(--color-bg-subtle)}.workspace-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--color-text-tertiary);font-size:var(--text-base);text-align:center;pointer-events:none}.auto-solve-badge{position:absolute;top:var(--space-3);right:var(--space-3);background:#22c55ee6;color:#fff;padding:var(--space-2) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-xs);font-weight:var(--weight-semibold);pointer-events:none;z-index:50;animation:autoSolvePulse 1.5s ease-in-out infinite;display:flex;flex-direction:column;gap:var(--space-1);max-width:320px;box-shadow:var(--shadow-md)}.auto-solve-badge-reasoning{font-weight:var(--weight-normal);font-size:var(--text-xs);opacity:.9;font-style:italic;line-height:var(--leading-tight);white-space:normal}@keyframes autoSolvePulse{0%,to{opacity:.8}50%{opacity:1}}@media(max-width:768px){.workspace{min-height:0;height:100%;touch-action:none}.workspace-empty{font-size:var(--text-sm);padding:0 var(--space-5)}}.tutorial-backdrop{position:fixed;inset:0;background:var(--color-bg-overlay);z-index:var(--z-overlay)}.tutorial-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-bg-elevated);color:var(--color-text);border-radius:var(--radius-xl);width:420px;max-width:90vw;max-height:85vh;overflow-y:auto;z-index:var(--z-modal);box-shadow:var(--shadow-xl);border:1px solid var(--color-border)}.tutorial-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}.tutorial-header h2{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--color-text)}.tutorial-close{background:none;border:none;cursor:pointer;color:var(--color-text-tertiary);padding:var(--space-2);border-radius:var(--radius-sm);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:color var(--duration-fast),background var(--duration-fast)}.tutorial-close:hover{color:var(--color-text);background:var(--color-bg-surface-hover)}.tutorial-body{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-4)}.tutorial-step{display:flex;gap:var(--space-3);align-items:flex-start}.tutorial-step-number{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--color-primary-500);color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:var(--weight-bold);margin-top:2px}.tutorial-step strong{display:block;font-size:var(--text-base);color:var(--color-text);margin-bottom:2px}.tutorial-step p{margin:0;font-size:var(--text-sm);color:var(--color-text-secondary);line-height:var(--leading-normal)}.tutorial-footer{padding:var(--space-3) var(--space-5) var(--space-4);text-align:center}.tutorial-start-btn{padding:var(--space-3) var(--space-8);font-size:var(--text-base);font-weight:var(--weight-semibold);font-family:var(--font-family);background:var(--color-primary-500);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;min-height:48px;transition:background var(--duration-fast),transform var(--duration-fast)}.tutorial-start-btn:hover{background:var(--color-primary-600);transform:translateY(-1px)}.achievements-modal{width:520px}.achievements-grid{display:flex;flex-direction:column;gap:var(--space-2)}.achievement-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-modal-border);background:var(--color-modal-input-bg);transition:background var(--duration-fast)}.achievement-card.unlocked{border-color:#eab3084d;background:#eab30814}.achievement-card.locked{opacity:.5}.achievement-icon{font-size:var(--text-lg);flex-shrink:0;width:40px;text-align:center}.achievement-info{min-width:0}.achievement-name{font-size:var(--text-base);font-weight:var(--weight-semibold)}.achievement-desc{font-size:var(--text-xs);opacity:.7;margin-top:2px}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--color-bg)}.app-header{background:var(--color-chrome);color:var(--color-chrome-text);padding:var(--space-3) var(--space-6);display:flex;align-items:center;justify-content:space-between;position:relative;border-bottom:1px solid var(--color-chrome-border)}.app-header-left{display:flex;align-items:center;gap:var(--space-3)}.app-header h1{margin:0;font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:-.01em}.app-header-actions{display:flex;gap:var(--space-2)}.app-header-btn{padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-medium);border:1px solid var(--color-chrome-btn-border);border-radius:var(--radius-md);background:var(--color-chrome-btn);color:var(--color-chrome-text);cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center;transition:background var(--duration-fast),border-color var(--duration-fast)}.app-header-btn:hover{background:var(--color-chrome-btn-hover)}.app-header-btn:focus-visible{outline:2px solid var(--color-primary-400);outline-offset:2px}.app-header-btn-icon{padding:var(--space-2);line-height:0}.app-header-btn-icon svg{display:block}.hint-btn{background:var(--color-accent-400);color:var(--color-neutral-900);border-color:var(--color-accent-500);font-weight:var(--weight-semibold);display:inline-flex;align-items:center;gap:var(--space-1)}.hint-icon{display:none}.btn-label{display:inline}.hint-btn:hover{background:#fde047;border-color:var(--color-accent-400)}.hint-btn:disabled{opacity:.4;cursor:not-allowed;background:var(--color-accent-400)}.auto-solve-btn{display:inline-flex;align-items:center;gap:var(--space-1)}.auto-solve-btn.auto-solve-fast{background:#f973164d;border-color:#f9731699;color:#fff;animation:autoSolveBtnPulse 1.5s ease-in-out infinite}.auto-solve-btn.auto-solve-slow{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff;animation:autoSolveBtnPulse 2s ease-in-out infinite}@keyframes autoSolveBtnPulse{0%,to{box-shadow:0 0 #22c55e66}50%{box-shadow:0 0 10px 3px #22c55e80}}.discovery-toast{position:absolute;left:50%;transform:translate(-50%);background:linear-gradient(135deg,var(--color-primary-500),var(--color-primary-400));color:#fff;padding:var(--space-3) var(--space-6);border-radius:var(--radius-lg);font-weight:var(--weight-semibold);font-size:var(--text-base);animation:discoveryPop 2.2s ease-out forwards;box-shadow:0 4px 24px #22c55e80,var(--shadow-glow-green);z-index:var(--z-toast)}.discovery-toast:before,.discovery-toast:after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--color-accent-400);animation:sparkle 1s ease-out forwards}.discovery-toast:before{top:-12px;left:20%;animation-delay:.1s}.discovery-toast:after{top:-8px;right:15%;animation-delay:.25s;width:6px;height:6px;background:#fff}@keyframes sparkle{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-30px) scale(0)}}@keyframes discoveryPop{0%{opacity:0;transform:translate(-50%) translateY(10px) scale(.8);box-shadow:0 0 #22c55e99}15%{opacity:1;transform:translate(-50%) translateY(-4px) scale(1.08);box-shadow:0 4px 24px #22c55e80,0 0 0 8px #22c55e33}25%{transform:translate(-50%) translateY(0) scale(1);box-shadow:0 4px 24px #22c55e80,0 0 0 12px #22c55e00}75%{opacity:1;transform:translate(-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-10px) scale(.95)}}.achievement-toast{position:absolute;left:50%;top:100%;transform:translate(-50%);background:var(--color-accent-400);color:var(--color-neutral-900);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);font-weight:var(--weight-semibold);animation:fadeInOut 3s ease-in-out;white-space:nowrap;box-shadow:var(--shadow-md);z-index:var(--z-toast)}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%) translateY(-10px)}20%{opacity:1;transform:translate(-50%) translateY(0)}80%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(-10px)}}.fallback-toast{position:absolute;left:50%;top:100%;transform:translate(-50%);background:var(--color-warning-500);color:var(--color-neutral-900);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font-size:var(--text-sm);display:flex;flex-direction:column;gap:2px;max-width:360px;text-align:center;animation:fadeInOut 3s ease-in-out;white-space:nowrap;z-index:var(--z-toast);box-shadow:var(--shadow-md)}.fallback-toast strong{font-size:var(--text-base)}.fallback-toast span{font-size:var(--text-xs);opacity:.85;white-space:normal}.combining-indicator{position:absolute;right:var(--space-6);top:100%;background:#ffffff26;color:#fff;padding:var(--space-1) var(--space-3);border-radius:var(--radius-sm);font-size:var(--text-xs);animation:pulse .8s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.app-main{display:flex;flex:1;overflow:hidden}.app-footer{background:var(--color-chrome);color:var(--color-neutral-400);padding:var(--space-2) var(--space-4);font-size:var(--text-xs);line-height:var(--leading-normal);border-top:1px solid var(--color-chrome-border)}.app-footer a{color:var(--color-info-400);text-decoration:underline;text-underline-offset:2px;transition:color var(--duration-fast)}.app-footer a:hover{color:#93c5fd}.settings-backdrop{position:fixed;inset:0;background:var(--color-bg-overlay);z-index:var(--z-overlay)}.settings-sidebar{position:fixed;top:0;right:0;width:300px;max-width:90vw;height:100vh;background:var(--color-modal-bg);color:var(--color-modal-text);box-shadow:var(--shadow-xl);z-index:var(--z-modal);display:flex;flex-direction:column;animation:settings-slide-in var(--duration-normal) var(--ease-out)}@keyframes settings-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.settings-sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-modal-border)}.settings-sidebar-title{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold)}.settings-sidebar-close{padding:var(--space-2);background:transparent;border:none;color:var(--color-modal-text);cursor:pointer;border-radius:var(--radius-sm);line-height:0;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast)}.settings-sidebar-close:hover{background:#ffffff1a}.settings-sidebar-actions{padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}.settings-sidebar-btn{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3) var(--space-4);font-size:var(--text-base);text-align:left;background:var(--color-modal-input-bg);border:1px solid var(--color-modal-input-border);border-radius:var(--radius-md);color:var(--color-modal-text);cursor:pointer;min-height:48px;transition:background var(--duration-fast)}.settings-sidebar-btn:hover{background:#ffffff24}.settings-sidebar-btn svg{flex-shrink:0}.theme-toggle-section{padding:0 var(--space-5);margin-bottom:var(--space-2)}.theme-toggle-group{display:flex;gap:var(--space-2)}.theme-toggle-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:var(--weight-medium);background:var(--color-modal-input-bg);border:1px solid var(--color-modal-input-border);border-radius:var(--radius-md);color:var(--color-modal-text);cursor:pointer;min-height:44px;transition:background var(--duration-fast),border-color var(--duration-fast)}.theme-toggle-btn:hover{background:#ffffff1f}.theme-toggle-btn.active{background:var(--color-primary-600);border-color:var(--color-primary-500);color:#fff}.theme-section-label{font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:.05em;color:var(--color-neutral-400);margin-bottom:var(--space-2)}.modal-backdrop{position:fixed;inset:0;background:var(--color-bg-overlay);z-index:var(--z-overlay)}.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--color-modal-bg);color:var(--color-modal-text);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);z-index:var(--z-modal);max-width:90vw;max-height:80vh;display:flex;flex-direction:column;border:1px solid var(--color-modal-border)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-modal-border)}.modal-header h2{margin:0;font-size:var(--text-md);font-weight:var(--weight-semibold)}.modal-counter{font-weight:var(--weight-normal);opacity:.9;font-size:.95em}.modal-close{padding:var(--space-2);background:transparent;border:none;color:var(--color-modal-text);cursor:pointer;border-radius:var(--radius-sm);line-height:0;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast)}.modal-close:hover{background:#ffffff1a}.modal-body{padding:0 var(--space-5) var(--space-5);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}.modal-body::-webkit-scrollbar{width:8px}.modal-body::-webkit-scrollbar-track{background:transparent}.modal-body::-webkit-scrollbar-thumb{background:#ffffff40;border-radius:var(--radius-full)}.modal-body::-webkit-scrollbar-thumb:hover{background:#fff6}.modal-empty{margin:0;opacity:.85}.recipes-modal{width:560px}.recipes-search{padding:0 var(--space-5) var(--space-3)}.recipes-search-wrap{position:relative;display:flex;align-items:center}.recipes-search input{width:100%;padding:var(--space-2) var(--space-8) var(--space-2) var(--space-3);border:1px solid var(--color-modal-input-border);border-radius:var(--radius-md);background:var(--color-modal-input-bg);color:var(--color-modal-text);font-size:var(--text-base);font-family:var(--font-family);outline:none;min-height:44px;transition:border-color var(--duration-fast),background var(--duration-fast)}.recipes-search-clear{position:absolute;right:var(--space-2);padding:var(--space-1);background:#ffffff26;border:none;border-radius:var(--radius-sm);color:#ffffffb3;cursor:pointer;line-height:0;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast)}.recipes-search-clear:hover{background:#ffffff40;color:#fff}.recipes-search input::placeholder{color:#fff6}.recipes-search input:focus{border-color:var(--color-primary-400);background:#ffffff1f}.recipes-list{margin:0;padding:0;list-style:none}.recipes-list-item{padding:var(--space-2) 0;border-bottom:1px solid var(--color-modal-border);display:flex;flex-direction:column;gap:2px}.recipes-list-item:last-child{border-bottom:none}.recipes-list-item-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.recipes-reasoning{margin:0;font-size:var(--text-xs);opacity:.65;font-style:italic;padding-left:var(--space-1)}.recipes-more-ways{font-size:var(--text-xs);opacity:.6;white-space:nowrap;font-style:italic}.recipes-element-btn{background:none;border:none;color:var(--color-modal-text);cursor:pointer;padding:2px var(--space-1);border-radius:var(--radius-sm);font-size:inherit;font-family:inherit;transition:background var(--duration-fast)}.recipes-element-btn:hover{background:#ffffff26;text-decoration:underline}.recipes-result-btn{font-weight:var(--weight-semibold)}.recipes-load-more{padding:var(--space-3) 0;text-align:center;font-size:var(--text-xs);color:#ffffff80;border-bottom:none}.save-state-modal{width:600px}.save-state-controls{padding:0 var(--space-5) var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}.save-state-search{width:100%;padding:var(--space-2) var(--space-3);border:1px solid var(--color-modal-input-border);border-radius:var(--radius-md);background:var(--color-modal-input-bg);color:var(--color-modal-text);font-size:var(--text-base);font-family:var(--font-family);outline:none;min-height:44px;transition:border-color var(--duration-fast),background var(--duration-fast)}.save-state-search::placeholder{color:#fff6}.save-state-search:focus{border-color:var(--color-primary-400);background:#ffffff1f}.save-state-tags{display:flex;gap:var(--space-2);flex-wrap:wrap}.save-state-tag{padding:var(--space-1) var(--space-3);font-size:var(--text-xs);border:1px solid var(--color-modal-input-border);border-radius:var(--radius-full);background:transparent;color:#ffffffb3;cursor:pointer;min-height:32px;display:inline-flex;align-items:center;transition:background var(--duration-fast)}.save-state-tag:hover{background:#ffffff1a}.save-state-tag.active{background:var(--color-primary-600);color:#fff;border-color:var(--color-primary-500)}.save-state-list{display:flex;flex-direction:column;gap:var(--space-2)}.save-state-card{border:1px solid var(--color-modal-border);border-radius:var(--radius-md);overflow:hidden}.save-state-card-btn{display:block;width:100%;padding:var(--space-3) var(--space-4);background:var(--color-modal-input-bg);border:none;color:var(--color-modal-text);text-align:left;cursor:pointer;font-family:var(--font-family);transition:background var(--duration-fast)}.save-state-card-btn:hover{background:#ffffff1a}.save-state-card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.save-state-card-name{font-weight:var(--weight-semibold);font-size:var(--text-base)}.save-state-card-counts{font-size:var(--text-xs);opacity:.6;white-space:nowrap}.save-state-card-desc{margin:var(--space-1) 0 0;font-size:var(--text-xs);opacity:.7}.save-state-confirm{padding:var(--space-3) var(--space-4);background:#ef44441a}.save-state-confirm p{margin:0 0 var(--space-3);font-size:var(--text-sm)}.save-state-confirm-actions{display:flex;gap:var(--space-2)}.save-state-confirm-btn{padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-family:var(--font-family);border-radius:var(--radius-sm);border:none;cursor:pointer;min-height:36px;transition:background var(--duration-fast)}.save-state-confirm-yes{background:var(--color-error-600);color:#fff}.save-state-confirm-yes:hover{background:var(--color-error-500)}.save-state-confirm-yes:disabled{opacity:.6;cursor:not-allowed}.save-state-confirm-no{background:#ffffff26;color:#fff}.save-state-confirm-no:hover{background:#ffffff40}.save-state-warning{padding:var(--space-3) var(--space-5);font-size:var(--text-xs);opacity:.5;text-align:center;border-top:1px solid var(--color-modal-border)}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:var(--color-neutral-900);color:#fff}.loading-screen h1{margin:0 0 var(--space-8) 0;font-size:var(--text-xl)}.loading-bar-container{width:320px;max-width:80vw;height:8px;background:#ffffff1a;border-radius:var(--radius-full);overflow:hidden}.loading-bar-fill{height:100%;background:linear-gradient(90deg,var(--color-primary-500),var(--color-primary-400));border-radius:var(--radius-full);transition:width .1s ease-out}.loading-phase{margin:var(--space-3) 0 0 0;font-size:var(--text-sm);opacity:.7}.loading-count{opacity:.6}.save-state-loading-overlay{position:fixed;inset:0;background:#0c0a09f2;z-index:var(--z-max);display:flex;align-items:center;justify-content:center}.save-state-loading-content{display:flex;flex-direction:column;align-items:center;color:#fff}.save-state-loading-content h2{margin:0 0 var(--space-6) 0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}.mobile-sidebar-toggle,.mobile-sidebar-backdrop,.mobile-only{display:none}@media(max-width:768px){.desktop-only{display:none!important}.mobile-only{display:flex!important}.app-header{padding:var(--space-2) var(--space-3);gap:0}.app-header h1{font-size:var(--text-base);flex:1}.app-header-left{flex:1;gap:0}.app-header-btn{padding:var(--space-2);font-size:var(--text-xs);min-height:40px;min-width:40px}.app-header-actions{gap:var(--space-1)}.hint-icon{display:block}.btn-label{display:none}.hint-btn{padding:var(--space-2)}.app-main{position:relative;flex-direction:column}.library-container{position:fixed;bottom:0;left:0;right:0;height:50vh;z-index:50;transform:translateY(100%);transition:transform var(--duration-slow) var(--ease-out);background:var(--color-bg-surface);box-shadow:0 -4px 24px #0003;border-radius:var(--radius-xl) var(--radius-xl) 0 0;overflow:hidden}.library-container.open{transform:translateY(0)}.library-container .library{width:100%;height:100%;border-right:none}.mobile-sidebar-backdrop{display:block;position:fixed;inset:0;background:var(--color-bg-overlay);z-index:49}.mobile-sidebar-toggle{display:flex;align-items:center;justify-content:center;position:fixed;bottom:46px;right:var(--space-3);width:52px;height:52px;border-radius:50%;background:var(--color-primary-600);color:#fff;font-size:22px;border:none;box-shadow:var(--shadow-lg),var(--shadow-glow-green);z-index:60;cursor:pointer;transition:background var(--duration-fast),transform var(--duration-fast)}.mobile-sidebar-toggle:active{background:var(--color-primary-700);transform:scale(.95)}.modal{width:95vw;max-height:85vh}.recipes-modal,.achievements-modal,.tutorial-modal,.save-state-modal{width:95vw}.settings-sidebar{width:100vw;max-width:100vw}.app-footer{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}.discovery-toast{font-size:var(--text-sm);padding:var(--space-3) var(--space-4);white-space:nowrap}.achievement-toast{font-size:var(--text-sm);padding:var(--space-2) var(--space-4)}}