:root{color-scheme:light dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--spacing-xs: 8px;--spacing-sm: 12px;--spacing-md: 16px;--spacing-lg: 24px;--sidebar-width: 280px;--sidebar-collapsed-width: 72px;--button-height: 44px;--input-height: 52px;--icon-button-size: 48px;--radius-sm: 8px;--radius-full: 50%}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}.app{--bg: #f7f8fb;--surface: #ffffff;--surface-strong: #f0f4f8;--text: #172033;--muted: #64748b;--border: #d8e0ea;--primary: #0f766e;--primary-strong: #0b5f59;--primary-soft: #d9fbf4;--success: #15803d;--success-strong: #166534;--danger: #b42318;--shadow: 0 24px 70px rgba(15, 23, 42, .12);align-items:center;background:linear-gradient(135deg,rgba(15,118,110,.12),transparent 38%),var(--bg);color:var(--text);display:flex;min-height:100dvh;padding:var(--spacing-lg);transition:padding-left .28s cubic-bezier(.4,0,.2,1)}.app.dark{--bg: #101419;--surface: #171d24;--surface-strong: #202833;--text: #eef4f8;--muted: #9aa8b7;--border: #313b48;--primary: #5eead4;--primary-strong: #99f6e4;--primary-soft: #123d3a;--success: #4ade80;--success-strong: #86efac;--danger: #fca5a5;--shadow: 0 24px 70px rgba(0, 0, 0, .38)}.shell{margin:0 auto;max-width:560px;width:100%;padding:0 var(--spacing-lg)}.sidebar{background:var(--surface);border-right:1px solid var(--border);box-shadow:var(--shadow);display:flex;flex-direction:column;height:100dvh;left:0;overflow:hidden;position:fixed;top:0;transform:translate(-100%);transition:transform .28s cubic-bezier(.4,0,.2,1),width .28s cubic-bezier(.4,0,.2,1);width:var(--sidebar-width);z-index:1000}.sidebar.collapsed{width:var(--sidebar-collapsed-width)}.sidebar.open{transform:translate(0)}.sidebarOverlay{background:#00000080;height:100dvh;left:0;position:fixed;top:0;width:100vw;z-index:999;animation:fadeIn .28s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sidebarHeader{align-items:center;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;padding:var(--spacing-md);position:relative;min-height:69px}.sidebarBrand{align-items:center;display:flex;gap:var(--spacing-sm);flex:1}.sidebarBrandIcon{align-items:center;background:var(--primary-soft);border-radius:var(--radius-sm);color:var(--primary);display:inline-flex;height:36px;justify-content:center;width:36px}.sidebarBrandText{color:var(--text);font-size:1.1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebarThemeToggle{align-items:center;background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--muted);cursor:pointer;display:inline-flex;height:36px;justify-content:center;transition:background-color .18s ease,border-color .18s ease,color .18s ease;width:36px;flex-shrink:0}.sidebarThemeToggle:hover{background:var(--primary-soft);border-color:var(--primary);color:var(--primary)}.sidebarThemeToggle:active{transform:scale(.95)}.sidebar.collapsed .sidebarThemeToggle{display:none}.sidebarCloseButton{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--muted);cursor:pointer;display:inline-flex;height:36px;justify-content:center;transition:background-color .18s ease,border-color .18s ease,color .18s ease;width:36px}.sidebarCloseButton:hover{background:var(--surface-strong);border-color:var(--border);color:var(--text)}.sidebarNav{display:flex;flex:1;flex-direction:column;gap:4px;overflow-y:auto;padding:var(--spacing-md)}.sidebarNavItem{align-items:center;border-radius:var(--radius-sm);color:var(--muted);cursor:pointer;display:flex;gap:var(--spacing-sm);min-height:var(--button-height);padding:0 14px;text-decoration:none;transition:background-color .18s ease,color .18s ease;justify-content:flex-start}.sidebar.collapsed .sidebarNavItem{justify-content:center;padding:0}.sidebarNavItem:hover{background:var(--surface-strong);color:var(--text)}.sidebarNavItem.active{background:var(--primary-soft);color:var(--primary);font-weight:600}.sidebarNavItem span{font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebarFooter{height:0;flex-shrink:0}.sidebarCollapseButton{align-items:center;background:var(--surface);border:1px solid var(--border);border-left:none;border-radius:0 var(--radius-sm) var(--radius-sm) 0;box-shadow:2px 0 8px #00000014;color:var(--muted);cursor:pointer;display:none;height:var(--icon-button-size);justify-content:center;position:absolute;right:-20px;top:50%;transform:translateY(-50%);transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;width:20px;z-index:1}.sidebarCollapseButton:hover{background:var(--primary-soft);color:var(--primary);box-shadow:2px 0 12px #0f766e33}.sidebarCollapseButton:active{transform:translateY(-50%) scale(.95)}.app.dark .sidebarCollapseButton{box-shadow:2px 0 8px #0000004d}.app.dark .sidebarCollapseButton:hover{box-shadow:2px 0 12px #5eead426}.fixedThemeToggle{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);box-shadow:var(--shadow);color:var(--text);cursor:pointer;display:inline-flex;height:var(--icon-button-size);justify-content:center;position:fixed;right:var(--spacing-lg);top:var(--spacing-lg);transition:background-color .18s ease,border-color .18s ease,transform .18s ease;width:var(--icon-button-size);z-index:900}.fixedThemeToggle:hover{background:var(--primary-soft);border-color:var(--primary);transform:scale(1.05)}.fixedThemeToggle:active{transform:scale(.95)}.fixedThemeToggle.mobileOnly{display:inline-flex}.menuButton{align-items:center;background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text);cursor:pointer;display:inline-flex;height:var(--button-height);justify-content:center;transition:background-color .18s ease,border-color .18s ease;width:var(--button-height)}.menuButton:hover{background:var(--surface-strong);border-color:var(--border)}.menuButton:active{transform:scale(.96)}@media(min-width:1024px){.menuButton{display:none}.sidebar{overflow:visible;transform:translate(0)}.sidebarOverlay,.sidebarCloseButton{display:none}.sidebarCollapseButton{display:flex}.fixedThemeToggle.mobileOnly{display:none}.app{padding-left:calc(var(--sidebar-width) + var(--spacing-lg));transition:padding-left .28s cubic-bezier(.4,0,.2,1)}.app.sidebarCollapsed{padding-left:calc(var(--sidebar-collapsed-width) + var(--spacing-lg))}.shell{margin:0 auto;padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}}.topbar{align-items:center;display:flex;justify-content:flex-start;margin-bottom:16px}.brand{align-items:center;display:flex;gap:14px}.brandIcon,.iconButton{align-items:center;border-radius:var(--radius-sm);display:inline-flex;height:var(--button-height);justify-content:center;width:var(--button-height)}.brandIcon{background:var(--primary-soft);color:var(--primary)}h1,p{margin:0}h1{font-size:1.6rem;line-height:1.15}.brand p{color:var(--muted);font-size:.92rem;margin-top:3px}.iconButton{background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;transition:background-color .18s ease,border-color .18s ease,transform .18s ease;display:none}.iconButton:hover{background:var(--surface-strong)}.iconButton:active{transform:scale(.96)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow);padding:20px}.field{display:grid;gap:6px;margin-bottom:8px}.field span,.outputLabel{color:var(--muted);font-size:.92rem;font-weight:600;margin-bottom:4px}input{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.92rem;min-height:var(--input-height);outline:none;overflow:hidden;padding:0 14px;text-overflow:ellipsis;transition:border-color .18s ease,box-shadow .18s ease;width:100%}input::placeholder{color:var(--muted);font-size:.82rem;opacity:.85}input:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 22%,transparent)}.helpText,.errorText{font-size:.88rem;line-height:1.4;margin:6px 0 0}.helpText{color:var(--muted)}.errorText{color:var(--danger);min-height:1.5em}.errorText.isHidden{visibility:hidden}.generateButton{align-items:center;background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);cursor:pointer;display:inline-flex;gap:var(--spacing-xs);justify-content:center;margin-top:18px;min-height:var(--icon-button-size);padding:0 var(--spacing-md);transition:background-color .18s ease,border-color .18s ease,transform .18s ease;width:100%}.generateButton:hover{background:var(--primary-soft);border-color:var(--primary)}.generateButton:active{transform:scale(.99)}.output{align-items:center;display:grid;gap:12px;justify-items:center;margin:24px 0 0;padding:0;text-align:center}.codeRow{align-items:center;display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center;width:100%}.codeButton{background:transparent;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--text);cursor:pointer;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,ui-monospace,monospace;font-size:clamp(2.5rem,10vw,4rem);font-variant-numeric:tabular-nums;font-weight:800;line-height:1;min-height:1em;padding:4px var(--spacing-xs);transition:background-color .18s ease,border-color .18s ease,transform .18s ease}.codeButton:hover:not(:disabled){background:var(--surface-strong);border-color:var(--border)}.codeButton:active:not(:disabled){transform:scale(.98)}.codeButton.empty{color:var(--muted);cursor:not-allowed}.copyButton{align-items:center;background:var(--primary);border:0;border-radius:var(--radius-sm);color:#fff;cursor:pointer;display:inline-flex;gap:var(--spacing-xs);justify-content:center;min-height:46px;min-width:100px;padding:0 var(--spacing-md);transition:background-color .18s ease,opacity .18s ease,transform .18s ease}.copyButton:hover:not(:disabled){background:var(--primary-strong)}.copyButton:active:not(:disabled){transform:scale(.98)}.copyButton:disabled{cursor:not-allowed;opacity:.45}.copyButton.copied,.copyButton.copied:hover:not(:disabled){background:var(--success);color:#fff}.app.dark .copyButton.copied,.app.dark .copyButton.copied:hover:not(:disabled){background:var(--success-strong);color:#102014}.countdown{display:flex;flex-direction:column;gap:8px;margin-top:16px;width:100%;max-width:280px;opacity:1;transition:opacity .2s ease}.countdown.hidden{opacity:0;pointer-events:none}.countdownBar{background:var(--surface-strong);border:1px solid var(--border);border-radius:999px;height:6px;overflow:hidden;position:relative;width:100%}.countdownProgress{background:linear-gradient(90deg,var(--primary),var(--primary-strong));border-radius:999px;height:100%;transition:width 1s linear}.countdownText{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums;text-align:center}:focus-visible{outline:3px solid var(--primary);outline-offset:3px}@media(max-width:520px){.app{align-items:stretch;padding:18px}.topbar{gap:var(--spacing-sm)}.panel{padding:18px}.brand{min-width:0}}