/* MOE Lab page. Uses the site tokens from style.css and motion.css. */
.lab-page header{gap:24px;background:rgba(0,0,0,.94);border-bottom-color:#171717}
.lab-back{margin-inline-start:auto;display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:#9a9a9a;transition:color var(--dur-1) var(--ease-out)}
.lab-back:hover,.lab-back:focus-visible{color:#fff}
html[dir="rtl"] .lab-back-arrow{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .lab-page,html[dir="rtl"] .lab-page h1,html[dir="rtl"] .lab-page h2,html[dir="rtl"] .lab-page h3{font-family:Alexandria,Inter,Arial,sans-serif}
html[dir="rtl"] .lab-page h2{letter-spacing:-.035em;line-height:1.18}

.lab-hero{padding-top:110px;padding-bottom:40px}
.lab-hero .section-head,.lab-exp .section-head{margin-bottom:56px}
.lab-hero .section-head h2,.lab-exp .section-head h2,.lab-end h2{font-size:clamp(46px,6.4vw,96px)}
.lab-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#1c1c1c;border:1px solid #1c1c1c;border-radius:16px;overflow:hidden}
.lab-index a{display:flex;gap:18px;align-items:baseline;padding:26px 28px;background:#050505;transition:background-color var(--dur-2) var(--ease-out)}
.lab-index a:hover,.lab-index a:focus-visible{background:#0e0b16}
.lab-index span{font-size:11px;letter-spacing:.13em;color:var(--amber)}
.lab-index b{font-weight:400;font-size:clamp(20px,2vw,28px);letter-spacing:-.03em}
.lab-exp{padding-block:110px;border-top:1px solid #151515}
.lab-end{padding-block:120px 140px;border-top:1px solid #151515}
.lab-end h2{margin:28px 0 40px}
.lab-ghost{display:inline-flex;align-items:center;padding:14px 22px;border:1px solid #333;border-radius:30px;font-size:12px;font-weight:500;color:#e9e9e9;transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.lab-ghost:hover,.lab-ghost:focus-visible{border-color:var(--amber);color:#fff}

/* 01 Kashida */
.kash{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:28px;align-items:stretch}
.kash-stage{position:relative;display:grid;place-items:center;min-height:420px;border:1px solid #1c1c1c;border-radius:20px;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#1a1030 0%,#07050c 62%,#000 100%)}
.kash-stage::before{content:'';position:absolute;inset:0;background:linear-gradient(#ffffff08 1px,transparent 1px) 0 0/100% 25%;pointer-events:none}
.kash-word{margin:0;padding:0 4%;max-width:100%;font-family:Alexandria,sans-serif;font-weight:var(--kw,500);font-size:clamp(54px,9vw,148px);line-height:1.5;white-space:nowrap;color:transparent;background:linear-gradient(90deg,#6d55ff,#ff9971 55%,#ff2bd6);-webkit-background-clip:text;background-clip:text;text-align:center}
.kash-meta{position:absolute;bottom:16px;inset-inline-start:20px;font:500 10px/1 Inter,sans-serif;letter-spacing:.14em;color:#6f6a7c;direction:ltr}
.kash-panel{display:flex;flex-direction:column;gap:22px;padding:26px;border:1px solid #1c1c1c;border-radius:20px;background:#050505}
.kash-field{display:grid;gap:10px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#9a9a9a}
.kash-field input{font:400 22px/1.4 Alexandria,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#0b0911;border:1px solid #2a2a2a;border-radius:12px;padding:12px 16px;transition:border-color var(--dur-1) var(--ease-out)}
.kash-field input:focus-visible{outline:none;border-color:var(--amber)}
.kash-chips{display:flex;flex-wrap:wrap;gap:8px}
.kash-chips button{font:400 15px/1 Alexandria,sans-serif;padding:9px 14px;border:1px solid #2a2a2a;border-radius:999px;color:#cfcfcf;transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.kash-chips button:hover,.kash-chips button:focus-visible,.kash-chips button[aria-current=true]{border-color:var(--violet);color:#fff}
.kash-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kash-modes button{display:grid;gap:4px;text-align:start;padding:12px;border:1px solid #2a2a2a;border-radius:12px;transition:border-color var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
.kash-modes b{font-weight:500;font-size:14px}
.kash-modes small{font-size:11px;line-height:1.35;color:#8d8d8d}
.kash-modes button:hover,.kash-modes button:focus-visible{border-color:#4a3a80}
.kash-modes button[aria-checked=true]{border-color:var(--violet);background:#120c22}
.kash-range{display:grid;grid-template-columns:72px 1fr 40px;align-items:center;gap:14px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#9a9a9a}
.kash-range output{font-size:12px;color:#fff;text-align:end;letter-spacing:0}
.kash-range input{accent-color:var(--amber);width:100%}
.kash-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}

/* 02 Exploded frame */
.explode{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:28px;align-items:center}
.explode-stage{perspective:1400px;display:grid;place-items:center;min-height:520px;padding:40px 0;touch-action:pan-y;cursor:grab;border-radius:20px;outline-offset:6px;direction:ltr}
.explode-stage.is-dragging{cursor:grabbing}
.stack{position:relative;width:min(560px,86%);aspect-ratio:16/9;transform-style:preserve-3d;transform:rotateX(var(--rx,12deg)) rotateY(var(--ry,-18deg))}
.layer{position:absolute;inset:0;border-radius:10px;transform:translateZ(calc(var(--z,0) * var(--gap,0px)));transition:transform var(--dur-4) var(--ease-out),opacity var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);overflow:hidden}
.stack.is-open .layer{box-shadow:0 0 0 1px #ffffff1f}
.layer.is-off{opacity:0}
.layer.is-focus{box-shadow:0 0 0 1px var(--amber)!important}
.layer .tag{position:absolute;top:10px;left:12px;font:500 10px/1 Inter,sans-serif;font-style:normal;letter-spacing:.1em;color:#ffffffc0;opacity:0;transition:opacity var(--dur-2) var(--ease-out)}
.stack.is-open .layer .tag{opacity:1}
.l-bg{background:radial-gradient(ellipse at 68% 58%,#3a1f6e 0%,#140b26 48%,#05030a 100%)}
.l-dots{background-image:radial-gradient(circle,#b49cff 1px,transparent 1.6px),radial-gradient(circle,#ffb82999 1px,transparent 1.6px);background-size:26px 26px,61px 61px;background-position:0 0,13px 21px;-webkit-mask:radial-gradient(ellipse at 60% 55%,#000 10%,transparent 70%);mask:radial-gradient(ellipse at 60% 55%,#000 10%,transparent 70%);opacity:.75}
.layer.l-dots.is-off{opacity:0}
.x-mark{position:absolute;left:50%;top:44%;width:24%;aspect-ratio:164.45/159.3;transform:translate(-50%,-50%);background:linear-gradient(45deg,#ff2bd6,#ff9971 50%,#6d55ff);-webkit-mask:url('assets/moe-mark.svg') center/contain no-repeat;mask:url('assets/moe-mark.svg') center/contain no-repeat}
.x-title{position:absolute;left:0;right:0;bottom:15%;text-align:center;font:500 clamp(16px,2.2vw,30px)/1 Inter,sans-serif;letter-spacing:.32em;color:#fff}
html[dir="rtl"] .x-title{font-family:Alexandria,sans-serif;letter-spacing:0}
.l-light{background:radial-gradient(circle at 50% 40%,#c9b8ff40 0%,transparent 42%),linear-gradient(115deg,transparent 40%,#ffffff12 50%,transparent 60%)} /* no blend modes here: they would flatten the 3D stack */
.x-safe{position:absolute;inset:8% 6%;border:1px dashed #ffffff40;border-radius:4px}
.x-keys{position:absolute;left:6%;right:6%;bottom:5%;height:10px;border-top:1px solid #ffffff2a;display:flex;justify-content:space-between}
.x-keys i{width:8px;height:8px;margin-top:-5px;background:var(--amber);transform:rotate(45deg)}
.x-tc{position:absolute;top:10px;right:12px;font:500 10px/1 Inter,sans-serif;letter-spacing:.12em;color:#ffb829cc}
.layer-panel{border:1px solid #1c1c1c;border-radius:20px;background:#050505;padding:22px}
.layer-panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:10px;letter-spacing:.13em;color:#8d8d8d;margin-bottom:16px}
.layer-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:none}
.layer-list li{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;transition:background-color var(--dur-1) var(--ease-out)}
.layer-list li:hover,.layer-list li:focus-within{background:#0e0b16}
.layer-list button{width:34px;height:34px;border-radius:8px;border:1px solid #2a2a2a;display:grid;place-items:center;color:#cfcfcf;transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.layer-list button[aria-pressed=false]{color:#4a4a4a}
.layer-list button svg{width:16px;height:16px}
.layer-list b{font-weight:500;font-size:14px;direction:ltr;text-align:start}
html[dir="rtl"] .layer-list b{text-align:right}
.layer-list small{display:block;font-size:12px;color:#8d8d8d;font-weight:300}
.layer-hint{margin-top:14px;font-size:12px;color:#7a7a7a}

/* 03 Breakdown (shown once real before/after frames are added in lab.js) */
.breakdowns{display:grid;gap:28px}
.wipe{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;border:1px solid #1c1c1c;user-select:none;touch-action:pan-y;cursor:ew-resize;direction:ltr;outline-offset:6px}
.wipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wipe .after{clip-path:inset(0 0 0 var(--cut,50%))}
.wipe .bar{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;background:var(--amber)}
.wipe .bar::after{content:'';position:absolute;top:50%;left:-9px;width:18px;height:18px;margin-top:-9px;transform:rotate(45deg);background:var(--amber)}
.wipe .w-lab{position:absolute;top:12px;font:500 10px/1 Inter,sans-serif;letter-spacing:.14em;color:#ffffffcc;background:#000a;padding:6px 8px;border-radius:6px}

@media (max-width:900px){.kash,.explode{grid-template-columns:1fr}.explode-stage{min-height:380px}}
@media (max-width:640px){
 .lab-page header{gap:12px}.lab-page header .brand>span:last-child{display:none}
 .lab-back{font-size:11px}
 .lab-hero{padding-top:60px}.lab-index{grid-template-columns:1fr}
 .lab-exp{padding-block:72px}.lab-hero .section-head,.lab-exp .section-head{margin-bottom:36px}
 .lab-hero .section-head h2,.lab-exp .section-head h2,.lab-end h2{font-size:clamp(40px,11vw,58px)}
 .kash-stage{min-height:260px}.kash-word{font-size:clamp(44px,14vw,76px)}
 .kash-panel,.layer-panel{padding:18px}
 .kash-modes{grid-template-columns:1fr 1fr 1fr}.kash-modes small{display:none}
 .explode-stage{min-height:300px;padding:20px 0}.stack{width:88%}
}
@media (prefers-reduced-motion:reduce){.layer{transition:opacity var(--dur-2) linear}}