/* ==========================================================
   AI LAB 2026 / Experimental Editorial Shell
   Shared visual language for all lab pages.
   ========================================================== */
:root{
  --exp-paper:#efede5;
  --exp-paper2:#f8f6ef;
  --exp-ink:#10100f;
  --exp-muted:#62615c;
  --exp-blue:#3154ff;
  --exp-orange:#ff5733;
  --exp-acid:#d9ff43;
  --exp-aqua:#59e4db;
  --exp-violet:#9c75ff;
  --exp-pink:#ff8db7;
  --exp-yellow:#f7db4b;
  --exp-green:#60c889;
  --exp-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --exp-sans:Meiryo,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans Black","Noto Sans",sans-serif;
}
html{scroll-behavior:smooth}
body.exp-page{
  --exp-accent:var(--exp-blue);
  --exp-accent2:var(--exp-acid);
  margin:0;
  background:var(--exp-paper) !important;
  color:var(--exp-ink) !important;
  font-family:var(--exp-sans) !important;
  line-height:1.65;
  overflow-x:hidden;
}
body.exp-vision{--exp-accent:var(--exp-orange);--exp-accent2:var(--exp-yellow)}
body.exp-gen{--exp-accent:var(--exp-violet);--exp-accent2:var(--exp-pink)}
body.exp-rl{--exp-accent:var(--exp-aqua);--exp-accent2:var(--exp-acid)}
body.exp-audio{--exp-accent:var(--exp-pink);--exp-accent2:var(--exp-yellow)}
body.exp-data{--exp-accent:var(--exp-yellow);--exp-accent2:var(--exp-blue)}
body.exp-society{--exp-accent:var(--exp-green);--exp-accent2:var(--exp-acid)}
body.exp-motion{--exp-accent:var(--exp-blue);--exp-accent2:var(--exp-aqua)}
body.exp-teacher{--exp-accent:var(--exp-ink);--exp-accent2:var(--exp-yellow)}
body.exp-page::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.105;
  background-image:radial-gradient(#111 0.55px,transparent .6px);background-size:8px 8px;
  mix-blend-mode:multiply;
}
body.exp-page *,body.exp-page *::before,body.exp-page *::after{box-sizing:border-box}
body.exp-page ::selection{background:var(--exp-accent2);color:var(--exp-ink)}
body.exp-page :focus-visible{outline:4px solid var(--exp-accent);outline-offset:3px}
.beginner-companion{max-width:1280px;margin:24px auto;padding:18px 24px;display:grid;grid-template-columns:95px minmax(0,1fr);gap:18px;align-items:center;background:#e8f3ff;border:2px solid #124496;border-radius:18px;box-shadow:5px 5px 0 #ffda42;color:#193759;font-family:var(--exp-sans)}
.beginner-companion img{width:95px;height:115px;object-fit:contain}.beginner-companion strong{display:block;color:#124496;font-weight:950;font-size:1.1rem}.beginner-companion p{margin:4px 0 7px;line-height:1.75;font-weight:680}.beginner-companion .beginner-words{font-size:.87rem}.beginner-companion a{font-weight:900;color:#124496}
@media(max-width:600px){.beginner-companion{margin:18px 14px;grid-template-columns:60px 1fr;gap:11px;padding:13px}.beginner-companion img{width:60px;height:80px}.beginner-companion strong{font-size:.95rem}.beginner-companion p{font-size:.87rem}}

/* ---------- universal top rail ---------- */
.exp-toprail{
  min-height:56px;display:grid;grid-template-columns:minmax(210px,1fr) auto auto auto;
  align-items:stretch;border-bottom:2px solid var(--exp-ink);background:var(--exp-paper);
  position:relative;z-index:40;
}
.exp-brand,.exp-rail-item{
  display:flex;align-items:center;text-decoration:none;color:var(--exp-ink);font:900 .73rem/1 var(--exp-mono);
  letter-spacing:.12em;text-transform:uppercase;
}
.exp-brand{gap:13px;padding:0 20px}.exp-brand::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--exp-accent);box-shadow:18px 0 0 var(--exp-accent2);margin-right:19px}
.exp-rail-item{justify-content:center;min-width:132px;padding:0 16px;border-left:1px solid var(--exp-ink)}
.exp-rail-item:hover{background:var(--exp-ink);color:#fff}

/* ---------- giant editorial page hero ---------- */
.exp-module-hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  min-height:390px;border-bottom:2px solid var(--exp-ink);overflow:hidden;background:var(--exp-paper2);
}
.exp-hero-copy{padding:clamp(32px,5vw,70px) clamp(20px,5vw,72px) 34px;border-right:2px solid var(--exp-ink);display:flex;flex-direction:column;justify-content:space-between}
.exp-kicker{font:900 .72rem/1.2 var(--exp-mono);letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:12px}
.exp-kicker::before{content:"";width:58px;height:8px;background:var(--exp-accent)}
.exp-module-hero h1{margin:30px 0 24px;font:950 clamp(2.9rem,5.8vw,6rem)/1.12 var(--exp-sans);letter-spacing:-.055em;max-width:1050px;color:var(--exp-ink)}
.exp-title-line{display:block;white-space:nowrap}
.exp-module-hero h1 .exp-hit{color:var(--exp-accent)}
.exp-hero-desc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end}
.exp-hero-desc p{margin:0;max-width:720px;border-left:8px solid var(--exp-accent);padding-left:15px;font-weight:720;font-size:clamp(.95rem,1.35vw,1.12rem);line-height:1.75}
.exp-hero-code{font:900 .7rem/1.5 var(--exp-mono);letter-spacing:.11em;text-align:right;white-space:nowrap}
.exp-hero-visual{position:relative;background:var(--exp-accent);min-height:390px;color:var(--exp-ink);overflow:hidden;isolation:isolate}
.exp-hero-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(16,16,15,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(16,16,15,.2) 1px,transparent 1px);background-size:46px 46px;opacity:.42}
.exp-hero-visual::after{content:attr(data-word);position:absolute;left:-.02em;bottom:-.14em;font:950 clamp(5rem,12vw,13rem)/.75 var(--exp-sans);letter-spacing:-.1em;color:rgba(255,255,255,.45);mix-blend-mode:screen;white-space:nowrap}
.exp-orbit{position:absolute;left:50%;top:48%;width:min(62%,300px);aspect-ratio:1;border:3px solid var(--exp-ink);border-radius:50%;transform:translate(-50%,-50%)}
.exp-orbit::before,.exp-orbit::after{content:"";position:absolute;border:2px solid var(--exp-ink);border-radius:50%;inset:13%;transform:rotate(34deg)}
.exp-orbit::after{inset:31%;background:var(--exp-accent2);border-radius:0;transform:rotate(45deg)}
.exp-cross{position:absolute;inset:0}.exp-cross::before,.exp-cross::after{content:"";position:absolute;background:var(--exp-ink)}.exp-cross::before{width:2px;height:100%;left:50%}.exp-cross::after{height:2px;width:100%;top:50%}
.exp-hero-tags{position:absolute;left:20px;right:20px;top:20px;display:flex;justify-content:space-between;gap:8px;font:900 .66rem/1.25 var(--exp-mono);letter-spacing:.08em;text-transform:uppercase}
.exp-hero-tags span{border:2px solid var(--exp-ink);background:var(--exp-paper2);padding:7px 9px;box-shadow:3px 3px 0 var(--exp-ink)}

/* ---------- legacy page content becomes the "workbench" ---------- */
body.exp-page .ailab-home-link{display:none !important}
body.exp-page .wrap{max-width:1280px !important;margin-left:auto !important;margin-right:auto !important;padding-left:clamp(14px,2.2vw,26px) !important;padding-right:clamp(14px,2.2vw,26px) !important}
body.exp-vision>header:not(.exp-toprail){display:none !important}
body.exp-teacher>.t-head{display:none !important}

/* old page headers are now compact control decks */
body.exp-gen .wrap>header,body.exp-rl .wrap>header{
  margin:24px 0 20px !important;padding:14px 16px !important;border:2px solid var(--exp-ink) !important;border-radius:0 !important;
  background:var(--exp-ink) !important;color:#fff !important;box-shadow:5px 5px 0 var(--exp-accent) !important;
}
body.exp-gen .wrap>header h1,body.exp-rl .wrap>header h1{font-size:1.05rem !important;letter-spacing:.06em !important;text-transform:uppercase !important}
body.exp-gen .wrap>header .sub,body.exp-rl .wrap>header p{opacity:.78 !important}
body.exp-motion .wrap>.hero{
  margin:24px 0 20px !important;padding:15px 18px !important;border:2px solid var(--exp-ink) !important;border-radius:0 !important;
  background:var(--exp-paper2) !important;color:var(--exp-ink) !important;box-shadow:5px 5px 0 var(--exp-accent) !important;
}
body.exp-motion .wrap>.hero h1,body.exp-motion .wrap>.hero .home-link{display:none !important}
body.exp-motion .wrap>.hero p{color:var(--exp-ink) !important}.exp-motion .warning{color:#8a3c00 !important}

/* common functional surfaces: hard edges, editorial rhythm */
body.exp-page .card,body.exp-page .panel,body.exp-page .section,body.exp-page .test-panel,body.exp-page .console,
body.exp-page .modelbox,body.exp-page .choice,body.exp-page .class-card,body.exp-page .status-box,
body.exp-page details.topic,body.exp-page .sensor-class-box{
  border-radius:0 !important;
}
body.exp-gen .card,body.exp-rl .card{
  border:2px solid var(--exp-ink) !important;background:var(--exp-paper2) !important;box-shadow:5px 5px 0 rgba(16,16,15,.18) !important;
  margin-bottom:22px !important;
}
body.exp-gen .card:nth-of-type(3n+1),body.exp-rl .card:nth-of-type(3n+1){box-shadow:5px 5px 0 var(--exp-accent) !important}
body.exp-page .btn,body.exp-page button,body.exp-page input,body.exp-page select,body.exp-page textarea{font-family:var(--exp-sans)}
body.exp-page .btn,body.exp-page button:not(.motion-toggle){border-radius:0 !important}
body.exp-page .btn{font-weight:850 !important}

/* generated common modules M4-M6 */
body.exp-page .lab-head{
  position:sticky !important;top:0 !important;z-index:60 !important;background:var(--exp-ink) !important;color:#fff !important;
  border-bottom:2px solid var(--exp-ink) !important;box-shadow:none !important;padding:10px 16px !important;
}
body.exp-page .lab-head .btn{background:transparent !important;color:#fff !important;border:1px solid rgba(255,255,255,.35) !important}
body.exp-page .lab-head .btn:hover{background:var(--exp-accent2) !important;color:var(--exp-ink) !important;border-color:var(--exp-ink) !important}
body.exp-page .lab-title{color:#fff !important}.exp-page .lab-badge{border-radius:0 !important;background:var(--exp-accent2) !important;color:var(--exp-ink) !important;font-family:var(--exp-mono)}
body.exp-page .privacy-bar{background:var(--exp-accent2) !important;color:var(--exp-ink) !important;border-bottom:2px solid var(--exp-ink) !important;padding:8px 18px !important}
body.exp-page .lab-main{max-width:1520px !important;gap:0 !important;padding:24px clamp(14px,2vw,28px) 70px !important;align-items:stretch !important}
body.exp-page .lab-steps{
  width:370px !important;border-radius:0 !important;border:2px solid var(--exp-ink) !important;box-shadow:none !important;background:var(--exp-accent2) !important;padding:16px !important;top:72px !important;
}
body.exp-page .lab-work{border-radius:0 !important;border:2px solid var(--exp-ink) !important;border-left:0 !important;box-shadow:none !important;background:var(--exp-paper2) !important}
body.exp-page .step{border-bottom:1px solid var(--exp-ink) !important;padding:12px 0 !important}
body.exp-page .st-num{border-radius:0 !important;background:var(--exp-ink) !important;color:#fff !important;font-family:var(--exp-mono)}
body.exp-page .st-title{font-weight:900 !important}.exp-page .st-task{color:var(--exp-ink) !important}.exp-page .st-min{color:var(--exp-muted) !important}
body.exp-page .lab-prog{border-radius:0 !important;background:rgba(255,255,255,.55) !important;border:1px solid var(--exp-ink)}
body.exp-page .lab-prog-fill{background:var(--exp-accent) !important}
body.exp-page .notebook{border-top:2px solid var(--exp-ink) !important}
body.exp-page .notebook input{border-radius:0 !important;border:1px solid var(--exp-ink) !important;background:var(--exp-paper2) !important}
body.exp-page .work-pad{padding:18px !important}
body.exp-page .work-pad>.panel{border:2px solid var(--exp-ink) !important;background:var(--exp-paper2) !important;margin-bottom:18px !important;box-shadow:4px 4px 0 rgba(16,16,15,.12)}
body.exp-page .work-pad>.panel:nth-child(2n){box-shadow:4px 4px 0 var(--exp-accent) !important}
body.exp-page .work-pad>.panel>h3{font:900 1rem/1.25 var(--exp-mono) !important;letter-spacing:.025em;text-transform:none;border-bottom:2px solid var(--exp-ink);padding-bottom:8px}
body.exp-page .lab-teacher{border-radius:0 !important;border:2px solid var(--exp-ink) !important;background:#fff5bf !important}

/* motion page: preserve dark camera stage but turn surrounding UI into facility style */
body.exp-motion .grid{gap:0 !important;margin-bottom:36px}
body.exp-motion .grid>.panel{border:2px solid var(--exp-ink) !important;background:var(--exp-paper2) !important;color:var(--exp-ink) !important;box-shadow:none !important}
body.exp-motion .grid>.panel+ .panel{border-left:0 !important}
body.exp-motion .panel-title{background:var(--exp-accent2) !important;color:var(--exp-ink) !important;border-bottom:2px solid var(--exp-ink) !important;font-family:var(--exp-mono);letter-spacing:.03em}
body.exp-motion .note,body.exp-motion .stat .label{color:var(--exp-muted) !important}
body.exp-motion .class-card,body.exp-motion .stat,body.exp-motion .status-box,body.exp-motion .pred,body.exp-motion .toggle{background:#fff !important;color:var(--exp-ink) !important;border:1px solid var(--exp-ink) !important}
body.exp-motion input[type="text"]{background:#fff !important;color:var(--exp-ink) !important;border:1px solid var(--exp-ink) !important}
body.exp-motion .log{background:var(--exp-ink) !important;color:#fff !important;border-radius:0 !important}.exp-motion th{background:var(--exp-accent2) !important;color:var(--exp-ink) !important}.exp-motion td{background:#fff !important;color:var(--exp-ink) !important}
body.exp-motion .footer{color:var(--exp-muted) !important}

/* vision block lab */
body.exp-vision main{max-width:1380px !important;margin:26px auto 70px !important;padding:0 clamp(14px,2.2vw,26px) !important}
body.exp-vision .color-guide,body.exp-vision .section{border:2px solid var(--exp-ink) !important;box-shadow:5px 5px 0 rgba(16,16,15,.16) !important;background:var(--exp-paper2) !important;margin-bottom:24px !important}
body.exp-vision .section-head{border-bottom:2px solid var(--exp-ink) !important;background:var(--exp-accent2) !important}
body.exp-vision footer{border-top:2px solid var(--exp-ink) !important;background:var(--exp-ink) !important;color:#fff !important;padding:28px !important}

/* teacher guide */
.lab-primer{max-width:1250px;margin:28px auto;padding:0 clamp(14px,2.2vw,26px)}
.lab-primer-inner{border:2px solid var(--exp-ink);background:var(--exp-paper2);padding:clamp(18px,3vw,34px);box-shadow:6px 6px 0 var(--exp-ink)}
.lab-primer h2{margin:0 0 10px;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.3}
.lab-primer p{max-width:900px;line-height:1.8;margin:10px 0;font-weight:600}
.lab-primer .primer-steps{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;list-style:none;padding:0;margin:18px 0}
.lab-primer .primer-steps li{flex:1 1 170px;border:2px solid var(--exp-ink);background:#fff;padding:14px;font-weight:800;line-height:1.5}
.lab-primer .primer-steps li+li:before{content:"→ ";color:var(--exp-accent);font-weight:950}
.lab-primer .primer-why{border-left:7px solid var(--exp-accent);padding:8px 14px;background:#fff}
.lab-primer .primer-meta{font-size:.86rem;color:var(--exp-muted)}
.lab-primer a{font-weight:850;text-decoration-thickness:2px;text-underline-offset:3px}
body.exp-vision .hero h2{margin:0;font-size:clamp(1.8rem,4vw,3.7rem);line-height:1.25;letter-spacing:-.04em;font-weight:900}
body.exp-motion .hero h2{margin:0;font-size:clamp(1.8rem,3.1vw,3rem);line-height:1.25;letter-spacing:-.04em;font-weight:900}
body.exp-rl .wrap header h2,body.exp-gen .wrap header h2{margin:0;font-size:clamp(1.45rem,4vw,2rem);font-weight:900}
body.exp-teacher .t-wrap{max-width:1250px !important;margin:32px auto 80px !important;padding:0 clamp(14px,2.2vw,26px) !important}
body.exp-teacher .t-wrap>h2{font-size:clamp(2rem,5vw,4.6rem) !important;line-height:1.14 !important;letter-spacing:-.04em !important;border-bottom:2px solid var(--exp-ink);padding:34px 0 15px;margin:0 0 20px !important}
body.exp-teacher .panel,body.exp-teacher .mod-sec{border:2px solid var(--exp-ink) !important;border-radius:0 !important;background:var(--exp-paper2) !important;box-shadow:5px 5px 0 rgba(16,16,15,.14) !important}
body.exp-teacher .plan{border:2px solid var(--exp-ink) !important;background:#fff !important}.exp-teacher .plan th{background:var(--exp-ink) !important;color:#fff !important}.exp-teacher .plan td,.exp-teacher .plan th{border:1px solid var(--exp-ink) !important}

@media (max-width:900px){
  .exp-toprail{grid-template-columns:1fr auto}.exp-rail-item:not(.exp-rail-home){display:none}.exp-rail-item{min-width:100px}
  .exp-module-hero{grid-template-columns:1fr}.exp-hero-copy{border-right:0;border-bottom:2px solid var(--exp-ink)}.exp-hero-visual{min-height:260px}
  .exp-module-hero h1{font-size:clamp(2.6rem,9vw,5.3rem);line-height:1.13}
  .exp-hero-desc{grid-template-columns:1fr}.exp-hero-code{text-align:left}
  body.exp-page .lab-main{flex-direction:column !important;gap:14px !important}.exp-page .lab-steps{width:100% !important;position:static !important}.exp-page .lab-work{border-left:2px solid var(--exp-ink) !important}
  body.exp-motion .grid>.panel+ .panel{border-left:2px solid var(--exp-ink) !important;border-top:0 !important}
}
@media (max-width:540px){
  .exp-brand{padding:0 12px}.exp-brand span{display:none}.exp-rail-item{padding:0 10px;min-width:92px}
  .exp-hero-copy{padding:28px 16px 24px}.exp-module-hero h1{font-size:clamp(2.1rem,9.2vw,3.2rem);line-height:1.16}
  .exp-hero-visual{min-height:210px}.exp-hero-tags{left:12px;right:12px;top:12px}.exp-orbit{width:190px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}}
@media print{
  body.exp-page{background:#fff !important;color:#000 !important}.exp-toprail,.exp-hero-visual{display:none !important}
  .exp-module-hero{display:block !important;min-height:0 !important;background:#fff !important;border-bottom:2px solid #000 !important}.exp-hero-copy{border:0 !important;padding:12mm 0 7mm !important}.exp-module-hero h1{font-size:34pt !important;color:#000 !important}.exp-hit{color:#000 !important}.exp-hero-desc p{border-left:3px solid #000 !important}
  body.exp-page::before{display:none}.exp-page .lab-head{position:static !important;background:#fff !important;color:#000 !important}.exp-page .lab-head *{color:#000 !important}.exp-page .privacy-bar{background:#fff !important}
  body.exp-page .card,body.exp-page .panel,body.exp-page .section,body.exp-page .lab-work,body.exp-page .lab-steps{box-shadow:none !important;background:#fff !important;color:#000 !important}
}