.page{max-width:820px;margin:0 auto;padding:3rem 2rem 6rem}.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line);flex-wrap:wrap}.page-header h1{font-size:.95rem;font-weight:700;color:var(--accent);letter-spacing:.04em;margin-bottom:.25rem}.page-header p{font-size:.75rem;color:var(--muted)}.mode-tabs{display:flex;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--surface);flex-shrink:0}.mode-tab{padding:.3rem .8rem;font-size:.75rem;font-family:inherit;color:var(--muted);background:none;border:none;border-right:1px solid var(--line);cursor:pointer;letter-spacing:.03em;transition:color .12s,background .12s}.mode-tab:last-child{border-right:none}.mode-tab:hover{color:var(--fg)}.mode-tab.active{color:var(--accent);background:var(--surface2);font-weight:700}.comp{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:1.25rem}.comp-header{display:flex;align-items:center;justify-content:space-between;padding:.55rem 1rem;background:var(--surface);border-bottom:1px solid var(--line)}.comp-name{font-size:.72rem;font-weight:700;color:var(--muted2);letter-spacing:.06em;text-transform:uppercase}.comp-tabs{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}.comp-tab{padding:.15rem .55rem;font-size:.68rem;font-family:inherit;color:var(--muted);background:none;border:none;border-right:1px solid var(--line);cursor:pointer;letter-spacing:.03em;transition:color .1s,background .1s}.comp-tab:last-child{border-right:none}.comp-tab:hover{color:var(--fg)}.comp-tab.active{color:var(--accent);background:var(--surface2);font-weight:700}.comp-preview{display:block;background:var(--bg);padding:1.25rem}.comp-preview.hidden,.comp-raw,.comp-dev{display:none}.comp-raw.visible,.comp-dev.visible{display:block}.row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}.row:last-child{margin-bottom:0}.row-label{font-size:.7rem;color:var(--muted);width:80px;flex-shrink:0}.sub-label{font-size:.68rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:.65rem;margin-top:1rem}.sub-label:first-child{margin-top:0}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:1px solid var(--line);background:transparent;color:var(--muted2);font-family:inherit;font-size:.78rem;letter-spacing:.01em;border-radius:5px;cursor:pointer;transition:border-color .12s,color .12s,background .12s,opacity .12s;white-space:nowrap;user-select:none;-webkit-user-select:none}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn-sm{height:28px;padding:0 .6rem}.btn-md{height:34px;padding:0 .75rem}.btn-lg{height:40px;padding:0 1rem}.btn-icon.btn-sm{width:28px;padding:0}.btn-icon.btn-md{width:34px;padding:0}.btn-icon.btn-lg{width:40px;padding:0}.btn-ghost:hover{border-color:var(--muted);color:var(--fg)}.btn-ghost.active,.btn-ghost:active{background:var(--surface)}.btn-filled{background:var(--surface2);border-color:var(--line);color:var(--muted2)}.btn-filled:hover{border-color:var(--muted);color:var(--fg);background:#2a2520}.btn-accent{background:var(--accent);border-color:var(--accent);color:#0c0a09;font-weight:700}.btn-accent:hover{background:#fcd34d;border-color:#fcd34d}.btn-danger{border-color:#3f1515;color:var(--danger)}.btn-danger:hover{border-color:var(--danger);background:#f8717114}.btn:disabled,.btn-disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.btn.success{border-color:var(--success)!important;color:var(--success)!important;background:#4ade8012!important}.btn[data-tip]:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%) translateY(3px);background:var(--surface2);border:1px solid var(--line);color:var(--fg);font-size:.68rem;padding:.2rem .5rem;border-radius:3px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .1s,transform .1s;z-index:100}.btn[data-tip]:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.icon{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.toolbar{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:var(--surface)}.toolbar .btn{border:none;border-radius:0;border-right:1px solid var(--line)}.toolbar .btn:first-child{border-radius:5px 0 0 5px}.toolbar .btn:last-child{border-radius:0 5px 5px 0;border-right:none}.toolbar-overflow{position:relative;display:flex}.toolbar-overflow .btn{border-radius:0 5px 5px 0;border-right:none}.overflow-menu{display:none;position:absolute;top:calc(100% + 5px);right:0;background:var(--surface2);border:1px solid var(--line);border-radius:5px;z-index:200;min-width:140px;box-shadow:0 8px 24px #00000080}.overflow-menu.open{display:block}.overflow-item{display:flex;align-items:center;gap:.5rem;padding:.45rem .75rem;font-size:.78rem;color:var(--muted2);cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:inherit;transition:background .1s,color .1s}.overflow-item:hover{background:var(--surface);color:var(--fg)}.overflow-item.danger{color:var(--danger)}.overflow-item.danger:hover{background:#f8717114}.pane-copy{display:flex;justify-content:flex-end;padding:.5rem .75rem;border-bottom:1px solid var(--line);background:var(--surface2)}pre{margin:0;padding:1.1rem 1.25rem;font-size:.72rem;color:var(--muted2);line-height:1.9;overflow-x:auto;background:var(--surface)}.t-tag{color:#7dd3fc}.t-attr{color:#86efac}.t-val{color:#fca5a5}.t-str{color:#fde68a}.t-cmt{color:var(--muted);font-style:italic}.t-kw{color:var(--accent);font-weight:700}.t-fn{color:#86efac}.t-num{color:#f9a8d4}.dev-block{padding:1rem 1.25rem;border-bottom:1px solid var(--line);background:var(--surface)}.dev-block:last-child{border-bottom:none}.dev-h{font-size:.68rem;font-weight:700;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.6rem}.dev-p{font-size:.75rem;color:var(--muted2);line-height:1.8;margin-bottom:.5rem}.dev-p:last-child{margin-bottom:0}.dev-table{width:100%;border-collapse:collapse;font-size:.72rem}.dev-table th{text-align:left;color:var(--muted);font-weight:400;letter-spacing:.05em;padding:.3rem .6rem;border-bottom:1px solid var(--line)}.dev-table td{padding:.35rem .6rem;border-bottom:1px solid #181411;color:var(--muted2);vertical-align:top;line-height:1.6}.dev-table tr:last-child td{border-bottom:none}.dev-table td:first-child{color:var(--fg);white-space:nowrap}.dev-pre{background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:.75rem 1rem;font-size:.72rem;line-height:1.9;overflow-x:auto;margin-top:.65rem}.pill{display:inline-block;padding:.05rem .4rem;border-radius:3px;font-size:.62rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase}.pill-g{background:#4ade801f;color:var(--success)}.pill-r{background:#f871711f;color:var(--danger)}.pill-a{background:#fbbf241f;color:var(--accent)}.pill-b{background:#7dd3fc1f;color:#7dd3fc}@keyframes spin{to{transform:rotate(360deg)}}.btn-toggled{border-color:var(--accent)!important;color:var(--accent)!important;background:#fbbf241a!important}.bubble-wrap-demo:hover .msg-action-bar-demo{opacity:1!important}