:root{--paper: #e7ecf2;--paper-deep: #dde4ed;--surface: #ffffff;--sunken: #f3f6fa;--ink: #111e2e;--ink-2: #51647c;--ink-3: #8898ae;--line: #dce3ec;--line-2: #c7d2df;--guide: #e7ecf3;--brand: #0e7c73;--brand-strong: #0a5a53;--brand-wash: #e3f1ef;--signal: #f4b740;--signal-wash: #fff5d8;--signal-line: #d99524;--t-object: #4f46e5;--t-array: #0e7490;--t-string: #15803d;--t-number: #b45309;--t-boolean: #7c3aed;--t-null: #64748b;--radius: 10px;--radius-sm: 7px;--shadow-card: 0 1px 2px rgba(16, 30, 46, .04), 0 14px 32px -22px rgba(16, 30, 46, .28);--font-sans: "IBM Plex Sans", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;--font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;color:var(--ink);background:var(--paper);font-family:var(--font-sans);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{min-width:0}h1,h2,h3,p,dl,dd,ul{margin:0}h1{color:var(--ink);font-family:var(--font-mono);font-size:20px;font-weight:600;letter-spacing:.16em;line-height:1.1;text-transform:uppercase}h2{color:var(--ink);font-size:13px;font-weight:600;letter-spacing:.01em;line-height:1.3}h3{color:var(--ink-3);font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.12em;line-height:1.3;margin-top:18px;text-transform:uppercase}.app-shell{background:radial-gradient(120% 80% at 50% -10%,#f3f6fb,#f3f6fb00 60%),var(--paper);min-height:100vh}.workbench{display:grid;gap:14px;margin:0 auto;max-width:1480px;min-width:0;padding:22px clamp(16px,3vw,32px) 36px}.app-header{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);display:grid;gap:18px;grid-template-columns:1fr minmax(260px,420px);padding:16px 20px}.title-group{align-items:center;display:flex;flex-wrap:wrap;gap:6px 14px;min-width:0}.title-group h1{align-items:center;display:inline-flex;gap:12px}.title-group h1:before{background:var(--brand);border-radius:3px;box-shadow:0 0 0 4px var(--brand-wash);content:"";height:18px;width:6px}.title-group:after{border-left:1px solid var(--line-2);color:var(--ink-2);content:"ブラウザ内だけで YAML 構造を解析";font-family:var(--font-sans);font-size:12.5px;font-weight:400;letter-spacing:0;padding-left:16px}.search-box,.paste-area{display:grid;gap:7px}.search-box span,.paste-area span{color:var(--ink-2);font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}.search-box{position:relative}.search-box input,.paste-area textarea{background:var(--sunken);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);min-width:0;outline:none;padding:10px 12px;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease;width:100%}.search-box input::placeholder,.paste-area textarea::placeholder{color:var(--ink-3)}.search-box input:focus,.paste-area textarea:focus{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash)}.paste-area textarea{font-family:var(--font-mono);font-size:13px;line-height:1.55;min-height:420px;resize:vertical;tab-size:2}.command-bar{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);color:var(--ink-2);display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px}.command-bar span{align-items:baseline;background:var(--sunken);border:1px solid var(--line);border-radius:6px;color:var(--ink);display:inline-flex;font-family:var(--font-mono);font-size:12px;font-weight:500;gap:6px;max-width:100%;overflow-wrap:anywhere;padding:5px 10px}.command-bar span:last-child{background:var(--brand-wash);border-color:transparent;color:var(--brand-strong);margin-left:auto}.editor-grid{display:grid;gap:14px;grid-template-columns:minmax(340px,.78fr) minmax(0,1.35fr);min-height:0}.input-panel,.output-panel,.workspace{display:grid;gap:14px;min-width:0}.input-panel{align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:16px}.output-panel{align-content:start}.workspace{align-items:start;grid-template-columns:minmax(220px,290px) minmax(0,1fr)}.panel,.viewer,.drop-zone,.error-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:16px}.drop-zone{align-items:center;background:linear-gradient(0deg,var(--sunken),var(--sunken)) padding-box,var(--surface);border-style:dashed;border-color:var(--line-2);box-shadow:none;display:flex;gap:12px;justify-content:space-between;min-width:0;transition:border-color .12s ease,box-shadow .12s ease,background .12s ease}.drop-zone p{color:var(--ink-3);font-family:var(--font-mono);font-size:11.5px;line-height:1.5;margin-top:4px}.drop-zone.is-dragging{background:var(--brand-wash);border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash) inset}.input-actions,.input-footer{align-items:end;display:flex}.input-footer{justify-content:flex-end}.button-primary,.button-secondary,.tab-button,.tree-toggle,.tree-item{border:1px solid transparent;border-radius:var(--radius-sm);cursor:pointer;min-height:36px;transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease}.button-primary,.button-secondary,.tab-button{max-width:100%;overflow-wrap:anywhere;padding:8px 14px}.button-primary{background:var(--brand);box-shadow:0 1px 0 var(--brand-strong),0 8px 18px -10px #0e7c7399;color:#fff;font-weight:600;letter-spacing:.01em}.button-primary:hover{background:var(--brand-strong)}.button-secondary,.tab-button{background:var(--surface);border-color:var(--line-2);color:var(--ink);font-weight:500}.button-secondary:hover,.tab-button:hover{background:var(--sunken);border-color:var(--ink-3)}.tab-button[aria-selected=true]{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}.tab-button[aria-selected=true]:hover{background:var(--brand-strong);border-color:var(--brand-strong)}.tree-toggle:disabled{cursor:default;opacity:.5}:focus-visible{outline:2px solid var(--brand);outline-offset:2px}.summary-panel{align-self:start;min-width:0;position:sticky;top:14px}.summary-list{display:grid;gap:12px;margin-top:14px}.summary-list div{display:grid;gap:4px}.summary-list dt{color:var(--ink-3);font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.summary-list dd{color:var(--ink);font-size:13px;line-height:1.45;overflow-wrap:anywhere}.summary-list div:nth-child(2) dd,.summary-list div:nth-child(3) dd,.summary-list div:nth-child(5) dd,.command-bar span{font-family:var(--font-mono)}.type-counts{display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px}.type-counts div{align-items:center;background:var(--sunken);border:1px solid var(--line);border-left:3px solid var(--type, var(--ink-3));border-radius:6px;display:grid;gap:2px 8px;grid-template-columns:1fr auto;padding:6px 10px}.type-counts dt{color:var(--ink-2);font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.02em}.type-counts dd{color:var(--type, var(--ink));font-family:var(--font-mono);font-size:14px;font-weight:600;text-align:right}.type-counts div:nth-child(1){--type: var(--t-object)}.type-counts div:nth-child(2){--type: var(--t-array)}.type-counts div:nth-child(3){--type: var(--t-string)}.type-counts div:nth-child(4){--type: var(--t-number)}.type-counts div:nth-child(5){--type: var(--t-boolean)}.type-counts div:nth-child(6){--type: var(--t-null)}.key-list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin-top:10px;max-height:168px;overflow:auto;padding:0}.key-list li{background:var(--sunken);border:1px solid var(--line);border-radius:5px;color:var(--ink-2);font-family:var(--font-mono);font-size:11.5px;max-width:100%;overflow-wrap:anywhere;padding:4px 8px}.viewer{min-width:0;overflow:hidden;padding:0}.tab-list{background:var(--sunken);border-bottom:1px solid var(--line);display:flex;gap:6px;padding:10px}.tab-panel{background:var(--surface);min-height:542px;min-width:0;overflow:auto;padding:16px}.tree-view{display:grid;gap:1px}.tree-row{align-items:center;background-image:repeating-linear-gradient(90deg,transparent 0,transparent 17px,var(--guide) 17px,var(--guide) 18px);background-repeat:no-repeat;background-size:calc(var(--tree-depth) * 18px) 100%;display:grid;gap:4px;grid-template-columns:28px minmax(0,1fr);padding-left:calc(var(--tree-depth) * 18px)}.tree-toggle{background:transparent;color:var(--ink-3);font-size:11px;min-height:28px;padding:0}.tree-toggle:not(:disabled):hover{background:var(--sunken);color:var(--brand)}.tree-item{align-items:center;background:transparent;color:var(--ink);display:grid;gap:4px 12px;grid-template-columns:minmax(0,1fr) auto;min-width:0;padding:6px 10px;text-align:left}.tree-item:hover{background:var(--sunken)}.tree-item.is-selected{background:var(--brand-wash);box-shadow:inset 3px 0 0 var(--brand)}.tree-item.is-matched{box-shadow:inset 0 0 0 1.5px var(--signal-line)}.tree-item.is-selected.is-matched{box-shadow:inset 3px 0 0 var(--brand),inset 0 0 0 1.5px var(--signal-line)}.tree-path{color:var(--ink);font-family:var(--font-mono);font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-meta{color:var(--ink-3);font-family:var(--font-mono);font-size:11.5px;overflow-wrap:anywhere}.code-view{background:var(--sunken);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-family:var(--font-mono);font-size:12.5px;line-height:1.6;margin:0;overflow:auto;padding:14px 0;tab-size:2}.code-line{display:grid;grid-template-columns:56px minmax(0,1fr);min-width:max-content;padding-right:14px}.code-line.is-matched{background:var(--signal-wash);box-shadow:inset 2px 0 0 var(--signal)}.line-number{border-right:1px solid var(--line);color:var(--ink-3);margin-right:12px;padding:0 12px;text-align:right;-webkit-user-select:none;user-select:none}.line-text{white-space:pre}.code-mark{background:var(--signal);border-radius:2px;color:#3a2a00;padding:0 1px}.table-wrap{min-width:0;overflow:auto}.table-wrap h2,.scalar-view h2{color:var(--ink);font-family:var(--font-mono);font-size:13px;font-weight:600;margin-bottom:14px;overflow-wrap:anywhere}table{border-collapse:collapse;color:var(--ink);font-size:13px;min-width:420px;width:100%}th,td{border-bottom:1px solid var(--line);max-width:320px;overflow-wrap:anywhere;padding:9px 12px;text-align:left;vertical-align:top}td{font-family:var(--font-mono);font-size:12.5px}th{background:var(--sunken);border-bottom-color:var(--line-2);color:var(--ink-3);font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;position:sticky;text-transform:uppercase;top:0}tbody tr:hover td{background:var(--sunken)}tr.is-matched td{background:var(--signal-wash)}tr.is-matched td:first-child{box-shadow:inset 3px 0 0 var(--signal)}.scalar-view .summary-list dd{font-family:var(--font-mono)}.error-panel{background:#fff5f4;border-color:#f3b4ad;box-shadow:none;color:#8a1f15;display:grid;gap:8px}.error-message strong{font-size:13px}.error-message p,.warning-list{font-size:13px;line-height:1.5;margin-top:4px}.error-position{color:#a8453a;font-family:var(--font-mono);font-size:12px}.warning-list{color:#8a6100;padding-left:18px}.empty-state{color:var(--ink-3);font-size:13px;line-height:1.6;overflow-wrap:anywhere}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}@media(max-width:1080px){.editor-grid,.workspace{grid-template-columns:1fr}.summary-panel{position:static}.paste-area textarea,.tab-panel{min-height:360px}}@media(max-width:760px){.app-header{grid-template-columns:1fr}.title-group:after{border-left:0;padding-left:0}.command-bar span:last-child{margin-left:0}.input-footer{justify-content:stretch}.button-primary{width:100%}.tree-item{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}