@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{--bg:#f3f0e8;--panel:#fffdf8;--ink:#181816;--muted:#67655f;--line:#d9d5cb;--acid:#c9ff3d;--blue:#2554ed;--red:#d8293c;--green:#159447;--violet:#6134e8;--shadow:0 22px 80px #25200c12}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;transition:.3s}html[data-theme=dark]{--bg:#11120f;--panel:#191a16;--ink:#f3f1e9;--muted:#a8a79f;--line:#34352e;--shadow:0 22px 80px #0006}button,a{font:inherit}button{color:inherit}.top{height:70px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 4vw;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);z-index:20}.brand{color:inherit;text-decoration:none;font-size:12px;letter-spacing:.08em;display:flex;align-items:center;gap:10px}.brand b{font-weight:700}.mark{display:grid;place-items:center;background:var(--ink);color:var(--bg);width:30px;height:30px;border-radius:9px;font-weight:800}.top nav{margin:auto;display:flex;gap:30px}.top nav a{color:var(--muted);text-decoration:none;font-size:12px}.icon,.mini,.button{border:1px solid var(--line);background:var(--panel);border-radius:999px;cursor:pointer}.icon{width:38px;height:38px}.hero{padding:13vh 7vw 14vh;min-height:660px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:500px;height:500px;border:1px solid var(--line);border-radius:50%;right:-80px;top:70px;box-shadow:0 0 0 55px transparent,0 0 0 56px var(--line),0 0 0 110px transparent,0 0 0 111px var(--line)}.eyebrow,.tag,.num,.meta,.stage-note,.demo-bar,footer{font:500 10px DM Mono,monospace;letter-spacing:.1em}.hero h1{font-size:clamp(52px,8vw,112px);line-height:.88;letter-spacing:-.065em;max-width:1000px;margin:30px 0}.hero h1 em{font-family:Playfair Display,serif;font-weight:500;color:var(--violet)}.hero p{font-size:17px;line-height:1.65;max-width:650px;color:var(--muted)}.hero-actions{display:flex;gap:10px;margin-top:35px}.button{padding:13px 19px;text-decoration:none;color:inherit;font-size:13px}.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}.system,.workflow{padding:110px 5vw;border-bottom:1px solid var(--line)}.section-head{display:grid;grid-template-columns:1fr auto;gap:50px;align-items:end;margin-bottom:45px}.section-head>div:first-child{max-width:730px}.num{display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:32px;height:32px;margin-right:14px}.tag{color:var(--muted)}h2{font-size:clamp(42px,6vw,78px);line-height:1;margin:22px 0 15px;letter-spacing:-.05em}.section-head p{color:var(--muted);line-height:1.65;margin:0}.meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.meta span{border:1px solid var(--line);padding:8px 10px;border-radius:999px}.demo-shell,.code-card{border:1px solid var(--line);background:var(--panel);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}.demo-bar{height:55px;border-bottom:1px solid var(--line);padding:0 16px;display:flex;align-items:center;justify-content:space-between}.demo-bar>span{display:flex;align-items:center;gap:8px}.demo-bar i{display:block;width:7px;height:7px;border-radius:50%;background:#29bf5b;box-shadow:0 0 0 4px #29bf5b22}.mini{padding:8px 12px;font-size:11px;margin-left:5px}.accent{background:var(--ink);color:var(--bg)}.toast-stage{min-height:520px;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--acid) 18%,transparent),transparent 42%)}.stage-note{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;color:var(--muted)}.toast-stack{width:min(520px,90%);display:grid;gap:10px}.toast{position:relative;display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:start;padding:14px 14px 17px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 12px 35px #0001;animation:toastIn .45s cubic-bezier(.2,.8,.2,1) both}.toast.focus{color:white;transform:scale(1.015);box-shadow:0 18px 42px #0003}.toast.error.focus{background:var(--red)}.toast.success.focus{background:var(--green)}.toast.info.focus{background:var(--blue)}.toast.update.focus{background:var(--violet)}.toast.dim{opacity:.35;filter:saturate(.45)}.toast .symbol{font-weight:800}.toast strong{font-size:13px;display:block}.toast p{font-size:11px;margin:4px 0 0;opacity:.78}.toast button{border:0;background:#ffffffde;color:#171717;border-radius:5px;font-size:9px;padding:4px 7px;cursor:pointer}.progress{position:absolute;height:3px;left:0;bottom:0;background:currentColor;opacity:.75;width:100%;transform-origin:left;animation:drain 2.1s linear both}.focus .progress{background:white}.toast.paused .progress{animation-play-state:paused}@keyframes drain{to{transform:scaleX(0)}}@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.97)}}.code-card{margin-top:16px}.tabs{height:52px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 12px;gap:4px}.tab,.copy{border:0;background:none;padding:8px 11px;color:var(--muted);font-size:11px;cursor:pointer}.tab.active{background:var(--ink);color:var(--bg);border-radius:7px}.copy{margin-left:auto;border:1px solid var(--line);border-radius:7px}.code-card pre{margin:0;padding:25px;min-height:250px;overflow:auto;background:#11130f;color:#d9e1ce;font:12px/1.7 DM Mono,monospace}.timeline-viewport{height:610px;overflow:hidden;position:relative;cursor:grab;background:linear-gradient(var(--panel),color-mix(in srgb,var(--panel) 82%,var(--bg)))}.timeline-viewport:active{cursor:grabbing}.year-line{position:absolute;left:0;right:0;top:48%;height:1px;background:var(--line)}.timeline-track{position:absolute;top:55px;left:50%;height:490px;display:flex;gap:70px;align-items:flex-start;will-change:transform;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.era{width:240px;flex:none;position:relative}.era:nth-child(even){margin-top:245px}.era:after{content:"";position:absolute;left:50%;top:calc(100% + 17px);height:87px;border-left:1px solid var(--line)}.era:nth-child(even):after{top:auto;bottom:calc(100% + 17px);height:86px}.era small{font:10px DM Mono;color:var(--muted)}.era h3{font:24px Playfair Display,serif;margin:4px 0 13px}.art{height:150px;border-radius:10px;position:relative;overflow:hidden;border:1px solid #fff8;box-shadow:0 12px 20px #0002;cursor:pointer;transition:.4s}.art:hover{transform:translateY(-8px) rotate(-1deg);box-shadow:0 20px 28px #0003}.art:before,.art:after{content:"";position:absolute}.c1{background:conic-gradient(from 20deg,#a33,#e7b248,#284e92,#efe5c5,#a33)}.c2{background:repeating-radial-gradient(ellipse at 30% 40%,#667f3c 0 8px,#c6bb62 9px 15px,#35526b 16px 19px)}.c3{background:linear-gradient(130deg,#ddbb79 0 35%,#602d2d 36% 55%,#102c39 56%)}.c4{background:repeating-linear-gradient(90deg,#d22 0 18px,#eee 18px 36px);filter:saturate(.75)}.c5{background:linear-gradient(45deg,#f4e343 25%,#ee4a31 25% 50%,#2269c7 50% 75%,#191919 75%)}.c6{background:radial-gradient(circle at 70% 30%,#ffea74 0 8%,transparent 9%),linear-gradient(160deg,#607ba5 50%,#d17b48 51%)}.drag-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font:10px DM Mono;color:var(--muted)}.flow{display:flex;align-items:stretch;gap:12px;overflow:auto;padding:10px 0}.flow article,.stack-grid article{border:1px solid var(--line);background:var(--panel);border-radius:15px;padding:22px;min-width:200px;flex:1}.flow>b{align-self:center;color:var(--muted)}.flow article span{font:10px DM Mono;color:var(--muted)}.flow h3,.stack-grid h3{font-size:16px}.flow p,.stack-grid{font-size:12px;color:var(--muted);line-height:1.6}.flow code,.stack-grid code{font:10px DM Mono;color:var(--violet)}.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}.stack-grid article{color:var(--muted)}.stack-grid ul{padding-left:18px}.modal-backdrop{position:fixed;inset:0;background:#0009;backdrop-filter:blur(9px);display:grid;place-items:center;z-index:50;animation:fade .2s}.modal{width:min(430px,92vw);background:var(--panel);border-radius:22px;padding:28px;box-shadow:0 30px 100px #0008;animation:pop .42s cubic-bezier(.16,1.3,.3,1)}.modal h3{font:30px Playfair Display;margin:0 0 8px}.modal p{color:var(--muted);font-size:13px}.answer{width:100%;text-align:left;padding:12px;margin:5px 0;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:9px;cursor:grab}.modal .actions{display:flex;justify-content:space-between;margin-top:20px}.correct{outline:2px solid var(--green)}@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.88)}}@keyframes fade{from{opacity:0}}footer{padding:28px 5vw;display:flex;justify-content:space-between;color:var(--muted)}@media(max-width:800px){.top nav{display:none}.section-head{grid-template-columns:1fr}.meta{justify-content:flex-start}.system,.workflow{padding:75px 18px}.hero{padding:90px 20px}.stack-grid{grid-template-columns:1fr}.flow b{display:none}.flow{flex-direction:column}.toast-stage{min-height:480px}.timeline-viewport{height:560px}.demo-bar{height:auto;min-height:55px;gap:10px;flex-wrap:wrap;padding:10px}.demo-bar>div{display:flex}.mini{padding:7px}.hero:after{opacity:.25}footer{gap:20px;flex-direction:column}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}