:root{--bg: #f6f6f3;--panel: #ffffff;--panel-2: #f1f1ed;--border: #deded8;--border-strong: #c4c4bc;--text: #1d1d1b;--muted: #6b6b66;--accent: #3b5bdb;--accent-soft: #e7ecff;--danger: #c92a2a;--danger-soft: #fff0f0;--good: #2b8a3e;--warn: #b35c00;--focus: 0 0 0 3px rgba(59, 91, 219, .28);--radius: 8px;--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;--c0: #4c6ef5;--c1: #12b886;--c2: #f59f00;--c3: #e64980;--c4: #7950f2;--c5: #15aabf;--c6: #fd7e14;--c7: #82c91e;color-scheme:light;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.45;color:var(--text);background:var(--bg)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #121212;--panel: #1b1b1a;--panel-2: #242422;--border: #2f2f2c;--border-strong: #444440;--text: #ececea;--muted: #9a9a94;--accent: #8ea2ff;--accent-soft: #252c4a;--danger: #ff8787;--danger-soft: #3a1f1f;--good: #69db7c;--warn: #ffc078;--focus: 0 0 0 3px rgba(142, 162, 255, .35);color-scheme:dark}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}h2,h3{margin:0;font-size:.95rem;font-weight:600}h3{font-size:.85rem}button,input,select,textarea{font:inherit;color:inherit}.mono{font-family:var(--mono)}.muted{color:var(--muted)}.small{font-size:.8rem}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-spacer{flex:1}.inline{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.inline.between{justify-content:space-between}.kbd{font-family:var(--mono);font-size:.75em;border:1px solid var(--border);border-radius:4px;padding:0 .3em;background:var(--panel-2)}.input{background:var(--panel);border:1px solid var(--border-strong);border-radius:6px;padding:.35rem .5rem;min-width:0;width:100%}.input:focus,.btn:focus-visible,.tree:focus-visible,button:focus-visible{outline:none;box-shadow:var(--focus);border-color:var(--accent)}select.input{width:auto;max-width:100%}.form-field select.input{width:100%}.input.num{font-family:var(--mono)}.input.narrow{width:5.5rem}textarea.input{resize:vertical}select.bare{border:0;background:transparent;padding:0}.btn{background:var(--panel);border:1px solid var(--border-strong);border-radius:6px;padding:.35rem .7rem;cursor:pointer;white-space:nowrap}.btn:hover:not(:disabled){background:var(--panel-2)}.btn:disabled{opacity:.45;cursor:default}.btn.small{padding:.2rem .5rem;font-size:.8rem}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--panel)}.btn.danger{color:var(--danger)}.btn.on{background:var(--accent-soft);border-color:var(--accent)}.icon-btn{border:0;background:none;cursor:pointer;color:var(--muted);font-size:1rem;line-height:1;padding:.15rem .35rem;border-radius:4px}.icon-btn:hover:not(:disabled){color:var(--danger);background:var(--danger-soft)}.icon-btn:disabled{opacity:.3}.segmented{display:inline-flex;border:1px solid var(--border-strong);border-radius:6px;overflow:hidden;flex-wrap:wrap}.segmented button{border:0;background:var(--panel);padding:.3rem .7rem;cursor:pointer;border-right:1px solid var(--border)}.segmented button:last-child{border-right:0}.segmented button.on{background:var(--accent-soft);color:var(--accent);font-weight:600}.segmented.small button{padding:.15rem .5rem;font-size:.8rem}.toggle{width:34px;height:20px;border-radius:10px;border:1px solid var(--border-strong);background:var(--panel-2);position:relative;cursor:pointer;padding:0;flex:none}.toggle span{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .12s}.toggle.on{background:var(--accent);border-color:var(--accent)}.toggle.on span{transform:translate(14px);background:var(--panel)}.chips{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}.chip{border:1px solid var(--border-strong);background:var(--panel);border-radius:999px;padding:.1rem .6rem;font-size:.8rem;cursor:pointer;display:inline-flex;align-items:center;gap:.2rem}.chip.on{background:var(--accent-soft);border-color:var(--accent)}.type-chip{font-family:var(--mono);font-size:.68rem;font-weight:700;min-width:1.9rem;text-align:center;padding:.05rem .25rem;border-radius:4px;background:var(--panel-2);color:var(--muted);border:1px solid var(--border);flex:none}.t-bool,.t-int,.t-fixed,.t-enum{color:var(--accent)}.t-object,.t-array,.t-enum_array{color:var(--good)}.t-reference_numeric{color:var(--accent)}.t-reference{color:var(--good)}.t-definition{color:var(--panel);background:var(--accent);border-color:var(--accent)}.t-optional,.t-union{color:var(--warn)}.app{min-height:100vh;display:flex;flex-direction:column}.toolbar{display:flex;align-items:center;gap:.75rem 1rem;padding:.6rem 1rem;border-bottom:1px solid var(--border);background:var(--panel);flex-wrap:wrap}.brand{display:flex;align-items:center;gap:.5rem;font-size:1rem}.brand img{border-radius:7px}.doc-controls,.toolbar-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}.doc-controls{flex:1;min-width:240px}.doc-name{max-width:260px}.toolbar-actions select.input{max-width:180px}.import-box{flex-basis:100%;display:grid;gap:.5rem}.panel-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;min-width:0}.panel-head h2{flex:1;min-width:0}.app.desktop{height:100vh;min-height:0;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);overflow:hidden}.app.desktop .bits-area{overflow:auto;max-height:30vh;min-height:0}.app.desktop .bits-area.sized{max-height:none}.app.desktop .bits-area .ribbon-wrap{margin-bottom:0}.app.desktop .ribbon{max-height:none;overflow:visible}.bits-separator{height:10px;margin:0 1rem;cursor:row-resize;position:relative;touch-action:none}.bits-separator:after,.pane-separator:after{content:"";position:absolute;border-radius:2px;background:transparent;transition:background .1s}.bits-separator:after{left:40%;right:40%;top:4px;height:3px;background:var(--border-strong)}.pane-separator:after{top:40%;bottom:40%;left:2px;width:3px;background:var(--border-strong)}.bits-separator:hover:after,.bits-separator:focus-visible:after,.pane-separator:hover:after,.pane-separator:focus-visible:after{background:var(--accent);left:0;right:0}.pane-separator:hover:after,.pane-separator:focus-visible:after{inset:0 auto 0 2px}.bits-separator:focus-visible,.pane-separator:focus-visible{outline:none}.panes{display:flex;min-height:0;height:100%;padding:0 1rem .75rem}.pane{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}.pane-head{display:flex;align-items:center;gap:.5rem;padding:.45rem .6rem .45rem .75rem;border-bottom:1px solid var(--border);min-height:42px;flex-wrap:wrap}.pane-actions{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-left:auto}.pane-hide{font-size:1.1rem}.pane-body{flex:1;min-height:0;overflow:auto;padding:.75rem}.pane-separator{flex:0 0 8px;cursor:col-resize;position:relative;touch-action:none}.view-toggles button:disabled{opacity:.6;cursor:default}.app.mobile{min-height:100vh;padding-bottom:1rem}.app.mobile .app-header{position:sticky;top:0;z-index:30;background:var(--panel)}.app.mobile .toolbar{padding-left:16px;padding-right:16px}.app.mobile .doc-name{max-width:none}.fold{margin:.6rem 16px 0;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);min-width:0}.fold-head{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;flex-wrap:wrap}.fold-toggle,.section-toggle{display:inline-flex;align-items:center;gap:.4rem;border:0;background:none;padding:.2rem .25rem;cursor:pointer;border-radius:4px;text-align:left}.fold-toggle{flex:1;min-height:36px}.fold-toggle:hover,.section-toggle:hover{background:var(--panel-2)}.fold-body{border-top:1px solid var(--border);padding:.75rem;min-width:0}.app.mobile .fold-body .ribbon-wrap{margin:0;border:0;padding:0}.chev-glyph{width:1rem;color:var(--muted);flex:none}.fold-block{display:flex;flex-direction:column;gap:.5rem}.fold-block-head{display:flex;align-items:center;gap:.4rem;margin-left:-.25rem}.fold-summary{margin-left:.25rem}.data-label .chev{margin-left:-.2rem}.ribbon-wrap{margin:.75rem 1rem;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:.6rem .75rem .7rem}@media(max-width:720px){.ribbon-wrap{margin:.75rem 16px}}.ribbon-head{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:.5rem}.ribbon-summary b{font-variant-numeric:tabular-nums}.saving{color:var(--good);font-weight:600}.ribbon-hover{color:var(--muted);min-height:1.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.ribbon{display:flex;flex-wrap:wrap;gap:6px 4px;max-height:168px;overflow:auto}.char-group{display:inline-flex;flex-direction:column;align-items:stretch;gap:2px}.char-bits{display:flex;gap:1px}.char{font-family:var(--mono);font-size:.9rem;text-align:center;font-weight:600;border-top:2px solid var(--border-strong);line-height:1.3;min-height:1.3em}.bit{width:14px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.68rem;color:#fff;border-radius:2px;cursor:pointer;transition:opacity .1s;background:var(--seg)}.bit.seg-start{box-shadow:inset 2px 0 #00000059}.bit.pad{background:var(--panel-2);color:var(--muted);cursor:default}.bit.k-preset,.bit.k-presence,.bit.k-length,.bit.k-tag{background:repeating-linear-gradient(135deg,var(--seg) 0 3px,color-mix(in srgb,var(--seg) 70%,#000) 3px 6px)}.ribbon.dim .bit:not(.lit):not(.pad){opacity:.28}.bit.sel{outline:2px solid var(--text);outline-offset:-1px}.c0{--seg: var(--c0)}.c1{--seg: var(--c1)}.c2{--seg: var(--c2)}.c3{--seg: var(--c3)}.c4{--seg: var(--c4)}.c5{--seg: var(--c5)}.c6{--seg: var(--c6)}.c7{--seg: var(--c7)}.legend{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin-top:.6rem}.legend-item{border:0;background:none;padding:.1rem .25rem;border-radius:4px;cursor:pointer;font-size:.8rem;display:inline-flex;align-items:center;gap:.3rem}.legend-item.lit,.legend-item:hover{background:var(--panel-2)}.swatch{width:10px;height:10px;border-radius:2px;background:var(--seg)}.legend-item.k-preset .swatch,.legend-item.k-presence .swatch,.legend-item.k-length .swatch,.legend-item.k-tag .swatch{background:repeating-linear-gradient(135deg,var(--seg) 0 2px,color-mix(in srgb,var(--seg) 65%,#000) 2px 4px)}.tree{display:flex;flex-direction:column;outline:none;border-radius:6px;padding:2px}.tree-row{display:flex;align-items:center;gap:.35rem;padding:.25rem .4rem;border-radius:5px;min-height:30px;position:relative;min-width:0}.field-row{cursor:pointer}.field-row:hover,.field-row.hovered{background:var(--panel-2)}.field-row.selected{background:var(--accent-soft)}.field-row.is-dragging{opacity:.4}.row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.field-row.has-error .row-name{color:var(--danger)}.grip{cursor:grab;color:var(--muted);font-size:.85rem;padding:0 .1rem;touch-action:none;-webkit-user-select:none;user-select:none}.grip.hidden{visibility:hidden}.chev{width:1rem;border:0;background:none;padding:0;cursor:pointer;color:var(--muted);flex:none}.slot-tag{font-size:.7rem;color:var(--muted);border:1px dashed var(--border-strong);border-radius:4px;padding:0 .3rem}.bits-badge{font-family:var(--mono);font-size:.72rem;color:var(--muted);background:var(--panel-2);border-radius:4px;padding:.05rem .35rem;white-space:nowrap;flex:none}.bits-badge.big{font-size:.8rem}.error-dot{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--danger);color:var(--panel);font-size:.7rem;font-weight:700;flex:none}.variant-row{font-size:.85rem;cursor:pointer}.variant-label{font-weight:600}.variant-row.in-selected{background:color-mix(in srgb,var(--accent-soft) 50%,transparent)}.add-row{min-height:26px;padding-top:0;padding-bottom:0}.add-btn{border:0;background:none;color:var(--muted);cursor:pointer;font-size:.8rem;padding:.1rem .3rem;border-radius:4px}.add-btn:hover{color:var(--accent);background:var(--accent-soft)}.drop-before:before,.drop-after:after{content:"";position:absolute;left:.5rem;right:.25rem;height:2px;background:var(--accent);border-radius:1px}.drop-before:before{top:-1px}.drop-after:after{bottom:-1px}.drop-into{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}.drag-ghost{background:var(--panel);border:1px solid var(--accent);box-shadow:0 6px 20px #0000002e;width:max-content}.tree-help{margin:.75rem 0 0}.add-menu{position:fixed;z-index:50;overflow-y:auto;background:var(--panel);border:1px solid var(--border-strong);border-radius:8px;box-shadow:0 10px 30px #0000002e;padding:.3rem;display:grid;min-width:260px}.add-menu button{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.5rem;border:0;background:none;padding:.35rem .5rem;text-align:left;border-radius:5px;cursor:pointer}.add-menu button:hover,.add-menu button:focus-visible{background:var(--accent-soft);box-shadow:none}.add-menu-hint{color:var(--muted);font-size:.75rem;text-align:right}.inspector{display:flex;flex-direction:column;gap:.8rem}.inspector .panel-head{margin-bottom:0}.path{margin:-.5rem 0 0}.grid-2,.grid-3{display:grid;gap:.6rem}.grid-2{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.grid-3{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.form-field{display:flex;flex-direction:column;gap:.25rem;min-width:0}.form-label{font-size:.75rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}.form-hint{font-size:.75rem;color:var(--muted)}.readout{font-family:var(--mono);padding:.35rem 0}.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.4rem}.stat{background:var(--panel-2);border-radius:6px;padding:.4rem .55rem;display:flex;flex-direction:column}.stat-value{font-family:var(--mono);font-size:1.05rem;font-weight:600;font-variant-numeric:tabular-nums}.stat-label{font-size:.72rem;color:var(--muted)}.stat.good .stat-value{color:var(--good)}.stat.warn .stat-value{color:var(--warn)}.suggestions{display:flex;flex-direction:column;gap:.35rem}.suggestions:empty{display:none}.suggestion{text-align:left;border:1px dashed var(--accent);background:var(--accent-soft);border-radius:6px;padding:.4rem .6rem;cursor:pointer;font-size:.85rem}.suggestion:hover{border-style:solid}.options{display:flex;flex-direction:column;gap:.3rem;align-items:stretch}.options>.btn{align-self:flex-start}.option-row{display:flex;align-items:center;gap:.4rem}.variant-option .input{min-width:0;flex:1 1 0}.option-row .mono{width:1.4rem;text-align:right}.child-link{display:flex;align-items:center;gap:.5rem;border:1px solid var(--border);background:var(--panel-2);border-radius:6px;padding:.4rem .6rem;cursor:pointer;text-align:left;width:100%}.child-link:hover{border-color:var(--accent)}.children{display:flex;flex-direction:column;gap:.3rem}.actions{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:.7rem}.error-box{margin:0;background:var(--danger-soft);color:var(--danger);border-radius:6px;padding:.45rem .6rem;font-size:.85rem}.field-error{color:var(--danger);font-size:.78rem}.tips p,.tips ul{margin:0 0 .5rem;color:var(--muted);font-size:.85rem}.tips ul{padding-left:1.1rem}.playground,.export{display:flex;flex-direction:column;gap:.75rem}.encoded-box{display:flex;flex-direction:column;gap:.5rem;background:var(--panel-2);border-radius:8px;padding:.6rem}.encoded{display:block;font-size:1.15rem;font-weight:600;word-break:break-all;background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:.5rem .6rem;min-height:2.4rem}.qr{display:flex;justify-content:center;background:#fff;border-radius:6px;padding:.5rem}.data-form{display:flex;flex-direction:column;gap:.15rem}.data-row{display:grid;grid-template-columns:minmax(90px,34%) 1fr;gap:.5rem;align-items:center;padding:.25rem .35rem;border-radius:6px}.data-row.compound{grid-template-columns:1fr;align-items:start}.data-row.lit{background:var(--accent-soft)}.data-row.has-error{background:var(--danger-soft)}.data-label{display:flex;align-items:center;gap:.35rem;font-size:.85rem;min-width:0;overflow:hidden}.data-control{display:flex;flex-direction:column;gap:.25rem;min-width:0}.num-control{display:grid;grid-template-columns:1fr 6.5rem;gap:.5rem;align-items:center}.num-control input[type=range]{width:100%;accent-color:var(--accent);min-width:0}.nested{display:flex;flex-direction:column;gap:.15rem;border-left:2px solid var(--border);padding-left:.5rem;margin-left:.4rem}.array-item{display:grid;grid-template-columns:1fr auto;align-items:start}.code{margin:0;background:var(--panel-2);border-radius:6px;padding:.7rem;font-family:var(--mono);font-size:.78rem;overflow:auto;max-height:70vh;white-space:pre}.definitions{display:flex;flex-direction:column;border-bottom:1px solid var(--border);padding-bottom:.4rem;margin-bottom:.4rem}.definitions-head{display:flex;align-items:center;justify-content:space-between;padding:0 .4rem .2rem}.definitions-empty{margin:0 .4rem .3rem}.presets{display:flex;flex-direction:column;gap:.5rem}.presets>.btn{align-self:flex-start}.preset-card{border:1px solid var(--border);border-radius:6px;padding:.5rem;display:flex;flex-direction:column;gap:.4rem}.grid-4{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}.preset-table{display:flex;flex-direction:column;gap:.2rem}.preset-line{display:flex;align-items:center;gap:.6rem;padding:.3rem .5rem;border-radius:5px;background:var(--panel-2)}.preset-line.on{box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}.preset-pickers{border-bottom:1px dashed var(--border);padding-bottom:.3rem;margin-bottom:.3rem}.ref-control{display:grid;grid-template-columns:1fr auto;gap:.4rem;align-items:center}.unit{font-family:var(--mono);font-size:.75rem;color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:0 .3rem}.section-row{margin-top:.5rem;border-top:1px solid var(--border);padding-top:.5rem;gap:.5rem}.template-badge{font-size:.7rem;border-radius:4px;padding:0 .35rem;white-space:nowrap;color:var(--good);border:1px solid var(--good)}.link-error{margin:.75rem 1rem 0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--danger-soft);color:var(--danger);border-radius:var(--radius);padding:.5rem .75rem;font-size:.85rem;overflow-wrap:anywhere}@media(max-width:720px){.link-error{margin:.75rem 16px 0}}.code.wrap{white-space:pre-wrap;word-break:break-all}.section-row.first{margin-top:0;border-top:0;padding-top:0}.app.mobile .doc-controls{flex-wrap:nowrap;min-width:0;flex-basis:100%}.app.mobile .doc-controls select.input{max-width:45%}.app.mobile .doc-name{flex:1;min-width:0}.app.mobile .toolbar-actions{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:2px}.app.mobile .fold-body .ribbon-head h2{display:none}.app.mobile .toolbar-actions>*{flex:none}
