:root {
  color-scheme: light;
  --ink: #191917;
  --muted: #6f706c;
  --line: #deded8;
  --paper: #f6f5ef;
  --panel: #ffffff;
  --orange: #ff6a14;
  --orange-dark: #dc4d00;
  --lime: #d9ff43;
  --lcd: #ffb127;
  --lcd-ink: #2a1800;
  --device: #f5f3e8;
  --device-edge: #d9d5c6;
  --shadow: 0 30px 80px rgba(30, 24, 12, .18);
  --radius: 24px;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 8%, rgba(255,106,20,.08), transparent 28rem),
    linear-gradient(180deg, #fbfaf6 0, var(--paper) 55%, #efeee8 100%);
  font-family: var(--sans);
  line-height: 1.5;
}
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid #2f7ff7; outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 999; transform: translateY(-150%); padding: 10px 14px; background: #111; color: #fff; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }

.site-header {
  height: 76px;
  padding: 0 clamp(20px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(251,250,246,.88);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--orange); color: #fff;
  font: 900 16px/1 var(--mono); letter-spacing: -1px;
  box-shadow: inset 0 -3px rgba(130,40,0,.25);
}
.brand strong { display: block; font-size: 14px; letter-spacing: .12em; line-height: 1.2; }
.brand small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.header-meta { display: flex; align-items: center; gap: 9px; }
.language-switcher { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.language-switcher button { min-width: 30px; height: 30px; padding: 0 5px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 800 9px/1 var(--mono); cursor: pointer; }
.language-switcher button:hover,.language-switcher button:focus-visible { color: var(--ink); background: #f0eee7; }
.language-switcher button[aria-pressed="true"] { color: #fff; background: var(--ink); box-shadow: 2px 2px 0 var(--orange); }
.status-pill { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 700; background: #fff; }
.status-pill i { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #39c36a; box-shadow: 0 0 0 4px rgba(57,195,106,.13); }
.header-button, .tool-button, .mini-button {
  border: 1px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none;
  border-radius: 10px; padding: 8px 13px; font-size: 12px; font-weight: 800; cursor: pointer;
}
.header-button.ghost { color: var(--ink); background: transparent; border-color: var(--line); }
.header-button.presentation { color: #fff; background: var(--orange); border-color: var(--orange); }

main { width: min(1580px, 100%); margin: 0 auto; padding: 0 clamp(16px, 4vw, 64px) 60px; }
.hero {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  align-items: end; gap: clamp(30px, 7vw, 120px);
  padding: clamp(54px, 8vw, 110px) 0 clamp(44px, 6vw, 80px);
}
.eyebrow, .section-kicker { margin: 0 0 14px; color: var(--orange-dark); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.hero h1 { margin: 0; font-size: clamp(44px, 6.4vw, 98px); line-height: .93; letter-spacing: -.06em; font-weight: 900; }
.hero h1 span { color: var(--orange); }
.hero-copy { max-width: 580px; padding-bottom: 8px; }
.hero-copy > p { margin: 0 0 26px; color: #4f504d; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.6; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-badges span { border: 1px solid var(--line); background: rgba(255,255,255,.7); padding: 8px 11px; border-radius: 8px; font: 700 11px/1 var(--mono); text-transform: uppercase; }

.workspace {
  display: grid; grid-template-columns: minmax(660px, 1.45fr) minmax(380px, .75fr);
  min-height: 810px;
  border: 1px solid #d7d6cf;
  background: var(--panel);
  border-radius: 30px;
  overflow: clip;
  box-shadow: var(--shadow);
}
.simulator-column { min-width: 0; display: flex; flex-direction: column; background: #e8e6de; border-right: 1px solid #d2d1ca; }
.simulator-toolbar { min-height: 78px; padding: 17px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #d2d1ca; background: rgba(255,255,255,.48); }
.simulator-toolbar .section-kicker { display: block; margin: 0 0 3px; color: #77766f; font-size: 9px; }
.simulator-toolbar strong { font-size: 13px; }
.firmware-path { display: block; max-width: 520px; margin-top: 5px; color: #696963; font: 800 9px/1.35 var(--mono); overflow-wrap: anywhere; }
.toolbar-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }
.tool-button { padding: 8px 11px; border-color: #c7c5bd; color: #44443f; background: rgba(255,255,255,.7); }
.tool-button[aria-pressed="false"] { opacity: .55; text-decoration: line-through; }
.tool-button.primary { background: var(--orange); border-color: var(--orange); color: #fff; }

.device-stage {
  min-height: 670px;
  flex: 1;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 30px 22px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px) 0 0/34px 34px,
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.95), rgba(218,215,204,.75));
}
.device-stage::before { content: "INTERACTIVE HARDWARE LAB"; position: absolute; left: 24px; bottom: 18px; color: rgba(0,0,0,.22); font: 800 9px/1 var(--mono); letter-spacing: .16em; }
.device-shadow { position: absolute; width: 500px; height: 100px; left: 50%; bottom: 27px; transform: translateX(-50%); background: rgba(45,38,24,.25); filter: blur(28px); border-radius: 50%; }

.flipper-device {
  position: relative;
  width: 560px;
  height: 600px;
  border: 2px solid #ccc8b9;
  border-radius: 78px 78px 54px 54px;
  background:
    linear-gradient(106deg, rgba(255,255,255,.7), transparent 25%),
    linear-gradient(180deg, #fbf9ef 0, var(--device) 58%, #e9e5d6 100%);
  box-shadow:
    inset 8px 0 9px rgba(255,255,255,.8),
    inset -11px 0 13px rgba(116,107,79,.12),
    inset 0 -14px 18px rgba(108,100,75,.1),
    0 25px 45px rgba(58,49,28,.25);
  transform: rotate(-.5deg);
}
.flipper-device::before { content: ""; position: absolute; inset: 7px; border-radius: inherit; border: 1px solid rgba(255,255,255,.85); pointer-events: none; }
.flipper-device::after { content: ""; position: absolute; width: 96px; height: 20px; right: -8px; top: 172px; border-radius: 0 9px 9px 0; background: #d7d2c1; box-shadow: 0 54px #d7d2c1; z-index: -1; }
.device-top { position: absolute; top: -7px; left: 88px; width: 90px; height: 29px; border-radius: 4px 4px 12px 12px; background: #4b4b47; box-shadow: inset 0 -5px 8px #222; }
.ir-port { position: absolute; left: 17px; top: 5px; width: 48px; height: 11px; border-radius: 7px; background: repeating-linear-gradient(90deg,#0b0b0b 0 7px,#28231f 7px 12px); }
.top-label { position: absolute; right: 6px; top: 5px; color: #aaa; font: 700 8px/1 var(--mono); }
.device-branding { position: absolute; left: 48px; top: 35px; letter-spacing: -.06em; transform: scaleY(1.12); }
.device-logo { color: #343330; font: 950 22px/1 var(--sans); }
.zero-word { margin-left: 5px; color: var(--orange); font: 950 22px/1 var(--sans); }
.status-leds { position: absolute; top: 64px; right: 92px; display: flex; gap: 8px; }
.status-leds i { width: 7px; height: 7px; border-radius: 50%; background: #aaa89f; box-shadow: inset 0 0 2px #555; transition: .16s; }
#led-blue.on { background: #3f9cff; box-shadow: 0 0 9px #3f9cff; }
#led-green.on { background: #4ce36c; box-shadow: 0 0 9px #4ce36c; }
#led-red.on { background: #ff554a; box-shadow: 0 0 9px #ff554a; }

.lcd-bezel {
  position: absolute;
  left: 44px; top: 82px;
  width: 395px; height: 216px;
  padding: 10px;
  border-radius: 14px 18px 18px 16px;
  background: #3b3b37;
  box-shadow: inset 0 0 0 3px #242421, inset 0 0 0 5px #55534d, 0 4px 1px rgba(0,0,0,.2);
}
.lcd {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  color: var(--lcd-ink);
  background: var(--lcd);
  border-radius: 5px;
  box-shadow: inset 0 0 18px rgba(125,55,0,.22), 0 0 8px rgba(255,164,34,.22);
  font-family: var(--mono);
  image-rendering: pixelated;
  user-select: none;
}
.lcd[data-backlight="off"] { filter: saturate(.55) brightness(.72); }
.lcd-scanlines { position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(70,25,0,.2) 2px 3px); mix-blend-mode: multiply; }
.screen { position: absolute; left: 0; top: 0; width: 375px; height: 196px; overflow: hidden; transform-origin: left top; }
.screen.flash { animation: lcd-flash .22s ease; }
@keyframes lcd-flash { 50% { filter: invert(.8); } }

.controls { position: absolute; left: 65px; top: 327px; right: 63px; height: 216px; }
button[data-key] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.back-key {
  position: absolute; left: 0; top: 64px; width: 76px; height: 76px; border-radius: 50%;
  border: 5px solid #d3d0c2; background: radial-gradient(circle at 40% 35%, #fff, #d9d6c8 70%);
  box-shadow: inset 0 -7px 9px rgba(100,91,64,.15), 0 4px 7px rgba(56,50,31,.25); cursor: pointer;
}
.back-key span { display: block; font: 900 25px/1 var(--sans); transform: rotate(8deg); }
.back-key small { position: absolute; left: 19px; top: -21px; font: 800 8px/1 var(--mono); letter-spacing: .1em; color: #78756c; }
.dpad { position: absolute; right: 0; width: 212px; height: 212px; border-radius: 50%; background: #d2cfc1; box-shadow: inset 0 0 0 7px #e8e5d8, inset 0 0 13px rgba(74,65,40,.3), 0 4px 8px rgba(56,50,31,.22); }
.dpad::before, .dpad::after { content: ""; position: absolute; background: #242421; border-radius: 20px; }
.dpad::before { width: 70px; height: 178px; left: 71px; top: 17px; }
.dpad::after { width: 178px; height: 70px; left: 17px; top: 71px; }
.dpad-key { position: absolute; z-index: 2; border: 0; display: grid; place-items: center; color: #bcbcb6; background: transparent; font: 700 14px/1 var(--sans); cursor: pointer; }
.dpad-key.up { left: 72px; top: 17px; width: 68px; height: 53px; border-radius: 18px 18px 4px 4px; }
.dpad-key.down { left: 72px; bottom: 17px; width: 68px; height: 53px; border-radius: 4px 4px 18px 18px; }
.dpad-key.left { left: 17px; top: 72px; width: 53px; height: 68px; border-radius: 18px 4px 4px 18px; }
.dpad-key.right { right: 17px; top: 72px; width: 53px; height: 68px; border-radius: 4px 18px 18px 4px; }
.dpad-key.ok { left: 74px; top: 74px; width: 64px; height: 64px; border-radius: 50%; color: #161614; background: radial-gradient(circle at 40% 35%, #fff, #cbc8bb 75%); border: 4px solid #353531; font-size: 13px; font-weight: 900; box-shadow: 0 2px 6px #0008; }
.back-key:active, .dpad-key:active, .dpad-key.pressed { transform: translateY(3px); filter: brightness(.8); }
.dpad-key.ok:active, .dpad-key.ok.pressed { transform: translateY(3px) scale(.96); }

.device-details { position: absolute; inset: 0; pointer-events: none; }
.nfc-mark { position: absolute; right: 41px; top: 283px; transform: rotate(90deg); color: #a9a698; font: 800 9px/1 var(--mono); letter-spacing: .13em; }
.speaker { position: absolute; left: 52px; bottom: 31px; width: 58px; display: flex; flex-wrap: wrap; gap: 7px; }
.speaker i { width: 10px; height: 6px; border-radius: 50%; background: #b8b4a7; box-shadow: inset 0 1px 2px #76736b; }
.usb-port { position: absolute; right: -3px; bottom: 72px; width: 18px; height: 54px; border-radius: 7px 0 0 7px; background: #2b2b28; box-shadow: inset 3px 0 3px #111; }
.usb-label { position: absolute; right: 20px; bottom: 91px; color: #979386; font: 700 8px/1 var(--mono); transform: rotate(90deg); }
.ibutton-pads { position: absolute; left: 132px; bottom: -5px; width: 82px; display: flex; gap: 14px; }
.ibutton-pads i { width: 24px; height: 13px; border-radius: 8px 8px 0 0; background: linear-gradient(90deg,#8e8e86,#efeee8,#85857e); border: 1px solid #73736d; }
.ibutton-pads small { position: absolute; top: -13px; left: 8px; font: 700 7px/1 var(--mono); color: #aaa699; }
.gpio-rail { position: absolute; right: -15px; top: 42px; width: 102px; height: 181px; transform: rotate(90deg); transform-origin: 50% 50%; }
.gpio-label { position: absolute; left: -31px; top: 42px; font: 800 8px/1 var(--mono); color: #7e7a6e; }
.pin-row { display: flex; gap: 2px; padding: 6px; background: #232321; border-radius: 7px; box-shadow: inset 0 0 0 2px #111; }
.pin-row i { width: 8px; height: 10px; background: #b99a42; border-radius: 2px; box-shadow: inset 0 0 0 2px #4b421f; }
.pin-names { display: flex; justify-content: space-between; margin-top: 4px; }
.pin-names span { width: 11px; overflow: visible; color: #777268; font: 600 5px/1 var(--mono); transform: rotate(-90deg); }

/* Horizontal hardware shell based on the supplied physical reference. */
.device-stage {
  min-height: 510px;
  padding: 42px 18px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.025) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(rgba(0,0,0,.025) 1px, transparent 1px) 0 0/34px 34px,
    radial-gradient(circle at 50% 42%, #fff 0, #e1ded4 68%, #d2cfc5 100%);
}
.device-stage::before { content: "FLIPPER ZERO WEB SIMULATOR"; }
.device-shadow { width: min(720px, 82%); height: 68px; bottom: 54px; background: rgba(10,10,9,.34); filter: blur(25px); }
.flipper-device {
  position: relative;
  width: min(820px, 96%);
  height: auto;
  aspect-ratio: 820 / 360;
  border: 0;
  border-radius: 43px 64px 42px 36px;
  background:
    radial-gradient(circle at 60% 12%, rgba(255,255,255,.08), transparent 33%),
    linear-gradient(180deg, #27292a 0%, #151617 53%, #0b0c0c 100%);
  box-shadow:
    inset 0 4px 3px rgba(255,255,255,.12),
    inset 0 -8px 10px rgba(0,0,0,.65),
    0 26px 42px rgba(20,18,12,.38);
  clip-path: polygon(15% 0, 89% 0, 100% 31%, 100% 100%, 4.5% 100%, 0 64%);
  transform: none;
  isolation: isolate;
}
.flipper-device::before,
.flipper-device::after { content: none; }
.shell-bevel {
  position: absolute;
  inset: 3.2%;
  z-index: -1;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 34px 50px 31px 27px;
  clip-path: polygon(13% 0, 89% 0, 100% 30%, 100% 100%, 3% 100%, 0 64%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.34);
}
.shell-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  pointer-events: none;
}
.lcd-bezel {
  left: 23.7%;
  top: 18.7%;
  width: 41.4%;
  height: 51.4%;
  padding: 1.15%;
  border-radius: 6% / 11%;
  background: linear-gradient(145deg, #0d0e0e, #393a39 45%, #070808);
  box-shadow:
    inset 0 0 0 2px #050606,
    inset 0 0 0 5px #333432,
    0 4px 5px rgba(0,0,0,.75),
    0 0 0 2px rgba(255,255,255,.07);
}
.lcd { border-radius: 4px; }
.controls { position: absolute; inset: 0; height: auto; pointer-events: none; }
.controls button { pointer-events: auto; }
.dpad {
  left: 68%;
  top: 14%;
  right: auto;
  width: 21.6%;
  height: auto;
  aspect-ratio: 1;
  border: clamp(3px, .55vw, 6px) solid #d85409;
  background: radial-gradient(circle at 42% 35%, #ff8426 0, #ff6811 53%, #e54c03 100%);
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,.28),
    inset 0 -7px 9px rgba(143,39,0,.28),
    0 4px 8px rgba(0,0,0,.6),
    0 0 0 2px #0a0b0b;
}
.dpad::before,
.dpad::after { background: rgba(170,49,0,.13); border-radius: 17%; }
.dpad::before { left: 35%; top: 5%; width: 30%; height: 90%; }
.dpad::after { left: 5%; top: 35%; width: 90%; height: 30%; }
.dpad-key { color: #ffb27f; text-shadow: 0 1px rgba(128,37,0,.6); font-size: clamp(8px, 1.15vw, 14px); }
.dpad-key.up { left: 34%; top: 3%; width: 32%; height: 30%; border-radius: 40% 40% 10% 10%; }
.dpad-key.down { left: 34%; top: 67%; bottom: auto; width: 32%; height: 30%; border-radius: 10% 10% 40% 40%; }
.dpad-key.left { left: 3%; top: 34%; width: 30%; height: 32%; border-radius: 40% 10% 10% 40%; }
.dpad-key.right { left: 67%; right: auto; top: 34%; width: 30%; height: 32%; border-radius: 10% 40% 40% 10%; }
.dpad-key.ok {
  left: 34%;
  top: 34%;
  width: 32%;
  height: 32%;
  border: clamp(2px, .35vw, 4px) solid #b83800;
  color: #5b1800;
  background: radial-gradient(circle at 38% 30%, #ff963f, #ff6811 66%, #d74300);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.32), 0 2px 5px rgba(75,19,0,.65);
  font-size: clamp(8px, 1vw, 13px);
}
.back-key {
  left: 90.1%;
  top: 51.5%;
  width: 7.6%;
  height: auto;
  aspect-ratio: 1;
  border: clamp(2px, .35vw, 4px) solid #c64100;
  border-radius: 50%;
  color: #7c2300;
  background: radial-gradient(circle at 38% 30%, #ff963f, #ff6811 68%, #d94700);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.3), 0 3px 6px rgba(0,0,0,.62), 0 0 0 2px #080909;
}
.back-key span { font-size: clamp(10px, 1.65vw, 21px); }
.back-key small { left: 10%; right: 10%; top: auto; bottom: -28%; color: #ef6822; text-align: center; font-size: clamp(4px, .55vw, 7px); }
.device-branding {
  left: 37%;
  top: auto;
  bottom: 6.2%;
  color: #e75822;
  font: italic 900 clamp(16px, 3vw, 34px)/1 var(--sans);
  letter-spacing: -.06em;
  transform: scaleX(1.16);
  transform-origin: left center;
  text-shadow: 0 2px #080808;
}
.status-leds { top: 68.4%; right: auto; left: 66.2%; gap: 3px; }
.status-leds i { width: clamp(3px, .55vw, 6px); height: clamp(3px, .55vw, 6px); background: #151616; border: 1px solid #383a39; }
.shell-screw { position: absolute; left: 65.8%; top: 73%; width: 1.1%; aspect-ratio: 1; border-radius: 50%; background: #070808; box-shadow: inset 1px 1px #393a3a, 0 0 0 1px #020303; }
.shell-port { display: none; }
.screen-magnifier { display: none; }

.key-hints { min-height: 61px; padding: 14px 20px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px 17px; border-top: 1px solid #d2d1ca; background: rgba(255,255,255,.48); color: #66645f; font-size: 11px; }
.key-hints span { display: inline-flex; align-items: center; gap: 4px; }
kbd { min-width: 23px; padding: 4px 6px; text-align: center; color: #3e3d39; background: #fff; border: 1px solid #c9c7bf; border-bottom-width: 3px; border-radius: 5px; font: 700 10px/1 var(--mono); }

.learning-panel { min-width: 0; background: #fbfbf8; display: flex; flex-direction: column; }
.panel-tabs { min-height: 78px; padding: 0 18px; display: flex; align-items: stretch; gap: 3px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.panel-tabs button { position: relative; flex: 1; min-width: max-content; border: 0; background: transparent; color: #777773; padding: 4px 9px 0; font-size: 12px; font-weight: 800; cursor: pointer; }
.panel-tabs button::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: -1px; height: 3px; background: transparent; }
.panel-tabs button[aria-selected="true"] { color: var(--ink); }
.panel-tabs button[aria-selected="true"]::after { background: var(--orange); }
.panel-tabs button span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 3px; padding: 0 4px; border-radius: 9px; background: #e8e7e1; font-size: 9px; }
.panel-view { flex: 1; padding: 26px; min-height: 0; overflow-y: auto; }
.context-card, .mission-card { border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 22px; }
.context-topline { display: flex; align-items: center; justify-content: space-between; color: var(--orange-dark); font: 900 9px/1 var(--mono); letter-spacing: .14em; }
.context-topline span:last-child { color: #9b9b95; }
.context-card h2, .lab-heading h2, .files-heading h2, .log-heading h2 { margin: 14px 0 8px; font-size: 25px; letter-spacing: -.03em; line-height: 1.1; }
.context-card > p, .lab-heading > p { margin: 0; color: #656660; font-size: 14px; line-height: 1.6; }
.reality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 19px 0; }
.reality-grid div { min-height: 116px; border-radius: 12px; padding: 13px; background: #f2f2ed; }
.reality-grid div:last-child { background: #fff2e9; }
.reality-grid span { display: block; margin-bottom: 7px; color: #787872; font: 900 8px/1.3 var(--mono); letter-spacing: .08em; }
.reality-grid p { margin: 0; font-size: 11px; line-height: 1.5; }
.next-action { display: flex; align-items: center; gap: 11px; padding: 13px; border: 1px solid #ffd2b9; background: #fff9f4; border-radius: 12px; }
.next-action i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: #fff; font-style: normal; }
.next-action p { margin: 0; }
.next-action span { display: block; color: var(--orange-dark); font: 900 8px/1 var(--mono); letter-spacing: .1em; }
.next-action strong { display: block; margin-top: 4px; font-size: 11px; line-height: 1.35; }
.mission-card { margin-top: 15px; }
.mission-note { margin: 11px 0 0; padding: 9px 10px; border-radius: 9px; color: #6a4b38; background: #fff2e9; font-size: 9px; line-height: 1.45; }
.card-heading, .files-heading, .log-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-heading .section-kicker, .files-heading .section-kicker, .log-heading .section-kicker { margin: 0 0 3px; color: #85857f; font-size: 8px; }
.card-heading h3 { margin: 0; font-size: 16px; }
.card-heading > strong { color: var(--orange-dark); font: 900 17px/1 var(--mono); }
.progress-track { height: 7px; margin: 15px 0; overflow: hidden; border-radius: 6px; background: #ecece7; }
.progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--orange),#ff9c33); transition: width .35s ease; }
.mission-list { margin: 0; padding: 0; list-style: none; }
.mission-list li { position: relative; display: flex; gap: 11px; padding: 9px 0; border-top: 1px solid #eeeeea; }
.mission-list li:first-child { border-top: 0; }
.mission-check { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid #c9c9c3; border-radius: 50%; color: transparent; font-size: 11px; }
.mission-list li.done .mission-check { border-color: var(--orange); background: var(--orange); color: #fff; }
.mission-list strong { display: block; font-size: 11px; }
.mission-list small { display: block; color: #83837d; font-size: 9px; margin-top: 2px; }

.lab-heading { margin-bottom: 18px; }
.lab-heading .section-kicker { margin: 0; }
.peripheral-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.peripheral-card { position: relative; min-height: 82px; padding: 12px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; overflow: hidden; }
.peripheral-card:hover { border-color: #b9b8b2; transform: translateY(-1px); }
.peripheral-card.active { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); background: #fff9f4; }
.peripheral-card .p-icon { display: inline-grid; place-items: center; width: 27px; height: 27px; margin-bottom: 9px; border-radius: 8px; background: #f0f0eb; font-size: 14px; }
.peripheral-card strong { display: block; font-size: 11px; }
.peripheral-card small { display: block; margin-top: 2px; color: #85857f; font-size: 8px; }
.peripheral-card i { position: absolute; top: 12px; right: 12px; width: 7px; height: 7px; border-radius: 50%; background: #d2d2cc; }
.peripheral-card.active i { background: #45c66a; box-shadow: 0 0 0 4px rgba(69,198,106,.13); }
.target-console { margin-top: 16px; padding: 15px; border-radius: 15px; background: #262724; box-shadow: inset 0 0 0 1px #111; }
.target-screen { min-height: 84px; display: flex; flex-direction: column; justify-content: center; padding: 12px; border-radius: 6px; color: #b9df62; background: #151d12; box-shadow: inset 0 0 14px #000; font-family: var(--mono); }
.target-screen span { color: #718b4b; font-size: 8px; letter-spacing: .14em; }
.target-screen strong { margin: 3px 0; font-size: 13px; }
.target-screen small { color: #8baa5d; font-size: 8px; }
.target-leds { display: flex; justify-content: end; gap: 6px; margin-top: 8px; }
.target-leds i { width: 5px; height: 5px; border-radius: 50%; background: #576351; }
.target-leds i:first-child { background: #7fb847; box-shadow: 0 0 5px #7fb847; }
.lab-note { margin-top: 16px; padding: 14px; border-left: 3px solid var(--orange); background: #f1f1ed; }
.lab-note strong { font-size: 11px; }
.lab-note p { margin: 3px 0 0; color: #666761; font-size: 10px; line-height: 1.5; }

.files-heading h2, .log-heading h2 { margin: 4px 0 0; }
.mini-button { color: var(--ink); background: #fff; border-color: var(--line); }
.storage-meter { height: 9px; margin-top: 20px; padding: 2px; border: 1px solid #ccc; border-radius: 8px; }
.storage-meter i { display: block; min-width: 3%; height: 100%; border-radius: 5px; background: var(--orange); }
.storage-copy { margin: 6px 0 18px; color: #85857f; font: 600 9px/1 var(--mono); }
.file-list { display: grid; gap: 8px; }
.file-item { display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.file-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 9px; background: #f0f0eb; font-size: 17px; }
.file-item strong { display: block; overflow: hidden; text-overflow: ellipsis; font: 700 10px/1.3 var(--mono); }
.file-item small { display: block; margin-top: 3px; color: #898983; font-size: 8px; }
.file-delete { border: 0; background: transparent; color: #aaa; cursor: pointer; font-size: 15px; }
.empty-state { padding: 42px 18px; text-align: center; border: 1px dashed #ccc; border-radius: 13px; color: #888; }
.empty-state strong { display: block; color: #555; font-size: 12px; }
.empty-state p { margin: 5px 0 0; font-size: 10px; }
.event-log { margin-top: 20px; border: 1px solid #d8d8d1; border-radius: 12px; overflow: hidden; background: #20211f; color: #d5d9ca; font: 9px/1.5 var(--mono); }
.log-row { display: grid; grid-template-columns: 58px 60px 1fr; gap: 8px; padding: 8px 10px; border-top: 1px solid #343531; }
.log-row:first-child { border-top: 0; }
.log-row time { color: #797d72; }
.log-row b { color: #ff9b63; font-weight: 700; }
.log-row span { overflow-wrap: anywhere; }

.feature-strip { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 24px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.72); }
.feature-strip article { min-height: 130px; display: flex; gap: 17px; padding: 26px; border-left: 1px solid var(--line); }
.feature-strip article:first-child { border-left: 0; }
.feature-strip article > span { color: var(--orange); font: 900 13px/1 var(--mono); }
.feature-strip strong { display: block; font-size: 13px; }
.feature-strip p { margin: 6px 0 0; color: #777771; font-size: 11px; line-height: 1.5; }
.presentation-cta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 36px; margin-top: 24px; padding: clamp(28px,4vw,52px); border-radius: 20px; background: var(--ink); color: #fff; overflow: hidden; position: relative; }
.presentation-cta::after { position: absolute; content: "F0"; right: 22%; top: 50%; color: rgba(255,255,255,.035); font: 900 180px/1 var(--mono); transform: translateY(-50%); pointer-events: none; }
.presentation-cta h2 { margin: 9px 0 12px; font-size: clamp(28px,4vw,50px); letter-spacing: -.045em; }
.presentation-cta p { max-width: 760px; margin: 0; color: #b7b7b0; font-size: 13px; line-height: 1.6; }
.presentation-cta > a { position: relative; z-index: 1; display: inline-flex; min-height: 54px; align-items: center; gap: 20px; padding: 0 22px; border: 1px solid var(--orange); border-radius: 10px; background: var(--orange); color: #fff; font: 800 11px/1 var(--mono); text-decoration: none; box-shadow: 5px 5px 0 #79300d; }
footer { padding: 30px clamp(20px,5vw,72px) 46px; display: flex; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line); color: #787872; font-size: 10px; }
footer p { margin: 0; max-width: 610px; }
footer .author-link { color: var(--ink); font-weight: 800; text-decoration-color: var(--orange); text-underline-offset: 3px; }
footer .author-link:hover { color: var(--orange-dark); }

.toast-region { position: fixed; z-index: 100; right: 20px; bottom: 20px; display: grid; gap: 9px; width: min(340px, calc(100vw - 40px)); }
.toast { padding: 13px 15px; color: #fff; background: #20211f; border-left: 4px solid var(--orange); border-radius: 9px; box-shadow: 0 12px 35px #0004; font-size: 11px; animation: toast-in .24s ease; }
.toast strong { display: block; margin-bottom: 2px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 8px; height: 14px; animation: fall 1.8s linear forwards; }
@keyframes fall { to { transform: translate3d(var(--drift), 105vh, 0) rotate(720deg); } }

/* LCD firmware UI */
.screen-status { height: 24px; padding: 3px 6px 2px; display: flex; align-items: center; justify-content: space-between; border-bottom: 2px solid var(--lcd-ink); font: 800 10px/1 var(--mono); }
.status-icons { display: flex; align-items: center; gap: 5px; }
.status-icons i { font-style: normal; }
.battery-icon { width: 20px; height: 10px; padding: 1px; border: 2px solid currentColor; position: relative; }
.battery-icon::after { content: ""; position: absolute; right: -4px; top: 2px; width: 2px; height: 4px; background: currentColor; }
.battery-icon b { display: block; height: 100%; background: currentColor; }
.desktop-screen { height: calc(100% - 24px); }
.desktop-main { position: relative; height: 172px; overflow: hidden; }
.dolphin-wrap { position: absolute; left: 15px; top: 15px; width: 210px; height: 96px; }
.pixel-dolphin { margin: 0; white-space: pre; font: 900 11px/9px var(--mono); letter-spacing: -1.5px; transform: scaleX(1.08); transform-origin: left top; }
.dolphin-bubble { position: absolute; left: 170px; top: 3px; width: 93px; padding: 5px; border: 2px solid var(--lcd-ink); border-radius: 7px; background: var(--lcd); font: 800 8px/1.15 var(--mono); }
.dolphin-bubble::before { content: ""; position: absolute; left: -7px; bottom: 7px; width: 8px; height: 8px; background: var(--lcd); border-left: 2px solid var(--lcd-ink); border-bottom: 2px solid var(--lcd-ink); transform: rotate(45deg); }
.desktop-xp { position: absolute; left: 14px; right: 14px; bottom: 8px; display: flex; align-items: center; gap: 7px; font: 800 8px/1 var(--mono); }
.xp-bar { flex: 1; height: 8px; border: 2px solid var(--lcd-ink); padding: 1px; }
.xp-bar i { display: block; height: 100%; background: var(--lcd-ink); }
.desktop-shortcuts { position: absolute; right: 8px; bottom: 27px; display: flex; gap: 5px; font: 900 8px/1 var(--mono); }
.desktop-shortcuts span { padding: 3px 4px; border: 1px solid var(--lcd-ink); }

.menu-screen { height: calc(100% - 24px); }
.menu-heading { height: 24px; display: flex; align-items: center; padding: 0 8px; border-bottom: 2px solid var(--lcd-ink); font: 900 12px/1 var(--mono); }
.menu-list { position: relative; height: 147px; padding: 3px 0; overflow: hidden; }
.menu-row { height: 29px; display: grid; grid-template-columns: 28px 1fr 16px; align-items: center; padding: 0 6px; font: 800 11px/1 var(--mono); }
.menu-row.selected { color: var(--lcd); background: var(--lcd-ink); }
.menu-icon { font: 900 13px/1 var(--mono); text-align: center; }
.menu-arrow { font-size: 12px; text-align: right; }
.scroll-track { position: absolute; right: 2px; top: 4px; bottom: 4px; width: 3px; background: rgba(42,24,0,.22); }
.scroll-thumb { position: absolute; right: 0; width: 3px; min-height: 12px; background: var(--lcd-ink); }

.app-screen { height: calc(100% - 24px); }
.app-titlebar { height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 7px; border-bottom: 2px solid var(--lcd-ink); font: 900 11px/1 var(--mono); }
.app-titlebar span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-body { position: relative; height: 148px; padding: 7px 9px 23px; overflow: hidden; }
.softkeys { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px; border-top: 1px solid var(--lcd-ink); font: 900 8px/1 var(--mono); background: var(--lcd); }
.softkeys .invert { padding: 3px 6px; color: var(--lcd); background: var(--lcd-ink); }
.center-message { height: 90px; display: grid; place-content: center; text-align: center; }
.center-message .big-glyph { font: 900 32px/1 var(--mono); }
.center-message strong { display: block; font: 900 13px/1.2 var(--mono); }
.center-message small { display: block; margin-top: 5px; font: 700 8px/1.3 var(--mono); }
.scan-rings { position: relative; width: 48px; height: 48px; margin: 0 auto 5px; border: 2px solid var(--lcd-ink); border-radius: 50%; }
.scan-rings::before, .scan-rings::after { content: ""; position: absolute; border: 2px solid var(--lcd-ink); border-radius: 50%; animation: pulse-ring 1.3s infinite; }
.scan-rings::before { inset: 7px; }
.scan-rings::after { inset: 15px; animation-delay: .3s; }
@keyframes pulse-ring { 50% { opacity: .25; } }
.data-grid { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; font: 800 8px/1.25 var(--mono); }
.data-grid span:nth-child(odd) { opacity: .65; }
.signal-meter { display: grid; grid-template-columns: 44px 1fr 32px; align-items: center; gap: 6px; font: 900 8px/1 var(--mono); }
.meter-track { height: 12px; padding: 2px; border: 2px solid var(--lcd-ink); }
.meter-track i { display: block; height: 100%; background: var(--lcd-ink); transition: width .2s; }
.waveform { height: 48px; margin: 6px 0; display: flex; align-items: center; overflow: hidden; border-block: 1px dotted var(--lcd-ink); }
.waveform svg { width: 100%; height: 44px; }
.progress-box { height: 13px; padding: 2px; border: 2px solid var(--lcd-ink); }
.progress-box i { display: block; height: 100%; background: var(--lcd-ink); transition: width .25s; }
.tag-visual { display: grid; grid-template-columns: 56px 1fr; gap: 9px; align-items: center; }
.tag-coil { width: 50px; height: 63px; display: grid; place-items: center; border: 3px double var(--lcd-ink); border-radius: 7px; font: 900 8px/1 var(--mono); }
.app-list { display: grid; gap: 2px; font: 800 9px/1.2 var(--mono); }
.app-list div { padding: 3px 4px; }
.app-list div.selected { color: var(--lcd); background: var(--lcd-ink); }
.remote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.remote-grid div { height: 25px; display: grid; place-items: center; border: 2px solid var(--lcd-ink); font: 900 8px/1 var(--mono); }
.remote-grid div.selected { color: var(--lcd); background: var(--lcd-ink); }
.pin-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.pin-grid div { height: 31px; display: grid; place-items: center; border: 2px solid var(--lcd-ink); font: 900 8px/1.1 var(--mono); text-align: center; }
.pin-grid div.high, .pin-grid div.selected { color: var(--lcd); background: var(--lcd-ink); }
.terminal-view { height: 85px; overflow: hidden; padding: 5px; color: var(--lcd); background: var(--lcd-ink); font: 700 8px/1.35 var(--mono); white-space: pre-wrap; }
.badusb-code { height: 83px; overflow: hidden; padding: 5px; border: 1px solid var(--lcd-ink); font: 700 7px/1.25 var(--mono); white-space: pre-wrap; }
.crypto-hash { padding: 6px; border: 2px solid var(--lcd-ink); font: 800 7px/1.3 var(--mono); overflow-wrap: anywhere; }
.toggle-row { height: 25px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px; font: 900 9px/1 var(--mono); }
.toggle-row.selected { color: var(--lcd); background: var(--lcd-ink); }
.toggle-switch { width: 31px; padding: 3px; border: 2px solid currentColor; text-align: center; }
.passport { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }
.passport-dolphin { white-space: pre; font: 900 8px/8px var(--mono); }
.passport-data { font: 800 8px/1.4 var(--mono); }
.boot-screen, .shutdown-screen, .locked-screen { height: 100%; display: grid; place-content: center; text-align: center; }
.boot-logo { font: 950 24px/1 var(--mono); letter-spacing: -.12em; }
.boot-logo b { color: var(--lcd); background: var(--lcd-ink); padding: 2px 5px; }
.boot-progress { width: 180px; height: 11px; margin: 13px auto 5px; padding: 2px; border: 2px solid var(--lcd-ink); }
.boot-progress i { display: block; height: 100%; background: var(--lcd-ink); }
.boot-screen small, .shutdown-screen small, .locked-screen small { font: 800 8px/1.4 var(--mono); }
.lock-code { margin: 10px 0; font: 900 18px/1 var(--mono); letter-spacing: .3em; }
.snake-board { width: 180px; height: 86px; margin: 0 auto; display: grid; grid-template-columns: repeat(18, 1fr); grid-template-rows: repeat(9, 1fr); border: 2px solid var(--lcd-ink); }
.snake-board i { display: block; }
.snake-board i.snake, .snake-board i.food { background: var(--lcd-ink); }
.snake-board i.food { margin: 2px; border-radius: 50%; }
.stopwatch-time { margin-top: 12px; text-align: center; font: 900 30px/1 var(--mono); }
.counter-value { text-align: center; font: 900 56px/1 var(--mono); }
.calculator { font: 900 10px/1.3 var(--mono); }
.calculator-display { height: 29px; margin-bottom: 5px; padding: 5px; text-align: right; border: 2px solid var(--lcd-ink); font-size: 15px; }
.calc-keys { display: grid; grid-template-columns: repeat(6,1fr); gap: 2px; }
.calc-keys span { padding: 3px; text-align: center; border: 1px solid var(--lcd-ink); }
.calc-keys span.selected { color: var(--lcd); background: var(--lcd-ink); }
.music-bars { height: 54px; display: flex; align-items: end; justify-content: center; gap: 4px; }
.music-bars i { width: 8px; background: var(--lcd-ink); animation: music .6s ease-in-out infinite alternate; }
.music-bars i:nth-child(2n) { animation-delay: -.3s; }
@keyframes music { from { height: 10px; } to { height: 48px; } }
.about-logo { margin: 2px 0 8px; text-align: center; font: 950 18px/1 var(--mono); }
.about-copy { font: 800 8px/1.4 var(--mono); }
.lcd-profile-link { color: inherit; font-weight: 900; text-decoration: underline; text-underline-offset: 1px; }
.lcd-profile-link:focus-visible { outline: 1px solid currentColor; }
.file-browser-row { height: 23px; display: grid; grid-template-columns: 20px 1fr; align-items: center; padding: 0 4px; font: 800 8px/1 var(--mono); }
.file-browser-row.selected { color: var(--lcd); background: var(--lcd-ink); }

@media (max-width: 1180px) {
  .workspace { grid-template-columns: 1fr; }
  .simulator-column { border-right: 0; border-bottom: 1px solid var(--line); }
  .learning-panel { min-height: 680px; }
  .panel-view { max-height: none; }
  .context-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .context-topline, .context-card h2, .context-card > p, .next-action { grid-column: 1; }
  .reality-grid { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
}
@media (max-width: 760px) {
  .site-header { height: 66px; padding: 0 14px; }
  .status-pill, .header-button.ghost { display: none; }
  .language-switcher button { min-width: 27px; height: 29px; padding: 0 3px; }
  .hero { grid-template-columns: 1fr; gap: 26px; padding: 48px 2px 38px; }
  .hero h1 { font-size: clamp(44px, 14vw, 72px); }
  .hero-copy > p { font-size: 16px; }
  main { padding-inline: 10px; }
  .workspace { border-radius: 20px; }
  .simulator-toolbar { flex-direction: column; align-items: stretch; padding: 14px; }
  .simulator-toolbar > div:first-child { display: block; text-align: center; }
  .firmware-path { max-width: none; }
  .toolbar-actions { width: 100%; justify-content: center; }
  .device-stage { min-height: 380px; padding: 26px 8px; }
  .flipper-device { position: relative; left: auto; top: auto; width: min(820px, 98%); height: auto; transform: none; }
  .device-shadow { width: 78%; bottom: 34px; }
  .screen-magnifier { display: block; padding: 14px; border-top: 1px solid #d2d1ca; background: #252624; }
  .magnifier-label { display: flex; justify-content: space-between; gap: 12px; margin: 0 auto 9px; width: min(500px, 100%); color: #eeeee8; font: 800 9px/1 var(--mono); text-transform: uppercase; letter-spacing: .09em; }
  .magnifier-label small { color: #92938c; font-size: 7px; font-weight: 600; text-align: right; letter-spacing: 0; text-transform: none; }
  .mirror-lcd { position: relative; width: min(500px, 100%); aspect-ratio: 2 / 1; height: auto; margin: 0 auto; border: 9px solid #111210; box-shadow: 0 0 0 2px #55564f, 0 8px 18px #0008; }
  .key-hints { padding: 12px 10px; gap: 8px; }
  .learning-panel { min-height: 730px; }
  .panel-tabs { min-height: 62px; padding: 0 7px; }
  .panel-view { padding: 16px; }
  .context-card { display: block; padding: 18px; }
  .reality-grid { margin: 16px 0; }
  .feature-strip { grid-template-columns: 1fr; }
  .feature-strip article { border-left: 0; border-top: 1px solid var(--line); min-height: auto; }
  .feature-strip article:first-child { border-top: 0; }
  .presentation-cta { grid-template-columns: 1fr; }
  .presentation-cta > a { width: 100%; justify-content: space-between; }
  footer { flex-direction: column; padding: 26px 18px; }
}
@media (max-width: 480px) {
  .brand small { display: none; }
  .header-button.presentation { display: none; }
  .hero h1 { font-size: 46px; }
  .hero-badges span { font-size: 9px; }
  .device-stage { min-height: 230px; }
  .flipper-device { width: 100%; transform: none; }
  .device-shadow { width: 76%; bottom: 25px; }
  .tool-button { font-size: 10px; padding: 8px; }
  .key-hints span:nth-child(-n+2) { display: none; }
  .reality-grid { grid-template-columns: 1fr; }
  .reality-grid div { min-height: auto; }
  .peripheral-grid { grid-template-columns: repeat(2,1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}