:root{color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--bg: #0b1220;--surface: #141d31;--surface-2: #1c283f;--border: #263348;--border-strong: #33415c;--text: #f1f5f9;--text-muted: #94a3b8;--text-faint: #64748b;--accent: #60a5fa;--accent-strong: #3b82f6;--danger: #f87171;--danger-bg: #3f1214;--danger-border: #7f1d1d;--success: #4ade80;--warn: #fbbf24;--radius-sm: .375rem;--radius-md: .625rem;--radius-lg: .875rem;--shadow-card: 0 1px 2px rgba(0, 0, 0, .2), 0 4px 12px rgba(0, 0, 0, .18);--topbar-h: 3.4rem}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}a{color:var(--accent)}button{font-family:inherit}button:focus-visible,input:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.layout{display:flex;flex-direction:column;min-height:100vh}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1rem;padding:.85rem 1.5rem;background:#0b1220d9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}.topbar .back{text-decoration:none;font-size:.875rem;color:var(--text-muted);transition:color .15s ease}.topbar .back:hover{color:var(--accent)}.topbar-title{font-weight:700;letter-spacing:-.01em}.body{display:flex;flex:1;min-height:calc(100vh - var(--topbar-h))}.sidebar{width:16rem;flex-shrink:0;padding:1.5rem .9rem;border-right:1px solid var(--border);position:sticky;top:var(--topbar-h);max-height:calc(100vh - var(--topbar-h));overflow-y:auto;display:flex;flex-direction:column;gap:.15rem}.sidebar .menu-group{margin-bottom:.1rem}.sidebar .menu-group summary{cursor:pointer;display:flex;align-items:center;gap:.35rem;padding:.4rem .5rem;border-radius:var(--radius-sm);list-style:none;color:var(--text-muted);transition:background .15s ease,color .15s ease}.sidebar .menu-group summary:hover{background:var(--surface);color:var(--text)}.sidebar .menu-group summary::-webkit-details-marker{display:none}.sidebar .menu-group summary:before{content:"";width:0;height:0;border-style:solid;border-width:.3rem 0 .3rem .4rem;border-color:transparent transparent transparent var(--text-faint);transition:transform .15s ease;flex-shrink:0}.sidebar .menu-group[open]>summary:before{transform:rotate(90deg)}.sidebar>.menu-group>summary{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}.sidebar>.menu-group>summary:hover{color:var(--text-muted);background:transparent}.menu-children .menu-group summary{font-size:.87rem;font-weight:600}.menu-children{margin-left:.55rem;padding-left:.65rem;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:.1rem}.menu-link{position:relative;display:block;padding:.4rem .6rem;text-decoration:none;color:#cbd5e1;font-size:.87rem;border-radius:var(--radius-sm);border-left:2px solid transparent;transition:background .15s ease,color .15s ease,border-color .15s ease}.sidebar>.menu-link{font-weight:600;font-size:.9rem}.menu-link:hover{color:var(--text);background:var(--surface)}.menu-link.active{color:var(--accent);background:#60a5fa24;border-left-color:var(--accent);font-weight:700}.page-index{width:13.5rem;flex-shrink:0;padding:1.5rem 1.25rem;border-left:1px solid var(--border);position:sticky;top:var(--topbar-h);max-height:calc(100vh - var(--topbar-h));overflow-y:auto}.page-index-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.6rem}.page-index ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.05rem}.page-index-item a{display:block;font-size:.83rem;line-height:1.4;color:var(--text-muted);text-decoration:none;border-left:2px solid transparent;padding:.3rem 0 .3rem .7rem;transition:color .15s ease,border-color .15s ease}.page-index-item.level-3 a{padding-left:1.4rem;font-size:.8rem}.page-index-item a:hover{color:var(--text)}.page-index-item a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600}.content{flex:1;min-width:0;padding:2.5rem 3rem 4rem}.content h1,.content h2,.content h3{scroll-margin-top:calc(var(--topbar-h) + 1rem)}.content h1{margin-top:0;margin-bottom:.75rem;font-size:1.65rem;font-weight:700;letter-spacing:-.015em}.content h2{margin-top:2.25rem;margin-bottom:.75rem;font-size:1.2rem;font-weight:650;letter-spacing:-.01em}.content h3{margin-top:1.5rem;margin-bottom:.5rem;font-size:1.02rem;font-weight:650}.content p,.content li{font-size:1.02rem;line-height:1.85;letter-spacing:.005em}.content p{margin:0 0 1.05rem}.content section{margin-top:2rem}.content code{background:var(--surface-2);padding:.15rem .4rem;border-radius:var(--radius-sm);font-size:.9em}.hint{color:var(--text-muted);font-size:.9rem;line-height:1.75}.badge{display:inline-flex;align-items:center;padding:.1rem .5rem;border-radius:999px;background:#60a5fa24;color:var(--accent);font-size:.72rem;font-weight:700;letter-spacing:.02em;vertical-align:middle}.code-block-wrapper{margin:.85rem 0 1.4rem}.code-title{margin:0 0 .4rem;font-size:.8rem;font-weight:600;color:var(--text-muted)}.code-block{border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem;overflow-x:auto;font-size:.85rem;line-height:1.6;margin:0;box-shadow:var(--shadow-card);background:#0b1220;color:#cbd5e1;white-space:pre-wrap}.code-block code{background:none;padding:0;border-radius:0;font-size:1em}.code-block .token.comment,.code-block .token.prolog{color:#6a9955}.code-block .token.builtin,.code-block .token.changed,.code-block .token.keyword,.code-block .token.atrule,.code-block .token.important{color:#569cd6}.code-block .token.number,.code-block .token.inserted,.code-block .token.boolean{color:#b5cea8}.code-block .token.constant{color:#646695}.code-block .token.attr-name,.code-block .token.property,.code-block .token.variable{color:#9cdcfe}.code-block .token.deleted,.code-block .token.string,.code-block .token.attr-value,.code-block .token.url,.code-block .token.template-punctuation{color:#ce9178}.code-block .token.selector{color:#d7ba7d}.code-block .token.tag{color:#569cd6}.code-block .token.punctuation,.code-block .token.operator{color:#d4d4d4}.code-block .token.function{color:#dcdcaa}.code-block .token.class-name{color:#4ec9b0}.crash-box{margin:1.5rem 0;padding:1.25rem;border:1px solid var(--danger-border);border-radius:var(--radius-lg);background:var(--danger-bg)}.error{color:var(--danger)}.success{color:var(--success)}.html-css-playground-wrapper{margin:1rem 0 1.75rem;border:1px solid var(--border-strong);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}.html-css-playground-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .85rem;background:var(--surface);border-bottom:1px solid var(--border-strong)}.html-css-playground-label{font-size:.8rem;color:var(--text-muted);white-space:nowrap}.html-css-playground-tabs{display:flex;gap:.25rem}.html-css-playground-tab{padding:.3rem .65rem;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:transparent;color:var(--text-muted);font-size:.8rem;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}.html-css-playground-tab.active{border-color:var(--accent);color:var(--accent);background:#60a5fa1a}.html-css-playground-reset{padding:.3rem .65rem;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:transparent;color:#cbd5e1;font-size:.8rem;cursor:pointer;transition:border-color .15s ease,color .15s ease}.html-css-playground-reset:hover{border-color:var(--accent);color:var(--accent)}.html-css-playground-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);height:34rem}.html-css-playground-editor-pane{min-width:0;min-height:0;overflow:hidden;border-right:1px solid var(--border-strong)}.html-css-playground-editor{width:100%;height:100%;min-height:0;-moz-tab-size:2;tab-size:2}.html-css-playground-preview{width:100%;height:100%;border:none;background:#fff}@media (max-width: 40rem){.html-css-playground-body{grid-template-columns:1fr;height:auto}.html-css-playground-editor-pane{height:14rem;border-right:none;border-bottom:1px solid var(--border-strong)}.html-css-playground-preview{height:16rem}.content{padding:1.5rem 1.25rem 3rem}.body{flex-direction:column}.sidebar{position:static;width:100%;max-height:none;border-right:none;border-bottom:1px solid var(--border)}}@media (max-width: 64rem){.page-index{display:none}}