:root{--ink:#151515;--paper:#f7f4ed;--grey:#deded7;--blue:#304df6;--orange:#ff6b35;--green:#69b578;--line:#bbbdb8;--max:1420px}*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:clip}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;line-height:1.5}a{color:inherit}button,input,select,textarea{font:inherit}.skip{position:fixed;top:-4rem;left:1rem;z-index:60;background:var(--orange);padding:.7rem}.skip:focus{top:1rem}body>header{height:68px;padding:0 1.2rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:2px solid var(--ink);background:white}.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:900}.mark>b{display:grid;place-items:center;width:2.3rem;height:2.3rem;background:var(--blue);color:white}.mark span{line-height:1}.mark small{display:block;font-size:.55rem;font-weight:400;color:#666}header nav{display:flex;gap:1.8rem}header nav a{text-decoration:none;font-size:.7rem;text-transform:uppercase;font-weight:800}.mode{justify-self:end;font:700 .62rem monospace;background:#dff4e3;padding:.5rem}.builder{min-height:calc(100vh - 68px);display:grid;grid-template-columns:95px 1fr 260px;grid-template-rows:58px 1fr;background:#cacbc7}.builder-bar{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding:.6rem 1rem;background:#202322;color:white}.builder-bar>div{display:flex;align-items:center;gap:.6rem}.builder-bar small{color:#aeb2b1}.dot{width:.7rem;height:.7rem;border-radius:50%;background:var(--green)}.builder-bar button{border:1px solid #555;background:transparent;color:white;padding:.45rem .7rem;cursor:pointer}.builder-bar #preview{background:var(--orange);border-color:var(--orange);color:#111}.toolbox,.inspector{background:#f7f7f4;border-right:1px solid #9d9f9b;padding:.8rem}.toolbox p,.inspector>p{font:700 .58rem monospace;letter-spacing:.12em}.toolbox button{width:100%;border:1px solid transparent;background:transparent;padding:.65rem .2rem;cursor:pointer;display:grid;place-items:center;gap:.3rem;font-size:.62rem}.toolbox button:hover{border-color:var(--blue);background:white}.toolbox button b{display:grid;place-items:center;width:2.5rem;height:2.5rem;background:var(--grey);font-size:1rem}.canvas-wrap{min-width:0;padding:2rem 3rem 5rem;overflow:auto}.canvas-intro{display:grid;grid-template-columns:.5fr 1.5fr .8fr;gap:2rem;max-width:1100px;margin:auto}.canvas-intro>p{font:700 .6rem monospace}.canvas-intro h1{font-size:clamp(3rem,6vw,6.8rem);line-height:.83;letter-spacing:-.07em;margin:0}.canvas-intro>span{align-self:end;font-size:.75rem}.app-canvas{max-width:820px;min-height:450px;margin:3rem auto;background:white;border:1px solid #999;box-shadow:18px 18px 0 #0002;padding:2rem;display:grid;align-content:start;gap:1rem;transition:.2s}.app-canvas.orange{border-top:8px solid var(--orange)}.app-canvas.green{border-top:8px solid var(--green)}.app-canvas.blue{border-top:8px solid var(--blue)}.empty-state{align-self:center;text-align:center;color:#777;padding:7rem 1rem;border:2px dashed #bbb}.empty-state b{font-size:3rem}.canvas-block{border:1px solid #bbb;padding:1rem;position:relative}.canvas-block .remove{position:absolute;right:.5rem;top:.5rem;border:0;background:#eee;cursor:pointer}.canvas-block.title{font-size:1.7rem;font-weight:900;border:0;border-bottom:2px solid #111}.canvas-block.field::after{content:"Sample field";display:block;border:1px solid #aaa;padding:.7rem;margin-top:.5rem;font-size:.75rem;color:#777}.canvas-block.choice span{display:inline-block;margin-right:1rem}.canvas-block.approval{background:#e7ebff;border-color:#7888ea}.canvas-block.note{background:#fff0c9}.inspector{border-left:1px solid #9d9f9b;border-right:0}.inspector label{display:block;font-size:.65rem;margin:1.2rem 0}.inspector input,.inspector select{display:block;width:100%;padding:.7rem;margin-top:.4rem;border:1px solid #999;background:white}.switch{display:flex!important;gap:.5rem}.switch input{width:auto}.publish-note{margin-top:3rem;border:1px solid var(--green);padding:1rem;background:#e9f5eb;font-size:.7rem}.story,.patterns,.govern,.contact{padding:8rem max(1.5rem,calc((100% - 1260px)/2))}.tag{font:800 .62rem monospace;letter-spacing:.15em}.story>div,.patterns header{display:grid;grid-template-columns:.5fr 1.5fr}.story h2,.patterns h2,.govern h2,.contact h2{font-size:clamp(3.2rem,6vw,6.5rem);line-height:.88;letter-spacing:-.07em;margin:0}.story ol{list-style:none;padding:0;margin:4rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--ink)}.story li{padding:1.5rem;min-height:300px;border-right:1px solid var(--ink);display:flex;flex-direction:column}.story li:last-child{border:0}.story li>b{font-size:3rem;color:var(--blue)}.story h3{margin-top:auto}.patterns{background:var(--blue);color:white}.pattern-wall{display:grid;grid-template-columns:1.2fr .8fr;margin-top:4rem}.pattern-wall article{border:1px solid #ffffff88;padding:2rem;min-height:330px}.pattern-wall .wide{grid-row:span 2;min-height:660px}.pattern-wall span{font:700 .6rem monospace}.pattern-wall h3{font-size:2rem;max-width:16ch}.route{display:grid;gap:1rem;margin-top:15rem}.route i{font-style:normal;padding:1rem;border:1px solid white}.columns{display:flex;gap:1rem;margin-top:5rem}.columns i{width:30%;height:90px;background:var(--orange)}.checks{display:flex;gap:1rem;margin-top:4rem}.checks i{display:grid;place-items:center;width:3rem;height:3rem;background:white;color:var(--blue);font-style:normal}.govern{display:grid;grid-template-columns:.8fr 1.2fr;gap:7rem;background:#e4e4dd}.stamp{display:grid;align-content:center;border:4px solid var(--orange);padding:3rem;transform:rotate(-3deg)}.stamp span{font:800 .65rem monospace}.stamp b{font-size:3rem;color:var(--orange);border-bottom:3px solid var(--orange)}.govern li{margin:.8rem 0}.contact{display:grid;grid-template-columns:1fr 1fr;gap:6rem}.contact form{display:grid;gap:1rem}.contact label{font-size:.65rem;text-transform:uppercase}.contact input,.contact select,.contact textarea{display:block;width:100%;padding:1rem;margin-top:.3rem;border:1px solid var(--ink);background:transparent}.contact textarea{min-height:100px}.contact button{background:var(--orange);border:0;padding:1rem;font-weight:800;cursor:pointer}#form-status{margin:0;color:#1c682b}footer{background:#181a1a;color:white;padding:2.5rem max(1.5rem,calc((100% - 1260px)/2));display:grid;grid-template-columns:1fr 1.4fr 1fr auto;gap:2rem;font-size:.75rem;align-items:center}footer address{font-style:normal;color:#bbb}dialog{width:min(600px,92vw);border:0;box-shadow:0 30px 100px #0008;padding:3rem}dialog::backdrop{background:#18202acc}dialog>button{position:absolute;right:1rem;top:1rem;border:0;background:none;font-size:1.5rem;cursor:pointer}dialog>span{font:700 .6rem monospace;color:var(--orange)}dialog h2{font-size:2.5rem}#preview-content{display:grid;gap:.7rem}:focus-visible{outline:3px solid var(--orange);outline-offset:3px}@media(max-width:900px){body>header{grid-template-columns:1fr auto}header nav{position:fixed;bottom:0;left:0;right:0;z-index:40;background:#191b1b;color:white;padding:.8rem;justify-content:space-around}header .mode{display:none}.builder{grid-template-columns:1fr;grid-template-rows:58px auto 1fr}.builder-bar{grid-column:1}.toolbox{position:sticky;top:0;z-index:10;display:flex;overflow:auto;border:0;border-bottom:1px solid #999}.toolbox p{display:none}.toolbox button{min-width:90px}.canvas-wrap{padding:2rem 1.5rem}.canvas-intro{grid-template-columns:1fr}.inspector{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;border:0}.inspector>p,.publish-note{display:none}.story>div,.patterns header{grid-template-columns:1fr}.story ol{grid-template-columns:1fr 1fr}.pattern-wall{grid-template-columns:1fr 1fr}.pattern-wall .wide{grid-column:1/-1;grid-row:auto;min-height:420px}.govern,.contact{grid-template-columns:1fr}footer{grid-template-columns:1fr 1fr;padding-bottom:6rem}}@media(max-width:520px){.builder-bar small,.builder-bar #clear{display:none}.builder-bar{font-size:.65rem}.canvas-wrap{padding:2rem 1rem}.canvas-intro h1,.story h2,.patterns h2,.govern h2,.contact h2{font-size:3.4rem}.inspector{grid-template-columns:1fr 1fr}.inspector .switch{grid-column:1/-1}.app-canvas{padding:1rem;min-height:390px}.story,.patterns,.govern,.contact{padding:5rem 1rem}.story ol,.pattern-wall,footer{grid-template-columns:1fr}.story li{min-height:220px;border-right:0;border-bottom:1px solid}.pattern-wall .wide{grid-column:auto}.route{margin-top:8rem}.stamp{padding:2rem}.stamp b{font-size:2.2rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important}}