:root{--accent:#d4a24c;--accent-hover:#e8bc64;--app-vh:100vh;--bg:#030303;--bg-elevated:#ffffff08;--bg-header:#060606;--bg-surface:#0e0e0eeb;--border:#ffffff0f;--border-hover:#ffffff1f;--error:#c86860;--error-bright:#e06060;--font-mono:"SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;--font-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--header-h:48px;--info:#7aa2d4;--radius:4px;--radius-lg:8px;--radius-sm:2px;--snappy:cubic-bezier(.22, 1, .36, 1);--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--ease-in-out-sine:cubic-bezier(.37, 0, .63, 1);--duration-fast:.12s;--duration-base:.2s;--duration-slow:.35s;--accent-glow:#d4a24c1f;--error-glow:#c868601f;--success-glow:#80b8581f;--success:#80b858;--text:#d8d8d8;--text-muted:#555;--text-secondary:gray;--left-panel-w:320px;--result-panel-w:300px;--tree-depth-0:var(--success);--tree-depth-crit:var(--error);--tree-depth-warn:var(--accent)}@supports (height:100dvh){:root{--app-vh:100dvh}}*,:before,:after{box-sizing:border-box;scrollbar-color:#ffffff1a transparent;scrollbar-width:thin;margin:0;padding:0}::selection{background:var(--accent);color:var(--bg)}button{color:inherit;cursor:pointer;font:inherit;background:0 0;border:none}input{font:inherit}html,body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;background:var(--bg);color:var(--text);font-family:var(--font-ui);height:var(--app-vh);width:100vw;min-height:100svh;font-size:13px;line-height:1.5;overflow:hidden}body:after{content:"";filter:url(#grain);mix-blend-mode:overlay;opacity:.04;pointer-events:none;z-index:9999;width:300%;height:300%;position:fixed;top:-50%;left:-50%}.welcome{background:var(--bg);z-index:200;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.welcome-content{animation:welcome-in .6s var(--ease-out-expo) both;text-align:center;flex-direction:column;align-items:center;gap:0;max-width:320px;padding:24px;display:flex}.welcome-title{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.02em;font-size:12px;font-weight:500}.welcome-subtitle{color:var(--text-secondary);font-family:var(--font-mono);max-width:280px;margin-top:12px;font-size:13px;line-height:1.6}.welcome-play{color:var(--accent);cursor:pointer;font-family:var(--font-mono);letter-spacing:.04em;transition:background var(--duration-base) var(--ease-out-expo), border-color var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out-expo);background:0 0;border:1px solid #d4a24c4d;border-radius:4px;margin-top:32px;padding:10px 24px;font-size:12px}.welcome-play:hover{box-shadow:0 0 20px var(--accent-glow);background:#d4a24c0f;border-color:#d4a24c80}.welcome-play:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow);outline:none}.welcome-play-arrow{transition:transform var(--duration-base) var(--ease-out-expo);display:inline-block}.welcome-play:hover .welcome-play-arrow{transform:translate(4px)}.welcome-skip{color:var(--text-muted);cursor:pointer;font-family:var(--font-mono);letter-spacing:.05em;background:0 0;border:none;margin-top:14px;padding:4px 8px;font-size:12px;transition:color .15s}.welcome-skip:hover{color:var(--text-secondary)}.welcome-opt-out{color:var(--text-muted);cursor:pointer;font-family:var(--font-mono);letter-spacing:.02em;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;margin-top:24px;font-size:10px;display:flex}.welcome-opt-out input[type=checkbox]{accent-color:var(--accent);cursor:pointer;width:12px;height:12px}@keyframes welcome-in{0%{filter:blur(4px);opacity:0;transform:translateY(12px)scale(.98)}to{filter:blur();opacity:1;transform:translateY(0)scale(1)}}.header{background:var(--bg-header);border-bottom:1px solid var(--border);height:var(--header-h);z-index:140;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:0 20px;display:flex;position:fixed;top:0}.header-left{flex:auto;align-items:center;gap:16px;min-width:0;display:flex}.header-title{color:var(--text);letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;transition:border-color .15s var(--snappy), color .15s var(--snappy);white-space:nowrap;border-bottom:1px solid #0000;font-size:13px;font-weight:600;text-decoration:none;overflow:hidden}.header-title:hover,.header-title:focus-visible{color:#f2f2f2;border-bottom-color:#d4a24cbf;outline:none}.header-install{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.02em;align-items:center;gap:8px;padding:4px 8px 4px 12px;font-size:11px;display:inline-flex}.header-install-copy{color:var(--text-muted);transition:color var(--duration-fast) var(--ease-out-expo);align-items:center;padding:2px;display:inline-flex}.header-install-copy:hover{color:var(--accent-hover)}.header-right{flex:none;align-items:center;gap:8px;min-width:0;margin-left:auto;display:flex}.header-action-btn{border:1px solid var(--border);color:var(--text-secondary);transition:all .15s var(--snappy);white-space:nowrap;border-radius:100px;align-items:center;gap:4px;padding:5px 12px;font-size:11px;display:inline-flex}.header-action-btn:hover{background:var(--bg-elevated);border-color:var(--border-hover);color:var(--text)}.header-action-btn.active{border-color:var(--accent);color:var(--text)}.playground-layout{grid-template-columns:var(--left-panel-w) 1fr var(--result-panel-w);height:calc(var(--app-vh) - var(--header-h));top:var(--header-h);width:100%;display:grid;position:relative}.left-panel{background:#080808;border-right:1px solid #ffffff14;flex-direction:column;min-width:0;display:flex;position:relative;overflow:hidden}.left-section{border-bottom:1px solid #ffffff14}.section-header{background:#0c0c0c;border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:8px;height:32px;padding:0 12px;display:flex}.section-title{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;align-items:center;gap:8px;font-size:9px;font-weight:600;display:flex}.options-content{flex-direction:column;gap:0;max-height:280px;padding:0;display:flex;overflow-y:auto}.option-group{border-bottom:1px solid #ffffff08;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;display:flex}.option-group:last-child{border-bottom:none}.option-label{color:var(--text-secondary);font-family:var(--font-mono);white-space:nowrap;font-size:10px}.option-control{align-items:center;gap:6px;display:flex}.ignore-rules-group{flex-direction:column!important;align-items:stretch!important}.ignore-rules-top{justify-content:space-between;align-items:center;width:100%;display:flex}.segment-toggle{gap:0;display:inline-flex}.segment-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;font-family:var(--font-mono);letter-spacing:.03em;transition:all .15s var(--snappy);background:0 0;padding:4px 8px;font-size:9px}.segment-btn:first-child{border-radius:4px 0 0 4px}.segment-btn:last-child{border-radius:0 4px 4px 0}.segment-btn:not(:first-child){margin-left:-1px}.segment-btn:hover{background:var(--bg-elevated);color:var(--text-secondary);z-index:1}.segment-btn.active{background:color-mix(in srgb, var(--accent) 15%, transparent);border-color:var(--accent);color:var(--text);z-index:2}.toggle-switch{cursor:pointer;height:18px;transition:all .2s var(--snappy);background:#222;border:1px solid #333;border-radius:10px;width:32px;position:relative}.toggle-switch:after{content:"";height:12px;transition:all .2s var(--snappy);background:#666;border-radius:50%;width:12px;position:absolute;top:2px;left:2px}.toggle-switch.active{background:color-mix(in srgb, var(--accent) 25%, #222);border-color:var(--accent)}.toggle-switch.active:after{background:var(--accent);left:16px}.ignore-input-row{gap:4px;display:flex}.ignore-input{border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);background:#0a0a0a;border-radius:4px;outline:none;flex:1;min-width:0;padding:3px 6px;font-size:10px}.ignore-input:focus{border-color:#d4a24c66}.ignore-add-btn{border:1px solid var(--border);color:var(--text-muted);cursor:pointer;height:22px;transition:all .15s var(--snappy);background:0 0;border-radius:4px;width:22px;padding:0;font-size:14px;line-height:1}.ignore-add-btn:hover{border-color:var(--accent);color:var(--accent)}.ignore-chips{flex-wrap:wrap;gap:4px;margin-top:6px;display:flex}.ignore-chip{background:color-mix(in srgb, var(--accent) 10%, transparent);border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);color:var(--text-secondary);font-family:var(--font-mono);border-radius:12px;align-items:center;gap:4px;padding:2px 6px 2px 8px;font-size:9px;display:inline-flex}.ignore-chip-remove{color:var(--text-muted);cursor:pointer;transition:color .15s var(--snappy);background:0 0;border:none;padding:0;font-size:12px;line-height:1}.ignore-chip-remove:hover{color:var(--error)}.editor-section{flex-direction:column;flex:1;min-height:0;display:flex}.preset-bar{border-bottom:1px solid var(--border);flex-wrap:wrap;flex-shrink:0;align-items:center;gap:4px 6px;padding:8px 16px;display:flex}.preset-btn{border:1px solid var(--border);color:var(--text-secondary);letter-spacing:.02em;text-align:center;transition:background var(--duration-fast) var(--ease-out-expo), border-color var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-base) var(--ease-out-expo), color var(--duration-fast) var(--ease-out-expo), transform var(--duration-fast) var(--ease-out-expo);white-space:nowrap;background:0 0;border-radius:100px;padding:4px 12px;font-size:11px}.preset-btn:hover{background:var(--bg-elevated);border-color:var(--border-hover);color:var(--text)}.preset-btn:active{transform:scale(.96)}.preset-btn:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow);outline:none}.preset-btn.active{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow);color:var(--text);background:#d4a24c0f}.preset-description{color:var(--text-secondary);font-family:var(--font-mono);letter-spacing:.02em;margin-left:auto;font-size:10px;transition:opacity .15s}.editor-wrap{flex:1;min-height:0;padding:0;overflow:hidden}.lab-editor{color:#ccc;font-family:var(--font-mono);resize:vertical;scrollbar-color:var(--border-hover) transparent;scrollbar-width:thin;background:0 0;border:none;outline:none;width:100%;min-height:120px;font-size:11px;line-height:1.6}.editor-wrap .lab-editor{resize:none;height:100%;min-height:100px;padding:12px}.lab-editor::placeholder{color:#333;font-style:italic}.tree-viewport{padding:24px;position:relative;overflow:auto}.tree-viewport:before{content:"";pointer-events:none;z-index:1;background:radial-gradient(#0000 40%,#0000004d);width:100%;height:100%;position:absolute;top:0;left:0}.tree-container{z-index:2;position:relative}.tree-empty{z-index:2;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tree-empty-icon{color:#222;font-size:48px}.tree-empty-title{color:var(--text-secondary);font-size:14px;font-weight:600}.tree-empty-hint{color:var(--text-muted);text-align:center;font-size:11px}.tree-node{-webkit-user-select:none;user-select:none;margin-left:0}.tree-node-children{transition:grid-template-rows var(--duration-base) var(--ease-out-expo), opacity var(--duration-base) var(--ease-out-expo);border-left:1px solid #ffffff0f;margin-left:14px;padding-left:10px;overflow:hidden}.tree-node-children.collapsed{display:none}.tree-node-header{cursor:pointer;min-height:28px;transition:background var(--duration-fast) var(--ease-out-expo), box-shadow var(--duration-base) var(--ease-out-expo);border-radius:6px;align-items:center;gap:6px;padding:3px 8px;display:flex}.tree-node-header:hover{background:#ffffff0a;box-shadow:inset 2px 0 #d4a24c4d}.tree-toggle{color:var(--text-muted);transition:transform var(--duration-base) var(--ease-out-expo);flex-shrink:0;width:10px;font-size:8px}.tree-toggle.collapsed{transform:rotate(-90deg)}.tree-toggle.leaf{opacity:0}.tree-field-name{color:var(--text);font-family:var(--font-mono);font-size:12px;font-weight:500}.tree-alias{color:var(--text-muted);font-family:var(--font-mono);font-size:11px}.tree-field-name.operation{color:var(--accent);font-weight:600}.tree-field-name.fragment{color:var(--info);font-style:italic}.tree-field-name.inline-fragment{color:var(--text-secondary);font-style:italic}.tree-depth-badge{border-radius:var(--radius-lg);font-family:var(--font-mono);border:1px solid;flex-shrink:0;padding:2px 6px;font-size:9px;font-weight:700;line-height:1}.tree-depth-badge.safe{color:var(--success);transition:border-color var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out-expo), color var(--duration-base) var(--ease-out-expo);border-color:#80b85866}.tree-depth-badge.warn{box-shadow:0 0 8px var(--accent-glow);color:var(--accent);transition:border-color var(--duration-base) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out-expo), color var(--duration-base) var(--ease-out-expo);border-color:#d4a24c66}.tree-depth-badge.crit{box-shadow:0 0 10px var(--error-glow);color:var(--error);border-color:#c8686080;animation:.8s ease-in-out 3 violation-pulse-badge}@keyframes violation-pulse-badge{0%,to{box-shadow:0 0 4px #c8686033}50%{box-shadow:0 0 10px #c8686066}}.tree-ignored-label{border-radius:var(--radius-lg);color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;border:1px solid #6666664d;padding:1px 5px;font-size:8px;font-weight:600}.tree-node-header.exceeded{box-shadow:0 0 16px var(--error-glow);background:#c868600f;border:1px solid #c8686026}.tree-node-header.exceeded .tree-field-name{color:var(--error)}.tree-node-header.ignored{opacity:.5;border:1px dashed #6663}.tree-fragment-icon{color:var(--info);font-size:10px}.tree-leaf-type{color:#444;font-family:var(--font-mono);font-size:9px;font-style:italic}.tree-cycle-warning{border-radius:var(--radius-lg);color:var(--accent);font-family:var(--font-mono);border:1px solid #d4a24c4d;padding:1px 6px;font-size:9px;font-weight:600}.result-panel{background:var(--bg-header);border-left:1px solid var(--border);flex-direction:column;gap:0;display:flex;position:relative;overflow-y:auto}.panel-close-btn{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;height:24px;transition:all .15s var(--snappy);z-index:5;background:0 0;border-radius:50%;width:24px;font-size:14px;line-height:1;display:none;position:absolute;top:8px;right:8px}.panel-close-btn:hover{background:var(--bg-elevated);color:var(--text)}.result-section{border-bottom:1px solid var(--border);padding:12px 16px}.result-section .section-title{margin-bottom:8px}.gauge-display{align-items:center;gap:12px;display:flex}.gauge-values{font-family:var(--font-mono);align-items:baseline;gap:2px;min-width:60px;display:flex}.gauge-current{color:#fff;font-size:20px;font-weight:700}.gauge-separator{color:#333;font-size:14px}.gauge-max{color:#555;font-size:14px}.pressure-meter{align-items:center;gap:6px;min-width:80px;display:flex}.gauge-display .pressure-meter{flex:1}.pressure-track{background:#ffffff14;border-radius:3px;flex:1;height:6px;position:relative;overflow:hidden}.pressure-fill{height:100%;transition:background var(--duration-slow) var(--ease-out-expo), box-shadow var(--duration-slow) var(--ease-out-expo), width .4s var(--ease-out-expo);background:#444;border-radius:3px;width:0}.pressure-fill.safe{background:var(--success);box-shadow:0 0 8px var(--success-glow)}.pressure-fill.warn{background:var(--accent);box-shadow:0 0 8px var(--accent-glow)}.pressure-fill.crit{background:var(--error);box-shadow:0 0 10px var(--error-glow)}.deck-stepper{background:#000;border:1px solid #222;border-radius:4px;align-items:center;height:24px;display:inline-flex;overflow:hidden}.deck-stepper button{color:#666;cursor:pointer;font-family:var(--font-mono);height:24px;transition:all .1s var(--snappy);background:#111;border:none;width:20px;font-size:12px}.deck-stepper button:hover{color:#fff;background:#222}.deck-stepper input{color:#fff;font-family:var(--font-mono);text-align:center;background:0 0;border:none;outline:none;width:52px;font-size:11px}.deck-stepper input::-webkit-inner-spin-button{-webkit-appearance:none}.deck-stepper input::-webkit-outer-spin-button{-webkit-appearance:none}.result-badge{background:var(--bg);border:1px solid var(--border);font-family:var(--font-mono);letter-spacing:.04em;text-align:center;border-radius:3px;width:100%;margin:0;padding:8px 16px;font-size:10px;font-weight:700;display:block}.result-badge.pass{color:var(--success);background:#80b8580f;border-color:#80b8584d}.result-badge.fail{color:var(--error);background:#c868600f;border-color:#c868604d}.result-badge.idle{border-color:var(--border);color:var(--text-muted)}.result-badge-path{opacity:.7;margin-top:4px;font-size:9px}.error-details{flex-direction:column;gap:6px;display:flex}.error-row{gap:8px;display:flex}.error-label{color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;min-width:64px;font-size:9px;font-weight:600}.error-value{color:var(--text);font-family:var(--font-mono);word-break:break-all;font-size:11px}.error-value.path{color:var(--error)}.json-output{border:1px solid var(--border);color:var(--text-secondary);font-family:var(--font-mono);white-space:pre-wrap;word-break:break-all;background:#0006;border-radius:6px;max-height:200px;padding:10px 12px;font-size:10px;line-height:1.6;overflow:auto}.copy-btn{color:var(--text-muted);cursor:pointer;opacity:.6;transition:opacity .15s var(--snappy);background:0 0;border:none;padding:2px 4px;font-size:11px}.copy-btn:hover{opacity:1}.mobile-result-toggle{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;font-family:var(--font-mono);transition:all .15s var(--snappy);z-index:200;background:#0a0a0a;border-radius:16px;align-items:center;gap:6px;padding:6px 14px;font-size:10px;display:none;position:fixed;bottom:12px;left:50%;transform:translate(-50%)}.mobile-result-toggle:hover{border-color:var(--border-hover);color:var(--text)}.mobile-result-dot{background:#333;border-radius:50%;width:6px;height:6px}.mobile-result-dot.safe{background:var(--success);box-shadow:0 0 4px var(--success)}.mobile-result-dot.fail{background:var(--error);box-shadow:0 0 4px var(--error)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:2px}::-webkit-scrollbar-thumb:hover{background:#ffffff24}:focus-visible{outline-offset:1px;outline:1px solid #d4a24c80}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (width<=1024px){:root{--left-panel-w:260px}.preset-bar{grid-template-columns:repeat(3,1fr)}.result-panel{border-left:1px solid var(--border);bottom:0;right:0;top:var(--header-h);transition:transform .25s var(--snappy);width:var(--result-panel-w);z-index:130;position:fixed;transform:translate(100%)}.result-panel.open{transform:translate(0)}.panel-close-btn{justify-content:center;align-items:center;display:flex}.playground-layout{grid-template-columns:var(--left-panel-w) 1fr}.mobile-result-toggle{display:inline-flex}}@media (width<=768px){:root{--header-h:84px}.header{height:auto;min-height:var(--header-h);flex-wrap:wrap;padding:10px 16px}.header-install{display:none}.playground-layout{flex-direction:column;grid-template-columns:none;display:flex}.left-panel{border-bottom:1px solid #ffffff14;border-right:none;flex:none;max-height:50vh;overflow-y:auto}.options-content{max-height:none}.tree-viewport{flex:1;min-height:200px}.result-panel{border-radius:var(--radius-lg) var(--radius-lg) 0 0;border-left:none;border-top:1px solid var(--border);transition:transform .3s var(--snappy);z-index:200;width:100%;position:fixed;inset:auto 0 0;transform:translateY(100%)}.result-panel.open{max-height:60vh;transform:translateY(0)}.panel-close-btn{justify-content:center;align-items:center;display:flex}.mobile-result-toggle{display:inline-flex}.preset-bar{grid-template-columns:repeat(3,1fr)}}@media (width<=480px){:root{--header-h:86px}.preset-bar{grid-template-columns:repeat(2,1fr)}.option-group{flex-direction:column;align-items:flex-start;gap:4px}.segment-btn{padding:3px 6px;font-size:8px}.gauge-current{font-size:16px}.tree-field-name{font-size:11px}.tree-depth-badge{padding:1px 4px;font-size:8px}}.tree-node-header.anim-dimmed{opacity:.06;transition:opacity .35s var(--ease-out-expo)}.tree-node-header.anim-dimmed .tree-depth-badge{opacity:0}.playground-layout.animating .left-panel{opacity:.3;pointer-events:none;transition:opacity .4s var(--ease-out-expo)}.result-badge.shaking{animation:.25s ease-in-out shake}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}