/* Shared public UI layer. Loaded last; no simulation geometry overrides. */

:root{
  --ui-muted:#b0bbb1;
  --ui-gold:#d6bd88;
  --header-height:80px;
  --font-ui:"Noto Sans Thai","Leelawadee UI","Segoe UI",Tahoma,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --line-heading:1.45;
  --line-body:1.75;
}
html{scroll-padding-top:calc(var(--header-height) + 20px)}
body{font-family:var(--font-ui);font-weight:var(--font-weight-regular);line-height:var(--line-body);font-synthesis:none;text-rendering:optimizeLegibility}
button,input,select,textarea{font-family:inherit}
:is(h1,h2,h3,h4,h5,h6,.site-brand__main,.brand-logo){font-family:var(--font-ui);font-synthesis:none}
:is(h1,h2){font-weight:var(--font-weight-semibold)}
:is(h3,h4,h5,h6){font-weight:var(--font-weight-medium)}
[hidden]{display:none!important}
a,button,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #dfc888;outline-offset:4px;border-radius:4px}
main[tabindex="-1"]:focus{outline:none}
.skip-link{position:fixed;left:16px;top:12px;z-index:1100;padding:12px 18px;background:#f4eddc;color:#102218;transform:translateY(-160%);font-size:1rem;font-weight:600}
.skip-link:focus{transform:translateY(0)}
body .container{width:calc(100% - 40px);max-width:1280px}
body .site-header,body .site-header.is-scrolled{position:fixed;background:rgba(5,16,11,.97);border-bottom:1px solid #2a4031;backdrop-filter:blur(12px)}
body .site-header__inner{height:auto;min-height:80px;gap:24px;padding-top:10px;padding-bottom:10px}
body .site-brand__main{font-size:1.25rem;line-height:1.2;letter-spacing:.1em}
body .site-brand__sub{font-size:.75rem;line-height:1.5;letter-spacing:.1em;color:#b7c8b9}
body .desktop-nav{gap:24px;flex-wrap:wrap}
body .nav-link{height:auto;min-height:44px;font-size:.9375rem;font-weight:500;color:#c3d0c5;letter-spacing:0}
body .nav-link::after{bottom:3px;background:var(--ui-gold)}
body .nav-link.is-active{color:var(--ui-gold)}
body .menu-toggle{width:44px;height:44px}
body .mobile-menu{top:var(--header-height);height:calc(100dvh - var(--header-height));overscroll-behavior:contain}
body .mobile-link{font-size:1.125rem;line-height:1.7;font-weight:500;gap:16px}
body .mobile-link span{font-size:.8125rem;color:#adbbaa}
body .mobile-menu__footer{font-size:.75rem;color:#aebcae;letter-spacing:0;gap:16px;flex-wrap:wrap}
.elearning-page .elearning-main{padding:calc(var(--header-height) + 28px) 0 56px}
.elearning-page .elearning-hero{padding:8px 0 28px}
.elearning-page .elearning-hero h1{font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.5;font-weight:500}
.elearning-page .elearning-hero p{font-size:1rem;color:var(--ui-muted);line-height:1.8}
.elearning-page .elearning-kicker{font-size:.8125rem;letter-spacing:.06em}
.elearning-page .elearning-section{padding:28px 0 36px}
.elearning-page .elearning-section__head span{font-size:.8125rem;line-height:1.6;letter-spacing:.05em}
.elearning-page .elearning-section__head h2{font-size:1.5rem;line-height:1.6;font-weight:500}
.elearning-page .course-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;background:transparent;border:0}
.elearning-page .course-card{min-height:220px;border:1px solid #2e3c30;border-radius:12px;padding:20px;min-width:0}
.elearning-page .course-card__top{margin-bottom:20px}
.elearning-page .course-card__number,.elearning-page .course-card__label{font-size:.8125rem;color:#bcba9c}
.elearning-page .course-card h3{font-size:1.1875rem;line-height:1.7;font-weight:500;margin-top:0}
.elearning-page .course-card p{font-size:1rem;color:#b1bcb1;line-height:1.85;overflow-wrap:anywhere}
.elearning-page .course-card__foot{font-size:.875rem;color:#d6bd88;margin-top:auto;padding-top:16px}
.elearning-page .elearning-empty{font-size:1rem;color:#bec8be}
.elearning-page .ebook-entry{min-width:0;text-align:center}
.elearning-page .smart-dflip-grid .df-book-title,.elearning-page .smart-dflip-grid ._df_thumb .df-book-title{font-size:.9375rem!important;line-height:1.8!important;font-weight:400!important;letter-spacing:0!important}
.elearning-page .smart-dflip-grid ._df_thumb[role="button"]:focus-visible{outline:3px solid #dfc888!important;outline-offset:6px}
.ebook-pdf-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px;padding:4px 12px;color:#d6bd88;font-size:.875rem;text-decoration:underline;text-underline-offset:4px}
body .course-main,body .ebook-viewer-main,body .site-page-main{padding-top:calc(var(--header-height) + 32px)}
body .course-summary,body .lesson-content p,body .lesson-body,body .course-empty,body .video-placeholder p,body .lab-placeholder p{font-size:1rem;color:#b5c3b8;line-height:1.9}
body .course-back,body .course-kicker,body .lesson-meta,body .course-section-head span{font-size:.875rem;line-height:1.7}
body .lesson-card{min-width:0}
body .lesson-content{min-width:0;overflow-wrap:anywhere}
body .ebook-viewer-head h1{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:500;line-height:1.65}
body .ebook-viewer-head p,body .ebook-missing p{font-size:1rem;line-height:1.85;color:#b1bfb2}
body .ebook-viewer-head span{font-size:.875rem;letter-spacing:.06em}
body .ebook-viewer-actions a{font-size:.9375rem;min-height:44px;line-height:1.8}
body.about-page .about-project-main{padding-top:calc(var(--header-height) + 32px)}
body.about-page .about-hero h1{font-size:clamp(1.75rem,4vw,3rem);line-height:1.55;letter-spacing:0}
body.about-page .about-project p{font-size:1rem;line-height:1.9;color:#afc0b4}
body.about-page :is(.about-kicker,.about-metric span,.about-section-label,.about-card small){font-size:.875rem;line-height:1.75;letter-spacing:0}
body.about-page .about-hero-actions a{font-size:.9375rem;min-height:44px}
body .quiz-page-shell{padding-top:calc(var(--header-height) + 28px)}
body .quiz-hero{padding-bottom:24px;gap:24px}
body .quiz-hero h1{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.5;font-weight:500}
body .quiz-hero p{font-size:1rem;color:#b2c0b5;line-height:1.85}
body .quiz-kicker,body .quiz-section-label,body .quiz-hero__stats span{font-size:.875rem;letter-spacing:0;line-height:1.7}
body .quiz-hero__stats strong{font-size:1.625rem}
body .quiz-panel__top h2{font-size:1.125rem;font-weight:500;line-height:1.7}
body .quiz-state-badge,body .question-meta span,body .quiz-progress__meta,body .exam-save-state,body .quiz-note,body .exam-security-note{font-size:.875rem;line-height:1.8}
body .exam-security-note{padding:12px 18px}
body .exam-security-note p{margin:4px 0 0;font-size:.875rem;color:#afc2b2;line-height:1.8}
body .quiz-question-card h3{font-size:1.25rem;line-height:1.85;letter-spacing:0;font-weight:500}
body .quiz-option{min-height:56px;min-width:0;padding:14px 16px}
body .quiz-option__label{font-size:1rem;line-height:1.8;overflow-wrap:anywhere}
body .quiz-option__letter{font-size:1rem}
body .quiz-dot{min-width:44px;min-height:44px;font-size:.875rem}
body .quiz-dots{gap:8px;padding:8px 4px}
body .quiz-button,body .exam-submit-button{min-height:48px;font-size:1rem}
body .exam-submit-button strong{font-size:1rem}
body .exam-submit-button small{font-size:.875rem;line-height:1.75}
body .quiz-controls,body .result-actions{gap:12px;flex-wrap:wrap}
body .quiz-feedback p,body .result-summary p,body .review-item p{font-size:1rem;line-height:1.85}
body .exam-save-state.is-error{color:#ffb9ac}
body .iot-lab-main{padding-top:var(--header-height)}
.iot-lab-one-lot .lab-intro{padding:24px 0!important}
.iot-lab-one-lot .lab-intro h1{font-size:clamp(1.5rem,2.7vw,2rem)!important;line-height:1.65!important;letter-spacing:0;font-weight:500}
.iot-lab-one-lot .lab-lead{font-size:1rem!important;line-height:1.9!important;color:#b0c3b5}
.iot-lab-one-lot :is(.lab-kicker,.lab-overline,.section-eyebrow,.lab-tech-tags span,.viewer-live,.viewer-browser__address,.viewer-status){font-size:.875rem!important;line-height:1.75!important;letter-spacing:0!important}
.iot-lab-one-lot .lot-zone-nav{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;background:transparent;border:0}
.iot-lab-one-lot .zone-tab{min-height:48px;font-size:.9375rem!important;color:#bbcfbf;border:1px solid #304b37;border-radius:8px;padding:8px;line-height:1.7}
.iot-lab-one-lot .zone-tab.is-active{background:#26442f;color:#f2dfb1;border-color:#c2a770;font-weight:600}
.iot-lab-one-lot :is(.lot-panel>span,.lot-stats small,.zone-device-role,.zone-device-card span,.zone-device-card em,.zone-rule-card span,.zone-rule-card small,.sensor-field label,.sensor-range,.sensor-unit,.simulation-result>span,.sim-hint,.gesture-item small){font-size:.875rem!important;line-height:1.8!important;letter-spacing:0!important;color:#acbeb2}
.iot-lab-one-lot :is(.lot-panel p,.zone-device-card strong,.zone-rule-card strong,.zone-empty,.sensor-value,.simulation-result,.simulation-log,.manual-actuators label,.sim-mode-control){font-size:1rem!important;line-height:1.85!important}
.iot-lab-one-lot :is(.viewer-card__topbar h2,.lab-section-heading h2,.simulation-panel h3){font-size:1.25rem!important;line-height:1.7!important}
.iot-lab-one-lot .sim-btn,.iot-lab-one-lot .viewer-reset,.iot-lab-one-lot .simulation-log-head button{min-height:44px;min-width:44px;font-size:.9375rem!important}
.iot-lab-one-lot :is(.sensor-field input,.sim-mode-control select){min-height:44px;font-size:1rem!important}
.iot-lab-one-lot .sensor-field input[type="range"]{min-height:44px;width:100%;cursor:pointer}
.iot-lab-one-lot :is(.sim-mode-btn,.sim-launch-button){min-height:48px;font-size:1rem!important;line-height:1.75!important}
.iot-lab-one-lot .sim-launch-button small{font-size:.875rem!important;line-height:1.8!important}
.iot-lab-one-lot .simulation-inputs label{font-size:.9375rem!important;line-height:1.85!important}
.iot-lab-one-lot .simulation-inputs input[type="range"]{min-height:44px;width:100%}
.iot-lab-one-lot .simulation-inputs output{font-size:1rem!important;line-height:1.75!important}
.iot-lab-one-lot .sim-control__head strong{font-size:.9375rem!important;line-height:1.85!important}
.iot-lab-one-lot .sim-control select{font-size:1rem!important;min-height:44px}
.iot-lab-one-lot .simulation-launch__button{min-height:48px;font-size:1rem!important}
.iot-lab-one-lot .simulation-launch__button strong{font-size:1rem!important;line-height:1.75!important}
.iot-lab-one-lot .simulation-launch__button small{font-size:.875rem!important;line-height:1.85!important}
.iot-lab-one-lot .simulation-panel__head button{min-width:44px;min-height:44px}
.iot-lab-one-lot #simulationResult{font-size:1rem!important;line-height:1.85!important}
.iot-lab-one-lot .viewer-card__topbar,.iot-lab-one-lot .simulation-actions,.iot-lab-one-lot .lab-tech-tags{flex-wrap:wrap}
.iot-lab-one-lot .lot-stats{gap:12px}
.iot-lab-one-lot .lot-panel p{color:#b0c3b5}
body .footer-content{border-top:1px solid #2b3d2d;padding:32px 0 20px;background:#050d09}
body .footer-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px;padding-bottom:24px}
body .footer-brand .brand{align-items:flex-start}
body .footer-brand .brand-logo{font-size:1.125rem;letter-spacing:.1em}
body .footer-brand .brand-sub{font-size:.75rem;line-height:1.5;color:#aebeae}
body .footer-brand p{font-size:.875rem;color:#abbcac;line-height:1.8;margin:14px 0 0}
body .footer-menu{display:flex;align-content:start;gap:8px 24px;flex-wrap:wrap;justify-content:flex-start}
body .footer-menu a{font-size:.875rem;line-height:1.75;min-height:44px;display:inline-flex;align-items:center;color:#c5d4c7}
body .footer-legal{font-size:.8125rem;color:#a2b4a5;line-height:1.8;flex-wrap:wrap}
@media(min-width:1024px){body .site-header__inner{grid-template-columns:auto minmax(0,1fr) auto}}
@media(max-width:1023px){.elearning-page .course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.iot-lab-one-lot .lot-zone-nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){body .container{width:calc(100% - 32px)}body .site-brand__main{font-size:1.125rem}.elearning-page .elearning-container{width:calc(100% - 32px)}.elearning-page .course-grid{grid-template-columns:1fr}body .footer-top{grid-template-columns:1fr;gap:20px}body .quiz-controls .quiz-button{flex:1 1 120px}body .quiz-panel__top{gap:12px;flex-wrap:wrap}body .quiz-question-card{padding:20px 16px}.iot-lab-one-lot .lot-zone-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.iot-lab-one-lot .zone-tab:first-child{grid-column:auto}.iot-lab-one-lot .viewer-status{max-width:calc(100% - 24px);white-space:normal}.iot-lab-one-lot .lab-tech-tags{gap:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}