:root{--bg: oklch(.97 .008 70);--bg-subtle: oklch(.94 .012 65);--surface: oklch(.98 .005 70);--surface-elevated: oklch(.99 .003 70);--text: oklch(.25 .02 55);--text-muted: oklch(.45 .02 55);--text-faint: oklch(.55 .015 60);--accent: oklch(.58 .18 35);--accent-soft: oklch(.58 .18 35 / .08);--accent-glow: oklch(.58 .18 35 / .15);--border: oklch(.9 .01 70);--border-subtle: oklch(.93 .008 70);--gutter-bg: oklch(.96 .01 65);--gutter-text: oklch(.5 .015 60);--gutter-active: oklch(.58 .18 35);--output-text: oklch(.55 .15 35);--pane-label-bg: oklch(.95 .01 65);--sheet-bg: oklch(.98 .005 70);--shadow-sm: 0 1px 2px oklch(.3 .02 70 / .05);--shadow-lg: 0 8px 32px oklch(.3 .02 70 / .12), 0 2px 8px oklch(.3 .02 70 / .06);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-pill: 100px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Cascadia Code", monospace}body.dark{--bg: oklch(.16 .015 55);--bg-subtle: oklch(.13 .012 55);--surface: oklch(.19 .012 55);--surface-elevated: oklch(.22 .01 55);--text: oklch(.92 .01 70);--text-muted: oklch(.72 .015 60);--text-faint: oklch(.6 .015 55);--accent: oklch(.72 .16 35);--accent-soft: oklch(.72 .16 35 / .1);--accent-glow: oklch(.72 .16 35 / .2);--border: oklch(.26 .012 55);--border-subtle: oklch(.22 .01 55);--gutter-bg: oklch(.17 .012 55);--gutter-text: oklch(.55 .015 55);--gutter-active: oklch(.72 .16 35);--output-text: oklch(.72 .14 35);--pane-label-bg: oklch(.17 .012 55);--sheet-bg: oklch(.19 .012 55);--shadow-sm: 0 1px 2px oklch(0 0 0 / .2);--shadow-lg: 0 8px 32px oklch(0 0 0 / .4), 0 2px 8px oklch(0 0 0 / .25)}.rulator{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background-color:var(--bg);transition:background-color .3s ease}.header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10;flex-shrink:0}.header-left{display:flex;align-items:center;gap:.625rem}.header-title{font-size:.875rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text);-webkit-user-select:none;user-select:none}.header-badge{font-family:var(--font-mono);font-size:.6875rem;font-weight:500;color:var(--accent);background:var(--accent-soft);padding:.125rem .5rem;border-radius:var(--radius-pill);font-variant-numeric:tabular-nums;transition:background-color .2s}.header-actions{display:flex;align-items:center;gap:.5rem}.help-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-faint);cursor:pointer;transition:color .2s,background-color .2s}.help-btn:hover,.help-btn.active{color:var(--accent);background-color:var(--accent-soft)}.help-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.theme-toggle{border:none;background:transparent;padding:0;cursor:pointer}.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-pill)}.theme-toggle-track{width:44px;height:24px;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-pill);position:relative;transition:background-color .3s,border-color .3s}.theme-toggle-track.dark{background:var(--surface-elevated);border-color:var(--border)}.theme-toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--surface);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);box-shadow:var(--shadow-sm);transition:transform .3s cubic-bezier(.4,0,.2,1),background-color .3s}.theme-toggle-track.dark .theme-toggle-thumb{transform:translate(20px);background:var(--text);color:var(--bg)}.split{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.pane{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--surface)}.pane-label{flex-shrink:0;font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);padding:.375rem 1rem;background:var(--pane-label-bg);border-bottom:1px solid var(--border-subtle);-webkit-user-select:none;user-select:none}.split-divider{flex-shrink:0;height:1px;background:var(--border)}.editor{flex:1;display:flex;min-height:0;overflow:hidden}.gutter{flex-shrink:0;width:2.75rem;background:var(--gutter-bg);border-right:1px solid var(--border-subtle);overflow:hidden;-webkit-user-select:none;user-select:none;padding:.75rem 0}.gutter-line{font-family:var(--font-mono);font-size:.875rem;font-weight:400;color:var(--gutter-text);text-align:right;padding:0 .625rem 0 .375rem;display:flex;align-items:center;justify-content:flex-end;transition:color .15s}.pane-input .gutter-line{height:1.53125rem}.gutter-line.active{color:var(--gutter-active);font-weight:500}.gutter-line.has-result{color:var(--accent)}.editor-textarea{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-mono);font-size:.875rem;font-weight:400;color:var(--text);line-height:1.75;padding:.75rem;resize:none;caret-color:var(--accent);overflow-y:auto}.editor-textarea::placeholder{color:var(--text-faint);font-style:italic;font-size:.8125rem}.editor-textarea:focus{outline:none}.editor-output{flex:1;min-width:0;overflow-y:auto;padding:.75rem;-webkit-user-select:text;user-select:text}.output-line{font-family:var(--font-mono);font-size:.875rem;font-weight:500;color:var(--output-text);line-height:1.75;white-space:pre-wrap;word-break:break-word;font-variant-numeric:tabular-nums;transition:color .15s,background-color .15s;padding:0 .25rem;border-radius:3px}.output-line.active{background-color:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}.output-line.has-result{color:var(--accent)}.result-row{display:flex;align-items:baseline;gap:.5rem;padding:0;animation:result-fade-in .25s ease-out both;line-height:1.75}.result-row+.result-row{margin-top:0}.result-label{color:var(--text-muted);font-size:.8125em;font-weight:400;white-space:nowrap}.result-label:after{content:":"}.result-value{color:var(--accent);font-weight:500}.result-row.primary .result-value{font-weight:600}@keyframes result-fade-in{0%{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}.statusbar{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:var(--bg-subtle);border-top:1px solid var(--border);font-family:var(--font-mono);font-size:.6875rem;color:var(--text-faint);flex-shrink:0}.statusbar-item{font-variant-numeric:tabular-nums}.statusbar-shortcut{margin-left:auto;opacity:.7}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:99;animation:fade-in .2s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.bottom-sheet{position:fixed;bottom:0;left:0;right:0;max-height:80vh;background:var(--sheet-bg);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-lg);z-index:100;display:flex;flex-direction:column;animation:sheet-up .3s cubic-bezier(.32,.72,0,1)}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sheet-handle{width:36px;height:4px;background:var(--text-faint);border-radius:2px;margin:.75rem auto 0;opacity:.5}.sheet-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem .75rem}.sheet-title{font-size:1rem;font-weight:600;color:var(--text)}.sheet-close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--text-muted);cursor:pointer;transition:color .2s,background-color .2s}.sheet-close:hover{color:var(--text);background:var(--accent-soft)}.sheet-body{flex:1;overflow-y:auto;padding:0 1.25rem 1.5rem;-webkit-overflow-scrolling:touch}.help-grid{display:grid;grid-template-columns:1fr;gap:.25rem}.help-section{margin-bottom:.75rem}.help-section:last-child{margin-bottom:0}.help-section-title{font-family:var(--font-mono);font-size:.625rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);padding:.5rem .875rem .25rem;-webkit-user-select:none;user-select:none}.help-section-items{display:flex;flex-direction:column;gap:.125rem}.help-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .875rem;border:none;border-radius:var(--radius-md);background:transparent;cursor:pointer;text-align:left;width:100%;transition:background-color .15s}.help-item:hover,.help-item:active{background:var(--accent-soft)}.help-item-label{font-size:.875rem;font-weight:500;color:var(--text)}.help-item-example{font-family:var(--font-mono);font-size:.75rem;color:var(--accent);background:#ce452214;padding:.25rem .5rem;border-radius:var(--radius-sm);white-space:nowrap}body.dark .help-item-example{background:#f87b5c1a}@media(min-width:640px){.header{padding:.875rem 1.5rem}.split{flex-direction:row}.pane{flex:1;min-width:0}.split-divider{height:auto;width:1px}.gutter{width:3rem}.gutter-line{font-size:.9375rem;padding:0 .75rem 0 .5rem}.pane-input .gutter-line{height:calc(.9375rem * 1.75)}.editor-textarea{font-size:.9375rem;padding:.75rem 1rem}.editor-output{padding:.75rem 1rem}.output-line{font-size:.9375rem}.statusbar{padding:.625rem 1.5rem}.help-grid{grid-template-columns:repeat(2,1fr);gap:.375rem}.bottom-sheet{max-width:540px;left:50%;transform:translate(-50%);border-radius:var(--radius-lg);bottom:1rem}@keyframes sheet-up{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}}@media(min-width:1024px){.rulator{max-width:1100px;margin:0 auto;border-left:1px solid var(--border);border-right:1px solid var(--border)}.gutter{width:3.5rem}.gutter-line{font-size:1rem}.pane-input .gutter-line{height:1.75rem}.editor-textarea{font-size:1rem;padding:.75rem 1.25rem}.editor-output{padding:.75rem 1.25rem}.output-line{font-size:1rem}}@media(prefers-reduced-motion:reduce){.bottom-sheet,.sheet-backdrop,.result-row{animation:none}.theme-toggle-thumb,.gutter-line,.output-line,.help-item,.help-btn,.sheet-close{transition:none}}::selection{background:#ce452233}.editor-textarea::-webkit-scrollbar,.editor-output::-webkit-scrollbar,.sheet-body::-webkit-scrollbar{width:6px}.editor-textarea::-webkit-scrollbar-track,.editor-output::-webkit-scrollbar-track,.sheet-body::-webkit-scrollbar-track{background:transparent}.editor-textarea::-webkit-scrollbar-thumb,.editor-output::-webkit-scrollbar-thumb,.sheet-body::-webkit-scrollbar-thumb{background:var(--text-faint);border-radius:3px}.editor-textarea::-webkit-scrollbar-thumb:hover,.editor-output::-webkit-scrollbar-thumb:hover,.sheet-body::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.seo-content{background:var(--bg-subtle);border-top:1px solid var(--border);padding:2rem 1rem;flex-shrink:0}.seo-content-inner{max-width:720px;margin:0 auto}.seo-heading{font-family:var(--font-sans);font-size:1.25rem;font-weight:600;color:var(--text);margin-bottom:.75rem}.seo-heading+.seo-heading{margin-top:2rem}.seo-text{font-family:var(--font-sans);font-size:.9375rem;line-height:1.6;color:var(--text-muted);margin-bottom:1.5rem}.seo-features{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem}.seo-feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem}.seo-feature-title{font-family:var(--font-sans);font-size:.9375rem;font-weight:600;color:var(--text);margin-bottom:.375rem}.seo-feature-text{font-family:var(--font-sans);font-size:.875rem;line-height:1.5;color:var(--text-muted)}.seo-faq{display:flex;flex-direction:column;gap:.5rem}.seo-faq-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}.seo-faq-question{font-family:var(--font-sans);font-size:.9375rem;font-weight:500;color:var(--text);padding:.875rem 1rem;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}.seo-faq-question::-webkit-details-marker{display:none}.seo-faq-question:after{content:"+";font-size:1.25rem;font-weight:300;color:var(--text-faint);flex-shrink:0;margin-left:1rem}.seo-faq-item[open] .seo-faq-question:after{content:"−"}.seo-faq-answer{font-family:var(--font-sans);font-size:.875rem;line-height:1.6;color:var(--text-muted);padding:0 1rem 1rem}.seo-faq-answer code{font-family:var(--font-mono);font-size:.8125rem;background:var(--accent-soft);color:var(--accent);padding:.125rem .375rem;border-radius:3px}@media(min-width:640px){.seo-content{padding:3rem 1.5rem}.seo-features{grid-template-columns:repeat(2,1fr)}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background-color:#f9f4ef;min-height:100vh;min-height:100dvh}body.dark{background-color:#120c07}#root{min-height:100vh;min-height:100dvh}