/* 智绘垛田 · Ink water, muted gold, natural paper. System fonts only. */
:root {
  --bg:#0a1a21;
  --bg-deep:#07151a;
  --panel:#10252d;
  --panel2:#152e35;
  --line:rgba(187,208,210,.13);
  --line-strong:rgba(203,220,219,.25);
  --text:#ecf0e9;
  --muted:#90a5a7;
  --gold:#d9bc7f;
  --gold-dim:#9e865a;
  --teal:#83baa9;
  --paper:#eee9dd;
  --danger:#db9c83;
  --radius:12px;
  --font:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --serif:"Songti SC","STSong","Noto Serif CJK SC",serif
}

* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  font:14px/1.6 var(--font);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased
}
body:before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 80% 10%,rgba(67,115,118,.12),transparent 55%);
  z-index:-1
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,textarea {
   -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer;
  color:inherit;
  border:0;
  background:none
}
button:disabled {
  opacity:.35;
  cursor:not-allowed
}
button:focus-visible,a:focus-visible,svg g:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:4px
}
input:focus,textarea:focus {
  outline:none;
  border-color:var(--gold)!important;
  box-shadow:0 0 0 2px rgba(217,188,127,.13)
}
button,a {
  touch-action:manipulation
}
img,video {
  display:block;
  max-width:100%
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-weight:550
}
h1 {
  line-height:1.35
}
h2 {
  line-height:1.45
}
p {
  color:var(--muted)
}
small {
  font-size:11px
}
strong,b {
  font-weight:550
}
svg.icon {
  width:18px;
  height:18px;
  flex:none;
  display:inline-block;
  vertical-align:middle
}
.icon.chevron {
  transform:rotate(180deg);
  width:12px
}
.muted {
  color:var(--muted)
}
.tiny {
  font-size:11px;
  color:var(--muted)
}
.eyebrow {
  font-size:10px;
  font-weight:500;
  letter-spacing:2px;
  color:var(--gold);
  line-height:1.8
}
.short-line {
  display:inline-block;
  width:28px;
  height:1px;
  background:var(--gold);
  vertical-align:middle;
  margin-right:10px
}
.skip-link {
  position:fixed;
  left:15px;
  top:-80px;
  background:var(--gold);
  color:var(--bg);
  padding:8px 20px;
  z-index:999
}
.skip-link:focus {
  top:10px
}
.initial-loading {
  padding:120px;
  text-align:center;
  color:var(--gold)
}
.pill {
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(214,187,129,.25);
  border-radius:5px;
  padding:3px 8px;
  line-height:1.5;
  font-size:10px;
  white-space:nowrap;
  color:var(--gold);
  background:rgba(205,177,116,.06)
}
.pill.muted {
  border-color:var(--line);
  color:var(--muted)
}
.pill.danger {
  color:var(--danger);
  border-color:var(--danger)
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:38px;
  padding:9px 15px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  line-height:1.4;
  font-size:12px;
  transition:background .2s,transform .2s;
  color:var(--text);
  white-space:nowrap
}
.btn:hover {
  background:rgba(255,255,255,.06);
  transform:translateY(-1px)
}
.btn.gold {
  background:var(--gold);
  border-color:var(--gold);
  color:#14272b;
  font-weight:650
}
.btn.gold:hover {
  background:#e7cf9c
}
.btn.secondary {
  background:rgba(255,255,255,.025)
}
.btn.ghost {
  border-color:transparent;
  padding-left:9px;
  padding-right:9px;
  color:var(--muted)
}
.btn.glass {
  background:rgba(5,23,31,.65);
  backdrop-filter:blur(10px)
}
.btn.ai-button {
  background:rgba(135,188,170,.10);
  color:#b4dccf;
  border-color:rgba(135,188,170,.3);
  width:100%
}
.button-row {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--gold);
  font-size:12px
}
.text-link:hover {
  text-decoration:underline
}
.icon-btn {
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  flex:none;
  color:var(--muted);
  border:1px solid transparent
}
.icon-btn:hover {
  background:rgba(255,255,255,.06);
  border-color:var(--line);
  color:var(--gold)
}
.inline-note {
  display:flex;
  gap:9px;
  align-items:flex-start;
  padding:11px 13px;
  margin:14px 0;
  background:rgba(125,171,171,.055);
  border:1px solid rgba(125,171,171,.16);
  border-radius:6px;
  font-size:11px;
  line-height:1.7;
  color:var(--muted)
}
.inline-note .icon {
  width:15px;
  margin-top:2px;
  color:var(--teal)
}
.inline-note.warn {
  border-color:rgba(217,159,119,.27);
  background:rgba(190,139,97,.055);
  color:#bda793
}
.inline-note.warn .icon {
  color:var(--gold)
}
.topbar {
  height:76px;
  padding:0 34px;
  display:flex;
  align-items:center;
  gap:40px;
  border-bottom:1px solid var(--line);
  background:rgba(9,25,32,.94);
  backdrop-filter:blur(20px);
  position:sticky;
  top:0;
  z-index:40
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:236px
}
.brand-mark {
  color:var(--gold);
  width:42px;
  height:42px;
  flex:none
}
.brand b {
  font-family:var(--serif);
  font-size:24px;
  letter-spacing:3px;
  color:var(--paper)
}
.brand small {
  display:block;
  color:var(--muted);
  font-size:9px;
  letter-spacing:1.5px
}
.topbar nav {
  display:flex;
  align-items:stretch;
  gap:27px;
  height:100%;
  margin:auto
}
.nav-link {
  display:flex;
  align-items:center;
  position:relative;
  white-space:nowrap;
  font-size:13px;
  color:var(--muted)
}
.nav-link.active {
  color:var(--gold)
}
.nav-link.active:after {
  content:"";
  position:absolute;
  height:2px;
  background:var(--gold);
  bottom:0;
  width:20px;
  left:50%;
  transform:translateX(-50%)
}
.nav-link:hover {
  color:var(--paper)
}
.top-actions {
  display:flex;
  align-items:center;
  gap:10px
}
.demo-badge {
  display:flex;
  gap:6px;
  align-items:center;
  font-size:10px;
  white-space:nowrap;
  color:#afb9ad;
  background:rgba(159,181,164,.06);
  border:1px solid rgba(159,181,164,.2);
  border-radius:20px;
  padding:5px 9px
}
.demo-badge .icon {
  width:13px;
  height:13px
}
#main {
  max-width:1740px;
  margin:auto;
  min-height:calc(100vh - 130px)
}
.footer {
  max-width:1740px;
  margin:36px auto 0;
  padding:19px 34px 23px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  font-size:10px;
  border-top:1px solid var(--line);
  color:#708b8e
}
.footer span {
  display:flex;
  align-items:center;
  gap:8px
}
.footer i {
  font-style:normal;
  opacity:.5
}
.footer .icon {
  width:13px;
  height:13px
}
.footer button {
  display:flex;
  gap:8px;
  align-items:center;
  color:var(--muted);
  font-size:10px
}
.tourbar {
  position:sticky;
  top:76px;
  z-index:38;
  background:#1d393e;
  border-bottom:1px solid rgba(214,187,129,.35);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 34px;
  gap:16px
}
.tourbar>span {
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--gold);
  font-size:12px
}
.tourbar>p {
  font-size:12px;
  color:#c6d3ca
}
.tourbar>div {
  display:flex;
  gap:7px
}
.tourbar .btn {
  padding:5px 10px;
  min-height:30px;
  font-size:11px
}

/* Course landing */
.home-hero {
  margin:20px 28px 0;
  height:385px;
  border:1px solid var(--line);
  border-radius:12px;
  position:relative;
  overflow:hidden;
  background:#142a31
}
.hero-photo {
  position:absolute;
  right:0;
  top:0;
  width:85%;
  height:100%;
  object-fit:cover;
  object-position:center 55%;
  filter:saturate(.74) brightness(.87)
}
.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#10262d 0%,rgba(16,38,45,.98) 19%,rgba(16,38,45,.8) 35%,rgba(16,38,45,.02) 75%),linear-gradient(0deg,rgba(7,25,31,.5),transparent 45%)
}
.hero-copy {
  position:relative;
  z-index:1;
  padding:42px 48px
}
.hero-copy h1 {
  font-family:var(--serif);
  font-size:43px;
  line-height:1.43;
  letter-spacing:1px;
  margin-top:12px;
  color:#f3efe4
}
.hero-copy h1 span {
  color:var(--gold)
}
.hero-copy p {
  font-size:12px;
  line-height:1.9;
  color:#b8c5bf;
  margin:14px 0 19px
}
.hero-tags {
  display:flex;
  gap:8px;
  margin-top:16px
}
.hero-tags .pill {
  font-size:9px;
  color:#b9c6bd;
  border-color:rgba(198,218,207,.19)
}
.geo-stamp {
  position:absolute;
  right:34px;
  top:26px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#f0e7c6;
  font-size:12px;
  letter-spacing:1px;
  flex-wrap:wrap;
  max-width:160px
}
.geo-stamp small {
  display:block;
  width:100%;
  text-align:right;
  opacity:.6;
  font-size:9px
}
.hero-credit {
  position:absolute;
  right:20px;
  bottom:13px;
  font-size:9px;
  color:#c1c2ab;
  opacity:.8
}
.course-intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:31px 35px 17px;
  gap:25px
}
.course-intro h2 {
  font-size:20px;
  margin-top:4px;
  letter-spacing:1px
}
.course-counts {
  display:flex;
  gap:29px;
  color:var(--muted);
  font-size:11px
}
.course-counts span {
  display:flex;
  align-items:baseline;
  gap:8px
}
.course-counts b {
  font:29px Georgia,serif;
  color:var(--gold)
}
.project-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin:0 34px
}
.project-card {
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:#10242b;
  transition:transform .25s,border-color .25s
}
.project-card:hover {
  transform:translateY(-5px);
  border-color:rgba(217,188,127,.65)
}
.project-cover {
  height:163px;
  position:relative;
  overflow:hidden
}
.project-cover>img {
  height:100%;
  width:100%;
  object-fit:cover;
  filter:brightness(.7) saturate(.77);
  transition:transform .5s
}
.project-card:hover .project-cover>img {
  transform:scale(1.04)
}
.project-cover:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(11,33,40,.7),transparent 55%)
}
.project-index {
  position:absolute;
  top:10px;
  left:16px;
  color:var(--paper);
  opacity:.75;
  font:24px Georgia,serif
}
.cover-type {
  position:absolute;
  left:14px;
  bottom:8px;
  font-size:9px;
  z-index:2;
  color:#c3c8b9
}
.mini-card {
  position:absolute;
  right:28px;
  top:20px;
  width:170px;
  z-index:1;
  transform:rotate(8deg);
  background:var(--paper);
  padding:9px;
  box-shadow:0 5px 30px #031a25
}
.mini-card>span {
  font:12px var(--serif);
  color:#2a3e3e;
  letter-spacing:2px;
  display:block;
  padding-bottom:6px
}
.mini-card img {
  height:68px;
  width:100%;
  object-fit:cover
}
.mini-card small {
  color:#5e6f62;
  font-size:7px;
  letter-spacing:1px
}
.mini-route {
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  stroke:var(--gold);
  stroke-width:2;
  fill:var(--gold)
}
.mini-route path {
  fill:none;
  stroke-dasharray:6 6
}
.project-card-body {
  padding:15px 20px 18px
}
.card-kicker {
  display:flex;
  align-items:center;
  color:var(--gold);
  gap:8px;
  font-size:10px;
  letter-spacing:1px
}
.card-kicker .icon {
  width:15px;
  height:15px
}
.card-kicker>span {
  margin-left:auto;
  color:#657f84;
  font:9px sans-serif;
  letter-spacing:1px
}
.project-card h3 {
  font-family:var(--serif);
  font-size:25px;
  letter-spacing:2px;
  margin:7px 0 2px;
  display:flex;
  align-items:center;
  justify-content:space-between
}
.project-card h3>span {
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  color:var(--muted);
  transition:all .2s
}
.project-card:hover h3>span {
  background:var(--gold);
  color:var(--bg);
  border-color:var(--gold)
}
.project-card p {
  font-size:12px
}
.project-ai {
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:10px;
  letter-spacing:1px;
  color:#8eaaa6
}
.chain-banner {
  margin:23px 34px 0;
  border:1px solid var(--line);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 20px;
  gap:20px;
  color:var(--muted);
  font-size:11px
}
.chain-banner>span b {
  color:var(--paper);
  font-weight:400
}
.chain-banner>div {
  display:flex;
  align-items:center;
  gap:13px
}
.chain-banner>div>span {
  white-space:nowrap
}
.chain-banner i {
  font-style:normal;
  color:var(--gold);
  margin-right:6px;
  font:12px Georgia,serif
}
.chain-banner .icon {
  width:12px;
  color:#526e73
}

/* Project overview */
.page-wrap {
  padding:26px 34px 0
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:11px;
  margin-bottom:19px
}
.breadcrumb a:hover {
  color:var(--gold)
}
.project-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-bottom:24px
}
.project-heading h1 {
  font-family:var(--serif);
  font-size:34px;
  letter-spacing:1px;
  margin-top:4px;
  color:var(--paper)
}
.project-heading h1>span {
  font-family:var(--font);
  font-size:21px;
  font-weight:400;
  color:#bccac3;
  letter-spacing:0
}
.project-workspace {
  display:grid;
  grid-template-columns:210px minmax(0,1fr) 193px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  overflow:hidden;
  min-height:444px
}
.project-side {
  padding:25px 20px;
  border-right:1px solid var(--line);
  background:linear-gradient(135deg,rgba(19,48,54,.8),transparent)
}
.panel-label {
  font-size:11px;
  color:var(--gold);
  letter-spacing:1px;
  display:flex;
  align-items:center;
  gap:7px
}
.panel-label .icon {
  width:16px;
  height:16px
}
.project-side h2 {
  font-family:var(--serif);
  font-size:20px;
  margin:16px 0;
  line-height:1.9;
  color:#e5e6d8
}
.project-side p {
  font-size:11px;
  line-height:1.95
}
.side-divider {
  height:1px;
  background:var(--line);
  margin:23px 0 17px
}
.deliverable {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  margin-top:13px;
  color:#c1cfca
}
.deliverable>span {
  font:10px Georgia,serif;
  color:var(--gold)
}
.audience-label {
  margin-top:24px;
  border-top:1px solid var(--line);
  padding-top:16px;
  color:#afc6bf;
  font-size:11px
}
.audience-label .icon {
  width:14px;
  margin-right:4px
}
.audience-label small {
  display:block;
  color:var(--muted);
  padding-left:20px;
  font-size:9px
}
.project-side.right {
  border-left:1px solid var(--line);
  border-right:0;
  padding:25px 17px
}
.path-list {
  margin-top:15px
}
.path-list a {
  display:flex;
  gap:9px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--line)
}
.path-list a:hover {
  color:var(--gold)
}
.path-list a i {
  font:15px Georgia,serif;
  color:var(--gold);
  font-style:normal
}
.path-list a span {
  font-size:12px
}
.path-list a small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:2px
}
.path-list a>.icon {
  margin-left:auto;
  width:13px;
  color:#677e80
}
.mini-proof {
  margin-top:19px;
  font-size:11px;
  color:var(--muted);
  line-height:1.9
}
.mini-proof>.icon {
  float:left;
  margin-right:6px;
  color:var(--teal);
  width:15px
}
.mini-proof b {
  color:#c9d8cb;
  font-weight:400
}
.mini-proof small {
  display:block;
  font-size:9px;
  color:#687f83
}
.visual-stage {
  position:relative;
  min-width:0;
  overflow:hidden;
  background:#132d33
}
.product-stage {
  position:relative;
  min-height:444px;
  height:100%;
  overflow:hidden
}
.stage-landscape {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover;
  filter:saturate(.65) brightness(.66)
}
.stage-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(8,27,33,.8),transparent 50%)
}
.floating-postcards {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  height:355px;
  padding-top:20px
}
.postcard-large {
  position:relative;
  z-index:3;
  width:58%;
  max-width:345px;
  background:var(--paper);
  color:#1c3937;
  padding:16px 16px 19px;
  box-shadow:0 20px 40px rgba(0,0,0,.32);
  transform:rotate(-4deg)
}
.postcard-label {
  font:8px Georgia,serif;
  letter-spacing:2px;
  color:#6a796a;
  margin-bottom:10px
}
.postcard-large>img {
  width:100%;
  height:150px;
  object-fit:cover
}
.postcard-large h3 {
  font-family:var(--serif);
  font-size:18px;
  letter-spacing:1px;
  margin:13px 0 5px
}
.postcard-large small {
  font-size:8px;
  color:#7c8676
}
.postcard-small {
  position:absolute;
  width:26%;
  background:#e9e2d5;
  box-shadow:0 15px 30px rgba(0,0,0,.3);
  padding:9px;
  color:#263c38
}
.postcard-small>img {
  width:100%;
  height:100px;
  object-fit:cover
}
.postcard-small p {
  font-size:11px;
  color:#536451;
  margin-top:7px;
  letter-spacing:2px;
  font-family:var(--serif)
}
.postcard-small.left {
  left:6%;
  top:132px;
  transform:rotate(-15deg)
}
.postcard-small.right {
  right:5%;
  top:76px;
  transform:rotate(12deg)
}
.stage-bottom {
  position:absolute;
  left:24px;
  right:24px;
  bottom:33px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  font-size:11px;
  color:#e4e3cc;
  z-index:3
}
.scene-label {
  position:absolute;
  bottom:10px;
  left:15px;
  font-size:9px;
  color:#d4d4bd;
  background:rgba(6,23,27,.55);
  padding:3px 7px;
  border-radius:3px;
  z-index:3
}
.space-stage {
  height:100%;
  min-height:444px;
  position:relative
}
.space-stage>img {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover;
  object-position:48% center
}
.concept-tag {
  position:absolute;
  right:12px;
  top:12px;
  display:inline-flex;
  padding:5px 9px;
  border:1px solid rgba(255,236,194,.28);
  background:rgba(12,29,30,.65);
  font-size:9px;
  color:#e2d2b5;
  border-radius:4px;
  z-index:4;
  backdrop-filter:blur(4px)
}
.scene-hotspot {
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(7,28,33,.75);
  color:#efe3c3;
  border:1px solid rgba(237,220,177,.5);
  backdrop-filter:blur(6px);
  border-radius:4px;
  padding:6px 8px;
  font-size:10px;
  white-space:nowrap
}
.scene-hotspot .icon {
  width:14px;
  height:14px;
  border:1px solid currentColor;
  border-radius:50%;
  padding:1px
}
.scene-hotspot:hover {
  background:var(--gold);
  color:var(--bg)
}
.journey-stage {
  display:flex;
  flex-direction:column;
  height:100%
}
.route-scene {
  height:360px;
  position:relative;
  overflow:hidden;
  background:#153038;
  min-width:0
}
.route-scene.compact {
  height:262px;
  flex:none
}
.route-scene>img {
  height:100%;
  width:100%;
  object-fit:cover;
  filter:brightness(.65) saturate(.63)
}
.scene-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(5,24,29,.6),rgba(5,24,29,.1))
}
.route-lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible
}
.journey-line {
  stroke:#f0cf81;
  fill:none;
  stroke-width:2;
  stroke-dasharray:8 5;
  filter:drop-shadow(0 0 3px rgba(226,198,125,.6));
  animation:flow 20s linear infinite
}
.map-node {
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:center;
  font-size:10px;
  color:#f2e8c9;
  white-space:nowrap
}
.map-node i {
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid var(--gold);
  background:#162c30;
  box-shadow:0 0 0 5px rgba(220,191,126,.14);
  font:10px Georgia,serif
}
.map-node>span {
  background:rgba(6,27,32,.8);
  padding:3px 7px;
  border-radius:3px
}
.map-node:hover i {
  background:var(--gold);
  color:var(--bg)
}
.journey-bottom {
  padding:9px 17px 10px;
  background:#0f252e;
  flex:1
}
.journey-bottom>.tiny {
  display:block;
  text-align:center;
  font-size:9px;
  margin-top:-3px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:25px 0 13px
}
.section-heading h2 {
  font-size:16px;
  font-weight:500
}
.section-heading>span {
  font-size:10px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:8px
}
.section-heading .icon {
  width:13px
}
.task-strip {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:13px
}
.task-card {
  border:1px solid var(--line);
  border-radius:7px;
  background:#10262e;
  padding:12px;
  transition:all .2s
}
.task-card:hover {
  border-color:var(--gold-dim);
  transform:translateY(-3px)
}
.task-card>div {
  display:flex;
  justify-content:space-between;
  color:var(--gold);
  font:11px Georgia,serif
}
.task-card>div .icon {
  width:13px;
  height:13px;
  color:#809c98
}
.task-card h3 {
  font-size:12px;
  margin:8px 0 11px;
  min-height:36px;
  line-height:1.5
}
.task-card img {
  width:100%;
  height:75px;
  border-radius:4px;
  object-fit:cover;
  filter:saturate(.6) brightness(.83)
}
.task-card>small {
  display:block;
  margin-top:8px;
  font-size:9px;
  color:var(--muted)
}
.project-handoff {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  margin-top:22px;
  color:#9bb8b0
}
.project-handoff>.icon {
  width:15px;
  color:var(--gold)
}
.project-handoff a {
  margin-left:auto;
  color:var(--gold);
  white-space:nowrap;
  display:flex;
  gap:7px;
  align-items:center
}
.project-handoff a .icon {
  width:14px
}

/* Task workbench */
.task-shell {
  display:grid;
  grid-template-columns:200px minmax(0,1fr) 266px;
  gap:0;
  min-height:calc(100vh - 128px)
}
.task-nav {
  border-right:1px solid var(--line);
  padding:26px 16px 26px 22px;
  background:rgba(11,32,39,.4)
}
.back-link {
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:11px;
  margin-bottom:32px
}
.back-link .icon {
  width:13px
}
.nav-project-label {
  font:10px Georgia,serif;
  letter-spacing:2px;
  color:var(--gold);
  margin-bottom:6px
}
.task-nav h2 {
  font:25px var(--serif);
  color:var(--paper);
  letter-spacing:2px
}
.task-nav>p {
  font-size:10px;
  margin-top:7px;
  margin-bottom:25px
}
.task-nav-item {
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:13px 9px;
  border:1px solid transparent;
  border-radius:6px;
  margin-bottom:7px;
  color:#90a6a6
}
.task-nav-item>span {
  font:13px Georgia,serif;
  margin-top:3px;
  color:#617e82;
  flex:none
}
.task-nav-item b {
  font-size:11px;
  font-weight:400;
  line-height:1.7
}
.task-nav-item.active {
  border-color:rgba(212,184,125,.35);
  background:linear-gradient(90deg,rgba(221,188,122,.1),rgba(221,188,122,.01));
  color:var(--paper)
}
.task-nav-item.active>span {
  color:var(--gold)
}
.task-nav-item:hover {
  background:rgba(255,255,255,.025)
}
.task-nav-item>.icon {
  width:13px;
  height:13px;
  color:var(--teal);
  margin-top:3px;
  margin-left:auto
}
.nav-bottom {
  border-top:1px solid var(--line);
  margin-top:36px;
  padding-top:20px
}
.nav-bottom small {
  display:block;
  font-size:10px;
  color:#637e81;
  line-height:1.9;
  margin-top:12px
}
.task-content {
  min-width:0;
  padding:27px 25px 0
}
.work-title h1 {
  font-family:var(--serif);
  font-size:27px;
  color:var(--paper);
  letter-spacing:1px;
  margin-top:6px
}
.work-title>p {
  font-size:11px;
  line-height:1.8;
  margin-top:9px;
  max-width:900px
}
.evidence-steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  margin:21px 0 20px;
  padding:11px 0;
  gap:12px
}
.evidence-steps button {
  display:flex;
  align-items:center;
  gap:7px;
  color:#afc3ba;
  font-size:10px;
  padding:0
}
.evidence-steps button i {
  font:12px Georgia,serif;
  color:var(--gold)
}
.evidence-steps .icon {
  width:12px;
  margin-left:auto;
  color:#4c6a72
}
.evidence-steps button:hover {
  color:var(--gold)
}
.lab {
  min-width:0;
  padding:20px;
  border-radius:9px;
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(22,48,55,.65),rgba(12,32,40,.6));
  overflow:hidden
}
.lab-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:20px
}
.lab-heading h2 {
  font-family:var(--serif);
  font-size:21px;
  letter-spacing:.5px;
  margin-top:5px;
  color:var(--paper)
}
.lab-heading .eyebrow {
  font-size:9px
}
.lab-heading>.pill {
  font-size:9px
}
.ai-sidebar {
  padding:25px 17px;
  border-left:1px solid var(--line);
  background:rgba(16,40,46,.42);
  min-width:0
}
.ai-sidebar-head {
  display:flex;
  align-items:center;
  gap:9px;
  padding:4px 0 18px;
  border-bottom:1px solid var(--line)
}
.ai-symbol {
  width:32px;
  height:32px;
  background:rgba(137,189,169,.1);
  border:1px solid rgba(137,189,169,.3);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--teal)
}
.ai-sidebar-head h2 {
  font-size:12px;
  color:#c8ddd0
}
.ai-sidebar-head span {
  display:block;
  font-size:8px;
  color:#6e9393;
  letter-spacing:1px;
  margin-top:3px
}
.status-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--teal);
  margin-left:auto
}
.ai-panel {
  padding:20px 0;
  border-bottom:1px solid var(--line)
}
.ai-panel p {
  font-size:11px;
  line-height:1.95;
  margin:11px 0 15px
}
.ai-panel .btn {
  font-size:10px;
  min-height:35px;
  padding:8px 9px
}
.ai-response {
  display:none;
  margin-top:13px;
  background:rgba(128,184,161,.05);
  padding:11px;
  border-left:2px solid var(--teal)
}
.ai-response.show {
  display:block;
  animation:appear .3s
}
.ai-response small {
  font-size:8px;
  color:var(--teal)
}
.ai-response p {
  font-size:10px;
  margin:6px 0 0
}
.ai-panel.student label {
  font-size:10px;
  color:#839f9c;
  display:block;
  margin-bottom:7px
}
.ai-panel textarea {
  height:90px;
  min-height:70px;
  resize:vertical;
  width:100%;
  font-size:11px;
  background:#0c2027;
  border:1px solid var(--line);
  border-radius:5px;
  padding:10px;
  color:var(--paper);
  margin-bottom:10px
}
.ai-panel textarea::placeholder {
  color:#526e74
}
.ai-panel.student>.btn {
  width:100%
}
.ai-panel.integrity {
  border-bottom:0
}
.ai-panel.integrity .panel-label {
  color:#9abaac
}
.task-actionbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:16px -4px 0;
  padding:0 0 10px
}
.task-actionbar>span {
  font-size:9px;
  color:#658086;
  text-align:center
}
.task-actionbar b {
  font-weight:400;
  color:#9db6af
}
.task-actionbar .btn {
  font-size:10px;
  min-height:33px;
  padding:7px 10px
}
.result-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:19px;
  padding-top:16px;
  border-top:1px solid var(--line)
}
.result-strip>span {
  font-size:10px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap
}
.result-strip>span>b {
  color:var(--gold)
}
.result-strip .btn {
  font-size:10px;
  min-height:34px;
  padding:8px 12px
}
.result-strip .button-row {
  gap:7px
}
.result-strip .icon {
  width:15px
}
.small-heading {
  font-size:12px;
  color:#c9d7cc;
  margin:18px 0 12px
}
.small-heading>span {
  font-size:9px;
  color:var(--muted);
  font-weight:400;
  margin-left:9px
}
.section-label {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--paper);
  margin:6px 0 12px
}
.section-label span {
  font-size:9px;
  color:var(--muted)
}
.metrics-grid {
  display:grid;
  gap:15px;
  margin:18px 0;
  border:1px solid var(--line);
  border-radius:7px;
  padding:14px
}
.metrics-grid.four {
  grid-template-columns:repeat(4,1fr)
}
.metrics-grid.three {
  grid-template-columns:repeat(3,1fr)
}
.metrics-grid.two {
  grid-template-columns:repeat(2,1fr)
}
.metric {
  border-right:1px solid var(--line);
  padding-right:8px
}
.metric:last-child {
  border-right:0
}
.metric>strong {
  font:30px Georgia,serif;
  color:var(--gold);
  letter-spacing:0
}
.metric .unit {
  font-size:10px;
  margin-left:5px;
  color:#809994
}
.metric>small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:5px
}
.segmented {
  display:flex;
  padding:4px;
  border:1px solid var(--line);
  background:#0c2229;
  border-radius:7px;
  margin-bottom:18px;
  gap:3px
}
.segmented button {
  padding:8px 13px;
  border-radius:4px;
  font-size:11px;
  display:flex;
  gap:7px;
  align-items:center;
  justify-content:center;
  flex:1;
  color:var(--muted)
}
.segmented button.active {
  background:#284039;
  color:#dbe5cf;
  box-shadow:0 1px 4px rgba(0,0,0,.1)
}
.segmented .icon {
  width:15px;
  height:15px
}
.check-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px
}
.check-card {
  display:flex;
  gap:9px;
  padding:11px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  align-items:flex-start;
  text-align:left;
  width:100%;
  transition:all .2s;
  background:rgba(255,255,255,.013)
}
.check-card b {
  font-size:11px;
  line-height:1.6;
  font-weight:400;
  color:#afc4bf
}
.check-card small {
  display:block;
  font-size:9px;
  color:#6d8d8d;
  margin-top:3px;
  line-height:1.6
}
.checkbox {
  width:15px;
  height:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #426064;
  border-radius:3px;
  margin-top:2px;
  flex:none
}
.checkbox .icon {
  width:12px;
  height:12px
}
.check-card.checked {
  border-color:rgba(136,184,161,.5);
  background:rgba(135,184,159,.08)
}
.check-card.checked .checkbox {
  background:var(--teal);
  color:var(--bg);
  border-color:var(--teal)
}
.check-card.checked b {
  color:#d0e3d3
}
.check-card:hover {
  border-color:var(--gold-dim)
}
input:not([type=range]):not([type=checkbox]),textarea,select {
  background:#0b2027;
  border:1px solid var(--line-strong);
  border-radius:5px;
  color:var(--paper);
  padding:9px 11px;
  max-width:100%;
  font-size:12px
}
input[type=range] {
  width:100%;
  height:4px;
  accent-color:var(--gold);
  cursor:pointer;
  margin:15px 0
}
input[type=checkbox] {
  accent-color:var(--gold);
  width:15px;
  height:15px
}
.field-label {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-bottom:7px
}

/* Product tasks */
.demand-layout {
  display:grid;
  grid-template-columns:1fr 1.06fr;
  gap:22px
}
.paper-brief {
  background:var(--paper);
  border-radius:5px;
  color:#2b413c;
  padding:23px;
  position:relative;
  box-shadow:0 10px 30px rgba(0,0,0,.13)
}
.paper-brief .eyebrow {
  color:#92784e;
  font-size:8px
}
.paper-brief h3 {
  font:20px/1.8 var(--serif);
  margin:15px 0 10px
}
.paper-brief>p {
  color:#708072;
  font-size:10px;
  line-height:1.9
}
.stamp-small {
  position:absolute;
  top:17px;
  right:15px;
  color:#9b6e54;
  font-size:8px;
  border:1px solid #bda98c;
  padding:3px 7px;
  transform:rotate(8deg)
}
.brief-quote {
  margin-top:15px;
  border-top:1px solid #cccab8;
  padding-top:12px;
  font-size:11px;
  line-height:1.9;
  color:#445647
}
.brief-quote small {
  display:block;
  font-size:8px;
  color:#929883;
  margin-top:3px
}
.keyword-cloud {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:28px
}
.keyword-cloud span {
  background:rgba(214,187,129,.07);
  color:#c6b185;
  padding:9px 11px;
  font-size:11px;
  border:1px solid rgba(214,187,129,.15);
  border-radius:5px
}
.photo-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.photo-tile {
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden;
  text-align:left;
  padding:0;
  background:#0b242b;
  min-width:0
}
.photo-tile.selected {
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(218,187,124,.1)
}
.photo-thumb {
  height:103px;
  position:relative
}
.photo-thumb img {
  width:100%;
  height:100%;
  object-fit:cover
}
.photo-rank {
  position:absolute;
  top:7px;
  left:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:23px;
  height:23px;
  background:rgba(6,25,31,.83);
  border:1px solid rgba(230,219,180,.3);
  border-radius:4px;
  font:11px Georgia,serif;
  color:var(--paper)
}
.select-dot {
  position:absolute;
  right:8px;
  top:8px;
  width:21px;
  height:21px;
  background:rgba(8,30,34,.8);
  border:1px solid #92a499;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#b6c7b8
}
.select-dot .icon {
  width:13px;
  height:13px
}
.selected .select-dot {
  background:var(--gold);
  border-color:var(--gold);
  color:var(--bg)
}
.photo-info {
  padding:10px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px
}
.photo-info b {
  font-size:11px;
  font-weight:400
}
.photo-info strong {
  font:20px Georgia,serif;
  color:var(--gold)
}
.photo-info strong small {
  font:8px var(--font);
  color:var(--muted);
  margin-left:2px
}
.photo-info p {
  font-size:8px;
  grid-column:1/-1;
  line-height:1.6;
  min-height:26px
}
.designer {
  display:grid;
  grid-template-columns:minmax(0,1fr) 159px;
  gap:19px;
  align-items:start
}
.design-stage {
  background:radial-gradient(ellipse at center,#254247,#142c34);
  min-height:352px;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:28px 19px 42px;
  overflow:hidden
}
.postcard-preview {
  background:var(--paper);
  color:#293b36;
  width:100%;
  aspect-ratio:1.48;
  box-shadow:0 16px 30px rgba(0,0,0,.26);
  position:relative;
  overflow:hidden;
  --card-ink:#304135;
  --card-accent:#968058
}
.postcard-preview.palette-teal {
  background:#e0e9e3;
  --card-ink:#214739;
  --card-accent:#528875
}
.postcard-preview.palette-ink {
  background:#e1e3e0;
  --card-ink:#21323a;
  --card-accent:#668086
}
.postcard-preview .card-overline {
  font-size:6px;
  letter-spacing:1.2px;
  margin:10px 15px;
  color:var(--card-accent)
}
.postcard-preview>img {
  width:calc(100% - 28px);
  margin:0 14px;
  aspect-ratio:2.15;
  object-fit:cover
}
.postcard-type {
  padding:10px 16px;
  color:var(--card-ink)
}
.postcard-type h3 {
  font-family:var(--serif);
  font-weight:500;
  line-height:1.4;
  overflow-wrap:anywhere
}
.postcard-type p {
  font-size:6px;
  color:var(--card-accent);
  margin-top:4px
}
.postcard-type>span {
  display:block;
  font-size:5px;
  color:var(--card-accent);
  margin-top:5px
}
.postcard-preview.layout-full>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover
}
.postcard-preview.layout-full .card-overline {
  position:relative;
  z-index:2;
  color:#fcf1d1
}
.postcard-preview.layout-full .postcard-type {
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  padding:35px 17px 17px;
  background:linear-gradient(0deg,rgba(5,30,35,.93),transparent);
  color:var(--paper)
}
.postcard-preview.layout-full .postcard-type p,.postcard-preview.layout-full .postcard-type>span {
  color:#c5d0b8
}
.postcard-preview.layout-split>img {
  position:absolute;
  left:10px;
  top:10px;
  bottom:10px;
  width:53%;
  height:calc(100% - 20px);
  margin:0;
  aspect-ratio:auto
}
.postcard-preview.layout-split .card-overline {
  position:absolute;
  left:60%;
  top:6px;
  font-size:5px;
  margin:0;
  max-width:36%;
  padding-top:9px
}
.postcard-preview.layout-split .postcard-type {
  position:absolute;
  top:24%;
  left:57%;
  right:0;
  padding:8px
}
.postcard-preview.layout-split .postcard-type h3 {
  font-size:22px!important;
  line-height:1.6
}
.design-scale {
  position:absolute;
  bottom:13px;
  color:#7c999a;
  font-size:8px
}
.design-tools label {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  margin:0 0 9px
}
.design-tools label b {
  color:var(--gold);
  font-size:9px;
  font-weight:400
}
.design-tools>input:not([type=range]) {
  width:100%;
  padding:8px;
  font-size:10px;
  margin-bottom:16px
}
.layout-options {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin-bottom:16px
}
.layout-options button {
  padding:8px 3px;
  border:1px solid var(--line);
  border-radius:4px;
  font-size:8px;
  color:var(--muted);
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:6px
}
.layout-options button.active {
  border-color:var(--gold-dim);
  color:var(--gold)
}
.layout-icon {
  width:30px;
  height:22px;
  border:1px solid currentColor;
  position:relative
}
.layout-icon:after {
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  right:3px;
  height:10px;
  background:currentColor;
  opacity:.5
}
.layout-icon.full:after {
  left:0;
  top:0;
  right:0;
  height:20px
}
.layout-icon.split:after {
  left:2px;
  top:2px;
  width:14px;
  height:16px;
  right:auto
}
.design-tools .btn {
  font-size:9px;
  padding:8px 7px;
  min-height:31px;
  width:100%
}
.palette-options {
  display:flex;
  gap:9px;
  margin-bottom:19px
}
.palette-options button {
  width:27px;
  height:27px;
  border-radius:50%;
  border:2px solid transparent;
  outline:1px solid transparent;
  outline-offset:2px
}
.palette-options .palette-gold {
  background:#d4b574
}
.palette-options .palette-teal {
  background:#7aab91
}
.palette-options .palette-ink {
  background:#718789
}
.palette-options .active {
  outline-color:var(--gold)
}
.postcard-back {
  position:absolute;
  inset:0;
  padding:18px
}
.postal-boxes {
  font-size:17px;
  letter-spacing:2px;
  color:#718073
}
.post-stamp {
  position:absolute;
  top:15px;
  right:15px;
  padding:7px 13px;
  line-height:1.6;
  border:1px solid #b6b49b;
  font-size:9px;
  color:#92947a;
  text-align:center
}
.back-writing {
  position:absolute;
  top:37%;
  left:7%;
  width:46%;
  border-right:1px solid #c3c4ad;
  height:47%
}
.back-writing p {
  font-size:12px;
  font-family:var(--serif);
  color:#51654f
}
.back-writing span {
  display:block;
  font-size:8px;
  color:#8e967d;
  margin-top:9px
}
.postal-lines {
  position:absolute;
  right:6%;
  top:42%;
  width:36%
}
.postal-lines i {
  display:block;
  height:27px;
  border-bottom:1px solid #c3c4ad
}
.postcard-back>small {
  position:absolute;
  bottom:9px;
  left:7%;
  font-size:6px;
  color:#909880
}
.fact-intro {
  display:flex;
  align-items:center;
  gap:17px;
  padding:15px 20px 23px;
  background:linear-gradient(90deg,rgba(218,186,121,.07),transparent);
  border-left:2px solid var(--gold);
  margin-bottom:21px
}
.quote-mark {
  font:68px/1 Georgia,serif;
  height:42px;
  color:var(--gold-dim)
}
.fact-intro p {
  font:19px/1.7 var(--serif);
  color:#c7d3c8
}
.fact-intro b {
  color:var(--paper);
  font-weight:400
}
.claims {
  display:flex;
  flex-direction:column;
  gap:10px
}
.claim {
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden;
  background:#102831
}
.claim.open {
  border-color:rgba(218,190,130,.4)
}
.claim-main {
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
  width:100%;
  text-align:left
}
.claim-number {
  font:13px Georgia,serif;
  color:var(--gold)
}
.claim-main p {
  font-size:11px;
  color:#c6d5ca;
  flex:1
}
.claim-main .icon {
  width:13px;
  color:var(--muted)
}
.fact-detail {
  padding:16px 19px 19px;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.08)
}
.fact-status {
  font-size:11px;
  color:var(--teal);
  display:flex;
  align-items:center;
  gap:6px
}
.fact-status.unsupported {
  color:var(--danger)
}
.fact-detail p {
  font-size:11px;
  margin:11px 0;
  line-height:1.9
}
.fact-detail .button-row {
  margin-top:16px
}
.fact-detail .btn {
  min-height:30px;
  font-size:10px
}
.video-stage {
  position:relative;
  overflow:hidden;
  border-radius:7px;
  border:1px solid var(--line);
  background:var(--bg-deep)
}
.video-stage video {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover
}
.video-caption {
  position:absolute;
  left:26px;
  top:20px;
  pointer-events:none;
  color:#f4efda;
  text-shadow:0 2px 6px #173536
}
.video-caption>span {
  font:8px Georgia,serif;
  letter-spacing:2px
}
.video-caption h3 {
  font:25px var(--serif);
  letter-spacing:2px;
  margin-top:5px
}
.video-timeline {
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 2px;
  color:#90a498;
  font-size:9px
}
.video-timeline i {
  height:1px;
  flex:1;
  background:var(--line-strong)
}
.frame-checks {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px
}

/* Space tasks */
.boundary-scene {
  position:relative;
  border-radius:6px;
  overflow:hidden;
  height:300px
}
.boundary-scene>img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.68) saturate(.65)
}
.boundary-zone {
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  border:1px dashed #ddbe86;
  padding:8px 13px;
  background:rgba(23,36,35,.65);
  font-size:11px;
  color:#e0d5b7
}
.boundary-zone .icon {
  width:14px
}
.boundary-zone.building {
  left:9%;
  top:25%
}
.boundary-zone.water {
  left:68%;
  top:36%
}
.boundary-zone.path {
  left:45%;
  top:76%
}
.boundary-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px
}
.tag-selects {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.tag-selects button {
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line-strong);
  padding:7px 10px;
  border-radius:4px;
  color:var(--muted);
  font-size:10px
}
.tag-selects button .icon {
  width:12px;
  height:12px
}
.tag-selects button.active {
  background:rgba(135,184,162,.15);
  color:var(--teal);
  border-color:var(--teal)
}
.diagnosis-scene {
  height:330px;
  position:relative;
  border-radius:7px;
  overflow:hidden
}
.diagnosis-scene>img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.7) brightness(.65)
}
.sim-ad {
  position:absolute;
  top:19%;
  left:17%;
  background:#bd5761;
  color:white;
  transform:rotate(-3deg);
  padding:15px 17px;
  font-size:13px;
  box-shadow:0 5px 20px rgba(0,0,0,.2);
  border:3px solid #dfa271
}
.sim-ad small {
  display:block;
  font-size:8px;
  margin-top:5px;
  color:#ffe0d3
}
.focus-ring {
  position:absolute;
  border:1px solid;
  outline:12px solid rgba(210,136,106,.12);
  box-shadow:0 0 0 32px rgba(210,136,106,.05);
  border-radius:50%;
  width:140px;
  height:115px;
  transition:all .5s;
  pointer-events:none
}
.focus-ring.ai {
  left:20%;
  top:18%;
  border-color:#e49d77
}
.focus-ring.human {
  left:62%;
  top:28%;
  border-color:var(--teal);
  outline-color:rgba(133,202,175,.12);
  box-shadow:0 0 0 32px rgba(133,202,175,.05)
}
.diagnosis-point {
  position:absolute;
  background:rgba(9,29,36,.87);
  border:1px solid var(--line-strong);
  border-radius:5px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  color:#dbddc2;
  font-size:9px
}
.diagnosis-point .icon {
  width:11px
}
.diagnosis-point.one {
  left:5%;
  top:9%
}
.diagnosis-point.two {
  right:9%;
  top:60%
}
.diagnosis-point.three {
  left:23%;
  bottom:12%
}
.analysis-row {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:17px;
  align-items:center;
  padding:20px 5px 0
}
.analysis-row>div>span {
  font-size:9px;
  color:var(--gold)
}
.analysis-row b {
  display:block;
  font-size:13px;
  margin:5px 0 6px
}
.analysis-row small {
  display:block;
  font-size:9px;
  color:var(--muted)
}
.analysis-row .icon {
  color:var(--gold)
}
.candidate-tabs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin-bottom:16px
}
.candidate-tabs button {
  border:1px solid var(--line);
  border-radius:6px;
  padding:11px;
  text-align:left;
  background:#102831
}
.candidate-tabs button.active {
  border-color:var(--gold-dim);
  background:rgba(205,181,131,.07)
}
.candidate-tabs span {
  font-size:12px;
  color:var(--paper)
}
.candidate-tabs small {
  display:block;
  font-size:9px;
  margin-top:4px;
  color:var(--muted)
}
.candidate-tabs button.active span {
  color:var(--gold)
}
.compare-stage {
  height:350px;
  position:relative;
  overflow:hidden;
  border-radius:6px;
  --split:50%
}
.compare-stage>img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.7)
}
.compare-stage.compare-nature>img {
  filter:saturate(.62) hue-rotate(6deg)
}
.compare-stage.compare-light>img {
  filter:saturate(.3) brightness(1.07)
}
.compare-left {
  position:absolute;
  inset:0;
  background:rgba(30,40,36,.17);
  clip-path:inset(0 calc(100% - var(--split)) 0 0);
  pointer-events:none
}
.intrusive-banner {
  position:absolute;
  left:11%;
  top:18%;
  background:#b6565d;
  border:3px solid #e1b685;
  padding:16px;
  color:#fff3da;
  font-size:14px;
  transform:rotate(-3deg)
}
.intrusive-small {
  position:absolute;
  left:40%;
  top:59%;
  background:#32649d;
  border:2px solid #afd2d9;
  padding:11px 16px;
  font-size:12px;
  color:white
}
.compare-label {
  position:absolute;
  top:13px;
  background:rgba(7,26,30,.8);
  padding:4px 9px;
  border:1px solid rgba(215,214,186,.3);
  border-radius:3px;
  font-size:9px;
  z-index:2
}
.compare-label.before {
  left:12px
}
.compare-label.after {
  right:12px
}
.compare-handle {
  position:absolute;
  left:var(--split);
  top:0;
  bottom:0;
  width:1px;
  background:#e9d194;
  z-index:4;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center
}
.compare-handle:after {
  content:"";
  position:absolute;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--gold)
}
.compare-handle .icon {
  position:relative;
  z-index:1;
  width:15px;
  color:#2d413c
}
.compare-stage input[type=range] {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  margin:0;
  cursor:ew-resize;
  z-index:5
}
.motif-panel {
  position:absolute;
  bottom:25px;
  right:30px;
  background:rgba(14,35,35,.72);
  color:#ead6a8;
  padding:8px 12px;
  font-size:11px;
  letter-spacing:2px;
  border-bottom:1px solid var(--gold)
}
.material-row {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:9px;
  color:var(--muted);
  margin-top:16px;
  flex-wrap:wrap
}
.material-row>span {
  margin-right:auto;
  color:#aec2b8
}
.material {
  display:inline-block;
  width:23px;
  height:23px;
  border-radius:3px;
  border:1px solid rgba(255,255,255,.12);
  margin-left:6px
}
.material.wood {
  background:repeating-linear-gradient(6deg,#7e614b 0,#a1845c 2px,#8e7253 4px)
}
.material.bronze {
  background:linear-gradient(125deg,#7c7857,#b2a273)
}
.material.linen {
  background:repeating-linear-gradient(90deg,#d7d4bb 0,#e7e0c7 1px,#ddd8c2 3px)
}
.layout-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:13px
}
.layout-toolbar>div {
  display:flex;
  gap:7px
}
.layout-toolbar .btn {
  padding:7px 9px;
  font-size:10px;
  min-height:32px
}
.plan-container {
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden
}
.layout-svg {
  width:100%;
  height:auto;
  display:block;
  touch-action:none;
  user-select:none
}
.plan-floor {
  fill:rgba(189,181,143,.045);
  stroke:#68827d;
  stroke-width:1.5
}
.plan-text {
  font:11px var(--font);
  fill:#91b4ad;
  pointer-events:none
}
.plan-route {
  stroke:#7da88d;
  stroke-width:1.5;
  stroke-dasharray:8 7
}
.plan-item {
  cursor:grab;
  outline:none
}
.plan-item:active {
  cursor:grabbing
}
.plan-item rect {
  fill:#77745d;
  stroke:#c5b180;
  stroke-width:1.4
}
.plan-item path {
  stroke:#a79b79;
  stroke-width:2
}
.plan-item text {
  fill:#f7edcf;
  font:12px var(--font);
  pointer-events:none
}
.plan-item.reading rect {
  fill:#315b60;
  stroke:#86b3a9
}
.plan-item.sign rect {
  fill:#496358;
  stroke:#96ae83
}
.plan-item.blocked rect {
  stroke:#efb68a;
  stroke-width:2.6;
  fill:#7e6353
}
.plan-item:focus-visible rect {
  stroke:#fff0c2;
  stroke-width:3
}
.layout-status {
  font-size:11px;
  border-left:2px solid var(--gold);
  background:rgba(198,164,110,.07);
  padding:11px;
  display:flex;
  align-items:center;
  gap:8px;
  color:#ceb68e
}
.layout-status.good {
  border-color:var(--teal);
  color:var(--teal);
  background:rgba(132,178,151,.05)
}
.layout-status .icon {
  width:16px;
  height:16px
}
.review-layout {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:18px
}
.review-image {
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:5px
}
.review-layout .tiny {
  font-size:8px;
  margin-top:5px;
  display:block
}
.review-layout .metrics-grid {
  margin-top:12px;
  margin-bottom:0;
  padding:10px
}
.review-layout .metric>strong {
  font-size:24px
}
.review-checks {
  display:flex;
  flex-direction:column;
  gap:9px
}
.budget-list {
  border:1px solid var(--line);
  border-radius:6px
}
.budget-list label {
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 15px;
  border-bottom:1px solid var(--line);
  font-size:11px
}
.budget-list label:last-child {
  border-bottom:0
}
.budget-list label>span {
  flex:1;
  color:#b1c9bf
}
.budget-list small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:3px
}
.budget-list b {
  font:17px Georgia,serif;
  color:var(--gold)
}
.budget-total {
  font:24px Georgia,serif;
  color:var(--gold)
}

/* Journey tasks */
.profile-hero {
  background:linear-gradient(120deg,#1e393e,#223d39);
  border:1px solid rgba(162,190,157,.2);
  border-radius:7px;
  padding:25px;
  display:flex;
  align-items:center;
  gap:20px
}
.profile-mark {
  width:55px;
  height:55px;
  border:1px solid rgba(207,197,156,.4);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold);
  flex:none
}
.profile-mark .icon {
  width:27px;
  height:27px
}
.profile-hero h3 {
  font:21px var(--serif);
  color:var(--paper);
  margin:6px 0 8px
}
.profile-hero p {
  font-size:10px;
  color:#a6bfb0;
  line-height:1.9
}
.profile-hero .eyebrow {
  font-size:8px
}
.profile-number {
  margin-left:auto;
  font:39px Georgia,serif;
  color:var(--gold);
  white-space:nowrap
}
.profile-number small {
  display:block;
  font:9px var(--font);
  color:var(--muted);
  margin-top:5px
}
.slider-label {
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  color:#b0c6bc;
  font-size:11px
}
.slider-label>span {
  font-size:9px;
  color:var(--muted)
}
.profile-goals {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:15px 0 10px
}
.route-order-list {
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:7px
}
.route-order-item {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:#112a31;
  padding:10px 11px;
  border-radius:6px;
  cursor:grab
}
.route-order-item:active {
  cursor:grabbing
}
.drag-grip {
  color:#476c72;
  font-size:20px
}
.route-order-item>i {
  font:13px Georgia,serif;
  color:var(--gold);
  font-style:normal
}
.route-order-item>div {
  flex:1
}
.route-order-item b {
  font-size:11px;
  color:#c6d9ca
}
.route-order-item small {
  display:block;
  color:#719391;
  font-size:9px;
  margin-top:2px
}
.route-order-item .icon-btn {
  height:25px;
  width:25px
}
.route-order-item .icon {
  width:14px;
  height:14px
}
.rhythm-panel {
  padding:15px 12px;
  border:1px solid var(--line);
  background:radial-gradient(ellipse at center,rgba(35,62,64,.5),#0d242c);
  border-radius:7px
}
.chart-wrap {
  width:100%;
  min-width:0
}
.chart-legend {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:9px;
  color:#aac0b7;
  flex-wrap:wrap;
  padding:0 8px
}
.chart-legend .line {
  display:inline-block;
  width:15px;
  height:2px;
  margin-left:7px
}
.chart-legend .line.gold {
  background:var(--gold)
}
.chart-legend .line.teal {
  background:var(--teal)
}
.chart-scale {
  margin-left:auto;
  color:#5f8587;
  font-size:8px
}
.rhythm-chart {
  width:100%;
  height:auto;
  display:block
}
.grid-line {
  stroke:rgba(161,188,175,.11);
  stroke-dasharray:4 5
}
.axis {
  font:11px var(--font);
  fill:#85a09b
}
.beauty-line {
  stroke:var(--gold);
  stroke-width:2.7;
  fill:none
}
.fatigue-line {
  stroke:var(--teal);
  stroke-width:2.2;
  fill:none;
  opacity:.9
}
.beauty-dot {
  fill:#ebd49b;
  stroke:#7d754d;
  stroke-width:2
}
.rhythm-summary {
  display:flex;
  justify-content:center;
  gap:25px;
  border-top:1px solid var(--line);
  padding-top:10px;
  font-size:9px;
  color:#b0c3a9
}
.rhythm-summary span {
  display:flex;
  gap:6px;
  align-items:center
}
.rhythm-summary .icon {
  width:14px;
  height:14px;
  color:var(--gold)
}
.rhythm-controls {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:25px;
  margin:19px 0 0
}
.rhythm-controls>label {
  display:block;
  font-size:11px;
  color:#b1c9ba
}
.rhythm-controls b {
  float:right;
  color:var(--gold);
  font-size:10px;
  font-weight:400
}
.rhythm-controls .segmented {
  margin-top:9px;
  margin-bottom:6px
}
.rhythm-controls .segmented button {
  padding:6px 9px;
  font-size:10px
}
.mini-node-row {
  display:flex;
  gap:8px;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:14px
}
.mini-node-row span {
  font-size:10px;
  color:#b4c6b7
}
.mini-node-row small {
  display:block;
  font-size:8px;
  color:var(--muted);
  margin-top:4px
}
.scenario-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:17px
}
.scenario-buttons button {
  border:1px solid var(--line);
  background:rgba(255,255,255,.015);
  padding:10px 11px;
  border-radius:6px;
  color:#99b0a7;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px
}
.scenario-buttons .icon {
  width:15px;
  height:15px
}
.scenario-buttons button.active {
  background:rgba(217,184,116,.1);
  border-color:var(--gold-dim);
  color:var(--gold)
}
.scenario-screen {
  position:relative;
  border-radius:7px;
  overflow:hidden
}
.scenario-screen .route-scene.compact {
  height:320px
}
.scenario-overlay {
  position:absolute;
  bottom:28px;
  left:20px;
  background:rgba(9,29,34,.88);
  backdrop-filter:blur(8px);
  border:1px solid var(--line-strong);
  padding:13px 18px;
  width:290px;
  max-width:70%;
  border-radius:6px
}
.scenario-overlay>span {
  font-size:9px;
  color:var(--gold)
}
.scenario-overlay h3 {
  font:18px var(--serif);
  margin:4px 0 7px
}
.scenario-overlay p {
  font-size:9px;
  line-height:1.9;
  color:#a4b8a8
}
.scenario-actions {
  margin-top:14px
}
.scenario-actions .btn {
  font-size:10px
}
.calibration-table {
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden
}
.calibration-row {
  display:grid;
  grid-template-columns:1.1fr .7fr 1.2fr .4fr;
  align-items:center;
  gap:10px;
  padding:13px;
  border-bottom:1px solid var(--line);
  font-size:11px;
  color:#adbfaf
}
.calibration-row:last-child {
  border-bottom:0
}
.calibration-row.table-head {
  background:#203b3d;
  color:var(--gold);
  font-size:10px
}
.calibration-row>b {
  font-size:11px;
  font-weight:400;
  color:#c7d8c8
}
.calibration-row label {
  font-size:9px;
  display:flex;
  align-items:center;
  gap:4px
}
.calibration-row input {
  width:65px;
  padding:5px 7px!important;
  font:14px Georgia,serif!important;
  color:var(--paper)
}
.diff-positive {
  color:#dfb088;
  font:18px Georgia,serif
}
.diff-negative {
  color:var(--teal);
  font:18px Georgia,serif
}
.calibration-conclusion {
  display:flex;
  align-items:center;
  gap:18px;
  padding:20px;
  margin-top:15px;
  background:rgba(213,183,122,.05);
  border:1px solid rgba(213,183,122,.14);
  border-radius:7px
}
.calibration-conclusion>span {
  font-size:10px;
  color:var(--muted)
}
.calibration-conclusion>b {
  font:33px Georgia,serif;
  color:var(--gold);
  white-space:nowrap
}
.calibration-conclusion small {
  font:9px var(--font);
  margin-left:5px;
  color:var(--muted)
}
.calibration-conclusion p {
  font-size:10px;
  line-height:1.8;
  flex:1
}
.pending-status {
  color:var(--gold)!important
}

/* Gallery, sources, mobile postcard */
.gallery-heading {
  margin:10px 0 26px
}
.gallery-heading h1,.source-page>h1 {
  font:35px/1.6 var(--serif);
  color:var(--paper);
  letter-spacing:1px
}
.gallery-heading h1>span,.source-page>h1>span {
  color:var(--gold)
}
.gallery-heading p {
  margin-top:9px;
  font-size:12px
}
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}
.gallery-card {
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:9px;
  overflow:hidden
}
.gallery-image {
  height:210px;
  position:relative
}
.gallery-image>img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.75) brightness(.8)
}
.gallery-image>.pill {
  position:absolute;
  bottom:13px;
  left:14px;
  background:#132c32
}
.gallery-copy {
  padding:22px
}
.gallery-copy h2 {
  font:25px var(--serif);
  margin:5px 0 10px
}
.gallery-copy p {
  font-size:11px;
  margin-bottom:18px
}
.gallery-copy .btn {
  font-size:10px
}
.export-panel {
  margin:24px 0;
  background:linear-gradient(120deg,#213b3b,#122b31);
  border:1px solid rgba(185,178,134,.25);
  padding:25px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px
}
.export-panel h2 {
  font:21px var(--serif);
  color:var(--paper);
  margin-bottom:8px
}
.export-panel p {
  font-size:11px
}
.outcome-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}
.outcome-list a {
  display:flex;
  align-items:center;
  gap:9px;
  padding:15px 12px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--panel)
}
.outcome-list a>span {
  font:11px Georgia,serif;
  color:var(--gold)
}
.outcome-list b {
  font-size:10px;
  font-weight:400
}
.outcome-list small {
  font-size:8px;
  color:var(--muted);
  margin-left:auto
}
.outcome-list .icon {
  width:12px;
  height:12px;
  color:var(--gold)
}
.outcome-list a:hover {
  border-color:var(--gold-dim)
}
.source-page {
  max-width:1100px;
  margin:auto
}
.source-page .lead {
  font-size:13px;
  margin:14px 0 20px;
  line-height:1.9
}
.source-list {
  margin:22px 0;
  display:grid;
  gap:13px
}
.source-list article {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px 24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel)
}
.source-list h2 {
  font-size:16px;
  margin:8px 0 5px
}
.source-list article>div>span:not(.pill) {
  font-size:10px;
  color:var(--gold-dim)
}
.source-list p {
  font-size:11px;
  line-height:1.9;
  margin-top:9px;
  max-width:850px
}
.facts-summary {
  border-top:1px solid var(--line);
  padding-top:21px
}
.facts-summary h2 {
  font-size:17px
}
.facts-summary p {
  font-size:12px;
  line-height:1.9;
  margin-top:11px
}
.postcard-page {
  min-height:100vh;
  background:radial-gradient(ellipse at 50% 0%,#26453d,#0a1b20);
  padding:29px 18px 40px;
  position:relative
}
.postcard-brand {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font:23px var(--serif);
  color:var(--paper);
  letter-spacing:3px
}
.postcard-brand .brand-mark {
  width:32px;
  height:32px
}
.postcard-demo-label {
  display:block;
  text-align:center;
  margin:10px auto 24px;
  color:#7da196;
  font-size:10px;
  letter-spacing:2px
}
.mobile-postcard {
  max-width:620px;
  margin:auto;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 28px 70px rgba(0,0,0,.25);
  border:1px solid rgba(230,222,188,.22)
}
.mobile-media {
  position:relative
}
.mobile-media video {
  width:100%;
  aspect-ratio:1.4;
  object-fit:cover
}
.mobile-media-title {
  position:absolute;
  left:30px;
  top:28px;
  color:#fff4d6;
  pointer-events:none;
  text-shadow:0 2px 8px #1e3d42
}
.mobile-media-title small {
  font:9px Georgia,serif;
  letter-spacing:3px
}
.mobile-media-title h1 {
  font:37px/1.5 var(--serif);
  letter-spacing:6px;
  margin-top:11px
}
.postcard-letter {
  background:var(--paper);
  color:#234139;
  padding:32px;
  position:relative
}
.postcard-letter .eyebrow {
  color:#8f8058;
  font-size:8px
}
.postcard-letter h2 {
  font:22px/1.8 var(--serif);
  margin:10px 55px 10px 0
}
.postcard-letter p {
  font-size:12px;
  color:#6d7a65;
  line-height:2;
  max-width:480px
}
.postcard-letter>small {
  font-size:9px;
  color:#8e937f;
  margin-top:24px;
  line-height:1.8;
  display:block
}
.postcard-letter .button-row {
  margin-top:23px
}
.postcard-letter .btn.secondary {
  color:#425a48;
  border-color:#b4bca7
}
.postcard-seal {
  position:absolute;
  right:28px;
  top:32px;
  border:1px solid #a68b6c;
  padding:6px 10px;
  color:#997250;
  transform:rotate(5deg);
  font:14px/1.5 var(--serif)
}
.postcard-footnote {
  text-align:center;
  font-size:10px;
  margin:21px 0 14px;
  color:#78968b;
  line-height:1.8
}
#postcard-footer {
  text-align:center;
  color:#536e65;
  font-size:9px
}

/* Dialogs / exports */
.modal {
  background:#10272e;
  color:var(--text);
  border:1px solid rgba(185,211,201,.24);
  border-radius:12px;
  width:min(660px,calc(100vw - 36px));
  max-width:920px;
  max-height:90vh;
  padding:0;
  overflow:hidden;
  box-shadow:0 30px 100px rgba(0,0,0,.6)
}
.modal.wide {
  width:min(930px,calc(100vw - 36px))
}
.modal::backdrop {
  background:rgba(2,12,17,.8);
  backdrop-filter:blur(7px)
}
.modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 25px 18px;
  border-bottom:1px solid var(--line);
  gap:20px
}
.modal-header h2 {
  font:23px/1.5 var(--serif);
  color:var(--paper);
  margin-top:3px
}
.modal-header .eyebrow {
  font-size:8px
}
.modal-body {
  padding:22px 25px;
  max-height:calc(90vh - 112px);
  overflow:auto
}
.modal-lead {
  font-size:13px;
  line-height:2;
  margin-bottom:19px;
  color:#b3c9bb
}
.modal-body>.button-row {
  margin-top:20px
}
.about-grid h3 {
  font-size:14px;
  color:var(--gold);
  margin:15px 0 7px
}
.about-grid h3:first-child {
  margin-top:0
}
.about-grid p {
  font-size:12px;
  line-height:1.9
}
.report-preview {
  max-height:430px;
  overflow:auto;
  background:#0a1d24;
  border:1px solid var(--line);
  padding:20px;
  border-radius:7px;
  font:11px/1.9 var(--font);
  color:#b2c6b8;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.evidence-list {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px
}
.evidence-list article {
  background:#0d2229;
  border:1px solid var(--line);
  border-radius:7px;
  padding:17px
}
.evidence-list article.highlight {
  border-color:var(--gold)
}
.evidence-list article>span {
  font:9px Georgia,serif;
  color:var(--gold);
  letter-spacing:1px
}
.evidence-list h3 {
  font-size:14px;
  margin:9px 0
}
.evidence-list p {
  font-size:11px;
  line-height:1.95
}
.log-list {
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 14px
}
.log-list>div {
  padding:7px 0;
  border-bottom:1px solid var(--line);
  font-size:10px;
  color:#b5c9b9
}
.log-list>div:last-child {
  border-bottom:0
}
.log-list time {
  font:10px Georgia,serif;
  color:var(--gold);
  margin-right:14px
}
.reference-image {
  width:100%;
  border-radius:5px;
  margin-top:16px
}
.qr-guide {
  border-top:1px solid var(--line);
  font-size:10px;
  color:var(--muted);
  line-height:1.9;
  margin-top:19px;
  padding-top:15px
}
#share-base {
  width:100%
}
.qr-result {
  margin-top:21px;
  display:flex;
  gap:23px;
  align-items:center;
  background:#0b2027;
  border:1px solid var(--line);
  padding:18px;
  border-radius:7px
}
.qr-result>svg {
  width:175px;
  height:175px;
  flex:none;
  border-radius:3px
}
.qr-result h3 {
  font:19px var(--serif);
  color:var(--paper);
  margin-bottom:10px
}
.qr-result p {
  font-size:10px;
  overflow-wrap:anywhere;
  color:#8daf9e;
  line-height:1.8
}
.qr-result .btn {
  margin-top:12px;
  font-size:10px;
  min-height:30px
}
.qr-result small {
  display:block;
  color:#66867e;
  font-size:9px;
  margin-top:10px;
  line-height:1.8
}
#toast {
  position:fixed;
  left:50%;
  bottom:25px;
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  background:#d6c696;
  color:#233f34;
  border:1px solid #e5d8ae;
  border-radius:7px;
  padding:11px 20px;
  max-width:85vw;
  font-size:12px;
  line-height:1.7;
  z-index:9999;
  box-shadow:0 6px 35px rgba(0,0,0,.3);
  transition:all .25s;
  text-align:center
}
#toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.empty-page {
  text-align:center;
  padding:100px 25px
}
.empty-page h1 {
  font-family:var(--serif);
  color:var(--gold)
}
.empty-page p {
  margin:15px 0 28px
}
.spin {
  animation:rotate 2s linear infinite
}
@keyframes rotate {
  to {
    transform:rotate(360deg)
  }
  
}
@keyframes flow {
  to {
    stroke-dashoffset:-200
  }
  
}
@keyframes appear {
  from {
    opacity:0;
    transform:translateY(5px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
  
}

/* Wide / compact / mobile */
@media(min-width:1650px) {
  .home-hero {
    height:435px
  }
  .hero-copy {
    padding:50px 60px
  }
  .hero-copy h1 {
    font-size:49px
  }
  .project-cover {
    height:185px
  }
  .task-shell {
    grid-template-columns:226px minmax(0,1fr) 286px
  }
  .task-content {
    padding-left:34px;
    padding-right:34px
  }
  .task-nav {
    padding-left:29px
  }
  .lab {
    padding:25px
  }
  .work-title h1 {
    font-size:31px
  }
  .project-workspace {
    grid-template-columns:235px minmax(0,1fr) 225px
  }
  .product-stage,.space-stage {
    min-height:488px
  }
  .floating-postcards {
    height:390px
  }
  .postcard-large>img {
    height:175px
  }
  .project-side h2 {
    font-size:23px
  }
  .route-scene.compact {
    height:295px
  }
  
}

@media(max-width:1250px) {
  .topbar {
    gap:20px;
    padding:0 22px
  }
  .brand {
    min-width:216px
  }
  .topbar nav {
    gap:18px
  }
  .top-actions {
    gap:5px
  }
  .task-shell {
    grid-template-columns:171px minmax(0,1fr) 224px
  }
  .task-nav {
    padding-left:14px;
    padding-right:11px
  }
  .task-content {
    padding:23px 17px 0
  }
  .ai-sidebar {
    padding:21px 13px
  }
  .lab {
    padding:16px
  }
  .lab-heading h2 {
    font-size:19px
  }
  .lab-heading>.pill {
    max-width:110px;
    white-space:normal;
    font-size:8px
  }
  .project-workspace {
    grid-template-columns:187px minmax(0,1fr) 176px
  }
  .project-side {
    padding:20px 16px
  }
  .project-side.right {
    padding:20px 14px
  }
  .project-side h2 {
    font-size:18px
  }
  .project-heading h1 {
    font-size:30px
  }
  .project-heading h1>span {
    font-size:17px
  }
  .designer {
    grid-template-columns:minmax(0,1fr) 136px;
    gap:13px
  }
  .design-stage {
    padding-left:13px;
    padding-right:13px;
    min-height:316px
  }
  .design-tools .layout-options {
    gap:3px
  }
  .postcard-type h3 {
    font-size:22px!important
  }
  .profile-hero {
    padding:20px 15px;
    gap:12px
  }
  .profile-mark {
    width:44px;
    height:44px
  }
  .profile-hero h3 {
    font-size:18px
  }
  .chain-banner>div {
    gap:7px
  }
  .chain-banner {
    font-size:10px
  }
  .demand-layout {
    gap:16px
  }
  .paper-brief {
    padding:18px
  }
  .paper-brief h3 {
    font-size:18px
  }
  
}

@media(max-width:1020px) {
  .topbar {
    height:auto;
    min-height:72px;
    flex-wrap:wrap;
    padding:13px 20px 0;
    gap:0
  }
  .brand {
    margin-right:auto
  }
  .brand b {
    font-size:22px
  }
  .brand small {
    font-size:8px
  }
  .brand-mark {
    width:36px;
    height:36px
  }
  .topbar nav {
    order:3;
    height:42px;
    width:100%;
    justify-content:center;
    gap:34px;
    margin-top:9px
  }
  .nav-link {
    font-size:12px
  }
  .top-actions {
    gap:9px
  }
  .tourbar {
    top:118px;
    padding:8px 20px
  }
  .tourbar>p {
    display:none
  }
  .home-hero {
    height:370px;
    margin:18px 20px 0
  }
  .hero-copy {
    padding:38px 31px
  }
  .hero-copy h1 {
    font-size:38px
  }
  .course-intro {
    margin:27px 22px 16px
  }
  .course-intro h2 {
    font-size:18px
  }
  .course-counts {
    gap:16px
  }
  .course-counts b {
    font-size:24px
  }
  .project-grid {
    margin:0 22px;
    gap:14px
  }
  .project-cover {
    height:145px
  }
  .project-card-body {
    padding:13px 16px
  }
  .project-card h3 {
    font-size:23px
  }
  .project-ai {
    font-size:9px
  }
  .mini-card {
    width:130px;
    right:15px;
    top:25px
  }
  .mini-card img {
    height:56px
  }
  .chain-banner {
    margin:20px 22px 0;
    flex-direction:column;
    gap:13px;
    align-items:flex-start
  }
  .chain-banner>div {
    gap:13px
  }
  .task-shell {
    grid-template-columns:160px minmax(0,1fr);
    grid-template-areas:"nav content" "nav ai"
  }
  .task-nav {
    grid-area:nav
  }
  .task-content {
    grid-area:content;
    padding-right:22px
  }
  .ai-sidebar {
    grid-area:ai;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    border-left:0;
    border-top:1px solid var(--line);
    margin:25px 22px 0 17px;
    padding:18px 0;
    background:none
  }
  .ai-sidebar-head {
    grid-column:1/-1;
    padding:0 0 13px
  }
  .ai-panel {
    padding:0;
    border-bottom:0
  }
  .ai-panel.integrity {
    grid-column:1/-1;
    padding-top:16px;
    border-top:1px solid var(--line)
  }
  .ai-panel.integrity p {
    max-width:800px;
    margin-bottom:8px
  }
  .ai-panel.integrity .btn {
    float:right
  }
  .project-workspace {
    grid-template-columns:170px minmax(0,1fr)
  }
  .project-side.right {
    display:none
  }
  .project-heading h1>span {
    font-size:17px
  }
  .project-heading .button-row .btn {
    font-size:10px;
    padding:8px 10px
  }
  .page-wrap {
    padding:22px
  }
  .project-side p {
    font-size:10px
  }
  .section-heading>span {
    font-size:9px
  }
  .task-card {
    padding:10px
  }
  .task-card h3 {
    font-size:10px;
    min-height:32px
  }
  .task-card img {
    height:65px
  }
  .task-card>small {
    font-size:8px
  }
  .project-handoff {
    font-size:10px
  }
  .gallery-grid {
    gap:14px
  }
  .gallery-copy {
    padding:17px
  }
  .gallery-image {
    height:170px
  }
  .gallery-copy .btn {
    font-size:9px;
    padding:7px
  }
  .outcome-list {
    grid-template-columns:repeat(2,1fr)
  }
  .export-panel {
    flex-wrap:wrap
  }
  .footer {
    padding:18px 22px;
    gap:15px
  }
  .footer>span:nth-child(2) {
    display:none
  }
  .calibration-row {
    gap:7px;
    font-size:10px
  }
  .calibration-row input {
    width:58px
  }
  .demand-layout {
    grid-template-columns:1fr 1.1fr
  }
  .designer {
    grid-template-columns:minmax(0,1fr) 157px
  }
  
}

@media(max-width:720px) {
  .topbar {
    padding:12px 15px 0;
    min-height:66px
  }
  .brand {
    min-width:0;
    gap:9px
  }
  .brand b {
    font-size:21px
  }
  .brand-mark {
    width:32px;
    height:32px
  }
  .brand small {
    font-size:7px;
    letter-spacing:1px
  }
  .demo-badge {
    font-size:8px;
    padding:4px 7px
  }
  .top-actions {
    gap:4px
  }
  .top-actions>.icon-btn {
    width:28px;
    height:28px
  }
  .topbar nav {
    justify-content:space-between;
    gap:0;
    height:40px;
    margin-top:7px;
    overflow-x:auto;
    scrollbar-width:none
  }
  .nav-link {
    font-size:11px;
    padding:0 6px
  }
  .tourbar {
    top:108px;
    padding:7px 12px
  }
  .tourbar .btn {
    font-size:9px;
    padding:5px 7px
  }
  .tourbar>span {
    font-size:10px
  }
  .home-hero {
    margin:13px 13px 0;
    height:450px;
    border-radius:9px
  }
  .hero-photo {
    width:100%;
    object-position:63% center
  }
  .hero-overlay {
    background:linear-gradient(90deg,rgba(12,34,40,.91),rgba(12,34,40,.7) 45%,rgba(12,34,40,.25)),linear-gradient(0deg,rgba(12,32,39,.9),transparent 70%)
  }
  .hero-copy {
    padding:36px 24px
  }
  .hero-copy .eyebrow {
    font-size:8px;
    letter-spacing:1px
  }
  .hero-copy h1 {
    font-size:34px;
    line-height:1.5;
    margin-top:21px
  }
  .hero-copy p {
    font-size:11px;
    line-height:2;
    margin-top:22px;
    margin-bottom:26px
  }
  .hero-tags {
    margin-top:20px
  }
  .geo-stamp {
    top:auto;
    bottom:23px;
    right:19px;
    font-size:9px;
    max-width:140px
  }
  .geo-stamp small {
    font-size:7px
  }
  .hero-credit {
    bottom:7px;
    right:13px;
    font-size:7px
  }
  .course-intro {
    margin:25px 17px 17px;
    align-items:flex-start;
    flex-direction:column;
    gap:14px
  }
  .course-intro .eyebrow {
    font-size:8px;
    letter-spacing:1.5px
  }
  .course-intro h2 {
    font-size:18px;
    line-height:1.7
  }
  .course-counts {
    width:100%;
    justify-content:space-between;
    border-top:1px solid var(--line);
    padding-top:12px;
    font-size:10px
  }
  .course-counts b {
    font-size:24px
  }
  .project-grid {
    grid-template-columns:1fr;
    margin:0 15px;
    gap:17px
  }
  .project-cover {
    height:195px
  }
  .mini-card {
    width:175px;
    right:35px;
    top:20px
  }
  .mini-card img {
    height:85px
  }
  .project-card-body {
    padding:17px 20px
  }
  .project-card h3 {
    font-size:27px
  }
  .project-card p {
    font-size:12px
  }
  .project-ai {
    font-size:10px
  }
  .chain-banner {
    margin:21px 15px 0;
    line-height:2;
    font-size:10px;
    padding:15px
  }
  .chain-banner>div {
    width:100%;
    gap:6px;
    font-size:8px;
    justify-content:space-between
  }
  .chain-banner>div .icon {
    width:9px
  }
  .chain-banner i {
    font-size:9px;
    margin-right:4px
  }
  .footer {
    margin-top:24px;
    padding:16px;
    font-size:8px;
    gap:10px
  }
  .footer>span {
    max-width:230px;
    flex-wrap:wrap;
    gap:4px
  }
  .footer button {
    font-size:8px;
    white-space:nowrap
  }
  .page-wrap {
    padding:20px 15px 0
  }
  .breadcrumb {
    font-size:9px;
    margin-bottom:14px
  }
  .project-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
    margin-bottom:18px
  }
  .project-heading .eyebrow {
    font-size:8px
  }
  .project-heading h1 {
    font-size:31px
  }
  .project-heading h1>span {
    display:block;
    font-size:16px;
    margin-top:5px;
    color:#9db7ac
  }
  .project-heading .button-row {
    width:100%;
    justify-content:flex-end
  }
  .project-workspace {
    display:flex;
    flex-direction:column;
    border-radius:8px
  }
  .project-side {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:19px
  }
  .project-side h2 {
    font-size:22px;
    line-height:1.6;
    margin:10px 0
  }
  .project-side h2 br {
    display:none
  }
  .project-side p {
    font-size:11px
  }
  .project-side .side-divider,.project-side .deliverable,.project-side .audience-label,.project-side .side-divider+.panel-label {
    display:none
  }
  .product-stage {
    min-height:350px
  }
  .floating-postcards {
    height:280px;
    padding-top:0
  }
  .postcard-large {
    width:62%;
    padding:11px;
    transform:rotate(-5deg)
  }
  .postcard-large>img {
    height:112px
  }
  .postcard-large h3 {
    font-size:14px;
    margin:11px 0 4px
  }
  .postcard-large small {
    font-size:6px
  }
  .postcard-label {
    font-size:6px;
    letter-spacing:1px;
    margin-bottom:7px
  }
  .postcard-small {
    padding:6px;
    width:27%
  }
  .postcard-small>img {
    height:82px
  }
  .postcard-small p {
    font-size:8px
  }
  .postcard-small.left {
    top:125px;
    left:4%
  }
  .postcard-small.right {
    top:49px;
    right:4%
  }
  .stage-bottom {
    left:14px;
    right:14px;
    bottom:35px;
    font-size:8px;
    gap:10px
  }
  .stage-bottom .btn {
    font-size:9px;
    padding:6px 9px;
    min-height:30px
  }
  .scene-label {
    font-size:7px;
    left:9px;
    bottom:8px
  }
  .space-stage {
    height:360px;
    min-height:360px
  }
  .space-stage>img {
    object-position:40% center
  }
  .concept-tag {
    font-size:7px;
    padding:4px 6px
  }
  .scene-hotspot {
    font-size:8px;
    padding:4px 6px;
    gap:4px
  }
  .scene-hotspot .icon {
    width:11px;
    height:11px
  }
  .space-stage .scene-hotspot:nth-of-type(3) {
    left:60%!important
  }
  .route-scene.compact {
    height:242px
  }
  .route-scene {
    height:280px
  }
  .map-node {
    font-size:8px;
    gap:4px
  }
  .map-node i {
    width:20px;
    height:20px;
    font-size:8px;
    box-shadow:0 0 0 3px rgba(220,191,126,.14)
  }
  .map-node>span {
    padding:2px 4px
  }
  .section-heading {
    margin-top:22px;
    align-items:flex-start;
    gap:9px
  }
  .section-heading h2 {
    font-size:15px;
    white-space:nowrap
  }
  .section-heading>span {
    font-size:8px;
    max-width:160px
  }
  .task-strip {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .task-card {
    padding:11px
  }
  .task-card h3 {
    font-size:11px;
    min-height:34px
  }
  .task-card img {
    height:76px
  }
  .task-card:last-child {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 130px;
    column-gap:10px;
    align-items:center
  }
  .task-card:last-child>div {
    grid-column:1
  }
  .task-card:last-child h3 {
    grid-column:1;
    min-height:0;
    margin:4px 0
  }
  .task-card:last-child img {
    grid-column:2;
    grid-row:1/4;
    height:83px
  }
  .task-card:last-child>small {
    grid-column:1;
    margin-top:0
  }
  .project-handoff {
    flex-wrap:wrap;
    font-size:9px;
    line-height:1.9;
    gap:7px;
    margin-top:18px
  }
  .project-handoff>span {
    flex:1
  }
  .project-handoff a {
    margin-top:4px
  }
  .task-shell {
    display:flex;
    flex-direction:column
  }
  .task-nav {
    padding:16px 14px 0;
    border-right:0;
    border-bottom:1px solid var(--line);
    background:#0e242b
  }
  .back-link {
    margin-bottom:10px;
    font-size:10px
  }
  .task-nav .nav-project-label,.task-nav>h2,.task-nav>p,.task-nav .nav-bottom {
    display:none
  }
  .task-nav>nav {
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding-bottom:12px;
    scrollbar-width:thin
  }
  .task-nav-item {
    padding:8px 9px;
    gap:5px;
    min-width:122px;
    max-width:145px;
    margin:0;
    align-items:center
  }
  .task-nav-item>span {
    font-size:11px;
    margin:0
  }
  .task-nav-item b {
    font-size:9px;
    line-height:1.6
  }
  .task-nav-item>.icon {
    width:10px
  }
  .task-content {
    padding:20px 13px 0
  }
  .work-title h1 {
    font-size:25px;
    margin-top:7px
  }
  .work-title .eyebrow {
    font-size:8px;
    letter-spacing:1px
  }
  .work-title>p {
    font-size:10px;
    line-height:1.9;
    margin-top:10px
  }
  .evidence-steps {
    gap:5px;
    padding:10px 1px;
    margin:16px 0 15px
  }
  .evidence-steps button {
    font-size:8px;
    gap:4px
  }
  .evidence-steps button i {
    font-size:10px
  }
  .evidence-steps .icon {
    width:9px;
    height:9px
  }
  .lab {
    padding:15px 12px;
    border-radius:7px
  }
  .lab-heading {
    gap:10px;
    align-items:flex-start;
    flex-direction:column;
    margin-bottom:16px
  }
  .lab-heading h2 {
    font-size:20px;
    line-height:1.65;
    margin-top:4px
  }
  .lab-heading .eyebrow {
    font-size:8px
  }
  .lab-heading>.pill {
    max-width:none;
    font-size:8px
  }
  .task-actionbar {
    flex-wrap:wrap;
    margin-top:12px
  }
  .task-actionbar>span {
    order:3;
    width:100%;
    text-align:center;
    padding:7px 0 1px
  }
  .ai-sidebar {
    margin:18px 15px 0;
    padding-top:17px;
    grid-template-columns:1fr;
    gap:0
  }
  .ai-sidebar-head {
    grid-column:1
  }
  .ai-panel {
    padding:18px 0;
    border-bottom:1px solid var(--line)
  }
  .ai-panel p {
    font-size:11px;
    margin-bottom:10px
  }
  .ai-panel.student {
    padding-top:18px
  }
  .ai-panel.integrity {
    padding-top:18px
  }
  .ai-panel textarea {
    height:75px
  }
  .ai-panel .btn {
    width:auto;
    min-width:180px
  }
  .ai-panel.student .btn {
    width:100%
  }
  .demand-layout {
    grid-template-columns:1fr;
    gap:20px
  }
  .paper-brief {
    padding:21px
  }
  .paper-brief h3 {
    font-size:22px
  }
  .paper-brief>p,.brief-quote {
    font-size:11px
  }
  .keyword-cloud {
    margin-bottom:20px
  }
  .check-grid {
    gap:8px
  }
  .check-card {
    padding:10px 8px;
    gap:7px
  }
  .check-card b {
    font-size:10px
  }
  .check-card small {
    font-size:8px
  }
  .result-strip {
    flex-wrap:wrap;
    align-items:center;
    gap:13px;
    margin-top:16px;
    padding-top:14px
  }
  .result-strip>span {
    font-size:9px
  }
  .result-strip>.btn,.result-strip>.button-row {
    margin-left:auto
  }
  .result-strip .btn {
    font-size:9px;
    padding:7px 10px;
    min-height:32px
  }
  .inline-note {
    font-size:9px;
    line-height:1.9;
    padding:9px 10px
  }
  .inline-note .icon {
    width:13px;
    height:13px
  }
  .photo-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px
  }
  .photo-thumb {
    height:95px
  }
  .photo-info {
    padding:9px
  }
  .photo-info b {
    font-size:10px
  }
  .photo-info strong {
    font-size:20px
  }
  .photo-info p {
    font-size:8px;
    min-height:29px
  }
  .segmented {
    margin-bottom:13px
  }
  .segmented button {
    font-size:9px;
    gap:5px;
    padding:7px 8px
  }
  .segmented .icon {
    width:13px
  }
  .designer {
    grid-template-columns:1fr;
    gap:17px
  }
  .design-stage {
    min-height:278px;
    padding:20px 15px 36px
  }
  .postcard-preview .postcard-type h3 {
    font-size:23px!important
  }
  .design-tools {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:17px;
    align-items:start
  }
  .design-tools label:nth-of-type(1),.design-tools .layout-options {
    grid-column:1
  }
  .design-tools label:nth-of-type(2) {
    grid-column:2;
    grid-row:1
  }
  .design-tools>input:not([type=range]) {
    grid-column:2;
    grid-row:2;
    align-self:start
  }
  .design-tools label:nth-of-type(3) {
    grid-column:1;
    grid-row:3
  }
  .design-tools #card-size {
    grid-column:1;
    grid-row:4
  }
  .design-tools label:nth-of-type(4) {
    grid-column:2;
    grid-row:3
  }
  .design-tools .palette-options {
    grid-column:2;
    grid-row:4;
    margin-top:5px
  }
  .design-tools>.btn {
    grid-column:1/-1;
    width:100%
  }
  .fact-intro {
    padding:12px 13px 17px;
    gap:11px
  }
  .fact-intro p {
    font-size:17px
  }
  .claim-main {
    padding:12px 10px;
    gap:8px;
    flex-wrap:wrap
  }
  .claim-main p {
    font-size:10px;
    min-width:200px
  }
  .claim-main>.pill {
    margin-left:23px;
    font-size:8px
  }
  .claim-main>.icon {
    margin-left:auto
  }
  .fact-detail {
    padding:12px
  }
  .fact-detail p {
    font-size:10px
  }
  .video-caption {
    top:14px;
    left:18px
  }
  .video-caption h3 {
    font-size:19px
  }
  .video-caption>span {
    font-size:6px
  }
  .video-timeline {
    gap:4px;
    font-size:7px
  }
  .frame-checks {
    grid-template-columns:1fr;
    gap:7px
  }
  .frame-checks .check-card b,.frame-checks .check-card small {
    display:inline;
    font-size:9px;
    margin:0 0 0 6px
  }
  .frame-checks .check-card>span:nth-child(2) {
    display:flex;
    align-items:center
  }
  .boundary-scene {
    height:245px
  }
  .boundary-zone {
    font-size:8px;
    padding:6px 8px;
    gap:5px
  }
  .boundary-zone .icon {
    width:11px;
    height:11px
  }
  .boundary-zone.water {
    left:62%
  }
  .boundary-grid {
    grid-template-columns:1fr;
    gap:7px
  }
  .boundary-grid .check-card {
    padding:8px 9px
  }
  .boundary-grid .check-card small {
    display:inline;
    margin-left:12px
  }
  .diagnosis-scene {
    height:260px
  }
  .sim-ad {
    padding:10px;
    font-size:10px;
    top:23%;
    left:12%
  }
  .sim-ad small {
    font-size:6px
  }
  .focus-ring {
    width:90px;
    height:85px
  }
  .diagnosis-point {
    font-size:7px;
    padding:6px
  }
  .analysis-row {
    gap:10px;
    padding-top:17px
  }
  .analysis-row b {
    font-size:11px
  }
  .analysis-row small {
    font-size:8px
  }
  .candidate-tabs {
    gap:5px
  }
  .candidate-tabs button {
    padding:9px 7px
  }
  .candidate-tabs span {
    font-size:10px
  }
  .candidate-tabs small {
    font-size:7px;
    line-height:1.6
  }
  .compare-stage {
    height:280px
  }
  .intrusive-banner {
    font-size:10px;
    padding:10px;
    left:8%;
    top:21%
  }
  .intrusive-small {
    font-size:9px;
    padding:8px 10px;
    left:35%
  }
  .compare-label {
    font-size:8px
  }
  .motif-panel {
    font-size:8px;
    right:12px;
    bottom:18px;
    padding:6px 8px
  }
  .material-row {
    font-size:8px;
    gap:6px
  }
  .material-row>span {
    width:100%;
    margin-bottom:2px
  }
  .material {
    width:19px;
    height:19px
  }
  .layout-toolbar {
    gap:8px;
    flex-wrap:wrap
  }
  .layout-toolbar .btn {
    font-size:8px;
    padding:6px 7px;
    min-height:30px;
    gap:5px
  }
  .layout-toolbar .icon {
    width:12px;
    height:12px
  }
  .metrics-grid {
    gap:8px;
    padding:11px 9px;
    margin:13px 0
  }
  .metric>strong {
    font-size:27px
  }
  .metric>small {
    font-size:8px;
    line-height:1.7
  }
  .metric .unit {
    font-size:8px;
    margin-left:2px
  }
  .layout-status {
    font-size:9px;
    line-height:1.9;
    padding:9px
  }
  .review-layout {
    grid-template-columns:1fr;
    gap:15px
  }
  .review-image {
    height:206px
  }
  .review-checks {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px
  }
  .profile-hero {
    padding:19px 15px;
    gap:11px;
    flex-wrap:wrap
  }
  .profile-mark {
    width:42px;
    height:42px
  }
  .profile-hero h3 {
    font-size:19px
  }
  .profile-hero .eyebrow {
    font-size:6px
  }
  .profile-hero p {
    font-size:9px
  }
  .profile-number {
    font-size:29px;
    margin-left:53px;
    display:flex;
    align-items:baseline;
    gap:10px
  }
  .profile-number small {
    font-size:8px
  }
  .slider-label {
    font-size:10px;
    gap:9px;
    flex-direction:column
  }
  .slider-label>span {
    font-size:8px
  }
  .profile-goals {
    gap:7px
  }
  .route-order-item {
    padding:9px 8px;
    gap:7px
  }
  .route-order-item small {
    font-size:8px
  }
  .route-order-item b {
    font-size:10px
  }
  .route-order-item .icon-btn {
    width:25px
  }
  .rhythm-panel {
    padding:11px 5px
  }
  .chart-legend {
    font-size:7px;
    gap:4px;
    padding:0 5px
  }
  .chart-legend .line {
    width:10px;
    margin-left:2px
  }
  .chart-scale {
    font-size:6px
  }
  .rhythm-summary {
    gap:10px;
    font-size:7px
  }
  .rhythm-summary .icon {
    width:11px;
    height:11px
  }
  .rhythm-controls {
    gap:13px;
    grid-template-columns:1fr
  }
  .rhythm-controls .panel-label {
    font-size:10px
  }
  .rhythm-controls>label {
    font-size:10px
  }
  .mini-node-row {
    gap:5px
  }
  .mini-node-row span {
    font-size:8px
  }
  .mini-node-row small {
    font-size:6px;
    line-height:1.7
  }
  .scenario-buttons {
    gap:6px
  }
  .scenario-buttons button {
    padding:8px;
    font-size:8px;
    gap:5px
  }
  .scenario-buttons .icon {
    width:13px;
    height:13px
  }
  .scenario-screen .route-scene.compact {
    height:290px
  }
  .scenario-overlay {
    left:12px;
    bottom:25px;
    padding:10px 12px;
    max-width:73%;
    width:245px
  }
  .scenario-overlay h3 {
    font-size:16px
  }
  .scenario-overlay>span,.scenario-overlay p {
    font-size:8px
  }
  .calibration-row {
    grid-template-columns:1.05fr .65fr 1.05fr .3fr;
    padding:10px 8px;
    gap:5px;
    font-size:9px
  }
  .calibration-row.table-head {
    font-size:8px
  }
  .calibration-row>b {
    font-size:9px
  }
  .calibration-row input {
    width:42px!important;
    font-size:12px!important;
    padding:4px!important
  }
  .calibration-row label {
    font-size:7px
  }
  .diff-positive,.diff-negative {
    font-size:14px
  }
  .calibration-conclusion {
    padding:14px 10px;
    gap:12px;
    flex-wrap:wrap
  }
  .calibration-conclusion>span {
    font-size:9px
  }
  .calibration-conclusion>b {
    font-size:27px
  }
  .calibration-conclusion p {
    font-size:9px;
    min-width:100%;
    line-height:1.9
  }
  .gallery-heading h1,.source-page>h1 {
    font-size:29px;
    line-height:1.6
  }
  .gallery-heading h1>span {
    display:block
  }
  .gallery-heading p {
    font-size:11px;
    line-height:1.9
  }
  .gallery-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  .gallery-image {
    height:220px
  }
  .gallery-copy {
    padding:20px
  }
  .gallery-copy h2 {
    font-size:25px
  }
  .gallery-copy p {
    font-size:11px
  }
  .export-panel {
    padding:19px;
    gap:18px
  }
  .export-panel h2 {
    font-size:21px;
    line-height:1.7
  }
  .export-panel p {
    font-size:10px;
    line-height:1.9
  }
  .export-panel .btn {
    font-size:10px;
    padding:8px 12px
  }
  .outcome-list {
    grid-template-columns:1fr;
    gap:8px
  }
  .outcome-list a {
    padding:14px
  }
  .outcome-list b {
    font-size:11px
  }
  .outcome-list small {
    font-size:9px
  }
  .source-list article {
    padding:17px 14px;
    gap:9px
  }
  .source-list h2 {
    font-size:14px;
    overflow-wrap:anywhere
  }
  .source-list p {
    font-size:10px
  }
  .source-list article>div>span:not(.pill) {
    font-size:9px
  }
  .source-page .lead {
    font-size:11px
  }
  .facts-summary h2 {
    font-size:15px
  }
  .facts-summary p {
    font-size:10px
  }
  .modal {
    width:calc(100vw - 24px);
    max-height:92vh
  }
  .modal.wide {
    width:calc(100vw - 24px)
  }
  .modal-header {
    padding:17px 17px 14px
  }
  .modal-header h2 {
    font-size:21px
  }
  .modal-body {
    padding:16px 17px;
    max-height:calc(92vh - 100px)
  }
  .modal-lead {
    font-size:11px
  }
  .modal-body .btn {
    font-size:10px
  }
  .evidence-list {
    grid-template-columns:1fr;
    gap:11px
  }
  .evidence-list article {
    padding:14px
  }
  .evidence-list p {
    font-size:10px
  }
  .report-preview {
    font-size:10px;
    padding:13px
  }
  .qr-result {
    padding:14px;
    gap:15px;
    flex-direction:column
  }
  .qr-result>svg {
    width:183px;
    height:183px
  }
  .qr-result>div {
    width:100%;
    text-align:center
  }
  .qr-result p {
    font-size:9px
  }
  .qr-guide {
    font-size:9px
  }
  .mobile-media-title h1 {
    font-size:31px
  }
  .mobile-media-title {
    left:22px;
    top:23px
  }
  .mobile-media video {
    aspect-ratio:1.07
  }
  .postcard-letter {
    padding:25px 22px
  }
  .postcard-letter h2 {
    font-size:21px;
    margin-right:40px
  }
  .postcard-letter p {
    font-size:11px
  }
  .postcard-seal {
    right:19px;
    top:30px;
    font-size:12px
  }
  .postcard-letter .btn {
    font-size:11px;
    padding:9px 12px
  }
  
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  
}