:root {
  color-scheme: dark;
  --bg: #09111c;
  --sidebar: #0b1421;
  --panel: #111d2b;
  --panel-deep: #0e1926;
  --line: #233247;
  --line-soft: rgba(144, 170, 194, .13);
  --text: #edf5f8;
  --muted: #91a2b6;
  --quiet: #64778c;
  --mint: #6aebc2;
  --mint-deep: #22bc91;
  --violet: #b49cff;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
::selection { background: rgba(106, 235, 194, .28); color: #fff; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; flex: 0 0 242px; height: 100vh; padding: 29px 16px 25px; display: flex; flex-direction: column; background: linear-gradient(167deg, #0d1927 0%, #0a1421 72%); border-right: 1px solid #203044; z-index: 4; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px; width: fit-content; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; color: var(--mint); filter: drop-shadow(0 0 13px rgba(74, 222, 177, .22)); }
.brand-mark svg { width: 39px; height: 39px; }
.brand-type strong { display: block; font-size: 19px; line-height: 1.1; letter-spacing: .09em; font-weight: 850; }
.brand-type strong span { color: var(--mint); }
.brand-type small { display: block; margin-top: 4px; color: #748aa0; font-size: 9px; letter-spacing: .25em; font-weight: 700; }
.sidebar-section-label { margin: 64px 14px 14px; display: flex; justify-content: space-between; color: #668096; font: 700 10px var(--mono); letter-spacing: .16em; }
.sidebar-section-label span { color: #465b70; }
.sidebar-nav { display: grid; gap: 4px; }
.nav-link { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 13px; color: #91a5ba; border: 1px solid transparent; border-radius: 9px; font-size: 13px; font-weight: 600; transition: background .18s, color .18s, border-color .18s; }
.nav-link:hover, .nav-link:focus-visible { background: rgba(130, 160, 190, .08); color: #f2f8fa; outline: none; }
.nav-link.is-active { color: var(--mint); background: linear-gradient(90deg, rgba(69, 216, 171, .13), rgba(69, 216, 171, .035)); border-color: rgba(80, 223, 178, .12); }
.nav-link svg { width: 17px; height: 17px; flex: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-arrow { margin-left: auto; font-size: 17px; font-weight: 400; opacity: .6; }
.sidebar-spacer { flex: 1; }
.sidebar-note { position: relative; padding: 19px 18px 17px; overflow: hidden; background: linear-gradient(140deg, #183343, #142436 72%); border: 1px solid rgba(104, 231, 190, .13); border-radius: 11px; }
.sidebar-note::after { content: ""; position: absolute; right: -33px; top: -39px; width: 110px; height: 110px; border: 1px solid rgba(106,235,194,.14); border-radius: 50%; box-shadow: 0 0 0 25px rgba(106,235,194,.025); }
.sidebar-note-icon { width: 31px; height: 31px; display: grid; place-items: center; margin-bottom: 13px; border: 1px solid rgba(106,235,194,.25); border-radius: 7px; color: var(--mint); font-size: 16px; }
.sidebar-note strong { font-size: 13px; }
.sidebar-note p { margin: 7px 0 0; color: #9bb4c3; line-height: 1.7; font-size: 11px; }
.sidebar-note kbd { font: 10px var(--mono); color: #e6f5f0; }
.sidebar-footer { display: flex; align-items: center; gap: 9px; padding: 23px 11px 0; color: #6e859a; font-size: 10px; letter-spacing: .03em; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }

.main-wrap { flex: 1; min-width: 0; background: radial-gradient(circle at 81% 1%, rgba(41, 74, 87, .24), transparent 34%), var(--bg); }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; border-bottom: 1px solid var(--line-soft); }
.breadcrumb { display: flex; align-items: center; gap: 14px; color: #6f8399; font-size: 12px; }
.breadcrumb strong { color: #c7d5e0; font-weight: 600; }
.breadcrumb-separator { color: #45576a; }
.topbar-meta { display: flex; align-items: center; gap: 11px; color: #91a2b3; font: 10px var(--mono); letter-spacing: .05em; }
.topbar-line { width: 22px; height: 1px; background: var(--mint); }
.topbar-version { padding: 6px 9px; margin-left: 7px; color: var(--mint); border: 1px solid rgba(106, 235, 194, .23); border-radius: 4px; }
.main-content { width: min(1392px, 100%); padding: 34px 48px 96px; margin: 0 auto; }

.hero { position: relative; min-height: 275px; display: flex; align-items: center; padding: 35px 43px; overflow: hidden; isolation: isolate; border: 1px solid #294152; border-radius: 16px; background: radial-gradient(circle at 77% 45%, rgba(46, 119, 111, .26), transparent 27%), linear-gradient(106deg, #152938 0%, #132436 58%, #142538 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 16px 48px rgba(0,0,0,.1); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55; background-image: linear-gradient(rgba(153, 203, 203, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(153, 203, 203, .055) 1px, transparent 1px); background-size: 37px 37px; mask-image: linear-gradient(90deg, transparent 23%, black 100%); }
.hero::after { content: ""; position: absolute; width: 460px; height: 460px; right: 8%; bottom: -360px; border-radius: 50%; background: rgba(78, 221, 174, .07); filter: blur(30px); }
.hero-copy { position: relative; z-index: 2; max-width: 650px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--mint); font: 700 10px var(--mono); letter-spacing: .16em; }
.eyebrow-line { width: 20px; height: 1px; background: var(--mint); }
.eyebrow-index { margin-left: 6px; color: #739e9b; }
.hero h1 { margin: 20px 0 15px; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.25; letter-spacing: -.055em; font-weight: 760; }
.hero h1 span { display: block; color: var(--mint); }
.hero p { max-width: 555px; margin: 0; color: #a9bdc8; font-size: 13px; line-height: 1.85; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.hero-tags span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; color: #bcd4d8; background: rgba(14, 31, 43, .75); border: 1px solid rgba(155, 204, 198, .13); border-radius: 5px; font-size: 10px; font-weight: 600; }
.hero-tags i { width: 5px; height: 5px; background: var(--mint); border-radius: 50%; }
.hero-tags .hero-tags-light { color: #7fa2a9; background: transparent; }
.hero .hero-limit-note { margin-top: 10px; color: #779e9f; font-size: 10px; line-height: 1.5; }
.hero-visual { position: absolute; right: 14px; top: 0; bottom: 0; width: 370px; opacity: .95; }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(108, 235, 193, .17); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 186px; height: 186px; }
.orbit-two { width: 260px; height: 260px; border-style: dashed; border-color: rgba(108, 235, 193, .19); }
.orbit-three { width: 350px; height: 350px; border-color: rgba(108, 235, 193, .08); }
.hero-core { position: absolute; left: 50%; top: 50%; width: 128px; height: 128px; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translate(-50%, -50%); background: linear-gradient(150deg, #286054, #153f42); border: 1px solid rgba(133, 255, 220, .42); border-radius: 19px; box-shadow: 0 0 0 10px rgba(91,225,183,.055), 0 25px 55px rgba(3,15,23,.33), inset 0 1px 0 rgba(255,255,255,.15); }
.core-symbol { font: 600 55px Georgia, serif; line-height: .9; color: #b2ffe2; text-shadow: 0 0 18px rgba(131,255,215,.4); }
.core-caption { margin-top: 12px; color: #b3e7d6; font: 600 8px var(--mono); letter-spacing: .12em; }
.visual-node { position: absolute; width: 9px; height: 9px; background: var(--mint); border: 2px solid #175040; border-radius: 50%; box-shadow: 0 0 14px var(--mint); }
.node-one { left: 11%; top: 35%; }.node-two { right: 9%; bottom: 32%; }.node-three { right: 27%; top: 10%; width: 6px; height: 6px; }
.visual-label { position: absolute; color: #83aca9; font: 8px var(--mono); letter-spacing: .16em; }.label-one { top: 20%; left: 4%; }.label-two { right: 2%; bottom: 17%; }

.workbench, .info-section, .workflow-section { scroll-margin-top: 28px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 43px 0 24px; }
.section-kicker { margin: 0 0 9px !important; color: var(--mint) !important; font: 700 10px var(--mono) !important; letter-spacing: .14em; }
.section-heading h2 { margin: 0; font-size: 23px; letter-spacing: -.04em; }
.section-heading p { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.section-rule { display: flex; align-items: center; gap: 12px; padding-bottom: 5px; color: var(--quiet); font: 11px var(--mono); }
.section-rule span:first-child { color: var(--mint); }
.mode-fieldset { min-width: 0; padding: 0; margin: 0 0 17px; border: 0; }
.mode-fieldset legend { width: 100%; padding: 0 0 11px; color: #c8d8e3; font-size: 12px; font-weight: 700; }
.mode-fieldset legend span { margin-left: 9px; color: #536b80; font: 9px var(--mono); letter-spacing: .12em; }
.mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mode-card { position: relative; display: flex; align-items: center; gap: 16px; min-height: 94px; padding: 18px; background: #111c2a; border: 1px solid #27384a; border-radius: 10px; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.mode-card:hover { border-color: #417565; transform: translateY(-1px); }
.mode-card:has(input:checked) { border-color: rgba(106,235,194,.7); background: linear-gradient(100deg, rgba(42, 105, 88, .19), rgba(20, 41, 52, .35)), #111c2a; box-shadow: inset 0 0 0 1px rgba(106,235,194,.07); }
.mode-card:has(input:focus-visible) { outline: 2px solid var(--mint); outline-offset: 3px; }
.mode-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mode-radio { order: 4; flex: none; width: 17px; height: 17px; margin-left: auto; border: 1.5px solid #687c8f; border-radius: 50%; }
.mode-card:has(input:checked) .mode-radio { border: 5px solid var(--mint); background: #123a35; }
.mode-icon, .engine-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 9px; }
.mode-icon svg, .engine-icon svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mode-icon-performance, .engine-icon.performance { color: var(--mint); background: rgba(106,235,194,.105); }
.mode-icon-dynamic, .engine-icon.dynamic { color: var(--violet); background: rgba(180,156,255,.11); }
.mode-content { display: grid; gap: 6px; }.mode-content strong { font-size: 14px; font-weight: 700; }.mode-content small { color: #8fa3b6; font-size: 11px; }
.mode-index { order: 3; align-self: flex-start; margin-left: auto; color: #506477; font: 10px var(--mono); }.mode-card:has(input:checked) .mode-index { color: #66a598; }

.editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.editor-panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--panel-deep); border: 1px solid #28384b; border-radius: 11px; }
.panel-header { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 18px; border-bottom: 1px solid #26374a; }
.panel-title-row { display: flex; align-items: center; gap: 9px; }
.panel-title-row h3 { margin: 0; white-space: nowrap; font-size: 13px; font-weight: 700; }
.panel-number { color: #6e9c9d; font: 10px var(--mono); }.panel-number.accent { color: var(--mint); }
.panel-subtitle { display: block; margin-top: 7px; color: #60758a; font: 9px var(--mono); letter-spacing: .11em; }
.panel-actions { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.text-button, .icon-button { min-height: 29px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 8px; color: #a8bfcc; border: 1px solid transparent; border-radius: 5px; background: transparent; font-size: 11px; font-weight: 600; transition: color .15s, background .15s, border-color .15s; }
.text-button:hover:not(:disabled), .icon-button:hover:not(:disabled), .text-button:focus-visible, .icon-button:focus-visible { color: var(--mint); background: rgba(106,235,194,.09); border-color: rgba(106,235,194,.17); outline: none; }
.text-button:disabled { color: #506477; }
.text-button svg, .icon-button svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-button { width: 29px; padding: 5px; }
.editor-surface, .output-surface { position: relative; height: 360px; min-height: 360px; max-height: 360px; flex: none; background: #0b1622; }
.editor-surface { display: flex; overflow: hidden; }
.line-numbers { flex: 0 0 47px; padding: 21px 10px 21px 0; overflow: hidden; color: #526679; border-right: 1px solid #1a2a39; text-align: right; white-space: pre; user-select: none; font: 11px/22px var(--mono); }
#source-code { flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 21px 16px; resize: none; overflow-y: scroll; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #416c73 #0b1622; color: #cfdfeb; background: transparent; border: 0; outline: none; tab-size: 2; font: 11px/22px var(--mono); letter-spacing: .01em; white-space: pre; }
#source-code::-webkit-scrollbar { width: 10px; height: 10px; }
#source-code::-webkit-scrollbar-track { background: #0b1622; }
#source-code::-webkit-scrollbar-thumb { background: #416c73; border: 2px solid #0b1622; border-radius: 8px; }
#source-code::-webkit-scrollbar-thumb:hover { background: #66a99f; }
#source-code::placeholder { color: #52677b; }
#source-code:focus { box-shadow: inset 0 0 0 1px rgba(106,235,194,.17); }
.editor-surface.is-dragging { box-shadow: inset 0 0 0 2px var(--mint); }
.drop-hint { position: absolute; inset: 12px; display: none; align-items: center; justify-content: center; gap: 10px; background: rgba(15, 37, 43, .96); border: 1px dashed var(--mint); border-radius: 7px; color: var(--mint); font-size: 13px; font-weight: 700; pointer-events: none; }
.drop-hint span { font-size: 25px; font-weight: 400; }.is-dragging .drop-hint { display: flex; }
.output-surface { overflow-y: scroll; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #416c73 #0b1622; }
.output-surface::-webkit-scrollbar { width: 10px; height: 10px; }
.output-surface::-webkit-scrollbar-track { background: #0b1622; }
.output-surface::-webkit-scrollbar-thumb { background: #416c73; border: 2px solid #0b1622; border-radius: 8px; }
.output-surface::-webkit-scrollbar-thumb:hover { background: #66a99f; }
.output-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.empty-glyph { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 17px; color: #5c928b; background: rgba(86,166,143,.08); border: 1px solid rgba(102,187,160,.17); border-radius: 14px; font: 26px var(--mono); }
.empty-glyph i { font-size: 24px; font-style: normal; color: var(--mint); }
.output-empty strong { font-size: 13px; color: #a9c4c6; }.output-empty p { max-width: 260px; margin: 8px 0 0; color: #637e90; font-size: 11px; line-height: 1.6; }
#output-pre { min-width: 100%; width: max-content; margin: 0; padding: 21px 19px; color: #bbebd7; font: 11px/22px var(--mono); tab-size: 2; white-space: pre; }
.panel-footer { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 18px; color: #71879b; border-top: 1px solid #26374a; font: 10px var(--mono); }
.panel-footer span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.size-indicator { flex: none; color: #94b9af; }.size-indicator.over-limit { color: #ffab9e; }
.result-badge { padding: 4px 6px; color: #ffd5a5; background: rgba(245, 166, 88, .11); border-radius: 4px; font-size: 9px; font-weight: 600; }

.runbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 79px; margin-top: 14px; padding: 13px 15px 13px 20px; border: 1px solid #27394c; border-radius: 10px; background: linear-gradient(90deg, #142334, #122334); }
.run-status { display: flex; align-items: center; gap: 10px; color: #a6b9c8; font-size: 11px; line-height: 1.5; }.run-status-icon { color: var(--mint); font-size: 8px; text-shadow: 0 0 10px var(--mint); }.run-status.is-error { color: #ffc0b5; }.run-status.is-error .run-status-icon { color: #ff907f; text-shadow: none; }.run-status.is-loading .run-status-icon { animation: pulse 1s ease-in-out infinite; }
.run-button { min-width: 166px; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; color: #05241f; background: linear-gradient(130deg, #9af6cf, #5ce6ba); border: 0; border-radius: 7px; box-shadow: 0 6px 24px rgba(62,224,167,.18); font-size: 12px; font-weight: 800; transition: transform .18s, box-shadow .18s, filter .18s; }
.run-button:hover:not(:disabled), .run-button:focus-visible:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(62,224,167,.27); outline: none; }
.run-button:disabled { color: #63796e; background: #2b594b; box-shadow: none; }.run-button svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.run-button.is-loading svg { animation: nudge .9s ease-in-out infinite; }
.result-stats { display: grid; grid-template-columns: 1fr 1fr 1fr 1.35fr; gap: 1px; overflow: hidden; margin-top: 14px; border: 1px solid #26384a; border-radius: 10px; background: #26384a; }.result-stats > div { min-height: 72px; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 12px 17px; background: #101f2c; }.result-stats span { color: #748da1; font-size: 10px; }.result-stats strong { color: #dff8ee; font: 700 15px var(--mono); }.result-stats .stats-detail { background: linear-gradient(120deg, #183b38, #18303a); }.result-stats .stats-detail span { color: var(--mint); font-size: 11px; font-weight: 700; }.result-stats small { color: #a0c4bd; font-size: 10px; }

.info-section { margin-top: 70px; }.section-heading.compact { margin-bottom: 22px; }
.engine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.engine-card { min-height: 245px; display: flex; flex-direction: column; padding: 25px; background: linear-gradient(150deg, #152535, #0e1b29); border: 1px solid #293b4e; border-radius: 11px; transition: border-color .2s, transform .2s; }.engine-card:hover { border-color: #416f68; transform: translateY(-2px); }
.engine-card-top { display: flex; justify-content: space-between; align-items: flex-start; }.engine-card-index { color: #627a8c; font: 10px var(--mono); letter-spacing: .1em; }.engine-card h3 { margin: 25px 0 9px; font-size: 17px; }.engine-card p { max-width: 440px; margin: 0; color: #91a7b7; font-size: 12px; line-height: 1.8; }.engine-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 21px; color: #689c95; font: 10px var(--mono); letter-spacing: .11em; }.engine-card-foot span { font-size: 17px; }
.workflow-section { margin-top: 66px; }.workflow-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #283a4b; }.workflow-grid > div { padding: 23px 23px 0 0; }.workflow-grid > div + div { padding-left: 25px; border-left: 1px solid #283a4b; }.workflow-grid span { display: block; margin-bottom: 20px; color: var(--mint); font: 11px var(--mono); }.workflow-grid strong { font-size: 13px; }.workflow-grid p { max-width: 250px; margin: 9px 0 0; color: #8097a8; font-size: 11px; line-height: 1.75; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 70px; padding: 20px 48px; color: #5d7285; border-top: 1px solid var(--line-soft); font: 10px var(--mono); letter-spacing: .06em; }
.toast { position: fixed; left: 50%; bottom: 27px; z-index: 20; padding: 11px 17px; border: 1px solid rgba(106,235,194,.27); border-radius: 7px; color: #d6f8e9; background: #183b38; box-shadow: 0 15px 45px rgba(0,0,0,.3); font-size: 12px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
@keyframes pulse { 50% { opacity: .3; } }@keyframes nudge { 50% { transform: translateX(3px); } }

@media (max-width: 1200px) {
  .sidebar { flex-basis: 210px; }.main-content { padding-left: 30px; padding-right: 30px; }.topbar { padding: 0 30px; }.site-footer { padding-left: 30px; padding-right: 30px; }
  .hero-visual { right: -35px; opacity: .58; }.hero-copy { max-width: 570px; }
}
@media (max-width: 980px) {
  .app-shell { display: block; }.sidebar { position: relative; width: 100%; height: auto; flex-direction: row; align-items: center; padding: 13px 25px; border-right: 0; border-bottom: 1px solid #203044; }.brand { flex: none; padding: 0; }.sidebar-section-label, .sidebar-spacer, .sidebar-note, .sidebar-footer { display: none; }.sidebar-nav { display: flex; gap: 4px; margin-left: auto; }.nav-link { min-height: 37px; padding: 0 10px; font-size: 11px; }.nav-link svg { width: 15px; height: 15px; }.nav-arrow { display: none; }.topbar { display: none; }.main-content { padding-top: 25px; }
}
@media (max-width: 720px) {
  .sidebar { padding: 12px 18px; gap: 14px; }.brand-type strong { font-size: 17px; }.brand-mark, .brand-mark svg { width: 32px; height: 32px; }.sidebar-nav { overflow-x: auto; }.nav-link { white-space: nowrap; }.nav-link:not(.is-active) span { display: none; }.nav-link:not(.is-active) { width: 37px; justify-content: center; }
  .main-content { padding: 20px 17px 55px; }.hero { min-height: 250px; padding: 29px 26px; }.hero-visual { right: -90px; opacity: .25; }.hero p { max-width: 460px; }.hero h1 { font-size: clamp(29px, 6vw, 38px); }
  .mode-grid, .editor-grid, .engine-grid { grid-template-columns: 1fr; }.editor-surface, .output-surface { height: 290px; min-height: 290px; max-height: 290px; }.mode-card { min-height: 78px; }.section-heading { margin-top: 36px; }.section-rule { display: none; }.result-stats { grid-template-columns: repeat(2, 1fr); }.workflow-grid { grid-template-columns: 1fr; }.workflow-grid > div, .workflow-grid > div + div { padding: 18px 0; border-left: 0; border-bottom: 1px solid #283a4b; }.workflow-grid span { margin-bottom: 9px; }.workflow-grid p { max-width: none; }.site-footer { padding: 20px 17px; flex-wrap: wrap; }.site-footer span:last-child { display: none; }
}
@media (max-width: 470px) {
  .brand-type small { display: none; }.brand-type strong { font-size: 15px; }.brand { gap: 6px; }.sidebar { gap: 7px; }.nav-link { padding: 0 8px; }.nav-link.is-active { font-size: 10px; }
  .hero { min-height: 275px; }.hero-tags { gap: 6px; }.hero-tags span { padding: 6px 8px; font-size: 9px; }.panel-header { align-items: flex-start; padding: 14px; }.panel-actions { max-width: 56%; }.text-button { font-size: 10px; padding: 5px; }.runbar { align-items: stretch; flex-direction: column; gap: 13px; padding: 16px; }.run-button { width: 100%; }.result-stats > div { min-height: 66px; padding: 10px 12px; }.result-stats strong { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Account and administration */
.topbar-account { display: inline-flex; align-items: center; gap: 9px; max-width: 220px; min-height: 34px; margin-left: 6px; padding: 6px 11px; overflow: hidden; color: #d8ede6; background: #162d35; border: 1px solid rgba(106,235,194,.28); border-radius: 6px; font: 600 11px var(--sans); }
.topbar-account:hover, .topbar-account:focus-visible { border-color: var(--mint); outline: none; }
.topbar-account #auth-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px rgba(106,235,194,.7); }
.topbar-account.is-guest .account-dot { background: #718698; box-shadow: none; }
.admin-section { margin-top: 66px; scroll-margin-top: 28px; }
.admin-panel { overflow: hidden; background: linear-gradient(145deg, #122233, #0d1a27); border: 1px solid #293b4e; border-radius: 11px; }
.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 76px; padding: 14px 20px; border-bottom: 1px solid #26394a; }
.admin-toolbar > div { display: flex; align-items: center; gap: 10px; }
.admin-toolbar strong { font-size: 13px; }
.admin-toolbar > div span { color: #78938e; font: 10px var(--mono); }
.admin-search { display: flex; align-items: center; gap: 9px; color: #8299aa; font-size: 11px; }
.admin-search input { width: min(260px, 42vw); min-height: 36px; padding: 8px 11px; color: var(--text); background: #0b1825; border: 1px solid #2b4050; border-radius: 6px; outline: none; font: 11px var(--sans); }
.admin-search input:focus { border-color: var(--mint); }
.admin-search input::placeholder { color: #597084; }
.admin-feedback { padding: 12px 20px; color: #94aaaf; font-size: 11px; }
.admin-feedback.is-error { color: #ffb2a5; }
.admin-table-wrap { width: 100%; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table th { padding: 14px 20px; color: #6e859a; background: #101e2c; font: 600 10px var(--mono); letter-spacing: .06em; white-space: nowrap; }
.admin-table td { padding: 14px 20px; color: #b8cbd4; border-top: 1px solid #233344; font-size: 11px; white-space: nowrap; }
.admin-table td:first-child { color: #e4f1f1; font-weight: 600; }
.admin-table tr:hover td { background: rgba(119,164,169,.04); }
.admin-role-control { display: flex; align-items: center; gap: 8px; }
.admin-role-control select { min-height: 32px; padding: 5px 24px 5px 8px; color: #dcece7; background: #122b35; border: 1px solid #365568; border-radius: 5px; font: 11px var(--sans); }
.admin-role-control select:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.admin-role-control button { min-height: 32px; padding: 5px 10px; color: #092c25; background: var(--mint); border: 0; border-radius: 5px; font-size: 10px; font-weight: 800; }
.admin-role-control button:hover:not(:disabled) { background: #9af6d5; }
.admin-role-control button:disabled { opacity: .42; }
.admin-self { color: #6e8897; font-size: 10px; }
.admin-pagination { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 54px; padding: 10px 20px; color: #7995a3; border-top: 1px solid #26394a; font: 10px var(--mono); }
.admin-pagination > div { display: flex; gap: 7px; }
.admin-pagination button { min-height: 31px; padding: 5px 10px; color: #b8d8ce; background: #163237; border: 1px solid #315c58; border-radius: 5px; font: 600 10px var(--sans); }
.admin-pagination button:hover:not(:disabled) { border-color: var(--mint); color: var(--mint); }
.admin-pagination button:disabled { opacity: .4; }
.role-chip { display: inline-flex; align-items: center; width: fit-content; padding: 4px 7px; color: #9bdfc8; background: #1b3a39; border: 1px solid rgba(106,235,194,.2); border-radius: 4px; font: 700 9px var(--mono); letter-spacing: .06em; }
.role-chip.role-vip { color: #d6c8ff; background: #322c49; border-color: rgba(180,156,255,.25); }
.role-chip.role-admin { color: #f4d8ab; background: #3b322b; border-color: rgba(244,216,171,.25); }
.auth-dialog { width: min(440px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; overflow-y: auto; color: var(--text); background: #111f2c; border: 1px solid #3a5b60; border-radius: 15px; box-shadow: 0 32px 90px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.035); }
.auth-dialog::backdrop { background: rgba(3,9,16,.78); backdrop-filter: blur(7px); }
.auth-dialog-inner { position: relative; padding: 35px; }
.auth-dialog-inner::before { content: ""; position: absolute; inset: 0 0 auto; height: 125px; pointer-events: none; background: radial-gradient(ellipse at 50% 0, rgba(74,216,178,.13), transparent 72%); }
.auth-close { position: absolute; top: 17px; right: 18px; width: 29px; height: 29px; color: #9ab0ba; background: transparent; border: 0; border-radius: 5px; font-size: 24px; line-height: 1; }
.auth-close:hover, .auth-close:focus-visible { color: var(--mint); background: rgba(106,235,194,.09); outline: none; }
.auth-mark { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 17px; color: #b5ffe4; background: linear-gradient(145deg, #286758, #183e43); border: 1px solid rgba(106,235,194,.35); border-radius: 11px; font: 600 30px Georgia, serif; box-shadow: 0 9px 27px rgba(5,20,22,.35); }
.auth-eyebrow { position: relative; margin: 0 0 8px; color: var(--mint); font: 700 9px var(--mono); letter-spacing: .14em; }
.auth-dialog h2 { position: relative; margin: 0; font-size: 25px; letter-spacing: -.04em; }
.auth-description { position: relative; margin: 9px 0 22px; color: #91a8b6; font-size: 11px; line-height: 1.7; }
.auth-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; margin-bottom: 19px; background: #0c1926; border: 1px solid #26394a; border-radius: 7px; }
.auth-tabs button { min-height: 35px; color: #8ba0b0; background: transparent; border: 0; border-radius: 5px; font-size: 11px; font-weight: 700; }
.auth-tabs button.is-active { color: var(--mint); background: #183537; box-shadow: 0 1px 7px rgba(0,0,0,.14); }
.auth-field { display: grid; gap: 8px; margin: 0 0 15px; color: #bed0d8; font-size: 11px; font-weight: 600; }
.auth-field input { width: 100%; min-height: 43px; padding: 10px 13px; color: var(--text); background: #0a1724; border: 1px solid #2d4355; border-radius: 6px; outline: none; font: 12px var(--sans); }
.auth-field input::placeholder { color: #5a7184; }
.auth-field input:focus { border-color: var(--mint); box-shadow: 0 0 0 3px rgba(106,235,194,.08); }
.auth-message { min-height: 16px; margin: 0 0 11px; color: #b4d8cb; font-size: 11px; line-height: 1.55; }
.auth-message.is-error { color: #ffaca0; }
.auth-link { display: block; margin: -4px 0 15px auto; padding: 4px 0; color: #8ccdb8; background: none; border: 0; font-size: 11px; }
.auth-link:hover, .auth-link:focus-visible { color: var(--mint); text-decoration: underline; outline: none; }
.auth-back { display: block; width: 100%; margin-top: 14px; padding: 5px; color: #9db7ba; background: none; border: 0; font-size: 11px; }
.auth-back:hover, .auth-back:focus-visible { color: var(--mint); outline: none; }
.auth-submit { width: 100%; min-height: 45px; color: #08251f; background: linear-gradient(130deg, #9af6cf, #5ce6ba); border: 0; border-radius: 6px; font-size: 12px; font-weight: 800; }
.auth-submit:hover:not(:disabled) { filter: brightness(1.08); }
.auth-submit:disabled { opacity: .58; }
.auth-footnote { margin: 16px 0 0; color: #6e8899; font-size: 10px; line-height: 1.7; text-align: center; }
.profile-card { display: flex; align-items: center; gap: 13px; padding: 16px; background: #0b1926; border: 1px solid #2b4050; border-radius: 8px; }
.profile-avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: #b6f4db; background: #1d514a; border-radius: 8px; font: 700 17px var(--sans); }
.profile-card > div:last-child { min-width: 0; display: grid; gap: 6px; }
.profile-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.profile-quota { display: flex; justify-content: space-between; align-items: center; margin: 17px 0; padding: 15px 2px; border-top: 1px solid #2b3d4c; border-bottom: 1px solid #2b3d4c; }
.profile-quota span { color: #8199a8; font-size: 11px; }
.profile-quota strong { color: var(--mint); font: 700 15px var(--mono); }
.profile-limit-note { margin: -7px 0 15px; color: #698595; font-size: 10px; line-height: 1.6; }
.profile-admin-button, .auth-signout { width: 100%; min-height: 40px; margin-top: 8px; padding: 0 12px; color: #cbe9de; background: #1c3d3e; border: 1px solid #3f6863; border-radius: 6px; font-size: 11px; font-weight: 700; }
.profile-admin-button { display: flex; align-items: center; justify-content: space-between; }
.profile-admin-button:hover { border-color: var(--mint); }
.auth-signout { color: #a7bac4; background: transparent; border-color: #34495a; }
.auth-signout:hover { color: #f6d2c9; border-color: #896052; }
@media (max-width: 720px) { .admin-section { margin-top: 50px; }.admin-toolbar { align-items: stretch; flex-direction: column; }.admin-search { justify-content: space-between; }.admin-search input { width: min(100%, 280px); }.admin-table { min-width: 650px; }.auth-dialog-inner { padding: 27px; } }