@font-face{font-family:'IBM Plex Sans Thai';font-weight:400 500;font-display:swap;src:url(fonts/plex-thai-400.woff2) format('woff2');unicode-range:U+0E00-0E7F,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans Thai';font-weight:400 500;font-display:swap;src:url(fonts/plex-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2264-2265}
@font-face{font-family:'IBM Plex Sans Thai';font-weight:600;font-display:swap;src:url(fonts/plex-thai-600.woff2) format('woff2');unicode-range:U+0E00-0E7F,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans Thai';font-weight:600;font-display:swap;src:url(fonts/plex-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2264-2265}
@font-face{font-family:'IBM Plex Sans Thai';font-weight:700;font-display:swap;src:url(fonts/plex-thai-700.woff2) format('woff2');unicode-range:U+0E00-0E7F,U+200C-200D,U+25CC}
@font-face{font-family:'IBM Plex Sans Thai';font-weight:700;font-display:swap;src:url(fonts/plex-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2264-2265}
@font-face{font-family:'Noto Sans Lao';font-weight:100 900;font-display:swap;src:url(fonts/noto-lao.woff2) format('woff2');unicode-range:U+0E80-0EFF,U+200C-200D,U+25CC}
:root{
  --ink:#16251f; --muted:#51625a; --cane:#14573f; --cane-soft:#e3efe9;
  --raw:#b9791a; --syrup:#7a4a0e; --raw-soft:#fbf0dc;
  --crystal:#f3f7f5; --paper:#fff; --line:#d3ddd8; --alert:#a62b1f; --alert-soft:#fbeae7;
  --wait:#5b6b8c; --wait-soft:#e9edf5;
  --font:"IBM Plex Sans Thai","Leelawadee UI","Noto Sans Thai","Noto Sans Lao",Tahoma,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--crystal);color:var(--ink);font:400 16px/1.65 var(--font)}
html[lang=lo] body{font-family:"Noto Sans Lao","Phetsarath OT","Lao UI",var(--font);line-height:1.75}
.lang{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex:none}
.lang button{background:#fff;border:0;padding:5px 11px;cursor:pointer;font-size:14.5px;font-weight:500}
.lang button[lang=lo]{font-family:"Noto Sans Lao","Phetsarath OT","Lao UI",var(--font)}
.lang button[aria-pressed=true]{background:var(--cane);color:#fff}
a{color:var(--cane)}
h1,h2,h3{line-height:1.25;margin:0;font-weight:600}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--raw);outline-offset:2px;border-radius:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:30}

/* Draft strip */
.draft{background:var(--ink);color:#e6efeb;font-size:13.5px;padding:6px 0}
.draft b{font-weight:600;color:#fff}

/* Header */
header.top{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top-in{display:flex;align-items:center;gap:28px;min-height:64px}
.brand{font-weight:700;font-size:18px;color:var(--cane);text-decoration:none;line-height:1.2;white-space:nowrap}
.brand small{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
nav.main{display:flex;gap:4px;flex:1;flex-wrap:wrap}
nav.main a{padding:7px 12px;text-decoration:none;color:var(--ink);border-radius:6px;font-weight:500;font-size:15px}
nav.main a:hover{background:var(--crystal)}
nav.main a[aria-current=page]{background:var(--cane);color:#fff}
.esmart{white-space:nowrap;border:1.5px solid var(--cane);border-radius:6px;padding:6px 12px;font-weight:600;font-size:14.5px;text-decoration:none}
.esmart:hover{background:var(--cane-soft)}

/* Hero */
.hero{background:var(--paper);padding:34px 0 0}
.hero h1{font-size:clamp(30px,4vw,44px);font-weight:700;letter-spacing:-.005em}
.search{position:relative;margin-top:16px;max-width:760px}
.search input{width:100%;height:56px;padding:0 18px;font-size:18px;background:var(--crystal);border:2px solid var(--cane);border-radius:8px}
.search input::placeholder{color:#62736b}
.results{position:absolute;left:0;right:0;top:60px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 14px 34px rgba(20,50,40,.18);z-index:15;max-height:430px;overflow:auto}
.results a{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:9px 14px;text-decoration:none;color:var(--ink);border-bottom:1px solid #edf1ef}
.results a:hover,.results a:focus{background:var(--cane-soft)}
.results .ty{font-size:13px;color:var(--muted)}
.results .none{padding:14px;color:var(--muted)}
.quick{display:flex;flex-wrap:wrap;gap:8px 18px;margin:12px 0 0;font-size:15px;color:var(--muted)}
.quick button{background:none;border:0;padding:0;color:var(--cane);font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Production line: the page's one bold element */
.line-h{margin-top:34px;font-size:19px}
.line-sub{color:var(--muted);margin:2px 0 0;font-size:15px}
.line{position:relative;display:grid;grid-template-columns:repeat(10,1fr);margin-top:20px;padding-top:6px}
.pipe{position:absolute;left:5%;right:5%;top:25px;height:14px;border-radius:7px;
  background:linear-gradient(90deg,#3f8f55 0%,#6c9440 16%,#a28a2d 32%,#7a4a0e 46%,#5c3509 54%,#b9791a 66%,#d9a441 78%,#ecd9a6 90%,#f7f1df 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transform-origin:left}
.first-load .pipe{animation:flow 1.5s cubic-bezier(.3,.7,.3,1) both}
@keyframes flow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.st{position:relative;background:none;border:0;padding:0 3px 14px;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--ink)}
.st .dot{width:24px;height:24px;margin-top:8px;border-radius:50%;background:#fff;border:3px solid var(--ink);flex:none;transition:transform .15s}
.st.ctl .dot{width:38px;height:38px;margin-top:1px;border-radius:7px;transform:rotate(45deg);background:var(--raw);border-color:#fff;box-shadow:0 0 0 2px var(--syrup)}
.st .nm{font-weight:500;font-size:14.5px;line-height:1.3}
.st .tg{font-size:12.5px;font-weight:600;color:var(--syrup);line-height:1.25;min-height:16px}
.st:hover .dot{transform:scale(1.15)}
.st.ctl:hover .dot{transform:rotate(45deg) scale(1.1)}
.st[aria-pressed=true] .nm{font-weight:700;color:var(--cane)}
.st[aria-pressed=true]::after{content:"";position:absolute;bottom:-1px;left:50%;margin-left:-11px;border:11px solid transparent;border-bottom-color:var(--crystal);border-top:0}
.st[aria-pressed=true] .dot{background:var(--ink)}
.st.ctl[aria-pressed=true] .dot{background:var(--ink);box-shadow:0 0 0 2px var(--ink)}
.hero-end{height:1px}

/* Station panel */
.panel{background:var(--crystal);padding:26px 0 30px}
.panel h2{font-size:25px;font-weight:700}
.panel .pfor{color:var(--muted);font-size:15px;margin:2px 0 16px}
.tri{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:0}
.tri>div{padding:0 24px;border-left:1px solid var(--line)}
.tri>div:first-child{padding-left:0;border-left:0}
.tri h3{font-size:15.5px;font-weight:600;color:var(--muted);margin-bottom:8px}
.ctl-row{margin:0 0 12px}
.ctl-row b{display:inline-block;background:var(--raw);color:#fff;padding:0 8px;border-radius:4px;font-weight:600;font-size:14px;margin-right:6px}
.ctl-row b.op{background:var(--syrup)}
.ctl-row .lim{display:block;font-size:17px;font-weight:500;line-height:1.4;margin-top:3px}
.ctl-row .sm{font-size:14px;color:var(--muted)}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:5px 0}
.code{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.doc-l{display:block;text-decoration:none;color:var(--ink)}
.doc-l .code{color:var(--cane)}
.doc-l:hover .code{text-decoration:underline}
.doc-l span.t{display:block;font-size:14.5px;color:var(--muted);line-height:1.4}
.nc-l b{color:var(--alert);font-weight:600}
.nc-l{font-size:15px;line-height:1.45}
.nil{color:var(--muted);font-size:15px}
.note{font-size:13.5px;color:var(--muted);margin-top:18px;border-top:1px solid var(--line);padding-top:10px}

/* Home lower */
.lower{display:grid;grid-template-columns:1.55fr 1fr;gap:44px;padding:38px 28px 46px;align-items:start}
.sect-h{font-size:24px;font-weight:700;margin-bottom:4px}
.sect-sub{color:var(--muted);margin:0 0 14px;font-size:15.5px}
.route{border-top:2px solid var(--ink)}
.route details{border-bottom:1px solid var(--line)}
.route summary{cursor:pointer;padding:12px 4px;font-weight:500;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:14px}
.route summary::-webkit-details-marker{display:none}
.route summary .to{color:var(--cane);font-weight:600;font-size:14.5px;white-space:nowrap}
.route summary:hover{background:#eaf1ee}
.route .body{padding:0 4px 14px;font-size:15px}
.route .body p{margin:0 0 6px}
.now{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:20px 22px}
.now h2{font-size:20px;font-weight:700;margin-bottom:10px}
.now .big{font-size:27px;font-weight:700;color:var(--cane);line-height:1.2}
.now .row{padding:12px 0;border-top:1px solid var(--line)}
.now .row:first-of-type{border-top:0;padding-top:0}
.now .row p{margin:3px 0 0;font-size:14.5px;color:var(--muted);line-height:1.5}
.now .row b{font-weight:600}

/* Inner pages */
.page-h{background:var(--paper);border-bottom:1px solid var(--line);padding:30px 0 22px}
.page-h h1{font-size:34px;font-weight:700}
.page-h p{margin:6px 0 0;color:var(--muted);max-width:760px}
main section.pg{padding-bottom:50px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 12px;align-items:center}
.chips button{background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px 12px;cursor:pointer;font-size:14.5px}
.chips button[aria-pressed=true]{background:var(--cane);color:#fff;border-color:var(--cane)}
.chips input{margin-left:auto;height:36px;border:1px solid var(--line);border-radius:6px;padding:0 10px;min-width:220px;background:#fff}
.tbl-w{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:15px}
th{font-weight:600;text-align:left;background:#eef3f1;padding:9px 12px;color:var(--ink);white-space:nowrap}
td{padding:9px 12px;border-top:1px solid #e7ecea;vertical-align:top}
.st-b{display:inline-block;padding:0 8px;border-radius:4px;font-size:13.5px;font-weight:500;white-space:nowrap}
.ok{background:var(--cane-soft);color:var(--cane)}
.warn{background:var(--raw-soft);color:var(--syrup)}
.bad{background:var(--alert-soft);color:var(--alert)}
.wait{background:var(--wait-soft);color:var(--wait)}

.gate{background:var(--raw-soft);border-left:4px solid var(--raw);padding:10px 14px;margin:20px 0;font-size:15px}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink);margin:22px 0 30px}
.timeline>div{padding:12px 20px 4px 0}
.timeline>div+div{padding-left:20px;border-left:1px solid var(--line)}
.timeline .when{font-size:24px;font-weight:700;color:var(--cane);line-height:1.2}
.timeline p{margin:4px 0 0;font-size:14.5px;color:var(--muted)}
.issue{display:grid;grid-template-columns:150px 1fr 170px;gap:14px;padding:12px 14px;background:#fff;border-bottom:1px solid #e7ecea}
.issue:first-child{border-radius:8px 8px 0 0}.issue:last-child{border-radius:0 0 8px 8px;border-bottom:0}
.issues{border:1px solid var(--line);border-radius:8px}
.issue .ids{font-weight:600;color:var(--alert)}
.issue .cl{font-size:13.5px;color:var(--muted);display:block;line-height:1.45}
.issue .ar{font-size:14px;color:var(--muted)}

.tracks{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;margin-top:22px}
.track{padding:16px 0;border-top:1px solid var(--line)}
.track h3{font-size:19px;font-weight:600}
.track p{margin:4px 0 6px;font-size:15px;color:var(--muted)}
.track .topics{font-size:14.5px}
.track .topics span{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:4px;padding:0 7px;margin:0 4px 4px 0}
.quiz{background:var(--cane);color:#fff;border-radius:10px;padding:22px 26px;margin-top:26px}
.quiz h2{font-size:21px;font-weight:700}
.quiz .q{font-size:17.5px;margin:10px 0}
.quiz button{display:block;width:100%;max-width:560px;text-align:left;background:#fff;color:var(--ink);border:0;border-radius:6px;padding:9px 13px;margin-bottom:6px;cursor:pointer}
.quiz button.right{background:#cfe9d9;font-weight:600}
.quiz button.wrong{background:#f6d5cf}
.quiz .why{min-height:24px;font-size:15px;margin-top:8px}
.quiz .next{background:none;color:#fff;text-decoration:underline;width:auto;padding:4px 0}

footer{background:var(--ink);color:#c8d6d0;font-size:14px;padding:18px 0}
[hidden]{display:none!important}

@media (max-width:1180px){
  .top-in{flex-wrap:wrap;gap:6px 14px;padding-top:8px;padding-bottom:8px;justify-content:space-between}
  nav.main{order:3;flex-basis:100%}
  .esmart{margin-left:auto}
}
@media (max-width:1020px){
  .lower{grid-template-columns:1fr;gap:30px}
  .st .nm{font-size:13px}.st .tg{font-size:11.5px}
}
.back-line{display:none}
@media (max-width:820px){
  header.top{position:static}
  /* Bottom tab bar: reachable with one thumb, and always visible during a short break */
  body{padding-bottom:66px}
  nav.main{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -4px 14px rgba(20,50,40,.1);padding-bottom:env(safe-area-inset-bottom)}
  nav.main a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:58px;padding:4px 3px;font-size:13px;line-height:1.25;border-radius:0}
  .route summary{min-height:52px;font-size:17px}
  .ctl-row .lim{font-size:19px}
  .ctl-row .sm{font-size:15px}
  .quick button{min-height:32px}
  .chips button{min-height:42px}
  .doc-l{padding:4px 0}
  .back-line{display:inline-block;min-height:44px;margin-bottom:6px;padding:0 14px;background:#fff;border:1.5px solid var(--cane);border-radius:6px;color:var(--cane);font-weight:600;cursor:pointer}
  .wrap,.lower{padding-left:18px;padding-right:18px}
  .line{grid-template-columns:1fr;padding:0}
  .pipe{left:17px;right:auto;top:10px;bottom:10px;width:14px;height:auto;
    background:linear-gradient(180deg,#3f8f55 0%,#6c9440 16%,#a28a2d 32%,#7a4a0e 46%,#5c3509 54%,#b9791a 66%,#d9a441 78%,#ecd9a6 90%,#f7f1df 100%);transform-origin:top}
  .first-load .pipe{animation-name:flowv}
  @keyframes flowv{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  .st{flex-direction:row;align-items:center;text-align:left;gap:12px;padding:6px 0;min-height:48px}
  .st .dot{margin:0 0 0 7px}
  .st.ctl .dot{width:30px;height:30px;margin:0 0 0 3px}
  .st .nm{font-size:15.5px}.st .tg{font-size:13px;margin-left:auto}
  .st[aria-pressed=true]::after{display:none}
  .st[aria-pressed=true]{background:var(--cane-soft);border-radius:6px}
  .tri{grid-template-columns:1fr;gap:18px}
  .tri>div{padding:0;border-left:0}
  .timeline{grid-template-columns:1fr}
  .timeline>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .issue{grid-template-columns:1fr;gap:3px}
  .tracks{grid-template-columns:1fr}
  .chips input{margin-left:0;width:100%}
  .route summary{flex-direction:column;gap:0}
  .page-h h1{font-size:28px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
/* Phase 1 additions */
html[lang=lo] body{font-family:"IBM Plex Sans Thai","Noto Sans Lao","Phetsarath OT","Lao UI",Tahoma,sans-serif}
main:focus{outline:none}
.pg{padding-bottom:48px}
.sect-h.gap{margin-top:34px}
.strong{font-weight:600}
.muted{color:var(--muted)}
.warn-t{margin-top:6px;color:var(--syrup)}
.count{font-size:14.5px;color:var(--muted);margin:6px 0}
.act{white-space:nowrap}
.link-b{background:none;border:0;padding:0;color:var(--cane);font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.more{display:inline-block;margin-top:12px;background:#fff;border:1.5px solid var(--cane);color:var(--cane);border-radius:6px;padding:7px 16px;font-weight:600;cursor:pointer}
.more:hover{background:var(--cane-soft)}
.guide-f{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin:10px 0}
.guide-f label{display:flex;flex-direction:column;font-size:14px;color:var(--muted);gap:3px}
.guide-f select,.guide-f input{height:42px;border:1px solid #9fb0a8;border-radius:6px;padding:0 10px;background:#fff;font-size:15.5px;color:var(--ink);min-width:220px}
.guide-f input{flex:1}
.guide-b p{margin:0 0 9px}
.guide-b b{display:block;font-weight:600;color:var(--cane);font-size:14.5px}
.track .tags{min-height:24px;margin:2px 0 8px}
.open-l{font-weight:600}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 30px}
.foot p{margin:0}
.foot a{color:#fff}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:16px}
.qr-card{background:#fff;border:2px solid var(--ink);border-radius:8px;padding:16px;text-align:center;break-inside:avoid}
.qr-card h2{font-size:26px;font-weight:700;margin:2px 0}
.qr-card p{margin:2px 0;font-size:14px}
.qr-card img{display:block;width:190px;height:190px;margin:8px auto}
.qr-org{color:var(--muted)}
.qr-lo{font-size:20px!important;font-weight:600}
/* Shared screen mode: open with ?screen=1 */
html.screen{font-size:18px}
html.screen body{font-size:19px}
html.screen .st .nm{font-size:17px}
html.screen .route summary{min-height:60px;font-size:20px;align-items:center}
html.screen .lower{grid-template-columns:1fr}
@media (max-width:1180px){.timeline{grid-template-columns:repeat(2,1fr)}.timeline>div:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:820px){.act{white-space:normal}.guide-f label,.guide-f select,.guide-f input{width:100%}.foot{flex-direction:column}}
@media print{
  .no-print,header.top,footer,.draft,.skip{display:none!important}
  body{background:#fff;padding:0}
  .wrap,.pg{padding:0;max-width:none}
  .qr-grid{grid-template-columns:repeat(2,1fr)}
  .qr-card{height:128mm}
  details{break-inside:avoid}
}

/* Knowledge centre */
.page-act{margin:12px 0 0}
.kb-home{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0 26px}
.kb-home-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.kb-home-h a{font-weight:600}
.cat-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:14px;border-top:2px solid var(--ink)}
.cat-tile{display:flex;flex-direction:column;gap:2px;padding:14px 16px 14px 0;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.cat-tile:nth-child(4n+2),.cat-tile:nth-child(4n+3),.cat-tile:nth-child(4n+4){padding-left:16px;border-left:1px solid var(--line)}
.cat-tile:hover .ct-n{color:var(--cane);text-decoration:underline}
.ct-n{font-weight:600;font-size:16.5px;line-height:1.35}
.ct-c{font-size:13.5px;color:var(--muted)}
.kb-latest-h{font-size:17px;margin:26px 0 8px}
.kb-contrib{margin:14px 0 0;font-weight:600}
.kb-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.kb-row{display:grid;gap:4px;padding:14px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.kb-row:hover{background:var(--cane-soft)}
.kb-row:hover .kb-t{text-decoration:underline}
.kb-t{font-weight:600;font-size:17px;color:var(--cane);line-height:1.4}
.kb-s{font-size:15px;color:var(--muted);line-height:1.5}
.kb-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13.5px}
.tag{display:inline-block;border:1px solid var(--line);background:#fff;border-radius:4px;padding:0 7px;color:var(--ink)}
.tag.dept{background:var(--cane-soft);border-color:transparent;color:var(--cane);font-weight:600}
.kb-grid{display:grid;grid-template-columns:260px 1fr;gap:34px;margin-top:20px;align-items:start}
.kb-f{display:flex;flex-direction:column;gap:12px;position:sticky;top:84px}
.kb-f h2{font-size:15px;color:var(--muted);font-weight:600;margin-top:4px}
.kb-f input,.kb-f select{width:100%;height:42px;border:1px solid #9fb0a8;border-radius:6px;padding:0 10px;background:#fff;font-size:15.5px;color:var(--ink)}
.kb-f label{display:flex;flex-direction:column;gap:3px;font-size:14px;color:var(--muted)}
.cat-list{display:flex;flex-direction:column}
.cat-list button{display:flex;justify-content:space-between;gap:8px;background:none;border:0;border-left:3px solid transparent;padding:7px 10px;text-align:left;cursor:pointer;font-size:15px;color:var(--ink)}
.cat-list button span+span{color:var(--muted);font-size:13.5px}
.cat-list button:hover{background:#eaf1ee}
.cat-list button[aria-pressed=true]{border-left-color:var(--cane);background:var(--cane-soft);font-weight:600;color:var(--cane)}
.empty{padding:26px 4px}
.empty p{margin:0 0 10px;color:var(--muted)}
.crumb{margin:0 0 6px;font-size:14px;color:var(--muted)}
.art-h h1{max-width:900px}
.art-h .kb-tags{margin-top:10px}
.art-grid{display:grid;grid-template-columns:200px minmax(0,1fr) 250px;gap:36px;margin-top:22px;align-items:start}
.art-toc{position:sticky;top:84px}
.art-toc h2,.art-side h2{font-size:14.5px;color:var(--muted);font-weight:600;margin:0 0 8px}
.art-toc ol{margin:0;padding-left:18px;font-size:14.5px}
.art-toc li{margin:0 0 6px}
.art-side{border-left:1px solid var(--line);padding-left:20px}
.art-side h2{margin-top:6px}
.art-side ul{margin-bottom:16px}
.art-body{max-width:72ch}
.art-body h2{font-size:22px;font-weight:700;margin:28px 0 10px;scroll-margin-top:90px}
.art-body h2:first-of-type{margin-top:20px}
.art-body p,.art-body li{font-size:16.5px;line-height:1.75}
.art-body ol,.art-body ul{padding-left:22px}
.art-body table{margin:10px 0 16px;background:#fff;border:1px solid var(--line);font-size:15px}
.art-body td,.art-body th{border-top:1px solid #e7ecea}
.sumbox{background:var(--raw-soft);border-left:4px solid var(--raw);padding:12px 16px;font-size:16px;line-height:1.6}
.sumbox b{color:var(--syrup);margin-right:6px}
.st-kb{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.st-kb h3{font-size:15.5px;font-weight:600;color:var(--muted);margin-bottom:4px}
.results a.all{background:#f3f7f5;font-weight:600;color:var(--cane)}
.steps{padding-left:24px;max-width:72ch}
.steps li{margin-bottom:8px;font-size:16.5px}
@media (max-width:1020px){.art-grid{grid-template-columns:minmax(0,1fr)}.art-toc{position:static;border-bottom:1px solid var(--line);padding-bottom:12px}.art-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:14px}.kb-grid{grid-template-columns:220px 1fr;gap:22px}}
@media (max-width:820px){.cat-tiles{grid-template-columns:1fr 1fr}.cat-tile:nth-child(n){padding:12px 10px 12px 0;border-left:0}.cat-tile:nth-child(2n){padding-left:12px;border-left:1px solid var(--line)}.kb-grid{grid-template-columns:1fr}.kb-f{position:static}}
@media print{.art-toc,.art-side,.crumb{display:none!important}.art-grid{grid-template-columns:1fr}}

/* Executive Blue option for the CEO's decision. The product-colour line keeps its own colours. */
html[data-theme=blue]{--ink:#14213d;--muted:#4b5a73;--cane:#1d4ed8;--cane-soft:#e6edfb;--crystal:#f1f4fa;--line:#d6deeb;--raw:#c58a1e;--syrup:#7a4d06}
.art-body table{display:block;max-width:100%;overflow-x:auto}
@media (max-width:820px){
  .cat-list{flex-direction:row;flex-wrap:wrap;gap:6px}
  .cat-list button{border:1px solid var(--line);border-radius:6px;background:#fff;padding:5px 10px;min-height:38px;align-items:center}
  .cat-list button[aria-pressed=true]{border-color:var(--cane)}
}
/* Inside the shared prototype frame printing is unavailable */
html.in-frame #artPrint,html.in-frame #printBtn{display:none}
/* Icons (Lucide, ISC): always beside a text label, sized to the text */
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;stroke-width:2}
.ic-lg{width:1.3em;height:1.3em}
.ic-h{display:flex;align-items:center;gap:.45em}
.ic-h .ic{color:var(--cane)}
.ic-l,.more,.link-b,.esmart,.st-b,.foot-links a,.foot-links>span{display:inline-flex;align-items:center;gap:.4em}
.st-b .ic{width:1em;height:1em}
.ctl-row b{display:inline-flex;align-items:center;gap:.3em}
.ctl-row b .ic{width:1em;height:1em}
nav.main a{display:inline-flex;align-items:center;gap:.4em}
nav.main a .ic{opacity:.85}
/* Search box: magnifier inside the field */
.search .s-ic{position:absolute;z-index:2;left:17px;top:18px;width:22px;height:22px;color:var(--cane);pointer-events:none}
.search .s-ic~input{padding-left:50px}
/* Production line: each station shows its icon inside the marker */
.st .dot{width:34px;height:34px;margin-top:3px;display:grid;place-items:center;color:var(--ink)}
.st .dot .ic{width:18px;height:18px}
.st.ctl .dot{width:38px;height:38px;margin-top:1px;color:#fff}
.st.ctl .dot .ic{transform:rotate(-45deg)}
.st[aria-pressed=true] .dot{color:#fff}
/* Knowledge categories */
.cat-tile .ct-ic{width:26px;height:26px;color:var(--cane);margin-bottom:6px;stroke-width:1.75}
.cat-list button span:first-child{display:inline-flex;align-items:center;gap:.45em}
.cat-list button .ic{color:var(--cane)}
@media (max-width:820px){
  nav.main a{flex-direction:column;gap:3px}
  nav.main a .ic{width:22px;height:22px}
  .st .dot{margin:0 0 0 7px}
  .st.ctl .dot{width:34px;height:34px;margin:0 0 0 7px}
  .back-line{display:inline-flex;align-items:center;gap:.4em}
  .search .s-ic{top:17px}
}
html.screen .st .dot{width:40px;height:40px}
html.screen .st .dot .ic{width:22px;height:22px}
@media print{.ic{display:none}}

/* ===================== 3D artwork, depth and motion ===================== */
:root{--shadow-1:0 1px 2px rgba(22,37,31,.06),0 6px 18px rgba(22,37,31,.07);--shadow-2:0 2px 4px rgba(22,37,31,.05),0 18px 44px rgba(22,37,31,.12)}

/* Hero: the generated factory scene sits to the right and fades into white under the headline */
.hero{position:relative;overflow:hidden;background:#fff}
.hero>.wrap{position:relative;z-index:2}
.hero-art-w{position:absolute;inset:0 0 auto auto;width:min(68%,1100px);height:clamp(380px,46vw,620px);pointer-events:none;z-index:0}
.hero-art-w img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block;will-change:transform;transform:scale(1.04);transition:transform .25s ease-out;animation:heroIn 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes heroIn{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1.04)}}
.hero-art-w::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.85) 22%,rgba(255,255,255,0) 52%),linear-gradient(0deg,#fff 0,rgba(255,255,255,0) 30%)}
.hero-glow{position:absolute;right:12%;top:8%;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(242,198,109,.45),rgba(242,198,109,0) 70%);z-index:1;animation:glowPulse 6s ease-in-out infinite alternate}
@keyframes glowPulse{to{transform:scale(1.25);opacity:.6}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:6px 0 10px;padding:4px 12px;border-radius:20px;background:rgba(227,239,233,.9);color:var(--cane);font-size:13px;font-weight:600;letter-spacing:.04em;backdrop-filter:blur(6px)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--raw);box-shadow:0 0 0 3px rgba(185,121,26,.2)}
.hero h1{max-width:620px;text-shadow:0 1px 0 #fff}
.hero .search{max-width:640px}
.hero .search input{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);box-shadow:var(--shadow-2)}
.search .s-ic{position:absolute;z-index:2;left:17px;top:18px;width:22px;height:22px;color:var(--cane);pointer-events:none}
.search .s-ic~input{padding-left:50px}
.hero .quick{max-width:640px}
.hero .line-h{margin-top:clamp(40px,8vw,120px)}
.hero .line{background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-radius:16px;box-shadow:var(--shadow-1);padding:14px 10px 4px;margin-top:14px}

/* Production line */
.pipe{overflow:hidden}
.pipe::after{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 22px,rgba(255,255,255,.55) 22px 30px,rgba(255,255,255,0) 30px 52px);background-size:52px 100%;animation:pipeflow 1.6s linear infinite}
@keyframes pipeflow{to{background-position:52px 0}}
.st .dot{width:34px;height:34px;margin-top:3px;display:grid;place-items:center;color:var(--ink);box-shadow:0 3px 8px rgba(22,37,31,.18)}
.st .dot .ic{width:18px;height:18px}
.st.ctl .dot{width:38px;height:38px;margin-top:1px;color:#fff}
.st.ctl .dot .ic{transform:rotate(-45deg)}
.st[aria-pressed=true] .dot{color:#fff}
.first-load .st .dot{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.5s + var(--i) * 80ms)}
.first-load .st.ctl .dot{animation-name:popd}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes popd{from{transform:rotate(45deg) scale(0)}to{transform:rotate(45deg) scale(1)}}

/* Station panel with its machine */
.panel{background:linear-gradient(180deg,var(--crystal),#fff)}
.ph{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px}
.ph-img{width:230px;aspect-ratio:1;position:relative}
.ph-img::after{content:"";position:absolute;left:18%;right:18%;bottom:6%;height:12%;border-radius:50%;background:radial-gradient(rgba(22,37,31,.18),rgba(22,37,31,0) 70%);z-index:0}
.ph-img img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;animation:float3d 5s ease-in-out infinite alternate}
@keyframes float3d{from{transform:translateY(4px) rotate(-.6deg)}to{transform:translateY(-8px) rotate(.6deg)}}
.ph-tag{display:inline-block;margin:6px 0 0;background:var(--raw);color:#fff;font-size:13.5px;font-weight:600;padding:1px 10px;border-radius:4px}
#panel.swap .ph-t>*{animation:rise .45s ease both}
#panel.swap .ph-img{animation:zoomIn .6s cubic-bezier(.2,.8,.2,1) both}
#panel.swap .tri{animation:rise .5s .08s ease both}
@keyframes zoomIn{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:none}}

/* Process clip: cover flow of the generated machines */
.clip{background:radial-gradient(1200px 400px at 30% 0,#fdf6e6,rgba(253,246,230,0)),#fff;padding:40px 0 44px;border-top:1px solid var(--line)}
.clip-box{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-2)}
.clip-view{position:relative;min-height:400px;background:#fff;overflow:hidden}
.clip-view::before{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,rgba(246,241,228,0),rgba(246,241,228,.9));z-index:25;pointer-events:none;mix-blend-mode:multiply}
.cf{position:absolute;inset:0;perspective:1100px;transform-style:preserve-3d}
.cf-item{position:absolute;left:50%;top:48%;width:min(62%,380px);aspect-ratio:1;border:0;padding:0;background:none;cursor:pointer;transition:transform .9s cubic-bezier(.65,0,.25,1),opacity .9s;transform:translate(-50%,-50%)}
.cf-item img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;display:block;transition:filter .9s}
.cf-item:not(.on) img{filter:saturate(.6) blur(.4px)}
.cf-item.on img{animation:float3d 4.5s ease-in-out infinite alternate}
.cf-floor{position:absolute;left:28%;right:28%;bottom:9%;height:26px;border-radius:50%;background:radial-gradient(rgba(22,37,31,.2),rgba(22,37,31,0) 70%);pointer-events:none}
.clip-badge{position:absolute;left:16px;top:14px;z-index:30;background:var(--ink);color:#fff;font-weight:600;font-size:13px;padding:3px 11px;border-radius:20px}
.clip-side{display:flex;flex-direction:column;gap:12px;padding:26px 26px;border-left:1px solid var(--line)}
.clip-cap h3{font-size:28px;font-weight:700;color:var(--cane)}
.clip-cap p{margin:8px 0 0;font-size:16.5px;line-height:1.65}
.clip-cap .clip-tag{display:inline-flex;align-items:center;gap:.35em;background:var(--raw);color:#fff;font-weight:600;font-size:14px;padding:1px 9px;border-radius:4px}
.clip-cap .clip-tag[hidden]{display:none}
.clip-cap.swap>*{animation:rise .5s ease both}
.clip-cap.swap>*:nth-child(2){animation-delay:.06s}.clip-cap.swap>*:nth-child(3){animation-delay:.12s}
.clip-side .more{align-self:flex-start;margin-top:auto}
.clip-ctl{display:flex;gap:8px;align-items:center}
.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-width:44px;height:44px;padding:0 12px;border-radius:22px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font-weight:600;box-shadow:var(--shadow-1)}
.cbtn:hover{border-color:var(--cane);color:var(--cane)}
.cbtn.play{background:linear-gradient(180deg,#1b6a4d,var(--cane));border-color:var(--cane);color:#fff;padding:0 18px}
.cbtn.play:hover{color:#fff;filter:brightness(1.1)}
.clip-dots{grid-column:1/-1;display:grid;grid-template-columns:repeat(10,1fr);border-top:1px solid var(--line);background:#fff}
.clip-dots button{background:none;border:0;padding:10px 6px 12px;cursor:pointer;text-align:left;color:var(--muted);font-size:13px;line-height:1.3}
.clip-dots button+button{border-left:1px solid var(--line)}
.clip-dots .bar{display:block;height:4px;border-radius:2px;background:var(--line);overflow:hidden;margin-bottom:6px}
.clip-dots .bar i{display:block;height:100%;width:0;background:var(--cane)}
.clip-dots .done .bar i,.clip-dots .now .bar i{width:100%}
.clip-dots .now{color:var(--cane);font-weight:700}
.clip.ticking .clip-dots .now .bar i{width:0;animation:fillbar 4.5s linear forwards}
@keyframes fillbar{to{width:100%}}
.clip-dots button:hover{color:var(--cane);background:var(--crystal)}

/* Glossy 3D tiles around icons */
.b3d{--s:56px;position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);flex:none;border-radius:calc(var(--s) * .28);
  background:linear-gradient(145deg,#2a8a63 0%,#14573f 55%,#0d3b2b 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.35),inset 0 -6px 12px rgba(0,0,0,.25),0 calc(var(--s) * .14) calc(var(--s) * .3) rgba(20,87,63,.35),0 2px 3px rgba(20,87,63,.3);transform:perspective(400px) rotateX(8deg) rotateY(-10deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.b3d::before{content:"";position:absolute;inset:3px 3px 45% 3px;border-radius:calc(var(--s) * .24) calc(var(--s) * .24) 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
.b3d-face{position:relative;display:grid;place-items:center;color:#fff;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.b3d-face .ic{width:calc(var(--s) * .46);height:calc(var(--s) * .46);stroke-width:2.2}
.b3d-md{--s:52px}
.b3d-lg{--s:120px}
/* the categories take turns in the warm accent */
.cat-tile:nth-child(3n+2) .b3d{background:linear-gradient(145deg,#d9a441 0%,#b9791a 55%,#7a4a0e 100%);box-shadow:inset 0 2px 1px rgba(255,255,255,.4),inset 0 -6px 12px rgba(0,0,0,.2),0 8px 16px rgba(185,121,26,.35),0 2px 3px rgba(122,74,14,.3)}
.cat-tile:nth-child(3n) .b3d{background:linear-gradient(145deg,#6fae7f 0%,#3f8f55 55%,#245c35 100%)}

/* Category cards */
.cat-tiles{display:grid;gap:14px;border-top:0}
.cat-tile,.cat-tile:nth-child(4n+2),.cat-tile:nth-child(4n+3),.cat-tile:nth-child(4n+4){position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 18px 16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,#fff 50%,var(--crystal));box-shadow:var(--shadow-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;overflow:hidden}
.cat-tile .ct-ic{margin-bottom:10px}
.cat-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:#b7cfc3}
.cat-tile:hover .b3d{transform:perspective(400px) rotateX(0) rotateY(0) translateY(-3px) scale(1.06)}
.cat-tile .ct-n{font-size:16.5px}

/* Cards and rows */
.kb-row{transition:background .2s,transform .2s}
.kb-row:hover{transform:translateX(4px)}
.now{box-shadow:var(--shadow-1);border-radius:14px}
.track{transition:transform .2s}

/* Section headers: a large 3D tile with soft light behind it */
.page-h{position:relative;background:linear-gradient(115deg,#fff 50%,#eef5f1);overflow:hidden}
.page-h .wrap{position:relative}
.page-art{position:absolute;right:48px;top:50%;width:200px;height:170px;transform:translateY(-50%);display:grid;place-items:center;pointer-events:none}
.page-art .b3d{animation:float3d 5s ease-in-out infinite alternate}
.orb{position:absolute;border-radius:50%;filter:blur(2px)}
.orb.o1{width:170px;height:170px;background:radial-gradient(circle at 35% 30%,#fff,#d6e8de 60%,rgba(214,232,222,0) 72%)}
.orb.o2{width:60px;height:60px;right:6px;top:4px;background:radial-gradient(circle at 35% 30%,#fff7e6,#f0cf8f 65%,rgba(240,207,143,0) 72%);animation:float3d 4s ease-in-out infinite alternate-reverse}
.page-h h1,.page-h p,.page-h .search,.page-h .page-act{position:relative;z-index:1}
.page-h .search,.page-h p{max-width:min(760px,calc(100% - 260px))}
.empty .b3d{margin-bottom:12px}

/* Page entrance and reveal */
#app.enter{animation:fadein .4s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

@media (max-width:1060px){.page-art{width:150px;right:20px}.page-art .b3d{--s:96px}.page-h .search,.page-h p{max-width:calc(100% - 180px)}}
@media (max-width:820px){
  .hero-art-w{position:relative;inset:auto;width:auto;height:230px;margin:-34px -18px 0}
  .hero-art-w img{object-position:center 40%}
  .hero-art-w::before{background:linear-gradient(0deg,#fff 0,rgba(255,255,255,0) 45%)}
  .hero .wrap{margin-top:-22px}
  .hero .line-h{margin-top:30px}
  .hero .line{background:none;box-shadow:none;backdrop-filter:none;padding:0;border-radius:0}
  .ph{grid-template-columns:minmax(0,1fr) 120px;gap:10px}
  .ph-img{width:120px}
  .clip-box{grid-template-columns:1fr}
  .clip-view{min-height:300px}
  .cf-item{width:62%}
  .clip-side{border-left:0;border-top:1px solid var(--line);padding:18px}
  .clip-cap h3{font-size:23px}
  .clip-dots .lbl{display:none}
  .clip-dots button{padding:12px 3px}
  .page-art{display:none}
  .page-h .search,.page-h p{max-width:none}
  .cat-tiles{gap:10px}
  .cat-tile:nth-child(n){padding:14px 12px;border:1px solid var(--line)}
  .b3d-md{--s:44px}
}
html.screen .clip-cap h3{font-size:32px}
html.screen .clip-cap p{font-size:20px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-art-w img{transform:none!important}
}
@media print{.hero-art-w,.clip,.page-art,.ph-img{display:none!important}}

/* Generated 3D artwork on cards, section headers and empty states */
.ct-img{display:block;width:96px;height:96px;margin:-6px 0 4px -8px;position:relative;z-index:1}
.ct-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.cat-tile:hover .ct-img img{transform:translateY(-4px) scale(1.06) rotate(-2deg)}
.page-art{transform:none;margin-top:-95px;width:220px;height:190px}
.page-art img{position:relative;width:190px;height:190px;object-fit:contain;mix-blend-mode:multiply;animation:float3d 5s ease-in-out infinite alternate}
.page-art .orb.o1{width:200px;height:200px}
.empty-img{display:block;width:150px;height:150px;object-fit:contain;mix-blend-mode:multiply;margin-bottom:6px}
@media (max-width:820px){.ct-img{width:72px;height:72px}}

/* Certificates gallery and viewer */
.certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:16px 0 8px}
.cert{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.cert:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.cert-thumb{position:relative;display:grid;place-items:center;height:210px;padding:16px;border:0;background:linear-gradient(160deg,#f6f1e4,#eef5f1);cursor:zoom-in;overflow:hidden}
.cert-thumb img{max-height:100%;max-width:100%;box-shadow:0 10px 24px rgba(22,37,31,.18),0 2px 4px rgba(22,37,31,.12);transform:perspective(700px) rotateX(6deg) rotateY(-8deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cert:hover .cert-thumb img{transform:perspective(700px) rotateX(0) rotateY(0) scale(1.03)}
.cert-zoom{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--cane);box-shadow:var(--shadow-1);opacity:0;transition:opacity .25s}
.cert:hover .cert-zoom,.cert-thumb:focus-visible .cert-zoom{opacity:1}
.cert-thumb.none{cursor:default;flex-direction:column;gap:10px;color:var(--muted);font-size:14px;text-align:center}
.cert-thumb.none .b3d{filter:grayscale(.6);opacity:.7}
.cert-b{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px 16px}
.cert-b h3{font-size:17px;font-weight:700}
.cert-meta{margin:0;color:var(--muted);font-size:13.5px;line-height:1.45}
.cert-act{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:4px}
html.lb-on{overflow:hidden}
.lb{position:fixed;inset:0;z-index:100;background:rgba(14,30,24,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px;animation:fadein .25s ease both}
.lb-card{width:min(920px,100%);max-height:100%;display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:zoomIn .35s cubic-bezier(.2,.8,.2,1) both}
.lb-h{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}
.lb-h h2{font-size:20px;font-weight:700}
.lb-h p{margin:2px 0 0;color:var(--muted);font-size:13.5px}
.lb-act{display:flex;align-items:center;gap:14px;flex:none}
.lb-pages{overflow:auto;padding:18px;background:#eef1ef;display:flex;flex-direction:column;align-items:center;gap:18px}
.lb-pages img{width:100%;max-width:820px;height:auto;background:#fff;box-shadow:0 8px 24px rgba(22,37,31,.18)}
@media (max-width:820px){.certs{grid-template-columns:1fr 1fr;gap:10px}.cert-thumb{height:160px;padding:10px}.lb{padding:0}.lb-card{border-radius:0;height:100%}.lb-h{flex-wrap:wrap}}
@media (max-width:420px){.certs{grid-template-columns:1fr}}
@media print{.cert-zoom,.lb{display:none!important}}

/* Documents by standard and clause */
.seg{display:inline-flex;gap:4px;padding:4px;margin:4px 0 18px;background:#e7eeea;border-radius:12px}
.seg button{display:inline-flex;align-items:center;gap:.45em;border:0;background:none;padding:9px 16px;border-radius:9px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button[aria-selected=true]{background:#fff;color:var(--cane);box-shadow:var(--shadow-1)}
.std-tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.std-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;text-align:left;box-shadow:var(--shadow-1);transition:transform .2s,border-color .2s}
.std-tabs button b{font-size:15.5px;color:var(--ink)}
.std-tabs button span{font-size:13px;color:var(--muted)}
.std-tabs button:hover{transform:translateY(-2px);border-color:#b7cfc3}
.std-tabs button[aria-selected=true]{background:linear-gradient(145deg,#1b6a4d,var(--cane));border-color:var(--cane)}
.std-tabs button[aria-selected=true] b,.std-tabs button[aria-selected=true] span{color:#fff}
.std-tools{display:flex;align-items:center;gap:16px;margin:16px 0 4px}
.std-tools input{flex:1;max-width:520px;height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.std-list details{background:#fff;border:1px solid var(--line);border-radius:12px;margin-top:8px;overflow:hidden}
.std-list summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none}
.std-list summary::-webkit-details-marker{display:none}
.std-list details[open] summary{background:var(--cane-soft)}
.std-k{min-width:64px;padding:2px 10px;border-radius:6px;background:var(--ink);color:#fff;font-weight:700;font-size:14px;text-align:center}
.std-t{font-weight:600}
.std-mix{display:flex;gap:4px;flex-wrap:wrap}
.std-mix i,.std-doc .tag{font-style:normal;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:4px;background:#eef1ef;color:var(--muted)}
.std-mix .k-QM,.std-doc .k-QM{background:#14573f;color:#fff}.std-mix .k-QP,.std-doc .k-QP{background:#d7ebe0;color:#14573f}
.std-mix .k-WI,.std-doc .k-WI{background:#fbf0dc;color:#7a4a0e}.std-mix .k-SP,.std-doc .k-SP{background:#e9edf5;color:#3d4d6e}
.std-n{min-width:34px;text-align:center;font-weight:700;color:var(--cane)}
.std-list .body{padding:6px 16px 12px}
.std-docs{list-style:none;margin:0;padding:0}
.std-doc{display:grid;grid-template-columns:34px 150px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eef1ef}
.std-doc .code{font-weight:600;font-size:14px}
.std-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:10px 0 0;font-size:14px}
.std-foot a{display:inline-flex;align-items:center;gap:.4em;font-weight:600}
@media (max-width:820px){
  .std-tabs{grid-template-columns:1fr 1fr}
  .std-list summary{grid-template-columns:auto minmax(0,1fr) auto}
  .std-mix{display:none}
  .std-doc{grid-template-columns:30px minmax(0,1fr);row-gap:2px}
  .std-doc .t{grid-column:2}
  .std-doc .link-b{grid-column:2}
}

/* Video courses */
.courses-sec{margin:34px 0 8px}
.courses{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-top:14px}
.course{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-1);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.course:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.course-img{position:relative;display:block;height:190px;background:radial-gradient(circle at 50% 45%,#fff,#f3eee0);overflow:hidden}
.course-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.course:hover .course-img img{transform:scale(1.07) translateY(-4px)}
.course-play{position:absolute;right:14px;bottom:14px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:linear-gradient(145deg,#1b6a4d,var(--cane));color:#fff;box-shadow:0 8px 18px rgba(20,87,63,.35)}
.course-play .ic{width:20px;height:20px;margin-left:2px}
.course-b{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 16px 16px;flex:1}
.course-dept{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--raw)}
.course-b h3{font-size:18px;font-weight:700}
.course-sum{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.course-meta{display:inline-flex;align-items:center;gap:.4em;margin:0;font-size:13.5px;color:var(--cane);font-weight:600}
.course-eps{width:100%;font-size:14px}
.course-eps summary{cursor:pointer;font-weight:600;color:var(--cane)}
.course-eps ol{margin:8px 0 0;padding-left:20px;display:grid;gap:6px}
.course-more{margin:8px 0 0;font-size:13px;color:var(--muted)}
.course-b .more{margin-top:auto}
.st-course{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:16px;margin:22px 0 4px;padding:10px 18px 10px 10px;border-radius:16px;background:linear-gradient(120deg,#fff,#fdf6e6);border:1px solid #ecdcb8;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-1);transition:transform .25s,box-shadow .25s}
.st-course:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.st-course img{width:110px;height:90px;object-fit:contain;mix-blend-mode:multiply}
.st-course-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.st-course-b b{font-size:18px}
.st-course-b>span:last-child{font-size:14px;color:var(--muted)}
.eyebrow-s{display:inline-flex;align-items:center;gap:.35em;font-size:12.5px;font-weight:700;color:var(--raw);letter-spacing:.03em}
.st-course-go{display:inline-flex;align-items:center;gap:.4em;padding:9px 16px;border-radius:22px;background:var(--cane);color:#fff;font-weight:600;white-space:nowrap}
@media (max-width:820px){.st-course{grid-template-columns:80px minmax(0,1fr)}.st-course img{width:80px;height:70px}.st-course-go{grid-column:1/-1;justify-content:center}.courses{grid-template-columns:1fr 1fr;gap:10px}.course-img{height:140px}}
@media (max-width:420px){.courses{grid-template-columns:1fr}}

/* Countdown to the next audit */
.countdown{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 14px;border-radius:14px;background:linear-gradient(120deg,#14573f,#1f7a58);color:#fff;box-shadow:var(--shadow-1)}
.countdown .cd-n{font-size:34px;font-weight:700;line-height:1}
.countdown .cd-u{font-size:14px;opacity:.85;margin-right:6px}
.countdown .cd-t{display:flex;flex-direction:column;line-height:1.35}
.countdown .cd-t span{font-size:13px;opacity:.85}
.countdown.big{padding:18px 22px;margin:4px 0 26px;background:radial-gradient(500px 160px at 90% 0,rgba(242,198,109,.35),rgba(242,198,109,0)),linear-gradient(120deg,#0f4632,#1b6a4d)}
.countdown.big .cd-n{font-size:56px}
.countdown.big .cd-t b{font-size:19px}

/* Department readiness self-check */
.ready{margin-bottom:30px}
.ready-f{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:12px 0}
.ready-f select{height:42px;border:1.5px solid var(--line);border-radius:10px;padding:0 10px;font:inherit;background:#fff;max-width:100%}
.ready-only{display:inline-flex;align-items:center;gap:6px;font-size:14.5px}
.ready-sum{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 0;background:var(--crystal)}
.ready-meter{flex:1;min-width:180px;height:12px;border-radius:6px;background:#dfe7e3;overflow:hidden}
.ready-meter i{display:block;height:100%;border-radius:6px;transition:width .4s}
.ready-meter i.low{background:#c0573e}.ready-meter i.mid{background:var(--raw)}.ready-meter i.ok{background:var(--cane)}
#rN{font-size:14px;color:var(--muted)}#rN b{color:var(--ink);font-size:16px}
.ready-g{margin:18px 0 6px;font-size:16px;color:var(--cane)}
.ready-i{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 14px;margin-top:6px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px}
.ready-i.v-c{border-left-color:var(--cane)}.ready-i.v-n{border-left-color:#c0573e;background:#fff8f6}.ready-i.v-x{opacity:.6}
.ready-no{font-weight:700;color:var(--muted);font-size:14px}
.ready-q p{margin:0}
.ready-c{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px!important;font-size:13px}
.ready-c a{font-weight:600}
.ready-b{display:flex;gap:4px}
.ready-b button{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border:1.5px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-size:13.5px;color:var(--muted)}
.ready-b button[data-v=c][aria-pressed=true]{background:var(--cane);border-color:var(--cane);color:#fff}
.ready-b button[data-v=n][aria-pressed=true]{background:#c0573e;border-color:#c0573e;color:#fff}
.ready-b button[data-v=x][aria-pressed=true]{background:#7b8a83;border-color:#7b8a83;color:#fff}
@media (max-width:820px){.ready-i{grid-template-columns:28px minmax(0,1fr)}.ready-b{grid-column:2}.ready-b button{min-height:40px}.countdown.big .cd-n{font-size:44px}}
@media print{.ready-f,.ready-b button:not([aria-pressed=true]),.countdown{display:none!important}.ready-i{break-inside:avoid}}

/* Practice links, quiz and glossary */
.practice{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:14px 0 6px}
.prac{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;background:#fff;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-1);transition:transform .25s,box-shadow .25s}
.prac:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.prac img{width:64px;height:64px;object-fit:contain;mix-blend-mode:multiply}
.prac>span{flex:1;display:flex;flex-direction:column}.prac>span span{font-size:13.5px;color:var(--muted)}
.prac>.ic{color:var(--cane)}
.quiz-sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.quiz-set{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;text-align:left;box-shadow:var(--shadow-1);transition:transform .25s}
.quiz-set:hover{transform:translateY(-3px)}
.quiz-set img{width:110px;height:110px;object-fit:contain;mix-blend-mode:multiply;align-self:center}
.quiz-set b{font-size:18px}.quiz-set span{font-size:13.5px;color:var(--muted)}
.quiz-best{display:inline-flex;align-items:center;gap:4px;color:var(--cane)!important;font-weight:600}
.quiz{max-width:720px;margin:0 auto;padding:22px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-2)}
.quiz-top{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
.quiz-prog{height:6px;border-radius:3px;background:#e4ebe7;overflow:hidden}.quiz-prog i{display:block;height:100%;background:var(--cane);transition:width .3s}
.quiz-q{font-size:21px;font-weight:700;margin:16px 0 14px;line-height:1.45}
.quiz-o{display:grid;gap:8px}
.quiz-o button{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:52px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font:inherit;text-align:left}
.quiz-o button:hover:not(:disabled){border-color:var(--cane)}
.quiz-l{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--cane-soft);color:var(--cane);font-weight:700;font-size:13px}
.quiz-o button.right{border-color:var(--cane);background:#e9f5ee}.quiz-o button.right .quiz-l{background:var(--cane);color:#fff}
.quiz-o button.wrong{border-color:#c0573e;background:#fdf0ec}.quiz-o button.wrong .quiz-l{background:#c0573e;color:#fff}
.quiz-o button:disabled{cursor:default;color:var(--ink)}
.quiz-fb{display:flex;align-items:center;gap:6px;min-height:24px;margin:12px 0 4px;font-weight:600}
.quiz-fb.ok{color:var(--cane)}.quiz-fb.no{color:#b04a33}
.quiz-end{text-align:center}.quiz-end img{width:150px;height:150px;object-fit:contain;mix-blend-mode:multiply}
.quiz-end h2{font-size:52px;color:var(--cane)}
.quiz-act{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;margin-top:10px}
.gloss{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:8px}
.gl{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px}
.gl-th{font-weight:700;font-size:17px}.gl-lo{font-family:"Noto Sans Lao",var(--font);font-size:17px;color:var(--cane)}
.gl-u{font-size:13px;color:var(--ink)}.gl-g{font-size:12.5px;color:var(--muted)}
@media (max-width:820px){.quiz{padding:16px}.quiz-q{font-size:19px}}
.iqa-app{display:flex;align-items:center;gap:14px;margin:12px 0 4px;padding:8px 16px 8px 8px;border-radius:14px;background:linear-gradient(120deg,#fff,#eef6f1);border:1px solid #cfe1d7;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-1);transition:transform .25s}
.iqa-app:hover{transform:translateY(-2px)}
.iqa-app img{width:64px;height:64px;object-fit:contain;mix-blend-mode:multiply}
.iqa-app>span:nth-child(2){flex:1;display:flex;flex-direction:column}.iqa-app>span:nth-child(2) span{font-size:13.5px;color:var(--muted)}
.iqa-go{display:inline-flex;align-items:center;gap:.4em;padding:9px 16px;border-radius:22px;background:var(--cane);color:#fff;font-weight:600;white-space:nowrap}
@media (max-width:600px){.iqa-app{flex-wrap:wrap}.iqa-go{width:100%;justify-content:center}}
.st-book{display:inline-flex;align-items:center;gap:.4em;margin:8px 0 0;font-weight:600}

/* Standards page, redesigned */
.cc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 22px}
.cc-stats div{display:flex;align-items:baseline;gap:10px;padding:14px 18px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.cc-stats b{font-size:32px;line-height:1}
.cc-stats span{color:var(--muted);font-size:14px}
.cc-stats .ok b{color:var(--cane)}.cc-stats .warn b{color:var(--raw)}.cc-stats .wait b{color:#7b8a83}
.cc-group{margin-bottom:26px}
.cc-gh{display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:10px}
.cc-gh span{font-size:13px;padding:1px 9px;border-radius:10px;background:var(--cane-soft);color:var(--cane)}
.certs2{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
.cc{display:grid;grid-template-columns:140px minmax(0,1fr);background:#fff;border:1px solid var(--line);border-left:4px solid var(--cane);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1);transition:transform .25s,box-shadow .25s}
.cc:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.cc-warn{border-left-color:var(--raw)}.cc-wait{border-left-color:#9aa8a1}
.cc-img{position:relative;display:grid;place-items:center;padding:12px;border:0;background:linear-gradient(160deg,#f6f1e4,#eef5f1);cursor:zoom-in}
.cc-img img{max-width:100%;max-height:150px;box-shadow:0 8px 18px rgba(22,37,31,.18);transform:perspective(600px) rotateY(-8deg);transition:transform .4s}
.cc:hover .cc-img img{transform:none}
.cc-img.none{cursor:default}
.cc-pages{position:absolute;left:8px;bottom:8px;padding:1px 8px;border-radius:10px;background:rgba(22,37,31,.78);color:#fff;font-size:12px}
.cc-b{display:flex;flex-direction:column;gap:4px;padding:14px 16px}
.cc-b h3{font-size:18px;font-weight:700}
.cc-by{margin:0;color:var(--muted);font-size:13.5px}
.cc-st{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 0;font-size:14px}
.cc-dot{width:9px;height:9px;border-radius:50%;background:var(--cane);box-shadow:0 0 0 3px rgba(20,87,63,.15)}
.cc-warn .cc-dot{background:var(--raw);box-shadow:0 0 0 3px rgba(185,121,26,.18)}.cc-wait .cc-dot{background:#9aa8a1;box-shadow:none}
.cc-left{color:var(--muted)}
.cc-next{display:inline-flex;align-items:center;gap:.4em;margin:2px 0 0;font-size:13px;color:var(--muted)}
.cc-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:auto;padding-top:8px}
.cc-act .cbtn{height:38px}
.cc-none{margin:auto 0 0;font-size:13px;color:var(--muted)}
.lb-card{width:min(1180px,100%)}
.lb-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;min-height:0;overflow:hidden}
.lb-body .lb-pages{max-height:calc(100vh - 140px)}
.lb-info{overflow:auto;max-height:calc(100vh - 140px);padding:18px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.lb-info h3{font-size:15px;margin-top:8px;color:var(--cane)}
.lb-info p{margin:0;font-size:14.5px;line-height:1.6}
.lb-kv{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #eef1ef;padding:4px 0}
.lb-kv span{color:var(--muted)}
.lb-info .more{align-self:flex-start;margin-top:10px}
@media (max-width:820px){.cc-stats div{flex-direction:column;gap:2px;padding:10px 12px}.cc-stats b{font-size:26px}.certs2{grid-template-columns:1fr}.cc{grid-template-columns:110px minmax(0,1fr)}.lb-body{grid-template-columns:1fr;overflow:auto}.lb-body .lb-pages,.lb-info{max-height:none}.lb-info{border-left:0;border-top:1px solid var(--line)}}

/* Sound on/off */
.sfx-b{display:grid;place-items:center;width:34px;height:32px;flex:none;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--cane);cursor:pointer}
.sfx-b[aria-pressed=false]{color:var(--muted)}
.sfx-b .ic{width:18px;height:18px}
@media print{.sfx-b{display:none}}

/* Knowledge list as light cards: a coloured category tile does the talking, fewer tags */
.kb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;border-top:0}
.kb-row{grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:4px;align-content:start;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-1);--k:var(--cane);--ks:var(--cane-soft)}
.kb-row:hover{background:#fff;transform:translateY(-3px);box-shadow:var(--shadow-2)}
.kb-row:hover .kb-t{text-decoration:none;color:var(--k)}
.kb-row>.kb-ic{grid-row:1/4;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ks);color:var(--k);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.kb-row:hover>.kb-ic{transform:rotate(-8deg) scale(1.1)}
.kb-row>.kb-ic .ic{width:22px;height:22px}
.kb-row .kb-t{font-size:16.5px;color:var(--ink)}
.kb-row .kb-s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px}
.kb-ext{width:14px;height:14px;margin-left:6px;vertical-align:-1px;color:var(--muted)}
.k-std{--k:#14573f;--ks:#e3efe9}.k-fs{--k:#0f766e;--ks:#dcf3ef}.k-quality{--k:#6d28d9;--ks:#efe8fb}.k-process{--k:#b45309;--ks:#fbefdc}
.k-maint{--k:#475569;--ks:#e8edf2}.k-she{--k:#c2410c;--ks:#fde9dd}.k-train{--k:#1d4ed8;--ks:#e4ecfc}.k-improve{--k:#a16207;--ks:#fbf3d6}
@media (max-width:820px){.kb-list{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.kb-row:hover,.kb-row:hover>.kb-ic{transform:none}}

/* ---------- Motion pack ---------- */
/* Sugar crystals drifting up over the hero art */
.sugar-bits{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.sb{position:absolute;bottom:-20px;width:var(--s);height:var(--s);border-radius:2px;background:linear-gradient(135deg,#fff,#f3e3bf 60%,#e2c98d);box-shadow:0 0 6px rgba(255,255,255,.9),0 2px 4px rgba(122,74,14,.2);opacity:.85;animation:drift var(--t) linear infinite}
@keyframes drift{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.9}50%{transform:translate(18px,-260px) rotate(180deg)}90%{opacity:.7}100%{transform:translate(-10px,-560px) rotate(360deg);opacity:0}}
/* Numbers strip */
.hstats{background:linear-gradient(180deg,#fff,var(--crystal,#f6f8f7))}
.hs-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;padding:22px 0 8px}
.hs{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1);text-decoration:none;color:var(--ink);transition:transform .3s,box-shadow .3s}
.hs:hover{box-shadow:var(--shadow-2)}
.hs-ic{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--cane-soft);color:var(--cane);animation:bob 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.5s)}
.hs-ic .ic{width:21px;height:21px}
.hs b{font-size:28px;line-height:1.1;color:var(--cane);font-variant-numeric:tabular-nums}
.hs span:last-child{font-size:13.5px;color:var(--muted)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* Kaizen showcase */
.kz-sec{padding:26px 0 10px;overflow:hidden}
.kz-track{overflow:hidden;padding:10px 0 18px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.kz-row{display:flex;gap:14px;width:max-content;animation:marquee calc(var(--n) * 5s) linear infinite}
.kz-track:hover .kz-row,.kz-track:focus-within .kz-row{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.kz{--k:var(--raw);--ks:var(--raw-soft);display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:center;width:300px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1);text-decoration:none;color:var(--ink)}
.kz b{font-size:15px;line-height:1.4}
.kz span:last-child{grid-column:2;font-size:13px;color:var(--muted)}
.kz-ic{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ks);color:var(--k)}
.kz:hover .kz-ic{animation:glow 1s ease-in-out infinite alternate}
@keyframes glow{to{box-shadow:0 0 0 6px rgba(185,121,26,.18),0 0 18px rgba(255,200,80,.7)}}
/* 3D tilt toward the pointer */
.tilting{transform:perspective(800px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-3px)!important;transition:transform .12s ease-out,box-shadow .3s!important}
/* Page header slides in */
#app.enter .page-h h1{animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
#app.enter .page-h p{animation:rise .55s .08s cubic-bezier(.2,.8,.2,1) both}
#app.enter .page-art{animation:zoomIn .7s .1s cubic-bezier(.2,.8,.2,1) both}
@media (max-width:820px){.hs-row{grid-template-columns:repeat(2,minmax(0,1fr))}.hs b{font-size:23px}.kz{width:250px}.sugar-bits{display:none}}
@media (prefers-reduced-motion:reduce){.sb,.hs-ic,.kz-row{animation:none}.kz-track{overflow-x:auto}.tilting{transform:none!important}}
@media print{.sugar-bits,.kz-sec,.hstats{display:none}}

/* Phones in dark mode must not repaint the page */
:root{color-scheme:only light}
html{background:#fff}
/* ---------- Motion pack 2 ---------- */
.sprog{position:fixed;left:0;right:0;top:0;height:3px;z-index:200;background:linear-gradient(90deg,var(--cane),#2f9e6e,var(--raw));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.totop{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:30;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:0;background:var(--cane);color:#fff;box-shadow:0 8px 20px rgba(20,87,63,.35);cursor:pointer;animation:popin .35s cubic-bezier(.34,1.56,.64,1) both}
.totop .ic{transform:rotate(90deg);width:22px;height:22px}
.totop:hover{animation:bob 1s ease-in-out infinite}
@keyframes popin{from{transform:scale(0)}to{transform:scale(1)}}
@media (min-width:821px){.totop{bottom:24px}}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);pointer-events:none;animation:ripple .6s ease-out forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.confetti{position:fixed;inset:0;z-index:300;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:9px;height:13px;border-radius:2px;animation:fall var(--t) cubic-bezier(.25,.6,.4,1) forwards}
@keyframes fall{to{transform:translate(var(--x),105vh) rotate(var(--r))}}
/* Page artwork floats gently */
.page-art{animation:float3d 4.5s ease-in-out infinite alternate}
/* Active tab hops when chosen */
nav.main a[aria-current=page] .ic{animation:hop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes hop{0%{transform:translateY(0)}40%{transform:translateY(-5px) scale(1.15)}100%{transform:none}}
/* Station buttons breathe when they hold control limits */
.st.ctl .dot{animation:breathe 2.8s ease-in-out infinite}
@keyframes breathe{0%,100%{box-shadow:0 0 0 2px var(--syrup),0 0 0 2px rgba(185,121,26,.45)}50%{box-shadow:0 0 0 2px var(--syrup),0 0 0 10px rgba(185,121,26,0)}}
/* Sugar crystals also on phones, fewer and shorter */
@media (max-width:820px){.sugar-bits{display:block}.sb:nth-child(2n){display:none}.sb{animation-name:driftm}}
@keyframes driftm{0%{transform:translate(0,0) rotate(0);opacity:0}15%{opacity:.9}100%{transform:translate(12px,-240px) rotate(300deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.page-art,.st.ctl .dot,nav.main a .ic,.totop{animation:none}.sprog{display:none}}
@media print{.sprog,.totop,.confetti{display:none}}