:root{--font-sans:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{color:#eef2f8;min-height:100dvh;font-family:var(--font-sans);background:#07080b}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default}*{scrollbar-width:thin;scrollbar-color:#2c3344 transparent}.app-shell{background:radial-gradient(1200px 500px at 10% -10%,#5eead40d,#0000 50%),#07080b;flex-direction:column;min-height:100dvh;display:flex}.app-header{z-index:20;border-bottom:1px solid #ffffff0f;flex:none;padding:10px 16px;position:relative}.header-bar{align-items:center;gap:16px;display:flex}.header-brand,.logo{align-items:center;gap:8px;display:flex}.header-help{color:#9aa6bd;background:0 0;border:1px solid #ffffff1f;border-radius:999px;place-items:center;width:22px;height:22px;padding:0;font-size:12px;line-height:1;display:grid}.header-help:hover{color:#fff}.header-thanks{white-space:nowrap;justify-content:center;align-items:center;height:36px;text-decoration:none;display:inline-flex}.header-help-backdrop{z-index:10;cursor:default;background:0 0;border:0;position:fixed;inset:0}.header-help-pop{z-index:30;color:#c5d0e0;background:#141820;border:1px solid #ffffff1a;border-radius:16px;width:min(26rem,100vw - 2rem);margin-top:8px;padding:16px;font-size:14px;line-height:1.5;position:absolute;top:100%;left:16px;box-shadow:0 16px 40px #00000073}.header-help-pop p{margin:0}.header-help-pop p+p{margin-top:8px}.header-help-pop strong{color:#fff;font-weight:600}.header-sheet-btn.is-open{color:#7dd3fc;background:#202633}.tour{z-index:80;pointer-events:none;position:fixed;inset:0}.tour-shade{z-index:80;pointer-events:auto;background:#07080bb8;position:fixed}.tour-ring{z-index:81;pointer-events:none;border:2px solid #5eead4;border-radius:12px;position:fixed;box-shadow:0 0 0 1px #5eead459}.tour-card{z-index:82;color:#c5d0e0;pointer-events:auto;background:#141820;border:1px solid #ffffff1a;border-radius:16px;padding:16px;font-size:14px;line-height:1.5;position:fixed;box-shadow:0 16px 40px #00000073}.tour-card h2{color:#fff;margin:0;font-size:18px;font-weight:600}.tour-card p{margin:8px 0 0}.tour-progress{color:#7dd3fc;letter-spacing:.04em;margin:0;font-size:12px;font-weight:600}.tour-actions{justify-content:space-between;align-items:center;gap:12px;margin-top:14px;display:flex}.tour-nav{gap:8px;display:flex}.tour-skip{color:#8ea0b8;background:0 0;border:0;padding:0;font-size:13px}.tour-skip:hover{color:#fff}.tour-card .toolbar-btn:disabled{opacity:.45}@media (prefers-reduced-motion:reduce){.tour-ring{transition:none}}.header-sheet{z-index:30;color:#c5d0e0;background:#141820;border:1px solid #ffffff1a;border-radius:16px;width:min(40rem,100vw - 2rem);max-height:min(72dvh,40rem);margin-top:8px;padding:18px 18px 16px;font-size:14px;line-height:1.55;position:absolute;top:100%;left:16px;overflow:auto;box-shadow:0 16px 40px #00000073}.header-sheet h2{color:#f4f7fb;margin:18px 0 0;font-size:15px;font-weight:600}.header-sheet h2:first-child{margin-top:0}.header-sheet p{margin:8px 0 0}.header-sheet strong{color:#fff;font-weight:600}.header-sheet code{color:#e7edf6;font-family:var(--font-mono);font-size:.92em}.sheet-weight{gap:6px;margin:12px 0 0;padding:0;list-style:none;display:grid}.sheet-weight li{background:#ffffff0a;border-radius:8px;justify-content:space-between;align-items:center;gap:16px;padding:6px 10px;display:flex}.sheet-weight code{color:#9ecbff}.sheet-weight span{color:#7dd3fc;font-family:var(--font-mono);font-size:13px}.logo h1,.header-brand h1{color:#f4f7fb;letter-spacing:.01em;white-space:nowrap;margin:0;font-size:20px;font-weight:600}.logo{gap:10px}.logo-mark{--logo-from:#5eead4;--logo-to:#7dd3fc;flex:none;width:36px;height:28px;position:relative}.logo-bar{background:linear-gradient(90deg, var(--logo-from), var(--logo-to));height:4px;transform:translate(-50%, calc(var(--slot) * 12px));border-radius:999px;transition:transform .46s cubic-bezier(.22,.8,.2,1);position:absolute;top:0;left:50%}.logo-bar.is-short{width:20px}.logo-bar.is-mid{width:28px}.logo-bar.is-long{width:36px}@media (prefers-reduced-motion:reduce){.logo-bar{transition:none}}.header-controls{flex:none;align-items:center;gap:12px;margin-left:auto;display:flex}.header-menu{display:contents}.header-menu-actions{display:none}.header-field{color:#9aa6bd;white-space:nowrap;align-items:center;gap:8px;font-size:12px;display:flex}.header-burger{color:#9aa6bd;background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;display:none}.header-actions{align-items:center;gap:6px;display:flex}.toolbar-btn{color:#e7edf6;background:#171b24;border:1px solid #ffffff1a;border-radius:10px;height:36px;padding:0 12px;font-size:13px;font-weight:500}.toolbar-btn:hover{background:#202633}.toolbar-btn-run{color:#04241f;background:#5eead4;border-color:#0000}.toolbar-btn-run:hover{background:#7ef0df}.toolbar-btn:focus-visible,.header-thanks:focus-visible,.header-help:focus-visible,.header-burger:focus-visible,.ui-select:focus-visible,.ui-select-option:focus-visible,.candidate:focus-visible,.tape-step:focus-visible,.block-help:focus-visible{outline-offset:2px;outline:2px solid #5eead4}.ui-select{color:#e7edf6;text-align:left;background:#141820;border:1px solid #ffffff1a;border-radius:10px;justify-content:space-between;align-items:center;gap:8px;min-width:0;height:36px;padding:0 10px;font-size:13px;display:inline-flex}.ui-select:hover{background:#1b212c}.ui-select-field{width:fit-content;max-width:100%;position:relative}.ui-select-level{width:6.6rem}.ui-select-example{width:14.5rem}.ui-select-value{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.ui-select-chevron{color:#9aa6bd;flex:none;transition:transform .16s}.ui-select.is-open .ui-select-chevron{transform:rotate(180deg)}.ui-select-menu{z-index:40;background:#141820;border:1px solid #ffffff1a;border-radius:12px;width:100%;padding:12px 8px;position:absolute;top:calc(100% + 6px);left:0;overflow:hidden;box-shadow:0 16px 40px #00000073}.ui-select-scroll{overscroll-behavior:contain;scrollbar-color:#ffffff59 transparent;max-height:216px;position:relative;overflow:hidden auto}.ui-select-option{color:#e7edf6;text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;width:100%;height:36px;padding:0 10px;font-size:13px;display:flex}.ui-select-separator{background:#ffffff14;height:1px;margin:4px 6px}.ui-select-group{color:#8ea0b8;pointer-events:none;-webkit-user-select:none;user-select:none;padding:6px 10px 2px;font-size:11px;font-weight:600;line-height:16px}.ui-select-option-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.ui-select-option:hover,.ui-select-option.is-active{background:#202633}.ui-select-option.is-selected{color:#5eead4}.header-field input[type=range]{accent-color:#5eead4;width:92px}.header-speed-control{align-items:center;gap:8px;display:inline-flex}.header-speed{color:#d5deec;font-variant-numeric:tabular-nums;width:3.6rem}.zone-editor{grid-area:1/1}.zone-candidates{grid-area:2/1}.right-rail{flex-direction:column;grid-area:1/2/span 2;gap:22px;min-width:0;min-height:0;display:flex}.right-rail .zone-tape{flex:1.1 1 0}.right-rail .zone-element{flex:1.2 1 0}.step-count{color:#d5deec;font-variant-numeric:tabular-nums;flex:none;margin:0 0 0 auto;font-size:15px;font-weight:600}.run-controls{flex:none;justify-content:flex-start;align-items:center;gap:6px;height:72px;display:flex}.stage{flex:1;grid-template-rows:minmax(360px,1.75fr) minmax(168px,.55fr);grid-template-columns:minmax(0,1.45fr) minmax(280px,.85fr);gap:22px 16px;min-height:0;padding:22px 16px 16px;display:grid}.panel{background:#12151c;border:1px solid #ffffff0f;border-radius:18px;min-width:0;min-height:0;position:relative}.zone-element,.zone-candidates,.zone-tape{background:linear-gradient(#1a1e27, #1a1e27) padding-box, var(--zone-border) border-box;border:2px solid #0000}.zone-element{--zone-border:linear-gradient(180deg, #fb7185 0%, #fdba74 100%)}.zone-candidates{--zone-border:linear-gradient(180deg, #e879f9 0%, #818cf8 100%)}.zone-tape{--zone-border:linear-gradient(90deg, #4ade80 0%, #2dd4bf 100%)}.zone{flex-direction:column;display:flex}.zone-label{z-index:2;color:#f5f7fb;white-space:nowrap;background:#2a303c;border-radius:10px;align-items:center;gap:6px;margin:0;padding:6px 10px 6px 12px;font-size:13px;font-weight:500;line-height:1;display:inline-flex;position:absolute;top:0;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 4px #07080b}.block-help{color:#c7d0df;letter-spacing:0;background:0 0;border:1px solid #ffffff2e;border-radius:999px;flex:none;place-items:center;width:16px;height:16px;padding:0;font-size:11px;font-weight:600;line-height:1;display:grid}.block-help:hover{color:#fff;border-color:#fff6}.block-help-tip{z-index:60;color:#c5d0e0;background:#141820;border:1px solid #ffffff1f;border-radius:14px;padding:12px 14px;font-size:13px;font-weight:400;line-height:1.45;position:fixed;box-shadow:0 16px 40px #00000073}.block-help-tip p{margin:0}.block-help-title{color:#f7fbff;margin-bottom:4px;font-size:13px;font-weight:600}.block-help-link{color:#7dd3fc;margin-top:8px;font-size:12px;font-weight:600;text-decoration:none;display:inline-block}.block-help-link:hover{text-decoration:underline}.zone-body{flex:1;min-height:0;padding:22px 12px 12px;overflow:auto}.zone-editor .zone-body{--editor-line:26px;--editor-pad-y:12px;flex-direction:row;gap:12px;display:flex;overflow:hidden}.zone-tape .zone-body{border-radius:16px;flex-direction:column;width:auto;margin:0 4px 4px;display:flex;overflow:hidden}.zone-tape .tape{flex:1;min-height:0;overflow:auto}.editor-block{flex-direction:column;flex:1;gap:4px;min-height:0;display:flex}.editor-split{flex-direction:row;flex:1;min-width:0;min-height:0;display:flex}.editor-split.is-dragging{cursor:col-resize;-webkit-user-select:none;user-select:none}.editor-block-html,.editor-block-css{min-width:0;min-height:0}.editor-block-html{flex:0 0 var(--editor-html,50%)}.editor-block-css{flex:1 1 0;margin-left:12px}.editor-split-handle{cursor:col-resize;touch-action:none;background:0 0;border:0;flex:none;width:14px;padding:0}.editor-split-handle:before{content:"";background:#fff3;border-radius:2px;width:2px;height:calc(100% - 16px);margin:8px auto;display:block}.editor-split-handle:hover:before,.editor-split-handle.is-dragging:before,.editor-split-handle:focus-visible:before{background:#5eead4;width:3px}.editor-split-handle:focus-visible{outline:none}.editor-caption{color:#9aa6bd;font-size:12px;font-weight:500}.editor-scroll{scrollbar-gutter:stable;background:0 0;border-radius:12px;flex:1;min-width:0;min-height:0;overflow:auto}.editor-sheet{min-width:100%;min-height:100%;display:flex}.editor-gutter{padding:var(--editor-pad-y) 0 var(--editor-pad-y) 10px;color:#667085;font-family:var(--font-mono);font-size:16px;line-height:var(--editor-line);-webkit-user-select:none;user-select:none;background:0 0;flex-direction:column;display:flex}.editor-gutter span{text-align:right;cursor:pointer;width:1.75rem;display:block}.editor-gutter span.is-unused{color:#4b5568}.editor-paint .is-unused{color:#7b8798;background:#94a3b829}.editor-block-css .tok-property{box-shadow:inset 0 -1px #5eead473}.prop-check{z-index:3;top:calc(var(--editor-pad-y) + var(--check-line) * var(--editor-line) + (var(--editor-line) - 15px) / 2);left:max(2px, calc(14px + var(--check-col) * 1ch - 18px));appearance:none;width:15px;height:15px;font-family:var(--font-mono);font-variant-ligatures:none;cursor:pointer;background:#141820;border:1.5px solid #8ea0b8;border-radius:3px;margin:0;font-size:16px;position:absolute}.prop-check:hover{border-color:#d5deea}.prop-check:checked{background:#5eead4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.6 9 10 3' fill='none' stroke='%230b1220' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/11px no-repeat;border-color:#5eead4}.prop-check:focus-visible{outline-offset:2px;outline:2px solid #5eead4}.editor-paint .is-picked{color:#f4fffc;background:#5eead429;box-shadow:inset 0 -2px #5eead4}.unused-tip{z-index:60;color:#c5d0e0;max-width:320px;font-family:var(--font-sans);background:#141820;border:1px solid #ffffff1f;border-radius:14px;padding:10px 12px;font-size:13px;font-weight:400;line-height:1.45;position:fixed;box-shadow:0 16px 40px #00000073}.editor-gutter span.is-current{color:#f3fbff;background:#7dd3fc38;width:calc(1.75rem + 10px);margin-left:-10px;padding-left:10px;font-weight:700;box-shadow:inset 3px 0 #7dd3fc}.editor-code{flex:1 0 auto;min-width:max-content;position:relative}.editor-line{height:var(--editor-line);pointer-events:none;background:#7dd3fc38;position:absolute;left:0;right:0}.editor-text{padding:var(--editor-pad-y) 14px;font-family:var(--font-mono);font-variant-ligatures:none;font-size:16px;line-height:var(--editor-line);tab-size:2;white-space:pre;margin:0}.editor-paint{color:#e6edf3;pointer-events:none;position:relative}.editor-input{resize:none;color:#0000;caret-color:#e8fff3;-webkit-text-fill-color:transparent;background:0 0;border:0;outline:none;width:100%;height:100%;position:absolute;inset:0;overflow:hidden}.editor-input::selection{-webkit-text-fill-color:transparent;background:#5eead447}.tok-plain{color:#e6edf3}.tok-keyword{color:#c792ea}.tok-string{color:#c3e88d}.tok-number{color:#f78c6c}.tok-comment{color:#6b7385}.tok-punct{color:#89ddff}.tok-property{color:#5eead4}.tok-selector{color:#82aaff}.editor-block-css.has-lead-note{--editor-pad-y:calc(12px + var(--editor-line))}.selector-note{padding-left:calc(var(--note-indent,0) * 1ch);color:#7dd3fc;font-family:var(--font-mono);font-variant-ligatures:none;pointer-events:none;-webkit-user-select:none;user-select:none;font-size:16px}.selector-note.is-lead{height:var(--editor-line);align-items:center;display:flex;position:absolute;top:12px;left:14px}.zone-element .zone-body{flex-direction:column;display:flex}.element-view{flex-direction:column;flex:1;gap:12px;min-height:0;display:flex}.sample{color:#1c1915;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;min-height:0;font-family:var(--font-sans);background:#f7f4ee;border-radius:12px;flex:0 0 50%;padding:16px;font-size:16px;line-height:1.45;overflow:auto}.sample :where(p,div,section,article,button,span,h1,h2){font:inherit;color:inherit;margin:0}.sample button{background:0 0;border:0;padding:0}.sample-missing{color:#9f1239;margin:0}.property-list{flex-direction:column;flex:1;gap:8px;min-height:0;margin:0;padding:0;list-style:none;display:flex;overflow:auto}.property-list li{background:#10131a;border:1px solid #ffffff0f;border-radius:12px;grid-template-columns:minmax(7rem,auto) 1fr;gap:2px 10px;padding:8px 10px;display:grid}.property-list li.is-active{border-color:#7dd3fc73}.property-name{color:#9eb0c8;font-family:var(--font-mono);font-size:12px}.property-value{color:#f7fbff;font-family:var(--font-mono);font-size:13px;font-weight:600}.property-summary{color:#8ea0b8;grid-column:1/-1;font-size:12px}.panel-kicker{color:#d5deec;margin:0 0 10px;font-size:16px;font-weight:600}.kicker-property{color:#e879f9;font-family:var(--font-mono);font-weight:700}.empty-note{color:#8ea0b8;margin:0;font-size:13px}.candidate-list ul{flex-flow:wrap;align-items:flex-start;gap:10px;margin:0;padding:0;list-style:none;display:flex}.candidate{background:linear-gradient(#141820, #141820) padding-box, var(--zone-border) border-box;text-align:center;border:3px solid #0000;border-radius:12px;flex-direction:column;flex:none;justify-content:center;align-items:center;gap:6px;width:148px;height:72px;padding:0 8px;display:flex;box-shadow:0 8px 16px #00000047}.candidate:hover,.candidate.is-leader,.candidate.is-winner{background:linear-gradient(#1c2433, #1c2433) padding-box, var(--zone-border) border-box}.candidate.is-out{opacity:.55}.candidate-line{color:#f7fbff;max-width:100%;font-family:var(--font-mono);flex-direction:column;align-items:center;gap:4px;font-size:13px;font-weight:600;line-height:1;display:flex}.candidate-selector,.candidate-value{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.candidate-value{align-items:center;gap:6px;display:flex}.candidate-arrow{color:#e879f9}.candidate-flag{color:#f9a8d4}.candidate-note{color:#8ea0b8;text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:11px;line-height:1.2;overflow:hidden}.tape{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.tape-step{text-align:left;background:0 0;border:1px solid #0000;border-radius:10px;gap:8px;width:100%;padding:6px 8px;display:flex}.tape-step.is-current{background:#172033;border-color:#7dd3fc8c}.tape-step.is-future{opacity:.38}.tape-step:hover{background:#1c2230}.tape-index{color:#7dd3fc;width:1.6rem;font-family:var(--font-mono);font-variant-numeric:tabular-nums;flex:none;font-size:12px}.tape-message{color:#e7edf6;flex:1;min-width:0;font-size:13px;line-height:1.45}.umbrella{color:#8ea0b8;border-top:1px solid #ffffff0f;flex:none;gap:18px;padding:10px 16px 14px;font-size:13px;display:flex}.umbrella a{color:#7dd3fc;text-decoration:none}.umbrella a:hover{text-decoration:underline}.umbrella [aria-current=page]{color:#f4f7fb;font-weight:600}@media (width>=1100px){.app-shell{height:100dvh;overflow:hidden}}@media (width<=900px){.stage{grid-template-rows:none;grid-template-columns:1fr}.zone-editor,.zone-candidates,.right-rail{grid-area:auto}.right-rail{display:contents}.zone-candidates{order:1}.zone-element{order:2}.zone-tape,.zone-element{flex:none;min-height:280px}.zone{min-height:280px}.zone-editor{min-height:420px}.zone-editor .zone-body,.editor-split{flex-direction:column}.editor-split-handle{display:none}.editor-block-html,.editor-block-css{flex:1 1 0;min-height:160px;margin-left:0}.app-shell{height:auto;overflow:visible}}@media (width<=1100px){.header-bar{flex-wrap:wrap;align-items:center}.header-controls{grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:8px 10px;width:100%;margin-left:0;display:grid}.header-menu{display:contents}.header-field-level{grid-column:1}.header-field-speed{grid-column:2}.header-field-example{grid-column:1/-1}.header-field-example .ui-select-field{width:100%}.ui-select-example,.header-field .ui-select{width:100%;max-width:none}.header-field-level .ui-select{width:6.75rem}.header-field-speed input[type=range]{flex:1;width:auto}}@media (width<=639px){.header-bar{gap:8px}.header-brand{flex:1;order:1;min-width:0}.header-bar-action{display:none}.header-menu-actions{flex-direction:column;gap:8px;display:flex}.header-menu-actions .toolbar-btn{width:100%;height:44px}.header-burger{order:4;display:inline-flex}.header-controls{display:contents}.header-menu{background:#141820;border:1px solid #ffffff14;border-radius:14px;flex-direction:column;flex-basis:100%;order:4;gap:10px;padding:12px;display:none}.header-menu.is-open{display:flex}.header-menu .header-field{flex-direction:column;align-items:stretch}.header-menu .ui-select-field{width:100%}.header-menu .ui-select,.header-menu .ui-select-level{width:100%;height:44px}.app-shell{padding-bottom:calc(76px + env(safe-area-inset-bottom))}.run-controls{z-index:15;height:auto;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#07080b;border-top:1px solid #ffffff14;flex-wrap:wrap;position:fixed;bottom:0;left:0;right:0}.run-controls .toolbar-btn{height:44px;padding:0 8px}}