/* Original homepage visual language, used only by the added evidence pages. */

    :root {
      --ink: #08111f;
      --navy: #0c1a2d;
      --panel: rgba(8, 22, 40, .78);
      --panel-soft: rgba(10, 30, 52, .64);
      --line: rgba(157, 224, 255, .19);
      --cyan: #67e8f9;
      --blue: #38bdf8;
      --sky: #b9edff;
      --amber: #ffbd59;
      --green: #78e5b5;
      --white: #f7fbff;
      --muted: #b7c9dc;
      --dim: #7f9bb7;
      --display: "Chakra Petch", "IBM Plex Sans Thai", sans-serif;
      --body: "IBM Plex Sans Thai", sans-serif;
      --shadow: 0 26px 70px rgba(0, 8, 20, .32);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 104px; }
    body {
      margin: 0;
      color: var(--white);
      background: var(--ink);
      font-family: var(--body);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    body.menu-open { overflow: hidden; }
    ::selection { background: var(--amber); color: var(--ink); }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    img { display: block; max-width: 100%; }
    .skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 14px; border-radius: 10px; color: var(--ink); background: var(--amber); font-weight: 700; transform: translateY(-160%); transition: transform .18s ease; }
    .skip-link:focus { transform: translateY(0); }

    .site-bg {
      position: fixed;
      inset: 0;
      z-index: -3;
      background: url("../roblox-city.jpg") center / cover no-repeat;
      transform: scale(1.02);
    }
    .site-bg::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(5, 13, 25, .58), rgba(5, 14, 27, .88) 70%, #07111e),
        radial-gradient(circle at 76% 16%, rgba(103, 232, 249, .08), transparent 32%),
        radial-gradient(circle at 12% 42%, rgba(255, 189, 89, .09), transparent 28%);
    }
    .site-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(125, 211, 252, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(125, 211, 252, .025) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(to bottom, black, transparent 82%);
    }

    #three-stage {
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .85;
    }

    .container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
    .glass {
      background: linear-gradient(145deg, rgba(14, 35, 60, .82), rgba(6, 19, 34, .7));
      border: 1px solid var(--line);
      box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.06);
      backdrop-filter: blur(20px) saturate(1.15);
    }

    .topbar {
      position: fixed;
      inset: 16px 0 auto;
      z-index: 50;
    }
    .nav-shell {
      min-height: 70px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 22px;
      padding: 10px 12px 10px 16px;
    }
    .brand { display: flex; align-items: center; gap: 11px; min-width: max-content; }
    .brand-mark {
      width: 46px;
      height: 46px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      position: relative;
      background: linear-gradient(145deg, var(--cyan), #2487c8);
      color: var(--ink);
      font-family: var(--display);
      font-size: 14px;
      font-weight: 800;
      box-shadow: 0 8px 25px rgba(56, 189, 248, .28);
    }
    .brand-mark::after { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(8,17,31,.35); border-radius: 10px; }
    .brand-logo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid rgba(103,232,249,.5); box-shadow: 0 8px 25px rgba(56,189,248,.22); }
    .brand-copy strong { display: block; font: 700 13px/1.25 var(--display); letter-spacing: .02em; }
    .brand-copy span { display: block; color: var(--dim); font-size: 10px; margin-top: 2px; }
    .nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
    .nav-links a {
      color: var(--muted);
      font-size: 13px;
      font-weight: 600;
      padding: 10px 11px;
      border-radius: 11px;
      transition: .2s ease;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--white); background: rgba(103, 232, 249, .1); }
    .btn-primary, .btn-secondary {
      border: 0;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 12px;
      font-weight: 700;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,189,89,.25); }
    .menu-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); color: var(--white); background: rgba(255,255,255,.05); border-radius: 12px; }

    .hero { min-height: 100svh; display: flex; align-items: center; padding: 132px 0 64px; position: relative; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: center; gap: 54px; }
    .kicker { display: flex; align-items: center; gap: 9px; color: var(--cyan); font: 600 12px var(--display); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; }
    .kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
    h1, h2, h3 { font-family: var(--display); }
    .hero h1 { margin: 0; font-size: clamp(46px, 7vw, 84px); line-height: .98; letter-spacing: -.035em; max-width: 800px; text-shadow: 0 5px 40px rgba(0, 0, 0, .35); }
    .hero h1 span { display: block; background: linear-gradient(100deg, #fff 10%, var(--cyan) 55%, var(--amber)); color: transparent; background-clip: text; }
    .hero-thai-title { margin: 22px 0 0; color: var(--white); font: 600 clamp(20px, 2.6vw, 31px)/1.35 var(--display); letter-spacing: -.015em; }
    .hero-thai-title span { color: var(--amber); }
    .hero-lead { color: var(--muted); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.85; max-width: 680px; margin: 24px 0 28px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .btn-primary { padding: 14px 20px; background: var(--amber); color: #121b28; }
    .btn-secondary { padding: 13px 19px; color: var(--white); background: rgba(8, 22, 40, .65); border: 1px solid var(--line); }
    .btn-secondary:hover { transform: translateY(-2px); background: rgba(103,232,249,.12); }
    .hero-meta { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 32px; color: var(--dim); font-size: 12px; }
    .hero-meta span { display: flex; align-items: center; gap: 7px; }
    .hero-meta i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

    .portal-card { min-height: 500px; border-radius: 34px; padding: 22px; position: relative; overflow: hidden; transform-style: preserve-3d; background: linear-gradient(180deg, rgba(104,215,255,.92) 0%, rgba(71,173,231,.9) 57%, rgba(18,53,76,.94) 100%); border: 2px solid rgba(203,244,255,.48); box-shadow: 0 34px 80px rgba(0,8,20,.42), inset 0 2px rgba(255,255,255,.32); }
    .portal-card::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 30px 30px; mask-image: linear-gradient(black, transparent 75%); pointer-events: none; }
    .portal-card::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: 79px; height: 62px; background: #61c96a; border-top: 8px solid #a6ef75; transform: perspective(180px) rotateX(14deg); box-shadow: inset 0 -17px rgba(22,105,61,.35), 0 20px 0 #276a4d; }
    @keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }
    .game-topline { position: absolute; z-index: 9; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; align-items: center; }
    .level-pill { padding: 8px 12px; border-radius: 10px; color: #fff; background: #e74747; border: 2px solid rgba(255,255,255,.65); box-shadow: 0 5px 0 #9c293a, 0 9px 18px rgba(0,0,0,.18); font: 800 11px var(--display); letter-spacing: .08em; }
    .organizer-badge { display: flex; align-items: center; gap: 7px; color: #17334b; background: rgba(255,255,255,.9); padding: 5px 9px 5px 5px; border-radius: 99px; box-shadow: 0 6px 0 rgba(21,91,120,.32); font: 700 9px var(--display); }
    .organizer-badge img { width: 31px; height: 31px; border-radius: 50%; object-fit: cover; }
    .pixel-cloud { position: absolute; z-index: 1; width: 58px; height: 20px; border-radius: 5px; background: rgba(255,255,255,.78); filter: drop-shadow(0 5px rgba(30,117,162,.15)); }
    .pixel-cloud::before, .pixel-cloud::after { content: ""; position: absolute; background: inherit; border-radius: 5px 5px 0 0; }
    .pixel-cloud::before { width: 25px; height: 25px; left: 9px; bottom: 5px; }
    .pixel-cloud::after { width: 30px; height: 32px; right: 5px; bottom: 3px; }
    .cloud-1 { top: 84px; left: 23px; transform: scale(.8); }
    .cloud-2 { top: 115px; right: 20px; transform: scale(.55); opacity: .72; }
    .float-chip { position: absolute; z-index: 6; padding: 8px 11px; border-radius: 9px; font: 700 10px var(--display); color: #17334b; background: #fff; border: 2px solid rgba(19,75,106,.18); box-shadow: 0 6px 0 rgba(20,98,137,.24), 0 12px 22px rgba(0,0,0,.12); animation: float 5s ease-in-out infinite; }
    .float-chip::before { margin-right: 6px; }
    .chip-1 { top: 113px; right: 20px; transform: rotate(4deg); }
    .chip-1::before { content: "⚡"; }
    .chip-2 { top: 224px; left: 17px; animation-delay: -2s; transform: rotate(-5deg); }
    .chip-2::before { content: "◆"; color: #6e63e8; }
    .chip-3 { top: 298px; right: 16px; animation-delay: -3.5s; color: #7b4211; background: #ffe58b; }
    .chip-3::before { content: "★"; color: #ef8f19; }
    @keyframes float { 50% { transform: translateY(-10px) rotate(2deg); } }
    .blocky-mascot { position: absolute; z-index: 4; top: 116px; left: 50%; width: 122px; height: 190px; transform: translateX(-50%); animation: mascotBob 3.5s ease-in-out infinite; }
    @keyframes mascotBob { 50% { transform: translateX(-50%) translateY(-7px); } }
    .mascot-head { position: absolute; left: 28px; top: 0; width: 68px; height: 68px; border-radius: 14px 14px 18px 18px; background: #ffd29a; border: 4px solid #26384c; box-shadow: inset 0 -8px rgba(205,125,75,.14); }
    .mascot-head::before { content: ""; position: absolute; inset: -4px -4px auto; height: 24px; border-radius: 13px 13px 4px 4px; background: #403027; clip-path: polygon(0 0,100% 0,95% 74%,78% 55%,64% 100%,45% 57%,25% 91%,0 64%); }
    .mascot-face { position: absolute; left: 16px; top: 33px; width: 8px; height: 9px; border-radius: 50%; background: #26384c; box-shadow: 27px 0 #26384c; }
    .mascot-face::after { content: ""; position: absolute; left: 10px; top: 11px; width: 20px; height: 9px; border-bottom: 3px solid #b85e55; border-radius: 50%; }
    .mascot-body { position: absolute; left: 21px; top: 65px; width: 81px; height: 76px; border-radius: 9px 9px 5px 5px; background: linear-gradient(90deg,#3477d5 50%,#2867c1 50%); border: 4px solid #26384c; box-shadow: inset 0 10px rgba(255,255,255,.12); }
    .mascot-body::after { content: "PLAY"; position: absolute; left: 16px; top: 24px; color: #fff; background: #e94a57; padding: 5px 7px; border-radius: 5px; font: 800 9px var(--display); transform: rotate(-3deg); }
    .mascot-arm { position: absolute; top: 74px; width: 25px; height: 67px; background: #ffd29a; border: 4px solid #26384c; z-index: -1; }
    .arm-left { left: 2px; transform: rotate(12deg); border-radius: 9px 5px 10px 10px; }
    .arm-right { right: 1px; transform: rotate(-18deg); border-radius: 5px 9px 10px 10px; }
    .idea-box { position: absolute; z-index: 5; left: 50%; top: 281px; width: 178px; height: 108px; transform: translateX(-50%); }
    .box-lid { position: absolute; z-index: 2; left: -7px; top: -18px; width: 192px; height: 42px; border-radius: 8px; background: #ffbd3e; border: 4px solid #513916; box-shadow: inset 0 8px #ffdf70, 0 8px 0 rgba(96,55,10,.24); transform-origin: left bottom; transform: rotate(-9deg); }
    .box-lid::after { content: "UNBOX!"; position: absolute; left: 56px; top: 8px; color: #492e10; font: 900 14px var(--display); }
    .box-front { position: absolute; inset: 16px 0 0; border-radius: 6px 6px 13px 13px; background: linear-gradient(90deg,#ef8b2c 50%,#df7621 50%); border: 4px solid #513916; box-shadow: inset 0 12px rgba(255,207,87,.25), 0 13px 0 rgba(65,48,23,.18); }
    .box-front::before { content: "?"; position: absolute; left: 66px; top: 19px; width: 38px; height: 38px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: #e94a57; border: 3px solid #513916; font: 900 24px var(--display); transform: rotate(3deg); }
    .pixel-cube { position: absolute; z-index: 3; width: 34px; height: 34px; border: 3px solid #26384c; border-radius: 5px; box-shadow: inset -8px -8px rgba(0,0,0,.14), 5px 6px 0 rgba(37,89,112,.2); animation: cubePop 4s ease-in-out infinite; }
    .cube-a { left: 59px; top: 163px; background: #7f70ee; transform: rotate(14deg); }
    .cube-b { right: 63px; top: 202px; background: #62db88; transform: rotate(-12deg); animation-delay: -1.4s; }
    .cube-c { left: 83px; top: 332px; width: 25px; height: 25px; background: #ef5e63; transform: rotate(23deg); animation-delay: -2.6s; }
    @keyframes cubePop { 50% { translate: 0 -12px; rotate: 8deg; } }
    .portal-caption { position: absolute; inset: auto 17px 15px; z-index: 8; padding: 13px 15px; border-radius: 14px; background: rgba(7,29,48,.88); border: 2px solid rgba(203,244,255,.34); box-shadow: 0 7px 0 rgba(4,19,33,.34); }
    .portal-caption span { color: #8cecff; font: 700 9px var(--display); letter-spacing: .1em; }
    .portal-caption strong { display: flex; align-items: center; justify-content: space-between; font: 700 14px var(--display); margin-top: 4px; }
    .portal-caption strong::after { content: "LET'S BUILD! →"; color: #1b2534; background: #ffca4d; padding: 6px 8px; border-radius: 8px; font-size: 9px; }

    .quickbar { margin-top: -33px; position: relative; z-index: 5; }
    .quick-grid { border-radius: 23px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px; }
    .quick-item { padding: 17px 19px; border-radius: 16px; display: flex; gap: 12px; align-items: center; transition: .2s; }
    .quick-item:not(:last-child) { border-right: 1px solid var(--line); }
    .quick-item:hover { background: rgba(103,232,249,.08); }
    .quick-num { color: var(--cyan); font: 700 24px var(--display); }
    .quick-item strong { display: block; font-size: 13px; }
    .quick-item span { color: var(--dim); font-size: 11px; }

    section { padding: 110px 0; position: relative; }
    .section-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: end; margin-bottom: 36px; }
    .section-label { color: var(--cyan); font: 600 11px var(--display); letter-spacing: .12em; text-transform: uppercase; }
    .section-head h2 { font-size: clamp(34px, 4.5vw, 55px); line-height: 1.12; letter-spacing: -.025em; margin: 9px 0 0; }
    .section-head p { color: var(--muted); line-height: 1.8; margin: 0; max-width: 650px; }

    .docs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
    .doc-card { min-height: 218px; padding: 20px; border-radius: 21px; position: relative; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, border-color .25s; }
    .doc-card:hover { transform: translateY(-7px); border-color: rgba(103,232,249,.5); }
    .doc-card::after { content: attr(data-no); position: absolute; right: -6px; bottom: -29px; color: rgba(255,255,255,.035); font: 700 108px var(--display); }
    .doc-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: rgba(103,232,249,.12); color: var(--cyan); font: 700 14px var(--display); }
    .doc-card h3 { font-size: 17px; margin: 18px 0 7px; }
    .doc-card p { color: var(--dim); font-size: 12px; line-height: 1.65; margin: 0 0 16px; }
    .doc-note { align-self: flex-start; padding: 6px 9px; border-radius: 999px; background: rgba(239,189,102,.2); border: 1px solid rgba(167,102,34,.28); color: var(--amber); font-size: 10px; font-weight: 800; letter-spacing: .02em; }
    .card-link { margin-top: auto; color: var(--cyan); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
    .card-link::after { content: "↗"; }
    .doc-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 3; }
    .doc-actions .card-link { margin-top: 0; }
    .doc-actions .card-link.code-link { color: #85551d; background: #fff1cf; }
    .doc-card.locked .card-link { color: var(--dim); }
    .doc-card.featured { background: linear-gradient(145deg, rgba(54,173,217,.35), rgba(8,24,43,.82)); }

    .rounds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
    .round-card { border-radius: 24px; overflow: hidden; transition: transform .25s; }
    .round-card:hover { transform: translateY(-6px); }
    .round-cover { height: 180px; position: relative; background: linear-gradient(135deg, rgba(56,189,248,.42), rgba(10,25,43,.3)), url("../roblox-city.jpg") center / cover; }
    .round-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(6,18,33,.9)); }
    .round-index { position: absolute; z-index: 2; left: 18px; bottom: 14px; font: 700 42px var(--display); color: var(--white); }
    .round-status { position: absolute; z-index: 2; top: 14px; right: 14px; padding: 6px 9px; border-radius: 20px; background: rgba(5,18,32,.72); border: 1px solid var(--line); color: var(--green); font-size: 10px; font-weight: 700; }
    .round-body { padding: 18px; }
    .round-body h3 { margin: 0 0 6px; font-size: 17px; }
    .round-body p { color: var(--dim); margin: 0 0 16px; font-size: 12px; line-height: 1.6; }
    .round-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; padding-top: 13px; border-top: 1px solid var(--line); }

    .certificate-area { display: grid; grid-template-columns: .8fr 1.2fr; gap: 20px; align-items: stretch; }
    .cert-intro { padding: 32px; border-radius: 27px; display: flex; flex-direction: column; justify-content: center; }
    .cert-intro h3 { font-size: 28px; margin: 18px 0 12px; }
    .cert-intro p { color: var(--muted); line-height: 1.8; margin: 0 0 22px; }
    .cert-list { display: grid; gap: 12px; }
    .cert-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 15px; align-items: center; padding: 14px; border-radius: 18px; }
    .cert-seal { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #37260a; background: radial-gradient(circle, #ffe4a6, var(--amber) 68%, #d98d25); border: 4px double rgba(70,45,4,.35); font: 800 17px var(--display); }
    .cert-row h3 { margin: 0 0 4px; font-size: 15px; }
    .cert-row p { color: var(--dim); margin: 0; font-size: 11px; }
    .cert-row a { color: var(--cyan); font-size: 12px; font-weight: 700; padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; }

    .speaker-carousel-shell { position: relative; padding: 28px 58px 30px; border-radius: 32px; overflow: hidden; }
    .speaker-carousel-shell::before { content: ""; position: absolute; width: 520px; height: 220px; border-radius: 50%; background: rgba(56,189,248,.1); filter: blur(80px); left: 12%; top: -120px; pointer-events: none; }
    .speaker-carousel-shell::after { content: ""; position: absolute; width: 340px; height: 160px; border-radius: 50%; background: rgba(255,189,89,.08); filter: blur(70px); right: 4%; bottom: -90px; pointer-events: none; }
    .speaker-carousel {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      padding: 18px 6px 22px;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      scrollbar-width: none;
      position: relative;
      z-index: 2;
    }
    .speaker-carousel::-webkit-scrollbar { display: none; }
    .speaker-card {
      appearance: none;
      border: 1px solid transparent;
      color: var(--white);
      background: transparent;
      flex: 0 0 224px;
      min-height: 330px;
      padding: 14px 13px 18px;
      border-radius: 112px 112px 28px 28px;
      text-align: center;
      cursor: pointer;
      scroll-snap-align: center;
      position: relative;
      transition: transform .32s ease, background .32s ease, border-color .32s ease;
    }
    .speaker-card:hover, .speaker-card:focus-visible { transform: translateY(-9px); background: rgba(103,232,249,.06); border-color: var(--line); outline: none; }
    .speaker-orbit { width: 188px; height: 188px; margin: 0 auto 19px; border-radius: 50%; padding: 9px; position: relative; background: linear-gradient(145deg, rgba(103,232,249,.8), rgba(103,232,249,.05) 44%, rgba(255,189,89,.82)); box-shadow: 0 18px 42px rgba(0,0,0,.3), 0 0 36px rgba(56,189,248,.12); }
    .speaker-orbit::before, .speaker-orbit::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
    .speaker-orbit::before { inset: -8px; border: 1px dashed rgba(103,232,249,.28); animation: spin 18s linear infinite; }
    .speaker-orbit::after { width: 10px; height: 10px; right: 9px; top: 13px; background: var(--amber); box-shadow: 0 0 15px var(--amber); }
    .speaker-photo { width: 100%; height: 100%; border-radius: 50%; background-repeat: no-repeat; background-size: cover; border: 3px solid #0b1c30; filter: saturate(.88) contrast(1.03); }
    .portrait-1 { background-image: url("../assets/speakers/3d/speaker-01-3d.webp"); background-position: center; }
    .portrait-2 { background-image: url("../assets/speakers/3d/speaker-02-3d.webp"); background-position: center; }
    .portrait-3 { background-image: url("../assets/speakers/3d/speaker-03-3d.webp"); background-position: center; }
    .portrait-4 { background-image: url("../assets/speakers/3d/speaker-04-3d.webp"); background-position: center; }
    .portrait-5 { background-image: url("../assets/speakers/3d/speaker-05-3d.webp"); background-position: center; }
    .portrait-6 { background-image: url("../assets/speakers/3d/speaker-06-3d.webp"); background-position: center; }
    .portrait-7 { background-image: url("../assets/speakers/3d/speaker-07-3d.webp"); background-position: center; }
    .speaker-card h3 { font-size: 16px; margin: 0 0 4px; }
    .speaker-role { color: var(--cyan); font-weight: 600; margin-bottom: 20px; }
    .speaker-card .speaker-role { font-size: 10px; letter-spacing: .04em; margin-bottom: 12px; }
    .speaker-motto { color: var(--muted); font-size: 12px; line-height: 1.55; margin: 0; }
    .speaker-motto::before { content: "“"; color: var(--amber); font: 700 18px var(--display); margin-right: 2px; }
    .speaker-motto::after { content: "”"; color: var(--amber); font: 700 18px var(--display); margin-left: 2px; }
    .speaker-detail-hint { display: inline-flex; margin-top: 12px; color: var(--dim); font-size: 10px; opacity: 0; transform: translateY(4px); transition: .25s; }
    .speaker-card:hover .speaker-detail-hint, .speaker-card:focus-visible .speaker-detail-hint { opacity: 1; transform: none; }
    .carousel-control { position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(5,18,32,.88); color: var(--white); cursor: pointer; box-shadow: 0 12px 26px rgba(0,0,0,.25); transition: .2s; }
    .carousel-control:hover { color: var(--ink); background: var(--cyan); }
    .carousel-prev { left: 14px; }
    .carousel-next { right: 14px; }
    .carousel-footer { display: flex; align-items: center; justify-content: center; gap: 11px; color: var(--dim); font-size: 10px; position: relative; z-index: 3; }
    .carousel-footer::before, .carousel-footer::after { content: ""; width: 38px; height: 1px; background: var(--line); }

    .footer { padding: 38px 0 28px; border-top: 1px solid var(--line); background: rgba(3,11,21,.62); }
    .footer-main { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
    .footer p { color: var(--dim); font-size: 11px; line-height: 1.6; margin: 6px 0 0; }
    .footer-links { display: flex; gap: 18px; color: var(--muted); font-size: 12px; }

    .modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .26s ease, visibility .26s ease; }
    .modal.open { visibility: visible; opacity: 1; pointer-events: auto; }
    .modal-backdrop { position: absolute; inset: 0; opacity: 0; background: rgba(2,8,16,.82); backdrop-filter: blur(12px); transition: opacity .3s ease; }
    .modal.open .modal-backdrop { opacity: 1; }
    .modal-card { position: relative; width: min(920px, 100%); max-height: 90vh; overflow: auto; border-radius: 30px; padding: 0; opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .38s ease, transform .48s cubic-bezier(.22,1,.36,1); }
    .modal.open .modal-card { opacity: 1; transform: none; }
    .modal-close { position: absolute; z-index: 3; right: 18px; top: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.8); color: var(--white); cursor: pointer; transition: transform .2s ease, background .2s ease; }
    .modal-close:hover { transform: rotate(5deg) scale(1.05); background: #fff; }
    .modal-card h2 { font-size: 35px; margin: 12px 0 7px; }
    .modal-card h3 { color: var(--cyan); font-size: 15px; margin: 0 0 10px; }
    .modal-card p, .modal-card li { color: var(--muted); line-height: 1.8; }

    /* Calm classroom theme — matched to the teaching slides */
    :root {
      --ink: #f4f1e9;
      --navy: #fffdf8;
      --panel: rgba(255, 253, 248, .82);
      --panel-soft: rgba(248, 244, 235, .78);
      --line: rgba(47, 127, 135, .22);
      --cyan: #2f7f87;
      --blue: #5ca6ad;
      --sky: #2f7f87;
      --amber: #a76622;
      --green: #4f7d58;
      --white: #252a34;
      --muted: #485264;
      --dim: #687386;
      --shadow: 0 18px 45px rgba(55, 64, 71, .13);
    }
    body { background: var(--ink); }
    .site-bg { filter: saturate(.72) brightness(1.08); }
    .site-bg::before {
      background:
        linear-gradient(180deg, rgba(244,241,233,.74), rgba(244,241,233,.88) 68%, #f4f1e9),
        radial-gradient(circle at 78% 18%, rgba(47,127,135,.1), transparent 31%),
        radial-gradient(circle at 15% 38%, rgba(167,102,34,.08), transparent 28%);
    }
    .site-bg::after { background-image: linear-gradient(rgba(47,127,135,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(47,127,135,.04) 1px, transparent 1px); opacity: .65; }
    #three-stage { opacity: .22; }
    .glass { background: rgba(255,253,248,.8); border-color: var(--line); box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.78); backdrop-filter: blur(18px) saturate(.9); }
    .nav-shell { background: rgba(255,253,248,.9); }
    .nav-links a { color: var(--muted); }
    .nav-links a:hover, .nav-links a.active { color: var(--cyan); background: rgba(47,127,135,.09); }
    .btn-primary { color: #fffdf8; background: var(--amber); box-shadow: 0 7px 0 rgba(111,68,24,.18); }
    .btn-secondary { color: var(--white); background: rgba(255,253,248,.72); border-color: var(--line); }
    .btn-secondary:hover { background: #dceff0; color: var(--cyan); }
    .hero h1 { color: var(--white); text-shadow: 0 6px 28px rgba(255,255,255,.45); }
    .hero h1 span { background: linear-gradient(100deg, #286b72 12%, var(--cyan) 55%, var(--amber)); background-clip: text; }
    .hero-thai-title { color: var(--white); }
    .hero-meta i { background: var(--green); }
    .quick-item:hover, .speaker-card:hover, .speaker-card:focus-visible { background: rgba(47,127,135,.07); }
    .doc-card::after { color: rgba(47,127,135,.055); }
    .doc-icon { background: #dceff0; }
    .doc-card.featured { background: linear-gradient(145deg, rgba(220,239,240,.95), rgba(255,253,248,.84)); border-color: rgba(47,127,135,.34); }
    .doc-note { background: #fff1cf; border-color: rgba(167,102,34,.28); color: #85551d; }
    .round-index { color: #fff; }
    .round-body { background: rgba(255,253,248,.5); }
    .cert-seal { background: radial-gradient(circle, #fff1cf, #efbd66 68%, #c9812d); }
    .speaker-orbit { box-shadow: 0 16px 34px rgba(55,64,71,.16), 0 0 26px rgba(47,127,135,.1); }
    .speaker-photo { border-color: #fffdf8; }
    .carousel-control { color: var(--white); background: rgba(255,253,248,.95); }
    .carousel-control:hover { color: #fffdf8; background: var(--cyan); }
    .footer { background: rgba(244,241,233,.88); }
    .modal-backdrop { background: rgba(37,42,52,.42); }
    .modal-card { background: rgba(255,253,248,.96); }
    .modal-close { color: var(--white); background: #f4f1e9; }
    .portal-caption { color: #fff; }
    .portal-caption strong { color: #fff; }

    /* Playful block-game design language across the portal */
    .section-label {
      display: inline-flex;
      align-items: center;
      padding: 7px 11px;
      border: 2px solid rgba(39,78,91,.28);
      border-radius: 8px;
      background: #dceff0;
      box-shadow: 0 5px 0 rgba(47,127,135,.18);
      letter-spacing: .08em;
    }
    .section-head h2 { text-shadow: 0 4px 0 rgba(255,255,255,.8); }
    section:not(.hero)::before, section:not(.hero)::after { content: ""; position: absolute; z-index: -1; width: 26px; height: 26px; border: 3px solid rgba(37,42,52,.24); border-radius: 6px; opacity: .52; }
    section:not(.hero)::before { left: 4%; top: 17%; background: #78c9cf; transform: rotate(12deg); box-shadow: 5px 6px 0 rgba(47,127,135,.13); }
    section:not(.hero)::after { right: 5%; bottom: 15%; background: #efbd66; transform: rotate(-9deg); box-shadow: 5px 6px 0 rgba(167,102,34,.13); }

    .quick-grid { border: 2px solid rgba(47,127,135,.22); box-shadow: 0 9px 0 rgba(66,112,116,.14), var(--shadow); }
    .quick-item { position: relative; border-radius: 13px; }
    .quick-item::before { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 35px; border: 2px solid rgba(37,42,52,.22); border-radius: 8px; color: #fff; background: #66bfc6; box-shadow: 0 4px 0 rgba(37,91,95,.18); font: 800 15px var(--display); }
    .quick-item:nth-child(1)::before { content: "▦"; }
    .quick-item:nth-child(2)::before { content: "⚑"; background: #ef9b8e; }
    .quick-item:nth-child(3)::before { content: "◆"; background: #9dcb8e; }
    .quick-item:nth-child(4)::before { content: "★"; background: #efbd66; }
    .quick-num { display: none; }

    .doc-card { border: 2px solid rgba(47,127,135,.2); border-radius: 18px; box-shadow: 0 7px 0 rgba(61,111,115,.12), 0 18px 35px rgba(55,64,71,.08); }
    .doc-card::before { content: ""; position: absolute; z-index: 2; right: 14px; top: 14px; width: 9px; height: 9px; border-radius: 3px; background: #ef9b8e; box-shadow: 15px 0 #9dcb8e, 30px 0 #efbd66; }
    .doc-card:hover { transform: translateY(-8px) rotate(-.5deg); box-shadow: 0 11px 0 rgba(61,111,115,.13), 0 24px 40px rgba(55,64,71,.1); }
    .doc-icon { border: 2px solid rgba(47,127,135,.28); box-shadow: 0 4px 0 rgba(47,127,135,.13); }
    .doc-card:nth-child(3n+2) .doc-icon { color: #934f46; background: #f4dddd; border-color: rgba(182,87,87,.25); }
    .doc-card:nth-child(3n) .doc-icon { color: #6f5424; background: #fff1cf; border-color: rgba(167,102,34,.25); }
    .card-link { width: max-content; padding: 7px 9px; border-radius: 7px; background: #dceff0; }

    .round-card { border: 2px solid rgba(47,127,135,.2); box-shadow: 0 8px 0 rgba(61,111,115,.12), var(--shadow); }
    .round-card:hover { transform: translateY(-8px) rotate(.4deg); box-shadow: 0 12px 0 rgba(61,111,115,.12), 0 24px 40px rgba(55,64,71,.1); }
    .round-status { border: 2px solid rgba(255,255,255,.6); box-shadow: 0 4px 0 rgba(6,18,33,.24); }
    .round-index::before { content: "WORLD "; font-size: 11px; letter-spacing: .08em; }
    .round-meta span:last-child { color: var(--cyan); font-weight: 700; }

    .cert-intro { border: 2px solid rgba(167,102,34,.2); box-shadow: 0 8px 0 rgba(167,102,34,.1), var(--shadow); }
    .cert-row { position: relative; border: 2px solid rgba(47,127,135,.18); box-shadow: 0 6px 0 rgba(61,111,115,.1); transition: .2s; }
    .cert-row:hover { transform: translateX(6px); }
    .cert-row::after { content: "ACHIEVEMENT"; position: absolute; right: 16px; top: -10px; color: #8b5a1d; background: #fff1cf; border: 1px solid rgba(167,102,34,.2); border-radius: 6px; padding: 4px 7px; font: 700 8px var(--display); letter-spacing: .06em; }
    .cert-row a { background: #dceff0; border-width: 2px; }

    .speaker-team-portrait { margin: 0 0 28px; overflow: hidden; border: 2px solid rgba(47,127,135,.2); border-radius: 28px; background: #eef4f1; box-shadow: 0 9px 0 rgba(61,111,115,.12), var(--shadow); }
    .speaker-team-portrait img { display: block; width: 100%; height: auto; object-fit: cover; object-position: center; }
    .speaker-team-portrait figcaption { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px 16px; color: var(--muted); font-size: 14px; line-height: 1.55; }
    .speaker-team-portrait figcaption strong { color: var(--ink); font-family: var(--display); }
    .speaker-carousel-shell { border: 1px solid rgba(47,127,135,.16); background: rgba(255,253,248,.62); box-shadow: 0 18px 48px rgba(55,64,71,.1); }
    .speaker-carousel { counter-reset: speaker; align-items: stretch; gap: 18px; padding: 28px 6px 32px; scroll-padding-left: 6px; }
    .speaker-carousel::after { content: ""; flex: 0 0 max(0px, calc(100% - 264px)); }
    .speaker-carousel.is-animating { scroll-snap-type: none; }
    .speaker-card { counter-increment: speaker; flex: 0 0 258px; min-height: 438px; padding: 17px 16px 18px; border: 1px solid rgba(47,127,135,.13); border-radius: 24px; color: var(--white); background: rgba(255,253,248,.74); display: flex; flex-direction: column; align-items: center; box-shadow: 0 8px 24px rgba(55,64,71,.07); opacity: .62; filter: saturate(.82); transform: none; scroll-snap-align: start; scroll-snap-stop: always; transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .36s ease, filter .36s ease, background .36s ease, border-color .36s ease, box-shadow .45s ease; }
    .speaker-card::before { content: "วิทยากร · " counter(speaker, decimal-leading-zero); display: inline-flex; margin: 0 auto 12px; padding: 0; border: 0; color: var(--cyan); background: transparent; box-shadow: none; font: 700 9px var(--display); letter-spacing: .12em; }
    .speaker-card:hover { opacity: .88; filter: saturate(.94); transform: none; border-color: rgba(47,127,135,.22); background: rgba(255,253,248,.9); box-shadow: 0 12px 30px rgba(55,64,71,.09); }
    .speaker-card.is-active, .speaker-card:focus-within { opacity: 1; filter: none; transform: none; border-color: rgba(47,127,135,.25); background: #fffdf8; box-shadow: 0 16px 38px rgba(55,64,71,.12); }
    .speaker-profile-trigger { appearance: none; width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: center; cursor: pointer; }
    .speaker-profile-trigger:focus-visible { outline: 2px solid rgba(47,127,135,.46); outline-offset: 6px; border-radius: 16px; }
    .speaker-orbit { display: block; flex: 0 0 auto; width: 150px; height: 150px; margin-bottom: 16px; padding: 5px; border: 1px solid rgba(47,127,135,.16); background: #f7f4ee; box-shadow: none; }
    .speaker-orbit::before, .speaker-orbit::after { display: none; }
    .speaker-photo { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.92) contrast(1.01); transform: none; transition: transform .45s cubic-bezier(.22,1,.36,1), filter .4s ease; }
    .speaker-card.is-active .speaker-photo, .speaker-card:focus-within .speaker-photo { transform: none; filter: saturate(1) contrast(1.02); }
    @media (hover:hover) and (pointer:fine) {
      .speaker-card:hover, .speaker-card.is-active:hover { transform: translateY(-4px) scale(1.018); }
      .speaker-card:hover .speaker-photo { transform: scale(1.025); }
    }
    .speaker-card h3 { margin: 0 0 3px; font-size: 17px; line-height: 1.4; }
    .speaker-card .speaker-role { min-height: 36px; display: flex; align-items: flex-start; justify-content: center; margin-bottom: 8px; color: var(--cyan); }
    .speaker-motto { min-height: 49px; display: flex; align-items: center; justify-content: center; }
    .speaker-motto::before, .speaker-motto::after { display: none; }
    .speaker-detail-hint { margin-top: 1px; padding: 2px 0; border: 0; border-bottom: 1px solid rgba(47,127,135,.24); border-radius: 0; color: var(--cyan); background: transparent; opacity: 1; transform: none; font-weight: 650; }
    .speaker-instagram { width: 100%; min-height: 52px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 9px; align-items: center; margin-top: 12px; padding: 8px 10px; border: 1px solid rgba(47,127,135,.14); border-radius: 13px; color: var(--white); background: #faf8f4; text-align: left; text-decoration: none; box-shadow: none; transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
    .speaker-instagram svg { width: 30px; height: 30px; padding: 6px; border-radius: 9px; color: #fff; background: linear-gradient(145deg,#7659bb,#c75b8d 58%,#df9555); box-shadow: none; }
    .speaker-instagram small, .speaker-instagram strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .speaker-instagram small { color: var(--muted); font-size: 9px; font-weight: 650; letter-spacing: .04em; }
    .speaker-instagram strong { margin-top: 0; color: var(--white); font-size: 12px; }
    .speaker-instagram .instagram-arrow { color: #a94b83; font-size: 14px; font-weight: 750; }
    .speaker-instagram:hover, .speaker-instagram:focus-visible { outline: none; transform: translateY(-1px); border-color: rgba(177,73,134,.3); background: #fff; box-shadow: 0 7px 18px rgba(100,61,83,.08); }
    .speaker-card.is-active .speaker-instagram { border-color: rgba(177,73,134,.23); background: #fff; }
    .speaker-instagram.is-pending { grid-template-columns: 32px minmax(0,1fr); cursor: default; }
    .speaker-instagram.is-pending svg { color: #668184; background: #e2ece9; box-shadow: none; }
    .speaker-instagram.is-pending strong { color: var(--muted); font-weight: 700; }
    .carousel-control { width: 40px; height: 40px; border-color: rgba(47,127,135,.16); background: rgba(255,253,248,.94); box-shadow: 0 7px 20px rgba(55,64,71,.1); }
    .carousel-control:disabled { opacity: .28; cursor: default; color: var(--muted); background: rgba(255,253,248,.72); box-shadow: none; }
    .carousel-footer { display: grid; grid-template-columns: auto minmax(0,1fr) 130px; gap: 14px; align-items: center; }
    .carousel-footer::before, .carousel-footer::after { display: none; }
    .carousel-position { color: var(--cyan); font: 700 12px var(--display); letter-spacing: .08em; white-space: nowrap; }
    .carousel-instruction { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .carousel-progress { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(47,127,135,.12); }
    .carousel-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),#78a9a1); transform: scaleX(calc(1 / 7)); transform-origin: left center; transition: transform .5s cubic-bezier(.22,1,.36,1); }
    .modal-contact-link { display: inline-flex; margin-top: 9px; padding: 8px 12px; border: 1px solid rgba(177,73,134,.2); border-radius: 999px; color: #a3457d; background: #fff7fb; font-weight: 750; text-decoration: none; }
    .modal-profile-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); min-height: 620px; }
    .modal-profile-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 36px 28px 30px; background: linear-gradient(155deg,#e4f1ef 0%,#f7f3eb 58%,#fff9ef 100%); }
    .modal-profile-visual::before { content: ""; position: absolute; width: 230px; height: 230px; top: 112px; border: 1px solid rgba(47,127,135,.13); border-radius: 50%; }
    .modal-profile-visual .section-label { position: relative; z-index: 1; align-self: flex-start; box-shadow: none; border-width: 1px; }
    .modal-profile-photo-wrap { position: relative; z-index: 1; width: 220px; aspect-ratio: 1; margin: 38px 0 24px; padding: 8px; border: 1px solid rgba(47,127,135,.18); border-radius: 30px; background: rgba(255,253,248,.78); box-shadow: 0 20px 45px rgba(55,64,71,.13); transform: rotate(-1.5deg); }
    .modal-profile-photo { width: 100%; height: 100%; border-radius: 23px; object-fit: cover; }
    .modal-profile-number { position: relative; z-index: 1; margin-top: auto; color: var(--cyan); font: 700 12px var(--display); letter-spacing: .09em; }
    .modal-profile-content { padding: 52px 44px 42px; }
    .modal-profile-content .speaker-role { margin-bottom: 25px; color: var(--cyan); font-size: 14px; line-height: 1.55; }
    .modal-profile-section { padding: 20px 0; border-top: 1px solid rgba(47,127,135,.14); }
    .modal-profile-section:first-of-type { padding-top: 0; border-top: 0; }
    .modal-profile-section p { margin: 0; }
    .modal-profile-section ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
    .modal-profile-section li { padding: 11px 12px; border: 1px solid rgba(47,127,135,.12); border-radius: 12px; background: #f8faf7; font-size: 13px; line-height: 1.55; }
    .modal-profile-section.is-motto { margin: 2px 0; padding: 17px 18px; border: 0; border-left: 3px solid var(--amber); border-radius: 0 14px 14px 0; background: #fff8e9; }
    .modal-profile-section.is-motto h3 { color: #8b5b24; }
    .modal-profile-section.is-contact p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

    .footer { border-top: 3px solid rgba(47,127,135,.16); }

    .reveal { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    @media (max-width: 1040px) {
      .nav-links { display: none; }
      .menu-toggle { display: block; }
      .nav-links.open { display: flex; position: fixed; top: 98px; left: 20px; right: 20px; flex-direction: column; align-items: stretch; padding: 13px; border-radius: 18px; background: rgba(255,253,248,.97); border: 1px solid var(--line); box-shadow: var(--shadow); }
      .nav-links.open a { padding: 12px 14px; }
      .hero-grid { grid-template-columns: 1fr .7fr; gap: 25px; }
      .docs-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 780px) {
      .container { width: min(100% - 24px, 1180px); }
      .topbar { top: 9px; }
      .nav-shell { border-radius: 17px; min-height: 64px; }
      .brand-copy span { display: none; }
      .hero { padding-top: 108px; min-height: auto; }
      .hero-grid, .section-head, .certificate-area { grid-template-columns: 1fr; }
      .hero h1 { font-size: clamp(43px, 14vw, 68px); }
      .portal-card { min-height: 500px; margin-top: 15px; }
      .quickbar { margin-top: 14px; }
      .quick-grid { grid-template-columns: 1fr 1fr; }
      .quick-item:not(:last-child) { border-right: 0; }
      .quick-item:nth-child(odd) { border-right: 1px solid var(--line); }
      .quick-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      section { padding: 78px 0; }
      .section-head { gap: 17px; }
      .rounds { grid-template-columns: 1fr; }
      .speaker-carousel-shell { padding-inline: 30px; }
      .speaker-team-portrait figcaption { align-items: flex-start; flex-direction: column; gap: 3px; }
      .speaker-carousel { padding-inline: 6px; scroll-padding-left: 6px; }
      .speaker-carousel::after { flex-basis: max(0px, calc(100% - 248px)); }
      .speaker-card { flex-basis: 242px; }
      .speaker-orbit { width: 146px; height: 146px; }
      .modal-profile-layout { grid-template-columns: 230px minmax(0,1fr); }
      .modal-profile-visual { padding-inline: 22px; }
      .modal-profile-photo-wrap { width: 180px; }
      .modal-profile-content { padding: 46px 30px 34px; }
      .modal-profile-section ul { grid-template-columns: 1fr; }
    }
    @media (max-width: 520px) {
      .brand-copy strong { font-size: 11px; }
      .hero-actions > * { width: 100%; }
      .hero-meta { gap: 9px 17px; }
      .docs-grid { grid-template-columns: 1fr; }
      .doc-card { min-height: 190px; }
      .cert-row { grid-template-columns: 52px 1fr; }
      .cert-seal { width: 48px; height: 48px; }
      .cert-row a { grid-column: 1 / -1; text-align: center; }
      .footer-main { align-items: flex-start; flex-direction: column; }
      .speaker-carousel-shell { padding: 18px 8px 24px; margin-inline: -2px; }
      .speaker-team-portrait { margin-bottom: 22px; border-radius: 20px; }
      .speaker-team-portrait figcaption { padding: 12px 14px 14px; font-size: 13px; }
      .speaker-carousel { gap: 10px; padding: 22px 4px 26px; scroll-padding-left: 4px; }
      .speaker-carousel::after { flex-basis: max(0px, calc(100% - min(82vw, 258px) - 4px)); }
      .speaker-card { flex-basis: min(82vw, 258px); min-height: 432px; }
      .carousel-control { display: none; }
      .carousel-footer { grid-template-columns: auto minmax(0,1fr); gap: 8px 12px; }
      .carousel-progress { grid-column: 1 / -1; }
      .carousel-instruction { font-size: 11px; }
      .modal { padding: 10px; }
      .modal-card { max-height: 94vh; border-radius: 24px; }
      .modal-profile-layout { grid-template-columns: 1fr; }
      .modal-profile-visual { display: grid; grid-template-columns: 116px minmax(0,1fr); gap: 14px; padding: 25px 22px 22px; }
      .modal-profile-visual::before { display: none; }
      .modal-profile-visual .section-label { grid-column: 1 / -1; }
      .modal-profile-photo-wrap { grid-row: 2 / 4; width: 116px; margin: 6px 0 0; padding: 5px; border-radius: 21px; transform: none; }
      .modal-profile-photo { border-radius: 16px; }
      .modal-profile-number { align-self: end; margin: 0; }
      .modal-profile-content { padding: 28px 22px 30px; }
      .modal-profile-content h2 { padding-right: 26px; font-size: 27px; line-height: 1.28; }
      .modal-profile-content .speaker-role { margin-bottom: 19px; font-size: 12px; }
      .modal-profile-section { padding: 17px 0; }
      .modal-profile-section li { font-size: 12px; }
      .modal-close { right: 16px; top: 16px; width: 38px; height: 38px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
      #three-stage { display: none; }
      .speaker-card, .speaker-card.is-active, .speaker-card:focus-within { transform: none; }
      .modal-card { transform: none; }
    }

    /* Readability pass — keep essential interface text at comfortable sizes. */
    .brand-copy strong { font-size: 14px; }
    .brand-copy span { font-size: 12px; }
    .nav-links a { font-size: 14px; }
    .kicker { font-size: 13px; }
    .hero-meta { font-size: 14px; }
    .level-pill { font-size: 12px; }
    .organizer-badge { font-size: 11px; }
    .float-chip { font-size: 11px; }
    .portal-caption span { font-size: 11px; }
    .portal-caption strong { font-size: 16px; }
    .portal-caption strong::after { font-size: 10px; }
    .quick-item strong { font-size: 15px; }
    .quick-item > span > span { font-size: 13px; }
    .section-label { font-size: 12px; }
    .doc-card h3 { font-size: 18px; line-height: 1.45; }
    .doc-card p { font-size: 14px; line-height: 1.7; }
    .doc-note { font-size: 12px; }
    .card-link { font-size: 14px; }
    .round-status { font-size: 12px; }
    .round-body h3 { font-size: 19px; line-height: 1.4; }
    .round-body p { font-size: 14px; line-height: 1.7; }
    .round-meta { gap: 12px; font-size: 13px; line-height: 1.5; }
    .cert-row h3 { font-size: 17px; line-height: 1.4; }
    .cert-row p { font-size: 14px; line-height: 1.6; }
    .cert-row a { font-size: 14px; white-space: nowrap; }
    .speaker-card::before { font-size: 11px; }
    .speaker-card h3 { font-size: 18px; }
    .speaker-card .speaker-role { min-height: 38px; font-size: 13px; line-height: 1.45; }
    .speaker-motto { min-height: 50px; font-size: 14px; line-height: 1.55; }
    .speaker-detail-hint { font-size: 13px; }
    .carousel-footer { font-size: 12px; line-height: 1.55; text-align: center; }
    .footer p { font-size: 13px; }
    .footer-links { flex-wrap: wrap; font-size: 14px; }
    .modal-card h3 { font-size: 17px; }

    @media (max-width: 520px) {
      .quick-grid { grid-template-columns: 1fr; }
      .quick-item, .quick-item:nth-child(odd) { border-right: 0; }
      .quick-item:not(:last-child) { border-bottom: 1px solid var(--line); }
    }