:root{color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.6}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{display:block}code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}pre{background:#7f7f7f1f;border-radius:6px;overflow:hidden}pre code{background:none;padding:.75rem 1rem;display:block}:not(pre)>code{background:#7f7f7f26;padding:.1rem .35rem;border-radius:4px}table{border-collapse:collapse;width:100%;margin:1rem 0}th,td{border:1px solid rgba(127,127,127,.35);padding:.4rem .6rem;text-align:left}.page{display:flex;flex-direction:column;min-height:100vh}.tabs{display:flex;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid rgba(127,127,127,.3);position:sticky;top:0;background:Canvas;z-index:1;height:56px;box-sizing:border-box;align-items:center}.tab{border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit;padding:.4rem .9rem;border-radius:6px;cursor:pointer;font-size:.9rem}.tab:hover{background:#7f7f7f26}.tab.active{background:#3b82f6;border-color:#3b82f6;color:#fff;font-weight:600}.layout{display:flex;flex:1}.sidebar{width:300px;flex-shrink:0;border-right:1px solid rgba(127,127,127,.3);padding:1rem;overflow-y:auto;height:calc(100vh - 56px);position:sticky;top:56px}.sidebar-title{font-size:1.1rem;margin:0 0 1rem}.sidebar ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}.sidebar a{display:block;padding:.35rem .5rem;border-radius:6px;text-decoration:none;color:inherit;font-size:.9rem}.sidebar a:hover{background:#7f7f7f26}.sidebar a.active{background:#3b82f6;color:#fff;font-weight:600}.content{flex:1;padding:2rem 3rem;max-width:860px}.content article{min-width:0}details{margin:.5rem 0;padding:.5rem .75rem;border:1px solid rgba(127,127,127,.3);border-radius:6px}summary{cursor:pointer;font-weight:600}.practice-panel{flex:1;min-width:420px;border-left:1px solid rgba(127,127,127,.3);padding:1rem;overflow-y:auto;height:calc(100vh - 56px);position:sticky;top:56px;display:flex;flex-direction:column;gap:.6rem}.practice-title{font-size:1rem;margin:0}.practice-empty{opacity:.7;font-size:.9rem}.practice-tabs{display:flex;gap:.35rem;flex-wrap:wrap}.practice-tab{border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit;padding:.25rem .6rem;border-radius:6px;cursor:pointer;font-size:.8rem}.practice-tab:hover{background:#7f7f7f26}.practice-tab.active{background:#3b82f6;border-color:#3b82f6;color:#fff;font-weight:600}.practice-editor-wrapper{flex:1;min-height:0}.practice-editor-wrapper>div{height:100%}.practice-panel .cm-editor{height:100%;border:1px solid rgba(127,127,127,.3);border-radius:6px;overflow:hidden;font-size:.85rem}.practice-panel .cm-scroller{overflow:auto}.practice-reset{align-self:flex-start;border:1px solid rgba(127,127,127,.4);background:transparent;color:inherit;padding:.35rem .8rem;border-radius:6px;cursor:pointer;font-size:.85rem}.practice-reset:hover{background:#7f7f7f26}@media(max-width:1100px){.content{padding:2rem 1.5rem}}@media(max-width:800px){.tabs{height:auto;flex-wrap:wrap;position:static}.layout{flex-direction:column}.sidebar{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid rgba(127,127,127,.3)}.content{padding:1.5rem}.practice-panel{width:100%;min-width:0;height:auto;position:static;border-left:none;border-top:1px solid rgba(127,127,127,.3)}.practice-editor-wrapper{flex:none;height:420px}}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#c678dd}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string{color:#98c379}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#d19a66}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-title.class_,.hljs-class .hljs-title{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}