/* freedesign.studio shell: Elements desk, beam scrollbars, menus, palette, sheets, toasts.
   Board and Paint ship their own stylesheets (board.css, paint.css). */

/* ---------- Elements desk ---------- */
#view-elements:not([hidden]) {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 300px;
}
.elem-nav, .elem-meta {
  min-height: 0;
  overflow: auto;
  padding: 14px 12px 22px;
}
.elem-nav { border-right: 1px solid var(--line); padding-left: max(12px, env(safe-area-inset-left)); }
.elem-meta {
  border-left: 1px solid var(--line);
  padding-right: max(12px, env(safe-area-inset-right));
  background: linear-gradient(180deg, var(--panel-wash), transparent 140px);
}
.elem-stage {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 22px;
}
.elem-filter {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 12px;
}
.elem-filter .btn-ico { position: absolute; left: 12px; color: var(--muted); pointer-events: none; }
.elem-filter input { padding-left: 36px; min-height: var(--hit); border-radius: 999px; }
.elem-nav .section-label { margin: 14px 10px 6px; }
#elem-list > .section-label:first-child { margin-top: 2px; }
.elem-link {
  display: grid;
  width: 100%;
  margin: 0 0 4px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-align: left;
}
.elem-link strong { font-size: 14px; font-weight: 600; }
.elem-link small { color: var(--muted); font-size: 12px; }
.elem-link:hover { background: var(--hover); }
.elem-link.is-on { background: var(--raised); box-shadow: var(--shadow-2); }
.elem-empty { padding: 10px; color: var(--muted); font-size: 13px; }
.elem-meta h2 { margin-top: 2px; font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.elem-meta > p:not(.section-label):not(.prompt-read):not(.quiet) { margin: 4px 0 14px; color: var(--muted); }
.elem-canvas { width: min(920px, 100%); margin: 0 auto; }
.tune { display: grid; gap: 6px; margin: 0 0 12px; font-size: 12px; }
.tune input, .tune select, .tune textarea { width: 100%; font-size: 13px; }
@media (pointer: coarse) {
  .tune input, .tune select, .tune textarea,
  input[type="text"], input[type="search"], textarea, select { font-size: 16px; }
}
.tune textarea { min-height: 84px; }
.prompt-read {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.45;
}
.quiet { margin-top: 12px; color: var(--muted); font-size: 12px; }

/* ---------- Elements specimens (content colors; the stage atmosphere sets the skin) ---------- */
.hero { display: grid; min-height: 420px; border-radius: 28px; overflow: hidden; background: #12141c; color: #f6f3ed; }
/* Dark specimens keep their own color in Graphite; a hairline keeps their edge readable on the dark ground. */
html[data-theme="graphite"] .elem-canvas .hero,
html[data-theme="graphite"] .elem-canvas .plaque,
html[data-theme="graphite"] .elem-canvas .phone,
html[data-theme="graphite"] .elem-canvas .type-numeral { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), var(--shadow-2); }
.hero-split { grid-template-columns: 1.1fr .9fr; }
.hero-copy { padding: 42px 36px; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 12px; }
.hero h2 { font-family: var(--font-display); font-size: clamp(40px, 5vw, 68px); line-height: .92; letter-spacing: -0.045em; font-weight: 560; }
.hero .lede { max-width: 36ch; color: rgba(246, 243, 237, .78); font-size: 16px; }
.hero .btn.ink { background: #f6f3ed; color: #17181d; border-color: transparent; }
.hero-center .btn.ink, .skin-atelier.hero .btn.ink { background: #17181d; color: #f6f3ed; }
.hero-panel {
  position: relative;
  background:
    radial-gradient(40% 40% at 50% 48%, rgba(255, 255, 255, .2), transparent 60%),
    linear-gradient(160deg, #243e9c, #b06984 55%, #e3532c);
}
.hero-panel i {
  position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px;
  border-radius: 50%;
  background: conic-gradient(from 80deg, #7ee7ff, #d946ef, #67e8f9, #7ee7ff);
  filter: blur(2px);
  box-shadow: 0 0 40px rgba(126, 231, 255, .45);
}
.hero-center { place-items: center; text-align: center; background: linear-gradient(180deg, #f7f4ee, #e7e1d6); color: #17181d; }
.hero-center .hero-copy { align-items: center; }
.hero-center .lede { color: #545a63; }
.hero-bleed {
  min-height: 460px;
  align-items: end;
  background:
    radial-gradient(50% 40% at 70% 40%, rgba(217, 70, 239, .45), transparent 60%),
    radial-gradient(40% 40% at 30% 60%, rgba(25, 211, 238, .35), transparent 60%),
    #0c0d12;
}
.skin-horizon.hero-split .hero-panel { background: linear-gradient(160deg, #243e9c, #b06984 55%, #e3532c); }
.skin-atelier.hero { background: #f6f3ed; color: #17181d; box-shadow: inset 0 0 0 1px rgba(23, 24, 29, .08); }
.skin-atelier .lede { color: #545a63; }
.skin-void.hero { background: #07080b; }

.type-display, .type-kicker, .type-numeral, .type-quote, .type-wall {
  padding: 28px;
  border-radius: 24px;
  background: #fff;
  color: #17181d;
  min-height: 280px;
  display: grid;
  align-content: center;
}
.type-display h2 { font-family: var(--font-display); font-size: clamp(64px, 9vw, 120px); line-height: .86; letter-spacing: -0.06em; font-weight: 560; }
.type-kicker p { font-size: 13px; letter-spacing: .28em; text-transform: uppercase; }
.type-numeral { background: #12131a; color: #f4efe6; text-align: center; }
.type-numeral strong { display: block; font-family: var(--font-num); font-size: 140px; line-height: .8; letter-spacing: -0.07em; font-weight: 500; font-variant-numeric: tabular-nums; }
.type-numeral span { letter-spacing: .22em; font-size: 12px; opacity: .75; }
.type-quote { background: transparent; color: var(--ink); }
.type-quote blockquote { margin: 0; font-family: Georgia, "Palatino Linotype", Palatino, serif; font-size: clamp(28px, 4vw, 44px); line-height: 1.25; letter-spacing: -0.03em; }
.type-quote cite { display: block; margin-top: 14px; font-style: normal; letter-spacing: .16em; text-transform: uppercase; font-size: 11px; color: var(--muted); }
.type-wall h2 { margin: 0; overflow-wrap: anywhere; }

.bento { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 160px 160px; gap: 10px; }
.bento article, .feature, .step, .stat, .page-frame, .split-layout {
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  color: #17181d;
  padding: 16px;
}
.bento article:first-child { grid-row: 1 / span 2; background: #17181d; color: #f6f3ed; }
.bento h3, .feature strong, .step strong { display: block; margin: 0; font-size: 18px; letter-spacing: -0.03em; }
.bento p, .feature span, .step span { color: #545a63; font-size: 13px; }
.bento article:first-child p { color: rgba(246, 243, 237, .72); }
.features, .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.step i { display: block; font-style: normal; font-size: 12px; letter-spacing: .16em; color: #545a63; }

.elem-canvas[data-skin="void"] .type-display,
.elem-canvas[data-skin="void"] .type-kicker,
.elem-canvas[data-skin="void"] .type-wall,
.elem-canvas[data-skin="void"] .bento article,
.elem-canvas[data-skin="void"] .feature,
.elem-canvas[data-skin="void"] .step { background: #12131a; color: #f4efe6; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.elem-canvas[data-skin="void"] .bento article:first-child { background: #05060a; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.elem-canvas[data-skin="void"] .bento p,
.elem-canvas[data-skin="void"] .feature span,
.elem-canvas[data-skin="void"] .step span,
.elem-canvas[data-skin="void"] .step i { color: rgba(244, 239, 230, .7); }
.elem-canvas[data-skin="atelier"] .type-display,
.elem-canvas[data-skin="atelier"] .type-kicker,
.elem-canvas[data-skin="atelier"] .type-wall,
.elem-canvas[data-skin="atelier"] .bento article:not(:first-child),
.elem-canvas[data-skin="atelier"] .feature,
.elem-canvas[data-skin="atelier"] .step { background: #fbfaf7; box-shadow: 0 1px 0 rgba(23, 24, 29, .04), 0 12px 28px rgba(40, 32, 20, .07); }

.plaque {
  display: grid;
  place-items: center;
  min-height: 460px;
  border-radius: 28px;
  padding: 28px;
  background: radial-gradient(120% 80% at 50% 0%, #2a2140, #12131a 58%);
  color: #f4efe6;
  box-shadow: 0 30px 70px rgba(20, 16, 30, .16);
}
.plaque.is-light { background: linear-gradient(180deg, #fff, #efeae2); color: #17181d; }
.range-ring { width: min(320px, 100%); height: auto; touch-action: none; cursor: grab; border-radius: 50%; }
.range-ring:active { cursor: grabbing; }
.range-ring:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.range-ring text { fill: currentColor; text-anchor: middle; font-family: var(--font-num); }
.ring-kicker { font-size: 11px; letter-spacing: .22em; opacity: .7; }
.ring-num { font-size: 64px; font-weight: 500; letter-spacing: -0.04em; }
.ring-unit { font-size: 14px; }
.ring-sub { font-size: 11px; letter-spacing: .14em; opacity: .72; }
.range-ring[data-compact="1"] .ring-kicker { font-size: 8px; }
.range-ring[data-compact="1"] .ring-num { font-size: 34px; }
.range-ring[data-compact="1"] .ring-unit { font-size: 11px; }
.range-ring[data-compact="1"] .ring-sub { font-size: 8px; }
.ring-track { fill: none; stroke: currentColor; stroke-opacity: .12; stroke-width: 10; }
.ring-value, .ring-glow { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring-glow { stroke-width: 16; opacity: .45; filter: blur(6px); }

.phone { width: min(280px, 100%); margin: 0 auto; border-radius: 32px; padding: 10px; background: #0a0b10; box-shadow: 0 24px 50px rgba(0, 0, 0, .28); color: #f4efe6; }
.phone.is-light { background: #d9d3c8; color: #17181d; }
.phone-screen {
  position: relative;
  border-radius: 24px;
  min-height: 520px;
  padding: 18px 16px 20px;
  background: radial-gradient(80% 50% at 50% 0%, #342848, #14151c 55%);
  overflow: hidden;
}
.phone.is-light .phone-screen { background: linear-gradient(180deg, #fff, #f3efe7); }
.phone-notch { width: 92px; height: 18px; margin: -6px auto 10px; border-radius: 0 0 12px 12px; background: #0a0b10; }
.phone.is-light .phone-notch { background: #1c1c1c; }
.phone-status, .phone-kicker, .phone-updated { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .08em; }
.phone-kicker { margin-top: 18px; letter-spacing: .2em; font-size: 11px; opacity: .75; }
.phone-updated { display: block; margin: 4px 0 8px; opacity: .8; }
.phone .range-ring { width: 210px; margin: 12px auto 0; display: block; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .28));
  color: #17181d;
  box-shadow: inset 0 1px 0 #fff, 0 12px 24px rgba(0, 0, 0, .16);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.stat { min-width: 220px; background: rgba(255, 255, 255, .08); color: inherit; }
.stat strong { display: block; font-family: var(--font-num); font-size: 64px; letter-spacing: -0.05em; font-weight: 520; line-height: .9; }
.stat em { font-style: normal; color: rgba(244, 239, 230, .72); font-size: 13px; }
.page-frame { padding: 0; overflow: hidden; background: #fff; }
.page-top { display: flex; gap: 6px; align-items: center; padding: 10px 12px; background: #f3f0ea; }
.page-top i { width: 8px; height: 8px; border-radius: 50%; background: #d6d2ca; }
.page-top i:first-child { background: #e4572e; }
.page-top span { margin-left: 8px; font-size: 12px; color: #545a63; }
.page-body { padding: 18px; display: grid; gap: 12px; }
.page-hero { padding: 22px; border-radius: 16px; background: linear-gradient(160deg, #243e9c, #e3532c); color: #fff; }
.page-hero strong { display: block; font-size: 28px; letter-spacing: -0.04em; }
.page-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.page-row b { display: block; padding: 14px; border-radius: 12px; background: #f6f3ed; font-weight: 600; }
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; background: transparent; padding: 0; color: var(--ink); }
.split-copy h2 { font-family: var(--font-display); font-size: 42px; letter-spacing: -0.045em; line-height: .95; }
.split-copy .lede { margin-top: 10px; color: var(--muted); }

/* ---------- beam scrollbars ---------- */
.beam-host, .library, .bench { scrollbar-width: none; }
.beam-host::-webkit-scrollbar, .library::-webkit-scrollbar, .bench::-webkit-scrollbar { width: 0; height: 0; }
@media (pointer: coarse) {
  .beam-host, .library, .bench { scrollbar-width: auto; }
}
.beam {
  position: fixed;
  z-index: 30;
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  color: var(--ink);
}
.beam.is-hot { opacity: 1; pointer-events: auto; }
.beam-arrow {
  width: 18px; height: 18px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass-bg);
  color: inherit;
  box-shadow: var(--shadow-1);
}
.beam-up::before, .beam-down::before {
  content: "";
  display: block;
  width: 6px; height: 6px;
  margin: 0 auto;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
.beam-up::before { transform: rotate(-45deg); margin-top: 6px; }
.beam-down::before { transform: rotate(135deg); margin-top: 2px; }
.beam-track { position: relative; flex: 1; width: 100%; cursor: pointer; }
.beam-thumb {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 42px;
  margin-left: -3px;
  border-radius: 99px;
  background: linear-gradient(180deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
  cursor: grab;
  touch-action: none;
}
.beam-thumb::before { content: ""; position: absolute; inset: -6px -8px; }
.beam.is-dragging .beam-thumb { cursor: grabbing; width: 8px; margin-left: -4px; }

/* ---------- glass menus ---------- */
.ctx, .ask {
  position: fixed;
  z-index: 50;
  border-radius: 16px;
  background: var(--menu-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-3);
  color: var(--ink);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  backdrop-filter: blur(20px) saturate(1.25);
}
.ctx { min-width: 236px; padding: 6px; }
.ctx button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  text-align: left;
}
.ctx button span { flex: 1 1 auto; }
.ctx button kbd { background: transparent; }
.ctx button:hover:not(:disabled), .ctx button:focus-visible { background: var(--raised); outline: none; box-shadow: var(--shadow-1); }
.ctx button:disabled { opacity: .42; }
.ctx-sep { height: 1px; margin: 5px 8px; background: var(--line); }
.ctx-ico { width: 16px; height: 16px; flex: 0 0 auto; }
.ctx button:hover .ctx-ico { transform: rotate(-8deg) scale(1.08); }
.ask { width: min(360px, calc(100vw - 24px)); padding: 14px; }
.ask .kicker { opacity: 1; color: var(--muted); margin-bottom: 8px; }
.ask textarea { min-height: 88px; }
.ask .reading { margin-top: 10px; font-size: 12px; color: var(--muted); }
@media (pointer: coarse) { .ctx button { min-height: 44px; } }

/* ---------- scrims, palette, sheets ---------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  justify-items: center;
  align-items: start;
  padding: max(12vh, env(safe-area-inset-top)) 16px 16px;
  background: var(--scrim);
}
.palette {
  width: min(600px, 100%);
  max-height: min(580px, 78dvh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--sheet-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-3);
  color: var(--ink);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
}
.palette-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.palette-field .btn-ico svg { width: 18px; height: 18px; }
.palette-field input,
.palette-field input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 6px 0;
  color: var(--ink);
  font-size: 16px;
  outline: none;
}
.palette-field:focus-within { box-shadow: inset 0 -2px 0 var(--focus); }
.palette-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px; overscroll-behavior: contain; }
.pal-group {
  padding: 10px 10px 4px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pal-opt {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  border-radius: 12px;
  cursor: pointer;
}
.pal-opt[aria-selected="true"] { background: var(--raised); box-shadow: var(--shadow-1); }
.pal-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--chip); border: 1px solid var(--line); }
.pal-ico svg { width: 16px; height: 16px; }
.pal-opt[aria-selected="true"] .pal-ico { color: var(--brand); }
.pal-label { min-width: 0; }
.pal-label b { font-weight: 560; }
.pal-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12px; }
.pal-hint { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.pal-check { display: grid; place-items: center; color: var(--brand); }
.pal-check svg { width: 16px; height: 16px; }
.pal-empty { padding: 22px 16px; color: var(--muted); }
.palette-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.palette-foot span { display: inline-flex; align-items: center; gap: 4px; }
.palette-foot kbd { min-width: 20px; height: 20px; }

.sheet {
  width: min(960px, 100%);
  max-height: min(760px, 84dvh);
  overflow: auto;
  padding: 18px 22px 22px;
  border-radius: 22px;
  background: var(--sheet-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-3);
  color: var(--ink);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  overscroll-behavior: contain;
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.sheet h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.shortcut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr)); gap: 18px 28px; align-items: start; }
.sc-col { display: grid; gap: 22px; min-width: 0; }
.sc-section h3 { margin: 0 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sc-section h3 span { letter-spacing: .04em; text-transform: none; color: var(--ink); }
.sc-section.is-current h3 { color: var(--ink); }
.sc-section dl { margin: 0; }
.sc-section dt, .sc-section dd { margin: 0; font-size: 13px; }
.sc-tool dt, .sc-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sc-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  padding: 10px;
  margin-bottom: 10px !important;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--chip);
}
.sc-tool { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sc-tool dt kbd { min-width: 24px; }
.sc-tool dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-rows { display: grid; gap: 5px; }
.sc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.sc-keys { justify-content: flex-end; flex: 0 1 auto; }
.kbd-to, .kbd-or { font-size: 11px; color: var(--muted); }
#confirm.scrim { align-items: center; padding-top: 16px; }
.confirm-sheet { width: min(440px, 100%); }
.confirm-sheet p { margin-top: 8px; color: var(--muted); line-height: 1.5; }
.confirm-sheet .row { margin-top: 18px; }

/* ---------- toast, drop hint ---------- */
#desk-toast {
  position: fixed;
  left: 50%;
  top: calc(var(--header-h) + 12px);
  z-index: 70;
  max-width: min(520px, calc(100vw - 32px));
  margin: 0;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--inverse);
  color: var(--on-inverse);
  font-size: 13px;
  text-align: center;
  box-shadow: var(--shadow-2);
  opacity: 0;
  translate: -50% -8px;
  pointer-events: none;
}
#desk-toast.is-on { opacity: 1; translate: -50% 0; }
.drop-hint {
  position: fixed;
  inset: 10px;
  z-index: 80;
  display: grid;
  place-items: center;
  border: 2px dashed color-mix(in srgb, var(--brand) 70%, transparent);
  border-radius: 24px;
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  pointer-events: none;
}
.drop-hint p { padding: 10px 16px; border-radius: 999px; background: var(--inverse); color: var(--on-inverse); font-size: 14px; }

@media (prefers-reduced-motion: no-preference) {
  .beam { transition: opacity 280ms ease; }
  .ctx:not([hidden]) { animation: ctx-in 180ms ease both; }
  .ctx:not([hidden]) .ctx-ico { animation: ico-pop 460ms cubic-bezier(.2, 1.45, .32, 1) both; }
  .ctx button:nth-child(2) .ctx-ico { animation-delay: 40ms; }
  .ctx button:nth-child(4) .ctx-ico { animation-delay: 80ms; }
  .ctx button:nth-child(5) .ctx-ico { animation-delay: 120ms; }
  .ctx button:nth-child(6) .ctx-ico { animation-delay: 160ms; }
  .ctx button:nth-child(8) .ctx-ico { animation-delay: 200ms; }
  .ctx-ico { transition: transform 200ms ease; }
  .palette-scrim:not([hidden]) .palette, .sheet-scrim:not([hidden]) .sheet { animation: ctx-in 200ms ease both; }
  .hero-panel i { animation: spin 16s linear infinite; }
  #desk-toast { transition: opacity 220ms ease, translate 320ms cubic-bezier(.2, 1.2, .3, 1); }
}
@keyframes ctx-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ico-pop { from { opacity: 0; transform: scale(.6) rotate(-12deg); } to { opacity: 1; transform: none; } }

/* ---------- full screen drawing ---------- */
body.is-fullscreen[data-desk="board"] .top,
body.is-fullscreen[data-desk="paint"] .top { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  #view-elements:not([hidden]) { display: flex; flex-direction: column; overflow: auto; }
  .elem-nav { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; overflow-x: auto; overflow-y: hidden; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .elem-nav .elem-filter { flex: 0 0 200px; margin: 0; }
  #elem-list { display: flex; gap: 6px; align-items: center; }
  .elem-nav .section-label { flex: 0 0 auto; margin: 0 2px 0 8px; }
  .elem-link { min-width: 150px; margin: 0; }
  .elem-stage { flex: 0 0 auto; overflow: visible; padding: 16px; }
  .elem-meta { flex: 0 0 auto; overflow: visible; border-left: 0; border-top: 1px solid var(--line); padding: 16px; }
  .hero-split, .split-layout, .features, .steps, .bento { grid-template-columns: 1fr; }
  .bento { grid-template-rows: none; }
  .bento article:first-child { grid-row: auto; min-height: 160px; }
  .type-numeral strong { font-size: 92px; }
}
@media (max-width: 720px) {
  .hero-copy { padding: 24px 18px; }
  .hero { min-height: 340px; }
  .page-row { grid-template-columns: 1fr; }
  .plaque { min-height: 360px; padding: 18px; }
  .sheet { padding: 16px; }
  .scrim { padding-top: max(8vh, env(safe-area-inset-top)); }
}