:root{--background:#0d0e16;--foreground:#dfe2ea;--muted:#8b8fa3;--subtle:#4a4e63;--border:#1e2030;--border-strong:#2c3050;--surface:#12141f;--surface-2:#171a28;--surface-hover:#1d2133;--accent:#e8a045;--focus:#5c8cf7;--success:#46c880;--warning:#dda23c;--danger:#f56767}*{box-sizing:border-box}body,html{min-height:100%;background:var(--background)}body{margin:0;color:var(--foreground);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}h1,h2,h3,p{margin:0}.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}.shell{min-height:100vh;padding:0 24px 48px;background:var(--background)}.topbar{position:-webkit-sticky;position:sticky;top:0;z-index:10;padding:0 24px;border-bottom:1px solid var(--border);background:rgba(13,14,22,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.topbar-inner{display:flex;align-items:center;justify-content:space-between;min-height:56px;max-width:1280px;margin:0 auto}.brand{gap:9px;color:var(--foreground);font-size:14px;font-weight:600;letter-spacing:-.01em}.brand,.brand-mark{display:inline-flex;align-items:center}.brand-mark{justify-content:center;width:24px;height:24px;border:1px solid var(--border-strong);border-radius:6px;color:var(--accent);background:var(--surface-2)}.topbar-nav{display:flex;align-items:center;gap:4px}.nav-link{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;color:var(--muted);text-decoration:none;transition:color .1s,background .1s}.nav-link:hover{color:var(--foreground);background:var(--surface-hover)}.page-header{max-width:1280px;margin:0 auto;padding:24px 0 12px}.page-tagline{color:var(--muted);font-size:13px;line-height:1.5}.workspace{display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);max-width:1280px;margin:0 auto;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--border);grid-gap:1px;gap:1px}.panel{min-width:0;background:var(--surface)}.input-panel{display:flex;flex-direction:column;background:#0b0c13}.input-panel,.output-panel{min-height:min(680px,calc(100vh - 140px))}.output-panel{overflow:hidden;background:var(--surface)}.panel-header{display:none}.result-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:52px;padding:14px 16px;border-bottom:1px solid var(--border)}.result-head p{color:var(--foreground);font-size:14px;line-height:1.55}.mode-switch{display:flex;border-bottom:1px solid var(--border)}.mode-switch button{display:inline-flex;align-items:center;gap:7px;padding:0 18px;height:44px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--muted);background:transparent;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;transition:color .1s,border-color .1s}.mode-switch button.active{color:var(--accent);border-bottom-color:var(--accent)}.mode-switch button:hover:not(.active){color:var(--foreground)}.field{flex:1 1;display:flex;flex-direction:column}.field>span{display:none}textarea{flex:1 1;width:100%;min-height:clamp(320px,52vh,520px);resize:none;padding:16px 18px;border:0;outline:none;color:var(--foreground);background:transparent;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:13.5px;line-height:1.75}textarea::placeholder{color:var(--subtle)}.control-row{padding:10px 14px;border-top:1px solid var(--border);background:var(--surface)}.control-row,.dialect{display:flex;align-items:center;gap:8px}.dialect{flex:1 1}.dialect span{color:var(--muted);font-size:10px;font-weight:600;white-space:nowrap;font-family:SFMono-Regular,Consolas,monospace;text-transform:uppercase;letter-spacing:.07em}select{flex:1 1;height:30px;padding:0 8px;border:1px solid var(--border-strong);border-radius:5px;outline:none;color:var(--foreground);background:var(--surface-2);font-size:12px;transition:border-color .1s}select:focus{border-color:var(--focus)}.ghost-button,.icon-button,.submit-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;border-radius:5px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;transition:opacity .12s,background .12s,color .12s,border-color .12s}.submit-button{min-width:104px;padding:0 14px;border:0;color:#0d0e16;background:var(--accent)}.submit-button:hover:not(:disabled){background:#f0ad57}.submit-button:disabled{opacity:.35}.ghost-button,.icon-button{border:1px solid var(--border-strong);color:var(--muted);background:transparent;letter-spacing:.02em;font-weight:500;text-transform:none}.ghost-button,.icon-button{padding:0 10px}.icon-button{min-width:76px}.ghost-button:hover,.icon-button:hover:not(:disabled){color:var(--foreground);background:var(--surface-hover);border-color:var(--muted)}.result-grid{display:grid;grid-gap:1px;gap:1px;background:var(--border)}.section-block{display:grid;grid-gap:11px;gap:11px;padding:16px 18px;background:var(--surface)}.section-block.warn{border-left:2px solid rgba(221,162,60,.5)}.section-block.good{border-left:2px solid rgba(70,200,128,.4)}h3{color:var(--accent);font-family:SFMono-Regular,Consolas,monospace;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;line-height:1.4;opacity:.85}.section-block ul{display:grid;grid-gap:9px;gap:9px;margin:0;padding-left:18px;color:var(--foreground);font-size:13.5px;line-height:1.7}.section-block li::marker{color:var(--subtle)}.section-block.warn li::marker{color:var(--warning)}.section-block.good li::marker{color:var(--success)}.examples,.parts-list{display:grid;grid-gap:5px;gap:5px}.example-row,.part-row{display:grid;grid-template-columns:minmax(100px,.32fr) 1fr;grid-gap:12px;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:5px;background:var(--surface-2)}.example-row p,.part-row>div{min-width:0}code{display:inline-block;max-width:100%;overflow-wrap:anywhere;color:var(--accent);font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:12px;line-height:1.5}.example-row p,.part-row p{color:var(--foreground);font-size:13px;line-height:1.55}.part-row small{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.4}.empty-state{flex-direction:column;min-height:540px;gap:12px;text-align:center}.empty-icon,.empty-state{display:flex;align-items:center;justify-content:center}.empty-icon{width:38px;height:38px;border:1px solid var(--border-strong);border-radius:8px;color:var(--muted);background:var(--surface-2)}.empty-state p{color:var(--muted);font-size:12px}.error{margin:14px;padding:11px 14px;border:1px solid rgba(245,103,103,.3);border-radius:5px;color:#fca5a5;background:rgba(245,103,103,.07);font-size:13px;line-height:1.5}.turnstile-container{position:fixed;right:16px;bottom:16px;z-index:50}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:1100px){.workspace{grid-template-columns:1fr}.input-panel,.output-panel{min-height:auto}textarea{min-height:280px}}@media (max-width:680px){.shell{padding:0 14px 32px}.topbar{padding:0 14px}.result-head{flex-direction:column;align-items:stretch}.icon-button{width:-moz-fit-content;width:fit-content}.control-row{flex-direction:column;align-items:stretch}.ghost-button,.submit-button{width:100%;height:36px}.example-row,.part-row{grid-template-columns:1fr}}