:root{color:#151512;font-synthesis:none;text-rendering:optimizelegibility;background:#eeece5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{background:#eeece5;min-width:320px;min-height:100%;margin:0}button{font:inherit}.home,.architecture{background:radial-gradient(circle at 78% 18%,#f7c52b1a,#0000 25%),#fff;min-height:100vh}.app{background:#fff;min-height:100vh}.home-inner{width:min(1160px,92vw);margin:auto;padding:38px 0 28px}.home-brand{align-items:center;gap:12px;display:flex}.mark{border:2px solid #f7c52b;border-radius:50%;place-items:center;width:38px;height:38px;font-weight:900;display:grid}.home-brand b,.home-btn b{letter-spacing:.08em;font-size:18px}.home-brand b span,.home-btn b span{color:#f7c52b}.home-brand small{letter-spacing:.2em;color:#77746b;margin-top:3px;font-size:8px;display:block}.hero{grid-template-columns:1fr 360px;align-items:center;gap:40px;padding:70px 0 52px;display:grid}.kicker{letter-spacing:.18em;text-transform:uppercase;color:#9b5a50;font-size:10px;font-weight:900}.hero h1,.architecture h1{letter-spacing:-.055em;margin:14px 0 22px;font-family:Georgia,serif;font-size:clamp(48px,7vw,88px);line-height:.9}.hero h1 em,.architecture h1 em{color:#77736a;font-style:normal}.hero p,.lead{color:#5d5b54;max-width:610px;font-family:Georgia,serif;font-size:21px;line-height:1.4}.orbit{border:1px solid #c9c5bb;border-radius:50%;place-items:center;width:330px;height:330px;margin:auto;display:grid;position:relative}.orbit:before{content:"";border:1px dashed #c9c5bb;border-radius:50%;position:absolute;inset:35px}.orbit-center{color:#f7c52b;background:#171714;border-radius:50%;place-items:center;width:82px;height:82px;font-size:30px;font-weight:900;display:grid}.orbit-tag{letter-spacing:.12em;background:#fffdf7;border:2px solid #171714;padding:10px 13px;font-size:9px;font-weight:900;position:absolute}.orbit-tag.one{top:18px;left:78px}.orbit-tag.two{bottom:20px;right:42px}.choice-grid{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.choice-grid>button{text-align:left;cursor:pointer;background:#fffdf7;border:1.5px solid #171714;min-height:255px;padding:28px;transition:all .18s;position:relative}.choice-grid>button:hover{transform:translateY(-5px);box-shadow:8px 8px #171714}.choice-grid small{color:#dedbd2;font-family:Georgia,serif;font-size:45px;position:absolute;top:16px;right:20px}.emoji{font-size:28px}.choice-grid h2{margin:30px 0 8px;font-family:Georgia,serif;font-size:31px}.choice-grid p{color:#626057;max-width:300px;line-height:1.45}.choice-grid strong{letter-spacing:.13em;margin-top:22px;font-size:10px;display:block}.home-foot{text-align:center;color:#858178;letter-spacing:.08em;text-transform:uppercase;padding-top:24px;font-size:10px}.topbar{color:#f5f2e8;z-index:30;background:#11110f;justify-content:space-between;align-items:center;height:76px;padding:0 clamp(16px,4vw,64px);display:flex;position:relative}.home-btn{color:#f5f2e8;cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;display:flex}.home-btn:first-letter{color:#f7c52b}.mode{letter-spacing:.2em;color:#aaa79e;font-size:9px}.actions{align-items:center;gap:18px;display:flex}.actions button,.change{color:#eeeae0;letter-spacing:.12em;cursor:pointer;background:0 0;border:1px solid #4b4a45;border-radius:999px;padding:9px 12px;font-size:10px;font-weight:800}.actions button:hover,.change:hover{border-color:#f7c52b}.actions kbd{color:#aaa89f;border:1px solid #55544e;border-radius:4px;margin-left:7px;padding:1px 4px}.actions span{letter-spacing:.12em;color:#bdbab0;font-size:12px}.progress{background:#292824;height:3px}.progress i{background:#f7c52b;height:100%;transition:width .3s;display:block}.stage{grid-template-columns:minmax(300px,1fr) minmax(270px,410px) 160px;align-items:start;gap:clamp(28px,5vw,80px);width:min(1180px,92vw);min-height:calc(100vh - 179px);margin:auto;padding:clamp(34px,6vh,70px) 0 24px;display:grid}.copy{max-width:500px}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:#6d6b63;align-items:center;gap:11px;margin-bottom:18px;font-size:11px;font-weight:900;display:flex}.eyebrow span{color:#11110f;letter-spacing:0;background:#f7c52b;border-radius:50%;place-items:center;width:29px;height:29px;display:grid}.copy h1{letter-spacing:-.045em;margin:0 0 30px;font-family:Georgia,serif;font-size:clamp(40px,5vw,67px);line-height:.94}.bubble{background:#fffdf7;border:2px solid #171714;border-radius:28px;width:min(100%,460px);margin-bottom:28px;padding:25px 28px 26px 54px;position:relative;transform:rotate(-1.2deg);box-shadow:8px 8px #171714}.bubble>b{color:#f7c52b;font-family:Georgia,serif;font-size:48px;line-height:1;position:absolute;top:17px;left:19px}.bubble p{margin:0;font-family:Georgia,serif;font-size:23px;line-height:1.18}.bubble i{background:#fffdf7;border-bottom:2px solid #171714;border-right:2px solid #171714;width:28px;height:28px;position:absolute;bottom:-18px;left:58px;transform:skew(-18deg)rotate(32deg)}.note{color:#5d5b54;max-width:440px;margin:0 0 17px;font-size:14px;line-height:1.6}.copy label{letter-spacing:.16em;border-bottom:2px solid #f7c52b;padding-bottom:5px;font-size:9px;font-weight:900;display:inline-block}.highlight{border-left:3px solid #f7c52b;gap:5px;max-width:440px;margin-top:25px;padding:10px 0 10px 15px;display:grid}.highlight b{letter-spacing:.16em;font-size:9px}.highlight span{color:#5d5b54;font-size:12px;line-height:1.45}.chat-link{color:#fffdf7;letter-spacing:.12em;cursor:pointer;background:#171714;border:0;margin-top:25px;padding:12px 15px;font-size:9px;font-weight:900}.screen-wrap{justify-content:center;align-items:flex-start;height:min(72vh,680px);display:flex;position:relative}.screen{object-fit:contain;filter:drop-shadow(18px 22px 18px #0000002e);width:auto;max-width:100%;height:100%;animation:.35s both enter;display:block}.screen-wrap>small{letter-spacing:.18em;color:#77746b;writing-mode:vertical-rl;font-size:8px;font-weight:900;position:absolute;bottom:4%;right:-18px}.rail{border-left:1px solid #c8c5bc;flex-direction:column;justify-content:flex-start;gap:13px;min-height:250px;margin-top:105px;padding-left:22px;display:flex}.rail button{text-align:left;color:#97948b;text-transform:uppercase;letter-spacing:.09em;cursor:pointer;background:0 0;border:0;align-items:center;gap:10px;padding:0;font-size:10px;display:flex}.rail i{background:#aaa79d;border-radius:50%;width:5px;height:5px;display:block}.rail button.on{color:#171714;font-weight:900}.rail button.on i{background:#f7c52b;width:8px;height:8px}.nav{border-top:1px solid #d1cec5;justify-content:center;align-items:center;gap:34px;height:68px;padding:0 20px;display:flex}.nav>button{color:#171714;letter-spacing:.08em;cursor:pointer;background:0 0;border:0;min-width:78px;font-size:14px;font-weight:900}.nav>button:disabled{opacity:.25}.nav>div{gap:5px;max-width:min(560px,55vw);display:flex;overflow:hidden}.nav>div button{cursor:pointer;background:#b6b3aa;border:0;border-radius:50%;flex:none;width:5px;height:5px;padding:0}.nav>div button.on{background:#171714;border-radius:5px;width:22px}footer{color:#99968d;letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:center;height:32px;padding:0 clamp(18px,4vw,64px);font-size:9px;display:flex}.map{z-index:50;background:#fffdf7;border:1px solid #171714;width:min(1180px,92vw);padding:22px 24px 24px;position:absolute;top:79px;left:50%;transform:translate(-50%);box-shadow:12px 14px #171714f2}.map-top{justify-content:space-between;display:flex}.map-top small{letter-spacing:.16em;color:#9a968c;font-size:9px;font-weight:900}.map-top h2{margin:5px 0 18px;font-family:Georgia,serif;font-size:27px}.map-top>button{cursor:pointer;background:0 0;border:0;font-size:27px}.chapters{border-bottom:1px solid #d8d4ca;flex-wrap:wrap;gap:8px;padding-bottom:15px;display:flex}.chapters button{text-transform:uppercase;letter-spacing:.06em;cursor:pointer;background:#f1efe8;border:1px solid #cbc7bc;padding:8px 11px;font-size:10px;font-weight:800}.chapters button.sel{color:#fffdf7;background:#171714;border-color:#171714}.thumbs{gap:7px;padding-top:17px;display:flex;overflow-x:auto}.thumbs button{cursor:pointer;background:#e6e3da;border:0;flex:0 0 45px;padding:3px;position:relative}.thumbs img{object-fit:contain;width:39px;height:78px;display:block}.thumbs b{color:#11110f;background:#f7c52b;padding:2px 4px;font-size:8px;position:absolute;bottom:3px;left:3px}.thumbs button.sel{outline-offset:2px;outline:2px solid #171714}.modal{z-index:100;background:#11110fa3;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.dialog{background:#fffdf7;border:2px solid #171714;width:min(650px,94vw);padding:34px;position:relative;box-shadow:12px 12px #171714}.x{cursor:pointer;background:0 0;border:0;font-size:28px;position:absolute;top:10px;right:14px}.dialog h2{margin:10px 0 25px;font-family:Georgia,serif;font-size:40px;line-height:1}.chat-grid{grid-template-columns:1fr 1fr;gap:14px;display:grid}.chat-grid article{border:1px solid #bdb9ae;padding:20px}.chat-grid b{letter-spacing:.12em;font-size:11px}.chat-grid p,.dialog-note{color:#5d5b54;font-size:12px;line-height:1.5}.lead{max-width:680px}.layers{max-width:780px;margin:50px auto 30px}.layers>div{background:#fffdf7;border:1.5px solid #171714;justify-content:space-between;align-items:center;gap:20px;padding:20px 25px;display:flex}.layers small{letter-spacing:.16em;color:#9b5a50;font-size:9px;font-weight:900}.layers b{font-size:15px}.layers>span{text-align:center;color:#77736a;height:32px;padding-top:4px;font-size:22px;display:block}.placeholder{text-align:center;background:#fffdf780;border:2px dashed #aaa69c;gap:8px;padding:25px;display:grid}.placeholder b{letter-spacing:.16em;font-size:10px}.placeholder span{color:#77736a;font-size:12px;line-height:1.5}@keyframes enter{0%{opacity:0;transform:translateY(10px)scale(.985)}to{opacity:1;transform:none}}@media (width<=900px){.rail{margin-top:70px}.hero{grid-template-columns:1fr 280px}.orbit{width:260px;height:260px}.choice-grid{grid-template-columns:1fr}.choice-grid>button{min-height:200px}.stage{grid-template-columns:minmax(260px,1fr) minmax(230px,340px);gap:28px}.rail{display:none}.screen-wrap{align-items:center;height:min(66vh,610px)}}@media (width<=700px){.topbar{height:64px;padding:0 14px}.home-btn b{font-size:14px}.mode{display:none}.actions{gap:8px}.actions button{padding:8px}.actions>span{font-size:10px}.stage{grid-template-rows:auto auto;grid-template-columns:1fr;gap:22px;width:min(92vw,520px);min-height:auto;padding-top:25px}.copy{order:1}.screen-wrap{order:2;height:55vh;min-height:380px;max-height:560px}.copy h1{margin-bottom:20px;font-size:42px}.bubble{margin-bottom:18px;padding:19px 20px 20px 45px}.bubble p{font-size:19px}.bubble>b{font-size:40px;top:11px;left:13px}.note{font-size:12px}.screen-wrap>small{right:0}.nav{gap:14px;height:62px}.nav>button{min-width:50px;font-size:11px}.nav>button span{display:none}.nav>div{max-width:48vw}.nav>div button:nth-child(n+16){display:none}footer{height:26px;font-size:7px}.map{padding:17px;top:67px}.map-top h2{font-size:22px}.chapters{max-height:120px;overflow:auto}.hero{grid-template-columns:1fr;padding:48px 0 32px}.orbit{display:none}.hero h1{font-size:58px}.hero p{font-size:18px}.choice-grid>button{min-height:180px;padding:22px}.choice-grid h2{margin-top:20px;font-size:28px}.dialog{padding:28px 20px}.dialog h2{font-size:32px}.chat-grid{grid-template-columns:1fr}.architecture main{padding-top:45px}.architecture h1{font-size:58px}.layers>div{gap:8px;display:grid}.change{padding:8px;font-size:8px}}@media (prefers-reduced-motion:reduce){.screen{animation:none}.progress i{transition:none}}.architecture main{width:min(1120px,92vw);margin:auto;padding:70px 0 90px}.architecture .lead{max-width:820px;font-size:20px}.arch-hero{border-top:1px solid #d7d3c8;grid-template-columns:1.1fr .9fr;align-items:center;gap:60px;margin-top:58px;padding-top:38px;display:grid}.arch-label{letter-spacing:.18em;color:#9b5a50;font-size:9px;font-weight:900}.arch-copy h2,.arch-diagram h2{letter-spacing:-.03em;margin:10px 0 15px;font-family:Georgia,serif;font-size:38px;line-height:1.02}.arch-copy p{color:#5e5c55;max-width:560px;font-size:14px;line-height:1.65}.chips{flex-wrap:wrap;gap:7px;margin-top:22px;display:flex}.chips span{letter-spacing:.12em;background:#fff;border:1px solid #bdb9ae;padding:8px 10px;font-size:9px;font-weight:900}.device-stack{justify-content:center;align-items:center;height:300px;display:flex;position:relative}.device{background:#171714;border:8px solid #171714;border-radius:27px;width:145px;height:275px;padding:7px;transform:rotate(-7deg);box-shadow:16px 18px #f7c52b}.device-screen{background:#fff;border-radius:17px;flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex}.device-screen span{letter-spacing:.12em;font-size:12px;font-weight:900}.device-screen b{color:#f7c52b;letter-spacing:.08em;font-size:25px}.device-screen small{letter-spacing:.12em;color:#777;margin-top:30px;font-size:8px}.web-card{color:#fff;background:#171714;gap:7px;min-width:200px;padding:19px 20px;display:grid;position:absolute;bottom:25px;right:2%;box-shadow:8px 8px #d8d4ca}.web-card b{letter-spacing:.14em;color:#f7c52b;font-size:10px}.web-card span{color:#d5d2c9;font-size:11px}.arch-diagram{border-top:1px solid #d7d3c8;margin-top:80px;padding-top:38px}.flow{grid-template-columns:1fr auto 1.35fr auto 1.5fr;align-items:center;gap:15px;margin-top:34px;display:grid}.node{background:#fff;border:1.5px solid #171714;gap:6px;min-height:125px;padding:18px;display:grid;box-shadow:5px 5px #e4e1d8}.node small,.firebase small{letter-spacing:.16em;color:#9b5a50;font-size:8px;font-weight:900}.node b{font-size:17px}.node span,.firebase span{color:#77746c;font-size:10px;line-height:1.45}.connector{color:#aaa69c;font-size:25px}.cloud-group{gap:12px;display:grid}.cloud{background:#f7c52b;box-shadow:5px 5px #171714}.cloud small{color:#5c4a0b}.servers{grid-template-columns:1fr 1fr;gap:10px;display:grid}.server{color:#fff;background:#171714;gap:5px;padding:14px 13px;display:grid}.server i{color:#f7c52b;font-size:9px;font-style:normal;font-weight:900}.server b{letter-spacing:.08em;font-size:11px}.server span{color:#c9c6bd;font-size:9px}.shared-line{text-align:center;letter-spacing:.05em;color:#66635b;border-left:2px solid #f7c52b;border-right:2px solid #f7c52b;width:58%;margin:23px auto 10px;padding:7px 10px;font-size:9px;font-weight:800}.data-row{grid-template-columns:1fr 1fr;gap:18px;max-width:760px;margin:0 auto;display:grid}.database{border-top:5px solid #171714}.firebase{background:#fffdf7;border:1.5px solid #171714;align-items:center;gap:15px;padding:18px;display:flex;box-shadow:5px 5px #f0ede4}.firebase-icon{background:#f7c52b;border-radius:50%;place-items:center;width:44px;height:44px;font-size:21px;font-weight:900;display:grid}.firebase div:last-child{gap:5px;display:grid}.firebase b{font-size:18px}.arch-principles{grid-template-columns:repeat(3,1fr);gap:15px;margin-top:60px;display:grid}.arch-principles>div{border-top:3px solid #171714;padding:17px 5px}.arch-principles span{letter-spacing:.16em;color:#9b5a50;font-size:8px;font-weight:900}.arch-principles h3{margin:7px 0;font-family:Georgia,serif;font-size:23px}.arch-principles p{color:#68655d;margin:0;font-size:12px;line-height:1.55}.architecture-note{text-align:center;background:#fffdf7;border:2px dashed #aaa69c;gap:8px;margin-top:45px;padding:22px;display:grid}.architecture-note b{letter-spacing:.16em;font-size:9px}.architecture-note span{color:#77746c;font-size:12px;line-height:1.5}@media (width<=900px){.arch-hero{grid-template-columns:1fr;gap:25px}.device-stack{height:260px}.flow{grid-template-columns:1fr;gap:8px}.connector{text-align:center;height:25px;transform:rotate(90deg)}.data-row,.arch-principles{grid-template-columns:1fr}.shared-line{width:80%}}@media (width<=700px){.architecture main{padding:45px 0 60px}.architecture h1{font-size:58px}.architecture .lead{font-size:17px}.arch-hero{margin-top:40px}.arch-copy h2,.arch-diagram h2{font-size:30px}.device-stack{height:250px}.device{width:125px;height:235px}.web-card{bottom:10px;right:0}.arch-diagram{margin-top:55px}.servers{grid-template-columns:1fr}.flow{margin-top:24px}}.shram-highlight{border-left-color:#2f8b86}.shram-highlight strong{color:#1d6f6a}.shram-stage{grid-template-columns:minmax(260px,330px) minmax(0,1fr) 145px;align-items:start;gap:clamp(24px,3vw,48px);width:min(1380px,94vw)}.shram-stage .copy{max-width:330px;padding-top:35px;position:sticky;top:108px}.shram-stage .copy h1{margin-bottom:24px;font-size:clamp(34px,3.4vw,52px)}.shram-stage .bubble{width:100%;padding:20px 20px 21px 43px;box-shadow:6px 6px #171714}.shram-stage .bubble p{font-size:18px}.shram-stage .note{font-size:13px}.shram-screen-wrap{width:100%;height:auto;min-height:0;padding-top:28px;display:block;position:relative}.shram-screen-wrap .screen{object-fit:contain;filter:drop-shadow(14px 18px 16px #00000029);border:1px solid #d5d1c7;width:100%;max-width:none;height:auto}.shram-screen-wrap>small{writing-mode:initial;text-align:right;margin-top:9px;font-size:8px;display:block;position:static}.shram-stage .rail{margin-top:105px}@media (width<=1000px){.shram-stage{grid-template-columns:minmax(230px,300px) minmax(0,1fr)}.shram-stage .rail{display:none}}@media (width<=700px){.shram-stage{grid-template-columns:1fr;gap:22px;width:min(94vw,620px)}.shram-stage .copy{order:1;max-width:none;padding-top:0;position:static}.shram-stage .copy h1{font-size:40px}.shram-screen-wrap{order:2;padding-top:0}.shram-screen-wrap .screen{width:100%}}