:root {
  --device-bg: #0d1117;
  --device-panel: #161b22;
  --device-line: #30363d;
  --device-text: #e6edf3;
  --device-muted: #8b949e;
  --device-accent: #58a6ff;
}
.device-shell-root {
  width: 100%;
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 28px;
  box-sizing: border-box;
}
.device-body {
  position: relative;
  width: var(--body-w);
  height: var(--body-h);
  border-radius: var(--body-radius);
  background:
    radial-gradient(circle at 35% 18%, rgba(255,255,255,.16), transparent 24%),
    linear-gradient(145deg, #3a4048, #11151a 58%, #242a31);
  box-shadow:
    0 30px 70px rgba(0,0,0,.55),
    inset 0 1px 1px rgba(255,255,255,.2),
    inset 0 -8px 18px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s ease;
}
.device-body::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: calc(var(--body-radius) - 8px);
  border: 1px solid rgba(255,255,255,.045);
  pointer-events: none;
}
.device-screen-frame {
  position: relative;
  width: var(--screen-w);
  height: var(--screen-h);
  border-radius: var(--screen-radius);
  background: #000;
  box-shadow:
    0 0 0 var(--bezel) #080a0c,
    0 0 0 calc(var(--bezel) + 2px) #242a31,
    inset 0 0 32px rgba(0,0,0,.9);
  overflow: hidden;
  z-index: 2;
}
.device-screen {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: auto;
  border-radius: inherit;
  background: #000;
  cursor: var(--screen-cursor, default);
}
.device-screen-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  color: #c9d1d9;
  background: linear-gradient(160deg, rgba(13,17,23,.92), rgba(1,4,9,.98));
  font: 600 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .01em;
  pointer-events: none;
}
.device-screen-overlay[hidden] { display: none; }
.device-screen-overlay b {
  display: block;
  font-size: 18px;
  margin-bottom: 5px;
  color: #fff;
}
.device-screen-overlay small {
  display: block;
  margin-top: 8px;
  color: #8b949e;
  font-weight: 500;
}
.device-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 85% at 28% 4%, rgba(255,255,255,.12), transparent 42%);
  pointer-events: none;
  z-index: 3;
}
.device-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.device-control {
  pointer-events: auto;
  position: absolute;
  border: 0;
  min-width: 30px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  color: #10151a;
  background: linear-gradient(180deg, color-mix(in srgb, var(--device-accent) 80%, white), color-mix(in srgb, var(--device-accent) 72%, black));
  font: 700 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 4px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.3);
  cursor: pointer;
  user-select: none;
}
.device-control:active,
.device-control.on {
  transform: translateY(2px) scale(.98);
  filter: brightness(.78);
}
.device-control.touch { display: none; }
.device-controls[data-preset="stick"] .device-control[data-slot="0"] { left: -18px; top: 24%; transform: rotate(-90deg); }
.device-controls[data-preset="stick"] .device-control[data-slot="1"] { left: -18px; top: calc(24% + 58px); transform: rotate(-90deg); }
.device-controls[data-preset="stick"] .device-control[data-slot="2"] { right: -18px; top: 66%; transform: rotate(90deg); }
.device-controls[data-preset="watch-round"] .device-control[data-slot="0"] { left: 54px; top: 62px; transform: rotate(-42deg); }
.device-controls[data-preset="watch-round"] .device-control[data-slot="1"] { right: 54px; top: 62px; transform: rotate(42deg); }
.device-controls[data-preset="watch-round"] .device-control[data-slot="2"] { left: 58px; bottom: 58px; transform: rotate(-128deg); }
.device-controls[data-preset="core"] .device-control[data-slot="0"] { left: 30px; bottom: 24px; }
.device-controls[data-preset="core"] .device-control[data-slot="1"] { left: 98px; bottom: 24px; }
.device-controls[data-preset="industrial"] .device-control[data-slot="0"] { left: 28px; bottom: 26px; }
.device-controls[data-preset="industrial"] .device-control[data-slot="1"] { left: 84px; bottom: 26px; }
.device-controls[data-preset="industrial"] .device-control[data-slot="2"] { left: 140px; bottom: 26px; }
.device-keyboard {
  position: absolute;
  left: 11%;
  right: 11%;
  bottom: 7%;
  height: 32%;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 3px;
  padding: 8px;
  border-radius: 8px;
  background: #090c0f;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.8);
  z-index: 4;
}
.device-keyboard span {
  border-radius: 2px;
  background: linear-gradient(180deg, #4b5159, #20252b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.device-led {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  right: 28px;
  top: 28px;
  background: var(--device-accent);
  box-shadow: 0 0 18px var(--device-accent), 0 0 4px #fff inset;
  z-index: 4;
}
.device-label {
  position: absolute;
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%);
  font: 700 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  white-space: nowrap;
  z-index: 4;
}
.device-body[data-preset="watch-round"] { clip-path: circle(50%); }
.device-body[data-preset="watch-round"]::before {
  content: "";
  position: absolute;
  inset: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.08);
}
.device-body[data-preset="robot"] { border-radius: 38% 38% 22% 22%; }
.device-body[data-preset="robot"]::before {
  content: "";
  position: absolute;
  width: 112%;
  height: 35px;
  top: 18%;
  left: -6%;
  border-radius: 999px;
  background: linear-gradient(180deg, #4b5159, #171b20);
  box-shadow: 0 8px 16px rgba(0,0,0,.45);
  z-index: 1;
}
.device-body[data-preset="paper"] { border-radius: 18px; }
.device-body[data-preset="tab"] { border-radius: 24px; }
.device-body[data-preset="cardputer"] { border-radius: 26px; }
.device-body[data-preset="industrial"] { border-radius: 14px; }
.device-body[data-preset="console-only"] { width: 220px; height: 360px; }
.device-body[data-preset="console-only"] .device-screen-frame { display: none; }
.device-body[data-preset="console-only"] .device-screen-overlay { display: none; }
.device-body[data-preset="console-only"]::before {
  content: "";
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 20px;
  background: #06080a;
  box-shadow: inset 0 0 20px rgba(0,0,0,.9);
}
.device-body[data-preset="console-only"] .device-led { left: 50%; top: 41%; right: auto; transform: translateX(-50%); }
.device-body[data-preset="console-only"] .device-control { left: 50% !important; bottom: 45px !important; transform: translateX(-50%) !important; }
@media (max-width: 900px) {
  .device-shell-root { transform: scale(.82); transform-origin: top center; min-height: 470px; }
}

/* Device-specific shells calibrated from official product images. */
.device-decorations { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.device-decorations > * { position: absolute; }
.deco-logo { font: 800 10px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .12em; color: rgba(30,34,39,.68); }
.deco-logo.bottom { left: 50%; bottom: 12px; transform: translateX(-50%); }
.deco-logo.top { left: 24px; top: 22px; color: rgba(255,255,255,.85); }
.deco-camera { width: 11px; height: 11px; border-radius: 50%; background: #05070a; border: 2px solid #353b42; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.deco-camera.right { right: 20px; top: 50%; }
.deco-speaker { background: repeating-linear-gradient(90deg, #777 0 2px, transparent 2px 5px); opacity: .42; }
.deco-speaker.small { width: 54px; height: 7px; right: 24px; top: 26px; }
.deco-speaker.wide { width: 86px; height: 24px; right: 62px; top: 44px; border-radius: 4px; background: radial-gradient(circle, #555 0 1.2px, transparent 1.4px); background-size: 5px 5px; }
.device-body[data-device="sticks3"] {
  background: radial-gradient(circle at 62% 18%, rgba(255,255,255,.2), transparent 24%), linear-gradient(145deg, #3b4148, #1a1d21 52%, #0b0d10);
  border-color: rgba(255,255,255,.14);
}
.device-body[data-device="sticks3"] .device-screen-frame { transform: translateY(-20px); box-shadow: 0 0 0 8px #050607, 0 0 0 10px #30343a, inset 0 0 28px #000; }
.deco-stick-blue { left: 20px; right: 20px; bottom: 54px; height: 26px; border-radius: 20px; background: linear-gradient(90deg, #0d76bd, #33b5e8 55%, #0b6aa8); box-shadow: inset 0 1px rgba(255,255,255,.35), 0 4px 10px rgba(0,0,0,.35); }
.device-body[data-device="sticks3"] .device-label { bottom: 19px; color: rgba(255,255,255,.75); }
.device-body[data-device="sticks3"] .device-control { top: auto; bottom: auto; left: auto; right: -17px; width: 28px; min-width: 28px; padding: 0; border-radius: 8px; transform: none; }
.device-body[data-device="sticks3"] .device-control[data-slot="0"] { top: 35%; }
.device-body[data-device="sticks3"] .device-control[data-slot="1"] { top: 45%; }
.device-body[data-device="sticks3"] .device-control[data-slot="2"] { left: 18px; bottom: 17px; right: auto; }

.device-body[data-device="cores3"] {
  background: linear-gradient(145deg, #4b4f55, #202329 45%, #0b0d11);
  border-radius: 30px;
}
.device-body[data-device="cores3"] .device-screen-frame { transform: translateY(-12px); box-shadow: 0 0 0 19px #1b1e22, 0 0 0 21px #4b5056, inset 0 0 32px #000; }
.device-body[data-device="cores3"] .deco-camera { left: 50%; top: 16px; transform: translateX(-50%); }
.deco-core-buttons { left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 24px; }
.deco-core-buttons i { width: 28px; height: 20px; border-radius: 50%; display: block; background: linear-gradient(#3e4248,#101215); box-shadow: 0 1px 2px rgba(255,255,255,.18); }
.deco-core-buttons i.red { background: linear-gradient(#ff6a5f,#9f1c14); }
.device-body[data-device="cores3"] .deco-logo { color: rgba(255,255,255,.45); }

.device-body[data-device="stopwatch"] { background: radial-gradient(circle at 35% 15%, #383b40, #17191d 58%, #090a0c); }
.device-body[data-device="stopwatch"] .device-screen-frame { box-shadow: 0 0 0 22px #050607, 0 0 0 25px #24272c, inset 0 0 39px #000; }
.deco-crown { width: 28px; height: 54px; right: -12px; top: 43%; border-radius: 8px; background: linear-gradient(90deg,#555,#181a1e); transform: rotate(8deg); }
.device-body[data-device="stopwatch"] .deco-logo { color: rgba(255,255,255,.34); letter-spacing: .24em; }

.device-body[data-device="cardputer-adv"],
.device-body[data-device="cardputer-zero"] {
  background: linear-gradient(145deg, #f4f4f2, #b9bec2 46%, #7e858b);
  border-color: rgba(25,30,35,.35);
}
.device-body[data-device="cardputer-adv"] .device-screen-frame,
.device-body[data-device="cardputer-zero"] .device-screen-frame {
  position: absolute; left: 62px; top: 48px; transform: none;
  box-shadow: 0 0 0 8px #202328, 0 0 0 10px #888f94, inset 0 0 20px #000;
}
.device-body[data-device="cardputer-zero"] .device-screen-frame { left: 50%; top: 38px; transform: translateX(-50%); }
.device-body[data-device="cardputer-adv"] .device-keyboard,
.device-body[data-device="cardputer-zero"] .device-keyboard { left: 7%; right: 7%; bottom: 7%; height: 39%; background: #30343a; gap: 4px; padding: 10px; }
.device-body[data-device="cardputer-adv"] .device-keyboard span,
.device-body[data-device="cardputer-zero"] .device-keyboard span { background: linear-gradient(180deg,#f1f1ee,#aeb4b8); box-shadow: 0 2px 0 #686e73; border-radius: 3px; }
.device-body[data-device="cardputer-adv"] .device-keyboard span:nth-child(7n+3),
.device-body[data-device="cardputer-zero"] .device-keyboard span:nth-child(9n+2) { background: linear-gradient(#ff9f68,#d65a21); }
.device-body[data-device="cardputer-adv"] .device-keyboard span:nth-child(11n+4) { background: linear-gradient(#79b9c8,#2e798b); }
.deco-trackball { width: 42px; height: 42px; right: 48px; top: 52px; border-radius: 50%; box-shadow: inset -5px -6px 10px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.35); }
.deco-trackball.orange { background: radial-gradient(circle at 35% 30%, #ffd19b, #ff7b1c 50%, #9b3900); }
.deco-trackball.silver { background: radial-gradient(circle at 35% 30%, #f2f2f2, #9ca4aa 55%, #4f555a); }
.device-body[data-device="cardputer-adv"] .deco-speaker { top: 62px; right: 132px; }
.device-body[data-device="cardputer-adv"] .deco-logo,
.device-body[data-device="cardputer-zero"] .deco-logo { color: #4b5055; }

.device-body[data-device="papermono"],
.device-body[data-device="papercolor"] {
  background: linear-gradient(145deg, #ffffff, #ececea 55%, #d4d2ce);
  border-color: rgba(100,100,100,.32);
}
.device-body[data-device="papermono"] .device-screen-frame,
.device-body[data-device="papercolor"] .device-screen-frame {
  position: absolute; left: 50%; top: 34px; transform: translateX(-50%); border-radius: 6px;
  box-shadow: 0 0 0 10px #d7d7d4, 0 0 0 12px #f8f8f6, 0 5px 12px rgba(0,0,0,.12);
}
.device-body[data-device="papermono"] .device-screen { background: #d8d8d2; }
.device-body[data-device="papercolor"] .device-screen { background: #f4f1e9; }
.deco-paper-buttons { right: -13px; top: 23%; display: flex; flex-direction: column; gap: 20px; }
.deco-paper-buttons i { width: 13px; height: 54px; border-radius: 8px; background: linear-gradient(90deg,#d9d9d6,#8f9395); box-shadow: inset 1px 0 rgba(255,255,255,.8); }
.deco-paper-buttons i.orange { background: linear-gradient(90deg,#ffb36d,#d56819); }
.deco-paper-logo { left: 50%; bottom: 16px; transform: translateX(-50%); color: #55595d; font: 800 14px/1 Arial; letter-spacing: .12em; }
.deco-paper-logo.color { background: linear-gradient(90deg,#ee4d9b,#f2a53b,#31a56b,#2e85d4); -webkit-background-clip: text; color: transparent; }

.device-body[data-device="core2"] {
  background: linear-gradient(145deg,#ffffff,#e5e5e1 52%,#c3c5c3);
  border-color: rgba(100,100,100,.3);
}
.device-body[data-device="core2"] .device-screen-frame { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); border-radius: 13px; box-shadow: 0 0 0 10px #08090b, 0 0 0 12px #8c8f8e, inset 0 0 20px #000; }
.deco-core2-buttons { left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 38px; }
.deco-core2-buttons i { width: 42px; height: 24px; border-radius: 50%; background: linear-gradient(#f6f6f3,#9da09f); box-shadow: inset 0 1px 1px #fff, 0 1px 3px rgba(0,0,0,.3); }
.deco-core2-buttons i.blue { background: linear-gradient(#8dc8ff,#2876d7); }
.deco-core2-buttons i.red { background: linear-gradient(#ff9a8a,#c4412c); }
.device-body[data-device="core2"] .deco-logo { color: #3c4144; }

.device-body[data-device="nanoc6"] {
  background: linear-gradient(145deg,#43d4e8,#0f91b8 55%,#08637f);
  border-radius: 34px;
  border-color: rgba(255,255,255,.35);
}
.device-body[data-device="nanoc6"] .device-led { display: none; }
.deco-usb-a { left: 50%; top: -16px; transform: translateX(-50%); width: 72px; height: 45px; border-radius: 5px 5px 0 0; background: linear-gradient(90deg,#b8bcbf,#f5f6f7,#b1b4b7); border: 4px solid #8d9194; box-shadow: 0 4px 8px rgba(0,0,0,.25); }
.deco-rgb-orb { left: 50%; top: 34%; transform: translateX(-50%); width: 72px; height: 72px; border-radius: 18px; background: radial-gradient(circle at 35% 30%,#fff,#b8f8ff 18%,#1d70ff 55%,#7d2cff); box-shadow: 0 0 28px rgba(56,218,255,.75), inset 0 0 10px rgba(255,255,255,.45); }
.device-body[data-device="nanoc6"] .device-label { color: rgba(255,255,255,.92); bottom: 52px; }
.device-body[data-device="nanoc6"] .device-control { left: 50% !important; bottom: 22px !important; transform: translateX(-50%) !important; background: linear-gradient(#dffcff,#60cde6); color: #073a4a; }

.device-body[data-device="stackchan"] {
  background: linear-gradient(145deg,#ffffff,#d8dadd 52%,#aeb3b8);
  border-radius: 42px;
}
.device-body[data-device="stackchan"] .device-screen-frame { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); border-radius: 10px; box-shadow: 0 0 0 14px #050607, 0 0 0 17px #353a3f, inset 0 0 25px #000; }
.device-body[data-device="stackchan"]::before { display: none; }
.deco-servo-base { left: 50%; bottom: -100px; transform: translateX(-50%); width: 230px; height: 115px; border-radius: 38px 38px 20px 20px; background: linear-gradient(180deg,#8d9398,#4c5359); box-shadow: 0 18px 30px rgba(0,0,0,.45), inset 0 2px 2px rgba(255,255,255,.28); }
.deco-arm { width: 50px; height: 145px; top: 120px; border-radius: 20px; background: linear-gradient(90deg,#a3a8ad,#5c6368); }
.deco-arm.left { left: -42px; }
.deco-arm.right { right: -42px; }
.device-body[data-device="stackchan"] .deco-camera { left: 50%; top: 18px; transform: translateX(-50%); }
.device-body[data-device="stackchan"] .deco-logo { color: #5b6166; bottom: 26px; }
.device-body[data-device="stackchan"] .device-shell-root { min-height: 680px; }

.device-body[data-device="tab5"] {
  background: linear-gradient(145deg,#d9dadd 0 1%,#111315 2% 98%,#b8bdc1 99%);
  border: 5px solid #c7c9cc;
  border-radius: 20px;
}
.device-body[data-device="tab5"] .device-screen-frame { border-radius: 6px; box-shadow: 0 0 0 18px #08090a, 0 0 0 20px #2d3033; }
.device-body[data-device="tab5"] .deco-logo { color: rgba(255,255,255,.42); bottom: 8px; }
.deco-tablet-edge { inset: 3px; border-radius: 15px; border: 1px solid rgba(255,255,255,.35); }

.device-body[data-device="atoms3r"] {
  background: linear-gradient(145deg,#ffffff,#e9eaeb 45%,#b9bdc0);
  border-radius: 36px;
}
.device-body[data-device="atoms3r"] .device-screen-frame { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); border-radius: 8px; box-shadow: 0 0 0 12px #e9eaeb, 0 0 0 14px #91969a, 0 5px 14px rgba(0,0,0,.18); }
.deco-atom-button { left: 50%; bottom: 35px; transform: translateX(-50%); width: 64px; height: 15px; border-radius: 999px; background: linear-gradient(#f7f7f7,#aeb2b4); box-shadow: inset 0 1px #fff, 0 2px 4px rgba(0,0,0,.2); }
.deco-usb-c { right: -8px; top: 47%; width: 18px; height: 28px; border-radius: 7px; background: #6c7378; }
.deco-atom-pins { left: 20px; right: 20px; bottom: 10px; height: 9px; background: repeating-linear-gradient(90deg,#c79f31 0 5px,#333 5px 9px); border-radius: 2px; opacity: .75; }
.device-body[data-device="atoms3r"] .deco-logo { color: #5c6165; }

.device-body[data-device="nesso-n1"] {
  background: linear-gradient(145deg,#25282b,#0d0f11 54%,#050607);
  border: 5px solid #3d4145;
  border-radius: 34px;
}
.device-body[data-device="nesso-n1"] .device-screen-frame { position: absolute; left: 50%; top: 38px; transform: translateX(-50%); border-radius: 9px; box-shadow: 0 0 0 10px #050607, 0 0 0 12px #303438, inset 0 0 18px #000; }
.deco-rugged-stripe { left: 22px; right: 22px; bottom: 62px; height: 28px; border-radius: 4px; background: linear-gradient(90deg,#31ff6c,#8dff44); box-shadow: 0 0 16px rgba(70,255,110,.25); }
.deco-antenna { left: 50%; top: -78px; transform: translateX(-50%); width: 22px; height: 80px; border-radius: 8px 8px 2px 2px; background: linear-gradient(90deg,#101214,#33373b); }
.deco-nesso-buttons { right: 24px; top: 40%; display: flex; flex-direction: column; gap: 22px; }
.deco-nesso-buttons i { width: 18px; height: 44px; border-radius: 7px; background: linear-gradient(90deg,#4e5356,#181b1d); }
.device-body[data-device="nesso-n1"] .deco-logo { color: rgba(255,255,255,.56); }

.device-body[data-device="stamplc"] {
  background: linear-gradient(145deg,#3b3e40,#17191b 48%,#08090a);
  border: 3px solid #4c5052;
  border-radius: 12px;
}
.device-body[data-device="stamplc"] .device-screen-frame { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); border-radius: 4px; box-shadow: 0 0 0 7px #050607, 0 0 0 9px #6c7072; }
.deco-plc-label { left: 50%; top: 16px; transform: translateX(-50%); background: #ecf0e8; color: #15211d; border-radius: 4px; padding: 3px 16px; font: 800 10px/1 Arial; letter-spacing: .14em; }
.deco-terminal { bottom: 16px; width: 150px; height: 58px; background: repeating-linear-gradient(90deg,#4d7d4b 0 12px,#7ca277 12px 14px); border: 4px solid #78a871; border-radius: 5px; box-shadow: inset 0 4px 7px rgba(0,0,0,.4); }
.deco-terminal.left { left: 22px; }
.deco-terminal.right { right: 22px; }
.deco-led-strip { right: 8px; top: 24px; width: 7px; height: 150px; border-radius: 5px; background: repeating-linear-gradient(#7ff7a6 0 6px,#143b21 6px 12px); box-shadow: 0 0 10px rgba(100,255,150,.35); }


.device-photo-root {
  width: 100%;
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 20px;
  box-sizing: border-box;
}
.device-photo {
  display: block;
  max-width: min(86%, 760px);
  max-height: 620px;
  object-fit: contain;
  filter: drop-shadow(0 30px 34px rgba(0,0,0,.38));
}
.view-toggle { display: flex; gap: 6px; padding: 3px; border: 1px solid #30363d; border-radius: 10px; background: #0d1117; }
.view-toggle button { border: 0; background: transparent; color: #8b949e; border-radius: 7px; padding: 6px 9px; font-size: 11px; }
.view-toggle button.active { color: #fff; background: #26303c; }
@media (max-width: 900px) { .device-photo { max-width: 96%; max-height: 480px; } }