:root{--paper:#f7f7f3;--graphite:#171918;--blue:#2441ff;--rule:#c8cac5;--topbar-height:48px;--rail-width:200px;--inspector-width:320px}@media (max-width:1024px){:root{--rail-width:0px;--inspector-width:0px}}*{box-sizing:border-box}.app-shell{min-width:320px;min-height:100vh;color:var(--graphite);background:var(--paper);grid-template:"topbar topbar topbar" var(--topbar-height) "rail workspace inspector" minmax(0, 1fr) / var(--rail-width) minmax(420px, 1fr) var(--inspector-width);width:100vw;height:100vh;margin:0;font-family:Segoe UI,system-ui,sans-serif;font-size:13px;line-height:1.5;display:grid;overflow:hidden}.topbar{border-bottom:1px solid var(--rule);grid-area:topbar}.index-rail{border-right:1px solid var(--rule);background:#fff;grid-area:rail;transition:transform .3s}.workspace{background:var(--paper);grid-area:workspace;position:relative}.inspector{border-left:1px solid var(--rule);background:#fff;grid-area:inspector;transition:transform .3s}.font-editorial{font-family:Playfair Display,serif}.font-modern{font-family:Outfit,sans-serif}.button{color:var(--graphite);border:1px solid var(--graphite);cursor:pointer;background:0 0;border-radius:9999px;padding:8px 16px;font-family:Segoe UI,sans-serif;font-weight:600;transition:all .2s}.button:hover,.button--primary{background:var(--graphite);color:#fff}.button--primary:hover{color:var(--graphite);background:0 0}