:root{
  --navy:#0d1d2e;--ivory:#f0ece2;--sand:#dab477;--sage:#93aa95;--slate:#67859b;
  --ink:#1c2324;--metal:#b9b8b2;--line:rgba(255,255,255,.18);
  --ease:cubic-bezier(.22,1,.36,1);--dna-primary:#142a3f;--dna-secondary:#7691a3;
  --dna-accent:#d8af70;--dna-surface:#e8e4d9;--dna-text:#172026;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden;background:#1a1b19;color:var(--ivory);font-family:Outfit,system-ui,sans-serif}
button,input,select,textarea{font:inherit}button{color:inherit}
.workspace{position:relative;height:100%;isolation:isolate;background:#1a1b19}
.room{position:absolute;z-index:-3;inset:0;background-image:linear-gradient(rgba(13,16,15,.06),rgba(13,16,15,.2)),url('assets/ref-empty-room.png');background-size:100% 200%;background-position:center top;background-repeat:no-repeat;filter:saturate(.82) contrast(1.03)}
.room:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 35%,rgba(7,8,8,.28) 100%)}
.architecture{position:absolute;z-index:40;top:4.3vh;left:7.3vw;right:7.3vw;height:7.6vh;min-height:58px;display:grid;grid-template-columns:150px 1fr 150px;align-items:center;background:linear-gradient(#272a29,#101312 55%,#242726 58%,#0b0d0d);border:1px solid #454846;box-shadow:0 16px 28px #000b,inset 0 1px #646762}
.brand-home,.board-brand{border:0;background:none;cursor:pointer;display:flex;align-items:center}.brand-home img{width:118px;height:44px;object-fit:contain}.storage-stack{height:100%;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 3vw}.storage-stack i{height:3px;background:linear-gradient(90deg,transparent,#62645e 9%,#252927 40%,#555953 90%,transparent);box-shadow:0 2px 2px #000}.rack-button,.in-board-rack{justify-self:end;margin-right:16px;border:1px solid #5b5e59;background:#1c211f;padding:10px 14px;font-size:.7rem;letter-spacing:.16em;cursor:pointer}.rack-button:hover,.in-board-rack:hover{border-color:var(--sand)}.stack-icon{display:inline-block;transform:rotate(90deg);margin-right:8px;color:var(--sand)}
.empty-state{position:absolute;z-index:2;left:50%;top:51%;transform:translate(-50%,-50%);text-align:center;color:#514b43}.empty-state p{font-size:.66rem;letter-spacing:.28em;margin:0 0 14px}.empty-state button{border:1px solid rgba(65,58,48,.34);background:rgba(233,226,210,.35);color:#38352f;padding:11px 15px;font-size:.68rem;letter-spacing:.14em;cursor:pointer;backdrop-filter:blur(6px)}.empty-state button:hover{background:rgba(238,231,216,.65)}
.board-rack{position:absolute;z-index:38;top:11.3vh;left:8.5vw;right:8.5vw;background:linear-gradient(#222624,#111513);border:1px solid #4c514e;box-shadow:0 28px 60px #000c;transform:translateY(-120%) scaleY(.7);transform-origin:top;opacity:0;pointer-events:none;transition:.36s var(--ease)}.board-rack.open{transform:none;opacity:1;pointer-events:auto}.board-rack>header{height:42px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #3e4340;color:#aaa89f;font-size:.67rem;letter-spacing:.18em}.board-rack>header button{border:0;background:none;font-size:1.35rem;cursor:pointer}.rack-surfaces{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:13px}.rack-surface{min-height:126px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;border:1px solid #ffffff25;background:var(--sample);padding:0;cursor:pointer;overflow:hidden;transition:.17s}.rack-surface:hover,.rack-surface:focus-visible{transform:translateY(-4px);border-color:var(--sand)}.rack-surface:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(5,7,7,.82))}.rack-surface .rack-copy{position:relative;padding:13px;text-align:left}.rack-surface strong{display:block;font-size:.72rem;letter-spacing:.1em}.rack-surface small{display:block;margin-top:5px;color:#c1beb6;font-size:.64rem;line-height:1.3}
.board-stage{position:absolute;z-index:20;inset:0;pointer-events:none}.physical-board,.glass-board{position:absolute;pointer-events:auto;left:1.2vw;right:1.2vw;top:10.8vh;height:87.7vh;transform:translateY(-116%);transition:transform 1.04s var(--ease);box-shadow:0 28px 70px #000c}.physical-board.deployed,.glass-board.deployed{transform:translateY(0)}.physical-board.retracting,.glass-board.retracting{transform:translateY(-116%);transition-duration:.78s}.physical-board{background:#272b29;border:1px solid #494c48}.board-frame{height:8.5%;min-height:53px;background:linear-gradient(#252928,#0d1010 50%,#242725 54%,#080a0a);border:1px solid #424541;display:grid;align-items:center;color:#dedbd2;box-shadow:0 8px 14px #0008}.top-frame{grid-template-columns:145px 1fr 145px;padding:0 15px}.top-frame>div{text-align:center}.top-frame span{font-size:.75rem;letter-spacing:.2em}.top-frame small{display:block;margin-top:4px;color:#aaa99f;font-size:.57rem;letter-spacing:.18em}.board-brand img{width:104px;height:37px;object-fit:contain}.in-board-rack{margin:0}.bottom-frame{position:absolute;bottom:0;left:0;right:0;height:6.5%;min-height:40px;grid-template-columns:1fr auto 1fr;gap:18px;padding:0 22px}.bottom-frame span{height:1px;background:#7f776c55}.bottom-frame b{font-size:.56rem;letter-spacing:.3em;font-weight:400;color:#aaa79f}
.board-surface{position:absolute;left:0;right:0;top:8.5%;bottom:6.5%;overflow:hidden;background:#ddd}.edge-utilities{position:absolute;z-index:7;right:0;top:20%;display:flex;flex-direction:column;background:#111615eb;border:1px solid #525650;border-right:0}.edge-utilities button{width:38px;height:38px;border:0;border-bottom:1px solid #3c413e;background:none;color:#c6c2b9;cursor:pointer}.edge-utilities button:hover{background:#303532;color:#fff}
.board-layout{height:100%;padding:3.2vh 4.2vw;color:#252a28}.surface-title{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:1px solid currentColor;padding-bottom:10px;margin-bottom:2.6vh}.surface-title h2{margin:0;font-size:1.15rem;font-weight:500;letter-spacing:.08em}.surface-title p{margin:0;max-width:430px;font-size:.72rem;line-height:1.45;opacity:.7;text-align:right}.surface-action{border:1px solid currentColor;background:transparent;color:inherit;padding:8px 11px;font-size:.62rem;letter-spacing:.11em;cursor:pointer}
.whiteboard-surface{background:linear-gradient(112deg,#f0eee7,#faf8f1 48%,#e6e2d8);color:#25302b}.idea-space{position:relative;height:74%}.idea{position:absolute;width:176px;min-height:82px;padding:14px;background:#fffdf7;border:1px solid #c7c3ba;box-shadow:0 7px 15px #0002;cursor:move}.idea:nth-child(1){left:8%;top:10%;transform:rotate(-1deg)}.idea:nth-child(2){left:36%;top:33%;background:#e8ddb7}.idea:nth-child(3){right:12%;top:13%;background:#d7e0d6;transform:rotate(1deg)}.idea:nth-child(4){right:29%;bottom:4%;background:#d8e2e8}.idea b{font-size:.67rem;letter-spacing:.09em}.idea p{font:italic .82rem/1.35 "Source Serif 4",serif;margin:8px 0}.marker-line{position:absolute;height:2px;background:#71837d;transform-origin:left}.marker-line.one{left:24%;top:28%;width:19%;transform:rotate(18deg)}.marker-line.two{left:51%;top:48%;width:25%;transform:rotate(-16deg)}.white-tools{display:flex;gap:7px}.white-tools button{border:1px solid #62726c;background:transparent;padding:7px 10px;color:inherit;font-size:.61rem;cursor:pointer}
.blackboard-surface{background:#262a28;background-image:radial-gradient(circle at 10% 20%,#fff1 0 1px,transparent 1.5px),linear-gradient(110deg,transparent,#0003);background-size:8px 8px,auto;color:#dfdbca}.blackboard-surface .board-layout{color:#dfdbca}.chalk-grid{display:grid;grid-template-columns:1.1fr .9fr 1.1fr;gap:3vw;height:73%}.chalk-column{border-right:1px solid #e8e0c92b;padding-right:2vw}.chalk-column:last-child{border:0}.chalk-column h3{font:italic 1rem "Source Serif 4",serif;font-weight:400}.chalk-item{font:italic .84rem/1.5 "Source Serif 4",serif;padding:6px 0;border-bottom:1px dashed #d8d2c522}.ghost{opacity:.22;transform:translate(10px,-3px)}.chalk-controls{display:flex;gap:8px}.chalk-controls button{border:1px solid #d8d2c555;background:none;color:inherit;padding:7px 10px;font-size:.62rem;cursor:pointer}
.corkboard-surface{background-color:#a26b45;background-image:radial-gradient(ellipse at 20% 30%,#d79c69 0 1px,transparent 2px),radial-gradient(ellipse at 70% 65%,#75452d 0 1px,transparent 2px);background-size:9px 7px,11px 13px;color:#352a22}.cork-field{height:76%;position:relative}.pin{position:absolute;width:190px;padding:16px;background:#eee4d0;color:#40372e;box-shadow:0 9px 17px #0004;transform:rotate(var(--r));cursor:move}.pin:before{content:"";position:absolute;left:50%;top:6px;width:9px;height:9px;border-radius:50%;background:#4e463c;box-shadow:0 2px 3px #0007}.pin:nth-child(1){left:4%;top:8%;--r:-2deg}.pin:nth-child(2){left:27%;top:35%;--r:1deg}.pin:nth-child(3){left:51%;top:5%;--r:-1deg}.pin:nth-child(4){right:5%;top:27%;--r:2deg}.pin small{font-size:.61rem;letter-spacing:.08em}.pin p{font:italic .82rem "Source Serif 4",serif}.thread{position:absolute;height:2px;background:#47352888;transform-origin:left}
.linenboard-surface{background:#d6cfc1;background-image:repeating-linear-gradient(90deg,transparent 0 2px,#6f675b0a 2px 3px),repeating-linear-gradient(0deg,transparent 0 3px,#fff2 3px 4px);color:#333633}.archive-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3vw}.archive-item{min-height:140px;padding:15px;border:1px solid #6f70684f;background:#e7e0d2aa;cursor:pointer}.archive-item:nth-child(even){background:#bfc8bd99}.archive-item time{font-size:.6rem;letter-spacing:.12em}.archive-item h3{font-size:.76rem;letter-spacing:.07em}.archive-item p{font:italic .8rem/1.4 "Source Serif 4",serif}.archive-item:hover{box-shadow:0 0 0 2px #8f7653}
.dashboard-surface{background:#d8d0bf;background-image:linear-gradient(110deg,#ffffff22,#594f3c08);color:#28302c}.mode-toggle{display:flex;border:1px solid #5e625c66}.mode-toggle button{border:0;background:transparent;color:#343b37;padding:8px 14px;font-size:.64rem;letter-spacing:.1em;cursor:pointer}.mode-toggle button.active{background:#27312f;color:#eeeae0}.dashboard-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:92px;gap:1vw}.metric{padding:13px;border:1px solid #686b6350;background:#eee9dd80}.metric.big{grid-column:span 3}.metric.wide{grid-column:span 6;grid-row:span 2}.metric.medium{grid-column:span 3;grid-row:span 2}.metric b{display:block;font-size:1.45rem;font-weight:400}.metric small{font-size:.62rem;letter-spacing:.1em}.bars{height:86px;display:flex;align-items:end;gap:8px;padding-top:12px}.bars i{flex:1;background:var(--dna-primary);height:var(--h)}.master-map{display:grid;grid-template-columns:repeat(4,1fr);gap:1vw}.map-node{min-height:115px;padding:15px;border:1px solid #62665e66;background:#ece6da99;cursor:pointer}.map-node:hover{background:#f3eee5}.map-node strong{font-size:.73rem;letter-spacing:.08em}.map-node p{font-size:.72rem;color:#5e635e}
.metalboard-surface{background:#bdbcb6;background-image:linear-gradient(100deg,#fff2,#7771),repeating-linear-gradient(90deg,transparent 0 3px,#00000007 3px 4px);color:#202828}.metal-shell{height:100%;display:grid;grid-template-columns:150px 1fr 245px}.module-rail{border-right:1px solid #51585655;padding:20px 14px}.module-rail>small,.dna-rail>small{display:block;font-size:.58rem;letter-spacing:.18em;color:#5c6360;margin-bottom:12px}.module-button{width:100%;border:0;border-bottom:1px solid #58605c44;background:transparent;color:#303735;text-align:left;padding:11px 7px;font-size:.68rem;letter-spacing:.09em;cursor:pointer}.module-button.active{background:#24312f;color:#f2eee4}.metal-workspace{padding:17px 22px;overflow:auto}.workflow{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-bottom:15px}.workflow-step{border-bottom:2px solid #63696655;padding:7px 4px;font-size:.56rem;letter-spacing:.1em;color:#5d6461}.workflow-step.active{border-color:var(--dna-primary);color:#1d2724}.metal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.metal-head h2{font-size:1rem;letter-spacing:.12em;margin:0}.metal-head button,.compact-button{border:1px solid #59615d;background:transparent;color:#29312e;padding:7px 10px;font-size:.58rem;letter-spacing:.1em;cursor:pointer}.metal-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:16px}.metal-panel{border:1px solid #5b625e55;background:#d2d1cb90;padding:14px}.metal-panel h3{font-size:.65rem;letter-spacing:.13em;margin:0 0 12px}.chip-grid{display:flex;flex-wrap:wrap;gap:6px}.chip{border:1px solid #59615d66;background:transparent;color:#303735;padding:7px 8px;font-size:.59rem;cursor:pointer}.chip.selected{background:var(--dna-primary);color:#fff}.source-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}.source-option{border:1px solid #62686455;background:#e0dfd9;color:#333b38;padding:9px;text-align:left;font-size:.61rem;cursor:pointer}.source-option.selected{border-color:var(--dna-primary);box-shadow:inset 3px 0 var(--dna-primary)}.build-area{grid-column:1/-1}.palette-editor{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.swatch{position:relative;height:64px;border:1px solid #0002;background:var(--c);cursor:pointer}.swatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.swatch small{position:absolute;left:5px;bottom:4px;padding:2px 4px;background:#fffc;color:#222;font-size:.5rem}.purpose-preview{display:grid;grid-template-columns:1.2fr .8fr;gap:9px;margin-top:10px}.preview-poster{height:118px;padding:15px;background:var(--dna-surface);color:var(--dna-text);border-top:12px solid var(--dna-primary)}.preview-poster b{display:block;font-size:1.1rem}.preview-poster span{font-size:.65rem}.preview-ui{height:118px;background:#f5f2e9;padding:12px;border:1px solid #7774}.preview-ui i{display:block;height:10px;margin:7px 0;background:var(--dna-secondary)}.preview-ui i:nth-child(2){width:66%;background:var(--dna-accent)}.type-preview{padding:12px;background:#e7e5df}.type-preview .display{font-size:1.7rem;line-height:1}.type-preview h1{font-size:1.15rem;margin:10px 0 5px}.type-preview p{font-size:.75rem;line-height:1.45}.motif-canvas{height:130px;background-color:var(--dna-surface);background-image:repeating-linear-gradient(var(--motif-angle,45deg),transparent 0 var(--motif-gap,18px),var(--dna-primary) var(--motif-gap,18px) calc(var(--motif-gap,18px) + var(--motif-weight,2px)));border:1px solid #7775}.range-row{display:grid;grid-template-columns:90px 1fr 34px;align-items:center;gap:8px;margin:8px 0;font-size:.61rem}.component-preview{display:flex;align-items:center;gap:10px;padding:18px;background:var(--dna-surface);color:var(--dna-text)}.dna-card{padding:12px;border:1px solid var(--dna-primary);background:#fff;min-width:140px}.dna-button{background:var(--dna-primary);color:#fff;border:0;padding:9px 12px}.dna-toggle{width:40px;height:22px;border-radius:20px;background:var(--dna-accent);position:relative}.dna-toggle:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;right:3px;top:3px}.data-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mini-chart{height:125px;display:flex;align-items:end;gap:7px;padding:13px;background:var(--dna-surface)}.mini-chart i{flex:1;height:var(--h);background:var(--c)}.data-table{background:var(--dna-surface);padding:9px}.data-table div{display:grid;grid-template-columns:1fr 50px;border-bottom:1px solid #7774;padding:7px;font-size:.62rem}.validation{display:flex;gap:8px;margin-top:10px}.validation span{flex:1;padding:9px;border:1px solid #58615c55;font-size:.58rem}.validation .pass:before{content:"✓ ";color:#426d50}.commit-row{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}.commit-row button{border:1px solid #4d5551;background:transparent;color:#27302c;padding:9px 12px;font-size:.59rem;letter-spacing:.09em;cursor:pointer}.commit-row .commit{background:#25312f;color:#fff}.dna-rail{border-left:1px solid #51585655;padding:20px 14px;overflow:auto}.dna-summary{padding:11px;background:#d6d5cf;border:1px solid #60676244;margin-bottom:10px}.dna-summary strong{font-size:.64rem;letter-spacing:.1em}.dna-colors{display:flex;margin-top:8px}.dna-colors i{height:22px;flex:1;background:var(--c)}.system-object{padding:10px;border:1px solid #5c635f55;margin-top:8px;background:#cecdc7;cursor:pointer}.system-object strong{display:block;font-size:.61rem;letter-spacing:.08em}.system-object small{font-size:.55rem;color:#626966}.apply-style{width:100%;margin-top:12px;border:0;background:#23302d;color:white;padding:10px;font-size:.62rem;letter-spacing:.12em;cursor:pointer}
.glass-board{z-index:30;left:2.4vw;right:2.4vw;top:12.3vh;height:83.5vh;background:rgba(225,233,230,.12);border:1px solid #e9f3ef91;box-shadow:0 24px 55px #0008,inset 0 0 40px #fff2;backdrop-filter:blur(1.5px) saturate(.85)}.glass-frame{height:8%;min-height:48px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#eef6f255,#9ca8a555);border-bottom:1px solid #edf6f2a0;color:#182522}.glass-frame strong{font-size:.7rem;letter-spacing:.17em}.glass-frame small{display:block;font-size:.52rem;letter-spacing:.14em}.glass-frame button{border:1px solid #273b3666;background:#e8efec77;color:#23302d;padding:7px 10px;font-size:.57rem;letter-spacing:.1em;cursor:pointer}.glass-canvas{position:absolute;top:8%;bottom:7%;left:0;right:0;cursor:crosshair}.glass-bottom{position:absolute;bottom:0;left:0;right:0;height:7%;font-size:.56rem;letter-spacing:.16em}.glass-tools{position:absolute;right:1.2vw;top:11%;display:flex;flex-direction:column;background:#eef3f0c9;border:1px solid #677773}.glass-tools button{border:0;border-bottom:1px solid #77878266;background:none;color:#263531;padding:9px;font-size:.55rem;letter-spacing:.08em;cursor:pointer}.glass-tools button.active{background:#243531;color:#fff}.annotation{position:absolute;width:170px;min-height:70px;padding:11px;background:#f0e8c9e8;color:#2d322f;border-left:3px solid var(--c);box-shadow:0 8px 18px #0004;cursor:move}.annotation small{font-size:.52rem;letter-spacing:.1em}.annotation p{font:italic .75rem/1.35 "Source Serif 4",serif;margin:6px 0}.approval-mark{position:absolute;width:54px;height:54px;border:3px solid #567a61;border-radius:50%;display:grid;place-items:center;color:#42694f;font-size:1.5rem;font-weight:600}
.drawer{position:absolute;z-index:90;right:0;top:0;bottom:0;width:min(560px,94vw);background:#eeeae0;color:#202725;box-shadow:-25px 0 60px #000a;transform:translateX(105%);transition:.32s var(--ease);padding:34px;overflow:auto}.drawer.open{transform:none}.drawer>button{position:absolute;right:13px;top:9px;border:0;background:none;color:#222;font-size:1.6rem;cursor:pointer}.drawer h2{font-size:1rem;letter-spacing:.1em}.drawer p{font-size:.78rem;line-height:1.5;color:#515853}.drawer label{display:block;margin:12px 0 5px;font-size:.62rem;letter-spacing:.1em}.drawer input,.drawer textarea,.drawer select{width:100%;padding:10px;border:1px solid #989b94;background:#fbf8f1;color:#222}.drawer textarea{min-height:96px}.drawer .primary{margin-top:12px;border:0;background:#1f2c29;color:#fff;padding:10px 13px;font-size:.65rem;letter-spacing:.09em;cursor:pointer}.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}.compare>div{padding:13px;border:1px solid #898d86}.compare small{font-size:.57rem;letter-spacing:.12em}.compare-colors{display:flex;margin-top:10px}.compare-colors i{height:50px;flex:1;background:var(--c)}
.toast{position:absolute;z-index:120;left:50%;bottom:3vh;transform:translate(-50%,18px);opacity:0;pointer-events:none;background:#111615;color:#eeeae0;border:1px solid #646963;padding:10px 17px;font-size:.68rem;letter-spacing:.06em;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1000px){.rack-surfaces{grid-template-columns:repeat(4,1fr)}.board-rack{max-height:75vh;overflow:auto}.metal-shell{grid-template-columns:130px 1fr}.dna-rail{position:absolute;right:0;top:0;bottom:0;width:220px;background:#c8c7c1;transform:translateX(92%);transition:.2s}.dna-rail:hover{transform:none}.dashboard-grid{grid-template-columns:repeat(6,1fr)}.metric.big{grid-column:span 2}.metric.wide{grid-column:span 4}.metric.medium{grid-column:span 2}.archive-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:680px){.architecture{left:1vw;right:1vw;grid-template-columns:105px 1fr 108px}.brand-home img{width:90px}.rack-button{margin-right:7px;padding:8px;font-size:.6rem}.board-rack{left:2vw;right:2vw}.rack-surfaces{grid-template-columns:repeat(2,1fr)}.physical-board{left:0;right:auto;width:860px}.board-stage{overflow-x:auto}.glass-board{left:0;right:auto;width:820px}.top-frame{grid-template-columns:120px 1fr 120px}.metal-shell{grid-template-columns:115px 745px}.edge-utilities{right:0}.empty-state{width:80vw}.room{background-size:auto 200%;background-position:center top}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important}}