*{box-sizing:border-box}html,body{margin:0;background:#03080c;color:#eef7fb;font-family:Segoe UI,Arial,sans-serif;overflow-x:hidden}.scrollspace{height:1000vh}#view{position:fixed;inset:0;width:100%;height:100%;display:block;background:radial-gradient(circle at 58% 43%,#142630,#050b10 58%,#020507)}header{position:fixed;z-index:20;left:0;right:0;top:0;height:70px;padding:0 3.5vw;display:flex;align-items:center;gap:24px;background:linear-gradient(#03080cf5,transparent)}.logo{font-size:23px;font-weight:900;letter-spacing:3px}.logo span,#loading span{color:#ef8a2b}.tag{font-size:9px;letter-spacing:2px;color:#718993}header button{margin-left:auto;background:#08141a;border:1px solid #3b5966;color:#dcecf2;padding:10px 15px;font-size:9px;letter-spacing:1px}.info{position:fixed;z-index:12;left:4vw;top:48%;transform:translateY(-50%);width:min(390px,31vw);padding:22px 24px;background:#03090cd8;border-left:2px solid #48d1ff;backdrop-filter:blur(10px);box-shadow:0 25px 80px #0008}.info small{color:#4bd1ff;font-size:9px;letter-spacing:2px;font-weight:700}.info h1{font-size:clamp(38px,4.4vw,64px);line-height:1;letter-spacing:-3px;margin:9px 0 14px}.info p{font-size:14px;line-height:1.6;color:#a5b8c0}.hud{position:fixed;z-index:12;right:3vw;top:100px;width:190px;padding:13px 14px;background:#03090cdd;border:1px solid #294651;display:grid;grid-template-columns:60px 1fr;gap:6px}.hud span{font-size:8px;color:#718993}.hud b{font-size:9px;color:#4ed1ff}#cards{position:fixed;z-index:15;left:3vw;right:3vw;bottom:24px;display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.card{height:94px;padding:10px;background:#050c11e8;border:1px solid #203945;cursor:pointer;transition:.28s}.card.active{transform:translateY(-18px) scale(1.02);border-color:#4bd1ff;background:#07151c;box-shadow:0 15px 45px #000b}.card i{font-style:normal;font-size:20px;font-weight:800;color:#536d77}.card.active i{color:#4bd1ff}.card b{display:block;font-size:8px;margin-top:5px}.card small{display:block;color:#71858e;font-size:7px;line-height:1.35;margin-top:5px}.hint{position:fixed;z-index:13;right:3vw;bottom:137px;color:#69818b;font-size:8px;letter-spacing:1.5px}.progress{position:fixed;z-index:30;left:0;top:0;height:2px;background:linear-gradient(90deg,#4bd1ff,#ef8a2b);width:0}#loading{position:fixed;z-index:100;inset:0;background:#03080c;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:27px;font-weight:900;letter-spacing:4px;transition:opacity .6s}#loading small{font-size:8px;color:#718993;letter-spacing:2px;margin-top:12px}#error{display:none;position:fixed;z-index:110;inset:0;background:#03080c;color:#fff;padding:10vw;font-size:18px;line-height:1.6}@media(max-width:850px){.tag,.hud{display:none}.info{left:18px;bottom:135px;top:auto;transform:none;width:calc(100% - 36px)}#cards{overflow-x:auto;display:flex}.card{min-width:130px}}
.build{position:fixed;z-index:40;right:3vw;top:72px;font-size:7px;letter-spacing:1.5px;color:#536b75;background:#040b10aa;border:1px solid #1c333d;padding:5px 7px}
.logic-preview{position:fixed;z-index:13;right:3vw;top:50%;transform:translateY(-50%) scale(.94);width:min(470px,36vw);height:310px;background:#071016ed;border:1px solid #31505c;box-shadow:0 25px 90px #000b;opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;overflow:hidden}
.logic-preview.show{opacity:1;transform:translateY(-50%) scale(1)}
.logic-top{height:38px;border-bottom:1px solid #263f49;display:flex;align-items:center;padding:0 13px;font-size:9px;font-weight:800;letter-spacing:1px}.logic-top span{color:#ef8a2b}
.logic-body{display:grid;grid-template-columns:92px 1fr;height:272px}.logic-nav{border-right:1px solid #203741;padding:10px 8px}.logic-nav i{display:block;font-style:normal;font-size:7px;color:#748a94;padding:8px 6px}.logic-nav i.on{background:#10232c;color:#55d3ff}
.logic-main{padding:13px}.logic-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.logic-kpi{background:#0c1a21;border:1px solid #24414c;padding:9px}.logic-kpi b{font-size:13px}.logic-kpi small{display:block;font-size:6px;color:#718791;margin-top:4px}.logic-table{margin-top:10px;border:1px solid #213b46}.logic-row{display:grid;grid-template-columns:1.2fr .8fr .8fr .7fr;padding:7px 8px;border-bottom:1px solid #172e38;font-size:7px}.logic-row.head{color:#718994}.logic-row strong{color:#43d09e}.logic-flow{margin-top:10px;font-size:7px;color:#7d929b}.logic-flow b{color:#55d3ff}

/* BUILD 0.9A — readability pass */
.build{font-size:11px!important;letter-spacing:1.2px!important;padding:7px 10px!important;color:#91a8b2!important}
.tag{font-size:11px!important}
.info small{font-size:12px!important}
.info p{font-size:17px!important;line-height:1.62!important}
.hud{width:215px!important}
.hud span{font-size:10px!important}
.hud b{font-size:11px!important}
.card{height:112px!important;padding:12px!important}
.card i{font-size:24px!important}
.card b{font-size:11px!important}
.card small{font-size:10px!important;line-height:1.4!important}
.hint{font-size:10px!important}
.logic-preview{width:min(540px,39vw)!important;height:350px!important}
.logic-top{height:44px!important;font-size:12px!important}
.logic-body{grid-template-columns:110px 1fr!important;height:306px!important}
.logic-nav i{font-size:10px!important;padding:9px 7px!important}
.logic-kpi b{font-size:17px!important}
.logic-kpi small{font-size:9px!important}
.logic-row{font-size:10px!important;padding:9px 9px!important}
.logic-flow{font-size:10px!important}

/* BUILD 1.0 — model ↔ Logic storytelling */
.data-link{position:fixed;z-index:14;left:49%;right:39%;top:48%;display:flex;align-items:center;gap:7px;opacity:0;transform:translateY(15px);transition:.35s;pointer-events:none}
.data-link.show{opacity:1;transform:none}.pulse-line{height:2px;min-width:55px;flex:1;background:linear-gradient(90deg,#4bd1ff33,#4bd1ff,#ef8a2b);box-shadow:0 0 15px #4bd1ff}
.data-pill{white-space:nowrap;background:#07151ce8;border:1px solid #356170;padding:7px 9px;font-size:10px;font-weight:700;color:#dbeaf0;box-shadow:0 8px 25px #0008}.data-pill.ok{border-color:#2c8b70;color:#4bd5a8}
.logic-preview{transition:opacity .45s,transform .45s!important}
.logic-row.live{background:#10252e;box-shadow:inset 2px 0 #4bd1ff}
@media(max-width:1100px){.data-link{display:none}}

/* BUILD 1.1 — slower cinematic chapter travel */
.long-scroll{height:1800vh!important}
.chapter-progress{position:fixed;z-index:19;left:3vw;bottom:147px;width:260px;height:3px;background:#19303a;overflow:hidden}
.chapter-progress i{display:block;height:100%;width:0;background:#4bd1ff;box-shadow:0 0 10px #4bd1ff}
.chapter-label{position:fixed;z-index:19;left:3vw;bottom:157px;font-size:10px;letter-spacing:1.2px;color:#78909a}

/* BUILD 1.2 — Tegn3DLogic companion at every engineering step */
.logic-companion{position:fixed;z-index:14;right:3vw;top:300px;width:290px;background:#050d12e8;border:1px solid #294650;box-shadow:0 18px 55px #0008;backdrop-filter:blur(9px);transition:.35s}
.lc-head{height:39px;padding:0 12px;display:flex;align-items:center;border-bottom:1px solid #213943}.lc-head b{font-size:12px;letter-spacing:1px}.lc-head b span{color:#ef8a2b}.lc-head small{margin-left:auto;font-size:9px;color:#55d3ff;letter-spacing:1px}
.lc-body{padding:12px}.lc-action{font-size:13px;font-weight:700;line-height:1.35}.lc-flow{margin-top:10px;padding:8px;background:#0b1920;border-left:2px solid #4bd1ff;font-size:10px;color:#91a8b2}.lc-result{margin-top:10px;display:flex;align-items:center;gap:8px}.lc-result span{font-size:8px;color:#708792}.lc-result b{font-size:10px;color:#48d2a5}
.logic-companion.pulse{border-color:#4bd1ff;box-shadow:0 18px 55px #0008,0 0 28px #4bd1ff22}
@media(max-width:1050px){.logic-companion{display:none}}

/* BUILD 1.3 — final component deployment chapter */
.finale{position:fixed;z-index:16;inset:0;pointer-events:none;opacity:0;transition:.5s}.finale.show{opacity:1}
.finale-screen{position:absolute;left:8vw;top:22%;width:430px;height:245px;background:#061117f2;border:2px solid #3b6676;box-shadow:0 25px 90px #000,0 0 35px #4bd1ff18;padding:15px;transform:perspective(900px) rotateY(8deg)}
.fs-title{font-size:14px;font-weight:900;letter-spacing:1px}.fs-title span{color:#ef8a2b}.fs-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.fs-cols div{height:100px;background:#0b1b23;border:1px solid #294752;padding:10px;font-size:10px;color:#8ca3ad}
.fs-components{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}.fs-components b{background:#10242d;border:1px solid #3a6474;padding:9px 4px;font-size:8px;text-align:center;color:#55d3ff}
.finale-message{position:absolute;right:5vw;top:34%;width:430px;background:#03090cdd;border-left:2px solid #ef8a2b;padding:22px}.finale-message small{font-size:10px;letter-spacing:2px;color:#ef8a2b}.finale-message h2{font-size:34px;line-height:1.05;margin:8px 0 12px}.finale-message p{font-size:14px;color:#9fb3bc}

/* BUILD 1.5 — information is now a primary visual element */
#cards{
  left:2.5vw!important;
  right:2.5vw!important;
  bottom:22px!important;
  grid-template-columns:repeat(5,minmax(210px,1fr))!important;
  gap:12px!important;
  overflow-x:auto!important;
  padding-top:32px!important;
  padding-bottom:8px!important;
}
.card{
  min-width:230px!important;
  height:210px!important;
  padding:20px 20px!important;
  border-width:1px!important;
  background:#050d12f2!important;
  box-shadow:0 18px 50px #0007!important;
}
.card.active{
  transform:translateY(-24px) scale(1.045)!important;
  box-shadow:0 28px 75px #000c,0 0 32px #4bd1ff18!important;
}
.card i{font-size:42px!important;line-height:1!important}
.card b{font-size:17px!important;line-height:1.15!important;margin-top:12px!important}
.card small{font-size:14px!important;line-height:1.5!important;margin-top:12px!important;color:#9aadb5!important}

.info{
  width:min(520px,38vw)!important;
  padding:30px 32px!important;
}
.info small{font-size:14px!important}
.info h1{font-size:clamp(46px,5vw,76px)!important}
.info p{font-size:20px!important;line-height:1.62!important}

.logic-companion{
  width:390px!important;
  top:285px!important;
}
.lc-head{height:52px!important;padding:0 18px!important}
.lc-head b{font-size:17px!important}
.lc-head small{font-size:12px!important}
.lc-body{padding:18px!important}
.lc-action{font-size:18px!important}
.lc-flow{font-size:14px!important;padding:12px!important;margin-top:14px!important}
.lc-result{margin-top:14px!important}
.lc-result span{font-size:11px!important}
.lc-result b{font-size:14px!important}

.chapter-label{bottom:255px!important;font-size:12px!important}
.chapter-progress{bottom:244px!important;width:330px!important;height:4px!important}
.hint{bottom:244px!important;font-size:11px!important}

.logic-preview{
  width:min(650px,45vw)!important;
  height:420px!important;
}
.logic-top{height:54px!important;font-size:15px!important}
.logic-body{grid-template-columns:135px 1fr!important;height:366px!important}
.logic-nav i{font-size:12px!important;padding:11px 9px!important}
.logic-main{padding:18px!important}
.logic-kpi b{font-size:22px!important}
.logic-kpi small{font-size:11px!important}
.logic-row{font-size:12px!important;padding:11px!important}
.logic-flow{font-size:12px!important}

@media(max-width:1200px){
 #cards{grid-template-columns:repeat(9,250px)!important}
 .card{min-width:250px!important}
 .logic-companion{width:340px!important}
}

#info{display:none!important}
.logic-companion{left:4vw!important;right:auto!important;top:34%!important;width:470px!important;min-height:260px!important;background:#040d12f2!important;border:1px solid #2d6878!important}
.lc-head{height:58px!important;padding:0 22px!important}.lc-head b{font-size:20px!important}.lc-head small{font-size:13px!important}
.lc-body{padding:22px!important}.lc-action{font-size:25px!important;line-height:1.25!important}.lc-flow{font-size:14px!important;padding:14px!important}
.lc-result span{font-size:11px!important}.lc-result b{font-size:15px!important}

/* BUILD 1.7 — clean Full Circle slide */
.finale-message{display:none!important}
.finale-screen{
  left:50%!important;top:20%!important;
  width:520px!important;height:285px!important;
  transform:translateX(-50%) perspective(900px) rotateY(5deg)!important;
}

/* BUILD 1.8 — model callouts */
.model-label{position:fixed;z-index:15;left:61%;top:40%;min-width:190px;padding:11px 13px;background:#061118ee;border:1px solid #3d7182;border-left:3px solid #4bd1ff;box-shadow:0 12px 35px #0009;pointer-events:none;transition:opacity .25s,transform .35s;transform:translateY(0)}
.model-label:before{content:"";position:absolute;right:100%;top:50%;width:70px;height:1px;background:linear-gradient(90deg,transparent,#4bd1ff)}
.model-label small{display:block;font-size:9px;letter-spacing:1.4px;color:#6fa1b3}.model-label b{display:block;margin-top:4px;font-size:14px}.model-label span{display:block;margin-top:5px;font-size:11px;color:#9bb0b9}
.model-label.secondary{left:70%;top:53%;border-left-color:#b968e0}.model-label.secondary:before{background:linear-gradient(90deg,transparent,#b968e0)}
.model-label.hidden{opacity:0;transform:translateY(10px)}

/* BUILD 1.9 — technical backbone */
.model-label small{font-weight:800}
.tech-status{color:#49d7a9!important}
.room-scan-note{position:fixed;z-index:15;right:4vw;top:20%;padding:10px 13px;background:#061118e8;border:1px solid #356273;font-size:11px;letter-spacing:1px;color:#8fb0bd;opacity:0;transition:.25s;pointer-events:none}.room-scan-note.show{opacity:1}.room-scan-note b{color:#55d3ff}.site-cta{position:fixed;z-index:30;right:3vw;top:28px}.site-cta a{pointer-events:auto;text-decoration:none;background:#ef8a2b;color:#071015;border:1px solid #ef8a2b;padding:10px 13px;font-size:10px;font-weight:900;letter-spacing:.8px}.system-stage{position:fixed;z-index:15;right:4vw;top:16%;font-size:10px;letter-spacing:1.2px;color:#7996a2}.lc-shot{margin-top:14px;height:72px;border:1px dashed #365965;background:#08151b;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px}.lc-shot span{font-size:8px;letter-spacing:1.4px;color:#657e88}.lc-shot b{font-size:11px;color:#a8bbc3}
/* BUILD 3.0 — text block polish, model-label mobile safety, CSS-side easing to match app.js scroll inertia */
.lc-action,.lc-flow,.lc-shot b,.model-label b,.model-label span{overflow-wrap:break-word;word-break:break-word}
.model-label{max-width:230px}
.logic-companion,.logic-preview,.model-label,.data-link,.finale{transition:opacity .45s ease,transform .45s ease!important}
.card{transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease,border-color .3s ease!important}

@media(max-width:900px){
  .model-label,.model-label.secondary,.room-scan-note{display:none!important}
}

/* Mobile step strip — final pass, overrides earlier desktop-oriented !important sizing */
@media(max-width:850px){
  #cards{
    left:0!important;right:0!important;bottom:0!important;
    display:flex!important;grid-template-columns:none!important;
    overflow-x:auto!important;-webkit-overflow-scrolling:touch;
    gap:8px!important;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
    background:linear-gradient(180deg,transparent,#03080cf5 35%)!important;
    scroll-snap-type:x proximity;
  }
  .card{
    min-width:148px!important;width:148px!important;height:126px!important;
    padding:12px!important;flex:0 0 auto;scroll-snap-align:start;
  }
  .card.active{transform:translateY(-8px) scale(1.03)!important;box-shadow:0 12px 30px #000c,0 0 20px #4bd1ff22!important}
  .card i{font-size:19px!important}
  .card b{font-size:11px!important;margin-top:6px!important}
  .card small{
    font-size:9px!important;line-height:1.32!important;margin-top:6px!important;color:#9aadb5!important;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  }
  .chapter-label{left:14px!important;bottom:148px!important;font-size:9px!important}
  .chapter-progress{left:14px!important;right:14px!important;width:auto!important;bottom:141px!important}
  .hint{display:none!important}
  .logic-companion,.logic-preview{display:none!important}
  .site-cta{top:auto!important;bottom:148px!important;right:12px!important}
  .site-cta a{padding:8px 10px!important;font-size:9px!important}
  header{padding:0 4vw!important;gap:14px!important}
  header button{font-size:8px!important;padding:8px 10px!important}
  .build{display:none!important}
}
@media(max-width:480px){
  .card{min-width:128px!important;width:128px!important;height:116px!important;padding:10px!important}
  .card small{-webkit-line-clamp:2!important}
  .card b{font-size:10px!important}
}