@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#F5F7FA;--ink:#17263C;--muted:#666760;--accent:#2855D9;--line:#D8DFE8;--mono:'Cascadia Code',Consolas,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button,a,input{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #2855D9;outline-offset:5px}button{cursor:pointer}button:hover,a:hover{opacity:.82}.nav{height:108px;margin:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;font-family:Manrope,sans-serif;font-size:27px;font-weight:800;letter-spacing:-1.2px;gap:10px}.brand svg{width:34px;height:34px}.tag{font:9px var(--mono);letter-spacing:1px;border:1px solid #bcbbb3;padding:6px;margin-left:12px}.nav nav{display:flex;gap:30px;font-size:13px}main{max-width:1680px;margin:auto}.hero{position:relative;padding:78px 5% 64px}.eyebrow,.section-label{font:10px var(--mono);letter-spacing:1.5px}.eyebrow{display:flex;align-items:center;gap:10px}.dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}h1{font:500 clamp(65px,7.4vw,118px)/1.04 Manrope,sans-serif;letter-spacing:-.07em;margin:30px 0 35px}h1 span{color:var(--accent)}.hero-bottom{display:flex;align-items:center;justify-content:space-between;max-width:1010px}.hero-bottom p{font-size:18px;line-height:1.65;color:#536174}.button{display:flex;align-items:center;gap:44px;background:var(--ink);color:white;padding:18px 24px;font-size:14px}.button span{font-size:22px}.margin-note{position:absolute;right:5%;top:143px;font:9px/1.7 var(--mono);color:#65758A;writing-mode:vertical-rl}.demo-section{padding:20px 5% 0}.section-label{display:flex;justify-content:space-between;padding:18px 0;border-top:1px solid var(--line);color:#596B81}#film-stage{padding:28px;background:#E7EDF5;border:1px solid #D5DFEC}.film-heading{display:none}.editor{border-radius:9px;overflow:hidden;background:#1b1d21;border:1px solid #46494c;box-shadow:0 20px 35px #24241f20;color:#c7c9cd}.titlebar{height:38px;background:#292b30;display:flex;align-items:center;justify-content:space-between;padding:0 15px;font:11px var(--mono)}.window-dots{color:#696c72;letter-spacing:2px}.search{background:#202226;border:1px solid #42444a;border-radius:5px;text-align:center;min-width:43%;padding:5px;color:#a8aab0}.workspace{display:flex;min-height:390px}.rail{width:43px;background:#25272c;flex-shrink:0;color:#a3a5ab;text-align:center;font-size:22px;line-height:2.4}.files{position:relative;width:178px;flex-shrink:0;background:#212328;padding:17px 10px;font:10px/2.4 var(--mono);color:#a7a9b0}.files p{margin:0 0 15px;font-size:9px}.files b{font-size:9px}.files span{display:block;padding-left:5px}.files .selected{background:#303239;color:#e1e2e4}.source-note{position:absolute;bottom:20px;left:20px;font:10px/1.7 'DM Sans',sans-serif;color:#8e9396}.source-note strong{color:#a7c2a8;font-weight:400}.source-note i{display:inline-block;width:5px;height:5px;background:#9ab29b;border-radius:50%;margin-right:5px}.code-pane{flex:1;min-width:0}.tabs{height:37px;display:flex;border-bottom:1px solid #32353a;font:10px var(--mono);background:#212328}.tabs>span{padding:11px 14px;background:#1b1d21;border-top:1px solid #2855D9}.tabs b{color:#d1a973;padding-left:10px;font-weight:400}.tabs>span.inactive{background:#212328;color:#a5a7ac;border-top:0}.breadcrumbs{font:9px var(--mono);color:#a2a5ab;padding:12px 16px}.code{padding:15px 0 28px;font:clamp(10px,.92vw,14px)/2.05 var(--mono);min-height:197px;white-space:pre;overflow-x:auto}.code-line{display:block;padding-right:18px}.ln{color:#888d96;display:inline-block;width:40px;text-align:right;margin-right:20px;user-select:none}.kw{color:#ca9ae9}.fn{color:#d6ca8d}.str{color:#b5c896}.changed{background:#64773d22}.removed{background:#b251392b;color:#eaa292}.added{background:#486b442f;color:#b8d39d}.terminal{border-top:1px solid #36383e;min-height:154px}.terminal-tabs{display:flex;align-items:center;gap:20px;height:34px;padding:0 17px;font:8px var(--mono);color:#afb1b7}.terminal-tabs>span:first-child{border-bottom:1px solid #2855D9;height:34px;padding-top:11px}.terminal-tabs b{font-size:8px;font-weight:400;background:#383b40;padding:1px 4px;border-radius:4px}.terminal-tabs small{margin-left:auto;font-size:8px;color:#8d929a}.terminal pre{padding:5px 18px 15px;margin:0;color:#b7c2ae;font:10px/1.8 var(--mono);white-space:pre-wrap}.review-pane{width:245px;flex-shrink:0;border-left:1px solid #383a3f;background:#24262b;padding:15px;display:flex;flex-direction:column}.review-title{display:flex;align-items:center;font:8px var(--mono);gap:7px}.review-title>span:last-child{margin-left:auto;color:#A9C4FF;font-size:7px}.mini-mark{font-size:17px;color:#e2765b}.role-row{display:flex;gap:45px;margin:21px 0;font:8px/1.8 var(--mono);color:#a7a9ad}.role-row b{color:#e1e1de;font:12px 'DM Sans',sans-serif}#review-content{border-top:1px solid #3b3d41;padding-top:18px;flex:1}#review-content h3{font-size:15px;line-height:1.4;color:#eeeae1;font-weight:500;margin:10px 0}#review-content p{font-size:11px;line-height:1.7;color:#b1b4b8}.finding-label{font:8px var(--mono);color:#A9C4FF}.proof{font:10px/1.8 var(--mono);background:#1d1f23;border-left:2px solid #d97758;padding:10px;color:#e5c5ac}.checkpoint{border-top:1px solid #3b3d41;padding-top:15px;font:8px var(--mono);color:#9ea1a8;display:flex;justify-content:space-between;margin-top:15px}.checkpoint span{color:#d9d8d2}.statusbar{display:flex;justify-content:space-between;background:#30352e;padding:6px 12px;font:8px var(--mono);color:#bac3b3}.scene-caption{display:flex;align-items:center;gap:22px;min-height:112px;padding:25px 0 0}.scene-caption>span:first-child{font:40px Manrope,sans-serif;color:#A4B4CA}.scene-caption h2{font:600 23px/1.2 Manrope,sans-serif;letter-spacing:-.7px;margin:0 0 8px}.scene-caption p{font-size:13px;line-height:1.5;color:#56677C;margin:0;max-width:680px}.film-disclosure{margin-left:auto;font:8px/1.8 var(--mono);color:#65758A;text-align:right}.playback{display:flex;align-items:center;gap:22px;padding:22px 0}.playback button{background:none;border:0;color:var(--ink);font-size:12px;white-space:nowrap}.playback #play{min-width:153px;text-align:left}.playback input{flex:1;accent-color:var(--accent);min-width:40px;height:3px}.playback #time{font:10px var(--mono);color:#596B81}.chapters{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}.chapters button{padding:18px 0;text-align:left;border:0;border-top:2px solid #CDD7E4;background:transparent;color:#6B7C90;font:11px var(--mono)}.chapters button span{font:14px 'DM Sans',sans-serif;margin-left:13px;color:#42556E}.chapters button.active{border-color:var(--accent);color:var(--accent)}.chapters button.active span{color:var(--ink)}.demo-note{font-size:11px;line-height:1.7;color:#596B81;max-width:850px;margin:22px 0}.principle{margin:100px 5% 80px;border-top:1px solid var(--line);padding-top:35px;display:grid;grid-template-columns:1.2fr 1fr;gap:20px 90px}.principle>.eyebrow{grid-column:1/-1}.principle h2,.notes h2{font:500 48px/1.15 Manrope,sans-serif;letter-spacing:-2px;margin:10px 0}.principle p:not(.eyebrow),.notes p{font-size:15px;line-height:1.8;color:#52647A}.principle a,.notes a{font-size:13px;border-bottom:1px solid #A6B6CB;padding-bottom:5px}.film-section{padding:0 5% 70px}.film-section video{display:block;width:100%;background:#E7EDF5;aspect-ratio:16/9}.identity{padding:0 5% 50px}.identity-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.identity-grid>div{border:1px solid var(--line);padding:22px;min-width:0}.identity-grid .eyebrow{font-size:9px}.identity-grid img,.identity-grid video{display:block;width:100%;height:280px;object-fit:contain;margin:20px 0;background:#F5F7FA}.identity-grid p:last-child{font-size:12px;color:#56677C}.brand-strip{display:flex;justify-content:space-between;align-items:center;padding:30px 0}.brand-example{display:flex;align-items:center;gap:18px;font-size:13px}.brand-example svg{width:60px;height:60px;background:#17263C;padding:10px;border-radius:12px}.brand-example small{font-size:10px;color:#65758A}.swatches{display:flex;gap:26px;font-size:10px;color:#56677C}.swatches span:before{content:'';display:block;background:var(--swatch);width:68px;height:22px;margin-bottom:8px;border:1px solid #D0DBE8}.notes{padding:55px 5% 80px;background:#EBF0F6;display:grid;grid-template-columns:1fr 1fr;gap:60px}.notes h2{font-size:39px}footer{padding:45px 5%;display:flex;justify-content:space-between;align-items:center}footer>span{font:9px var(--mono);color:#5D7089}.footer-turn{color:var(--accent);font-size:35px;margin-left:8px}
body.film{background:#E7EDF5}body.film>header,body.film footer,body.film main>section:not(.demo-section),body.film .demo-section>:not(#film-stage){display:none}body.film main{max-width:none}body.film .demo-section{padding:0}body.film #film-stage{width:1920px;height:1080px;padding:65px 90px;border:0;display:flex;flex-direction:column;justify-content:center}body.film .film-heading{display:flex;justify-content:space-between;margin-bottom:30px;font:500 34px Manrope,sans-serif;letter-spacing:-1px}body.film .film-heading span:last-child{font:13px var(--mono);letter-spacing:2px;align-self:center}body.film .titlebar{height:48px;font-size:14px}body.film .workspace{min-height:580px}body.film .files{width:215px;font-size:13px}body.film .files p,body.film .files b{font-size:11px}body.film .rail{width:56px}body.film .tabs{height:45px;font-size:13px}body.film .breadcrumbs{font-size:12px;padding:18px}body.film .code{font-size:22px;min-height:285px}body.film .ln{width:50px;margin-right:30px}body.film .terminal{min-height:192px}body.film .terminal-tabs{font-size:11px;height:42px}body.film .terminal-tabs small{font-size:10px}body.film .terminal pre{font-size:16px}body.film .review-pane{width:355px;padding:25px}body.film .review-title{font-size:11px}body.film .review-title>span:last-child{font-size:10px}body.film .role-row{font-size:11px;gap:75px}body.film .role-row b{font-size:17px}body.film #review-content h3{font-size:24px}body.film #review-content p{font-size:16px}body.film .finding-label{font-size:11px}body.film .proof{font-size:15px}body.film .checkpoint,body.film .statusbar{font-size:11px}body.film .scene-caption{min-height:155px;gap:30px}body.film .scene-caption h2{font-size:34px}body.film .scene-caption p{font-size:20px;max-width:1100px}body.film .scene-caption>span:first-child{font-size:58px}body.film .film-disclosure{font-size:12px}
@media(min-width:1600px){.code{font-size:14px}}@media(max-width:1100px){.files{display:none}.review-pane{width:210px}.hero-bottom{max-width:850px}.terminal-tabs small{display:none}.margin-note{display:none}}@media(max-width:760px){.nav{height:80px}.tag{display:none}.nav nav a:not(:first-child){display:none}.nav nav{font-size:11px}.brand{font-size:23px}.hero{padding-top:50px}h1{font-size:61px}.hero-bottom{display:block}.hero-bottom p{font-size:15px}.button{display:inline-flex;margin-top:12px}.section-label{font-size:8px;gap:20px;line-height:1.5}#film-stage{padding:12px}.rail{display:none}.workspace{display:block;min-height:0}.review-pane{width:100%;min-height:220px;border-left:0;border-top:1px solid #444}.code{font-size:11px;min-height:188px}.terminal pre{font-size:10px}.review-pane .role-row{margin:10px 0;gap:40px}.review-pane #review-content{padding-top:8px}.review-pane #review-content p{font-size:12px}.review-pane .checkpoint{margin-top:10px;padding-top:10px}.review-title{font-size:10px}.scene-caption{gap:12px;padding:20px 2px 8px;align-items:flex-start}.scene-caption h2{font-size:20px}.scene-caption p{font-size:12px}.scene-caption>span:first-child{font-size:29px}.film-disclosure{display:none}.search{font-size:8px}.titlebar{padding:0 9px}.statusbar{font-size:7px}.statusbar>span:first-child{display:none}.playback{gap:10px}.playback #play{min-width:30px}.playback #play span{display:none}.chapters{gap:7px}.chapters button{font-size:10px;padding:12px 0}.chapters button span{display:block;margin:7px 0 0;font-size:11px}.principle{display:block;margin-top:65px}.principle h2{font-size:37px;margin:30px 0}.identity-grid{grid-template-columns:1fr}.brand-strip{display:block}.swatches{margin-top:25px}.notes{grid-template-columns:1fr;gap:10px}.notes h2{font-size:34px}.film-section{padding-bottom:35px}footer{gap:20px;flex-wrap:wrap}footer>span:last-child{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}