/* ============================================================
   USTAR Academy — demo/hosting layer
   ============================================================ */
.demo-route-body{margin:0;min-height:100vh;background:var(--u-canvas);color:var(--u-text-primary)}
.demo-route-topbar{position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;gap:14px;padding:0 22px;border-width:0 0 1px;border-radius:0;background:var(--u-surface-glass-strong)}
.demo-route-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0}
.demo-route-brand:hover{color:inherit;text-decoration:none}.demo-route-brand img{display:block;width:150px;height:36px;object-fit:cover;border-radius:4px}
.demo-route-badge{font-size:11px;font-weight:650;color:var(--u-text-muted);letter-spacing:.05em;text-transform:uppercase}
.demo-route-main{width:min(1240px,calc(100% - 40px));margin:0 auto;padding:44px 0 70px}
.demo-route-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:46px;align-items:center;padding:34px 0 48px;border-bottom:1px solid var(--u-border)}
.demo-route-hero h1{max-width:760px;margin:8px 0 14px;font-family:var(--u-font-disp);font-size:clamp(36px,5vw,62px);line-height:1.02;letter-spacing:-.045em;font-weight:650}
.demo-route-lead{max-width:760px;margin:0;color:var(--u-text-secondary);font-size:17px;line-height:1.65}.demo-route-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.demo-route-map{padding:22px;background:var(--u-surface-raised);border:1px solid var(--u-border);border-radius:var(--u-r-lg);box-shadow:var(--u-e-1)}
.demo-route-map__node{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center;padding:14px;border-radius:var(--u-r-md)}
.demo-route-map__node span{grid-row:1/3;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--u-surface-muted);font:700 12px var(--u-font-mono)}
.demo-route-map__node strong{font-family:var(--u-font-disp);font-size:16px}.demo-route-map__node small{color:var(--u-text-muted);font-size:12px}.demo-route-map__node.is-focus{background:var(--u-brand-soft)}.demo-route-map__node.is-focus span{background:var(--u-brand);color:var(--u-ink-950)}
.demo-route-map__line{width:1px;height:22px;margin-left:31px;background:var(--u-border-strong)}
.demo-section{padding:44px 0;border-bottom:1px solid var(--u-border)}.demo-section__head{margin-bottom:20px}.demo-section__head h2{margin:7px 0 0;font-family:var(--u-font-disp);font-size:30px;letter-spacing:-.03em}.demo-section__head--row{display:flex;align-items:end;justify-content:space-between;gap:24px}.demo-hint{max-width:390px;color:var(--u-text-muted);font-size:12px;line-height:1.5;text-align:right}
.demo-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.demo-principle{padding:20px;background:var(--u-surface-raised);border:1px solid var(--u-border);border-radius:var(--u-r-md)}.demo-principle b{color:var(--u-brand-strong);font:700 11px var(--u-font-mono)}.demo-principle h3{margin:12px 0 8px;font-family:var(--u-font-disp);font-size:17px;line-height:1.25}.demo-principle p{margin:0;color:var(--u-text-secondary);font-size:13px;line-height:1.55}
.demo-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.demo-route-card{min-height:210px;display:flex;flex-direction:column;padding:20px;color:var(--u-text-primary);background:var(--u-surface-raised);border:1px solid var(--u-border);border-radius:var(--u-r-md);text-decoration:none;transition:transform var(--u-dur-fast),border-color var(--u-dur-fast),box-shadow var(--u-dur-fast)}.demo-route-card:hover{color:inherit;text-decoration:none;transform:translateY(-2px);border-color:var(--u-border-strong);box-shadow:var(--u-e-2)}.demo-route-card.is-primary{border-top:3px solid var(--u-brand)}.demo-route-card.is-secondary{background:var(--u-surface-muted)}.demo-route-card__num{color:var(--u-text-muted);font:600 10px var(--u-font-mono);text-transform:uppercase;letter-spacing:.08em}.demo-route-card h3{margin:13px 0 8px;font-family:var(--u-font-disp);font-size:21px}.demo-route-card p{margin:0 0 18px;color:var(--u-text-secondary);font-size:13px;line-height:1.55}.demo-route-card strong{margin-top:auto;font-size:12px}.demo-route-footer{padding:22px;text-align:center;color:var(--u-text-muted);font-size:11px}

/* Topbar brand supplied by user. */
.u-brandmark__demo{display:block;width:148px;height:35px;object-fit:cover;border-radius:4px}

/* Presentation journey controller. */
.demo-journeybar{position:fixed;right:18px;bottom:18px;z-index:820;display:flex;align-items:center;gap:8px;padding:8px;background:var(--u-surface-glass-strong);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);border:1px solid var(--u-border-glass);border-radius:var(--u-r-md);box-shadow:var(--u-e-2)}
.demo-journeybar__meta{min-width:128px;padding:0 6px}.demo-journeybar__role{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--u-text-muted)}.demo-journeybar__step{display:block;margin-top:1px;font-size:12px;font-weight:600}.demo-journeybar .u-btn{min-height:34px;padding:0 11px;font-size:11px}.demo-journeybar__route{width:34px;height:34px;display:grid;place-items:center;color:var(--u-text-secondary);text-decoration:none;border-radius:var(--u-r-sm)}.demo-journeybar__route:hover{background:var(--u-surface-muted);color:var(--u-text-primary);text-decoration:none}

/* Final supplied login composition. */
html[data-demo-screen="login"] .u-topbar,html[data-demo-screen="login"] .u-body-wrap>.u-rail,html[data-demo-screen="login"] .u-bottomnav,html[data-demo-screen="login"] .proto-fab,html[data-demo-screen="login"] .proto-panel,html[data-demo-screen="login"] .demo-journeybar{display:none!important}
html[data-demo-screen="login"] .u-body-wrap{display:block!important}html[data-demo-screen="login"] .u-main{padding:0!important;min-height:100vh;background:#202020}html[data-demo-screen="login"] #view{min-height:100vh}
.demo-login-stage{min-height:100vh;display:grid;place-items:center;overflow:hidden;background:#202020}
.demo-login-canvas{position:relative;width:min(100vw,calc(100vh * 1.75));aspect-ratio:1186.5/678;max-height:100vh;background:#f5f4ef;box-shadow:0 22px 80px rgba(0,0,0,.35)}.demo-login-art{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;pointer-events:none}
.demo-login-form{position:absolute;inset:0;margin:0}.demo-login-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.demo-login-field{position:absolute;left:58.72%;width:39.05%;height:7.55%;padding:0 1.35%;font:500 clamp(11px,1.05vw,16px) var(--u-font-ui);color:#202020;background:#edf3ff;border:1px solid #858b91;border-radius:7px;box-shadow:0 0 0 2px rgba(235,197,2,.2);outline:0}.demo-login-field--user{top:41.1%;border-color:#666;box-shadow:0 0 0 2px rgba(235,197,2,.45)}.demo-login-field--pass{top:53.45%;box-shadow:none}.demo-login-field:focus{border-color:#d5b000;box-shadow:0 0 0 3px rgba(235,197,2,.32)}
.demo-login-submit{position:absolute;left:58.72%;top:62.43%;width:39.05%;height:8.65%;border:0;border-radius:7px;background:rgba(255,218,77,.83);color:#807238;font:800 clamp(13px,1.4vw,21px) var(--u-font-disp);cursor:pointer;transition:filter var(--u-dur-fast),transform var(--u-dur-fast)}.demo-login-submit:hover{filter:saturate(1.14) brightness(.99);transform:translateY(-1px)}.demo-login-submit:focus-visible{outline:3px solid rgba(40,39,39,.35);outline-offset:2px}
.demo-login-mobile-brand{display:none}

@media(max-width:900px){.demo-route-main{width:min(100% - 28px,760px);padding-top:24px}.demo-route-hero{grid-template-columns:1fr;gap:24px}.demo-route-hero h1{font-size:clamp(34px,10vw,50px)}.demo-principles,.demo-routes{grid-template-columns:1fr 1fr}.demo-section__head--row{display:block}.demo-hint{margin-top:10px;text-align:left}.demo-route-badge{display:none}.demo-route-brand img{width:118px;height:29px}.demo-journeybar{right:10px;bottom:calc(var(--u-bottomnav-h) + 10px);left:10px;justify-content:center}.demo-journeybar__meta{min-width:0;flex:1}.demo-login-stage{padding:22px;background:linear-gradient(180deg,#2b2b2b,#171717)}.demo-login-canvas{width:min(440px,100%);aspect-ratio:auto;min-height:590px;padding:98px 24px 28px;background:#f5f4ef;border-top:7px solid var(--u-brand);border-radius:10px}.demo-login-art{display:none}.demo-login-mobile-brand{display:block;position:absolute;left:24px;top:26px}.demo-login-mobile-brand strong{display:block;font-family:var(--u-font-disp);font-size:28px;letter-spacing:.13em}.demo-login-mobile-brand span{display:block;margin-top:4px;color:#777;font-size:10px;font-weight:700;letter-spacing:.3em}.demo-login-form{position:relative;inset:auto;display:grid;gap:16px}.demo-login-form label{position:static;width:auto;height:auto;clip:auto;overflow:visible;color:#777;font-size:10px;font-weight:700;letter-spacing:.08em}.demo-login-field,.demo-login-submit{position:static;left:auto;top:auto;width:100%;height:52px}.demo-login-field{padding:0 14px}.demo-login-submit{margin-top:4px;color:#262626;font-size:14px}.demo-login-mobile-note{display:block!important}}
@media(max-width:620px){.demo-principles,.demo-routes{grid-template-columns:1fr}.demo-route-topbar{padding:0 14px}.demo-route-brand .u-brandmark__product,.demo-route-brand .u-brandmark__sep{display:none}.u-brandmark__demo{width:112px;height:28px}.demo-journeybar .u-btn span{display:none}}