/* Slurp's Design page: a close look at four native interface details. */
.craft-page { padding-top:40px; }
.craft-section { padding:72px 0 30px; }
.craft-heading { max-width:920px; margin:0 auto 44px; }
.craft-home { display:inline-flex; align-items:center; gap:9px; color:var(--secondary); font-size:.9375rem; font-weight:650; margin-bottom:24px; }
.craft-home img { width:30px; height:30px; }
.craft-home span span { margin:0 6px; opacity:.5; }
.craft-heading h1 { margin:0 auto 20px; max-width:820px; font-size:clamp(2.75rem,5.3vw,4.6rem); letter-spacing:-.06em; line-height:1.04; text-wrap:balance; }
.craft-heading p { max-width:680px; font-size:1.125rem; line-height:1.65; }
.craft-showcase { border-radius:28px; overflow:hidden; max-width:1040px; margin:auto; }
.craft-tabs { display:flex; justify-content:center; gap:6px; padding:16px; border-bottom:1px solid var(--line); }
.craft-tabs button { min-height:48px; min-width:132px; padding:10px 24px; border:1px solid transparent; border-radius:12px; color:var(--secondary); font:inherit; font-weight:650; font-size:1rem; background:transparent; cursor:pointer; }
.craft-tabs button:hover { color:var(--text); background:var(--glass-subtle); }
.craft-tabs button[aria-selected="true"] { color:var(--text); background:var(--glass-strong); border-color:var(--line); box-shadow:0 3px 8px rgba(0,0,0,.06); }
.craft-showcase button:focus-visible, .craft-panel:focus-visible, .craft-home:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.craft-panel[hidden] { display:none; }
.craft-panel { outline-offset:-4px; }
.craft-scene { height:360px; position:relative; overflow:hidden; }
.craft-caption { min-height:192px; display:flex; align-items:center; justify-content:space-between; gap:36px; padding:30px 38px; border-top:1px solid var(--line); }
.craft-caption > div { max-width:650px; }
.craft-overline { font-size:.75rem; font-weight:700; color:var(--secondary); letter-spacing:.065em; text-transform:uppercase; }
.craft-caption h2 { font-size:1.6rem; letter-spacing:-.035em; line-height:1.2; margin:9px 0 12px; }
.craft-caption p { margin:0; font-size:1rem; line-height:1.65; color:var(--secondary); }
.craft-caption-note { width:180px; flex-shrink:0; text-align:right; font-size:.875rem; color:var(--secondary); line-height:1.5; }
.craft-replay { display:inline-flex; flex-shrink:0; justify-content:center; align-items:center; gap:10px; padding:11px 15px; min-height:46px; border:1px solid var(--line); border-radius:11px; background:var(--glass-subtle); color:var(--text); font:inherit; font-size:.875rem; font-weight:650; cursor:pointer; }
.craft-replay:hover { background:var(--glass-strong); }
.craft-footnote { max-width:850px; margin:20px auto 0; text-align:center; font-size:.8125rem; line-height:1.6; color:var(--secondary); }
.craft-materials-scene { height:630px; background:#94829b; }
.craft-wallpaper { position:absolute; inset:0; background:linear-gradient(125deg,#efae92,#d6a9ba 45%,#839dd1); }
.craft-wallpaper i { display:block; position:absolute; filter:blur(32px); border-radius:50%; }
.craft-wallpaper i:nth-child(1) { width:55%; height:110%; top:-40%; left:-3%; background:#ffcdad; }
.craft-wallpaper i:nth-child(2) { width:70%; height:90%; right:-20%; top:20%; background:#6e92cd; }
.craft-wallpaper i:nth-child(3) { width:40%; height:60%; right:20%; bottom:-40%; background:#eddbda; }
[data-desktop="cool"] .craft-wallpaper { background:linear-gradient(125deg,#163345,#285882 45%,#447476); }
[data-desktop="cool"] .craft-wallpaper i:nth-child(1) { background:#3297ad; }
[data-desktop="cool"] .craft-wallpaper i:nth-child(2) { background:#373c83; }
[data-desktop="cool"] .craft-wallpaper i:nth-child(3) { background:#74bcc0; }
/* Match the running 920 × 692 pt window, including its 236 pt sidebar. */
.craft-material-window { width:920px; height:692px; position:absolute; left:50%; top:45%; transform:translate(-50%,-50%) scale(var(--craft-scale,.76)); display:grid; grid-template-columns:236px 1fr; border:1px solid rgba(255,255,255,.55); border-radius:16px; overflow:hidden; background:rgba(247,248,252,.46); backdrop-filter:blur(30px) saturate(1.16); box-shadow:0 22px 60px rgba(26,31,50,.22),inset 0 1px 0 rgba(255,255,255,.5); color:#242630; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; }
.craft-material-window svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.craft-material-sidebar { position:relative; border-right:1px solid rgba(61,66,83,.14); background:rgba(255,255,255,.16); }
.craft-lights { display:flex; gap:8px; position:absolute; top:16px; left:20px; }
.craft-lights i { width:11px; height:11px; border-radius:50%; background:#ff5f57; box-shadow:inset 0 0 0 1px rgba(0,0,0,.09); }
.craft-lights i:nth-child(2) { background:#ffbd2f; }.craft-lights i:nth-child(3) { background:#28c840; }
.craft-mini-brand { display:flex; align-items:center; gap:9px; position:absolute; top:44px; left:22.5px; right:20px; font-size:20px; }
.craft-mini-brand img { width:23px; height:23px; border-radius:50%; }
.craft-mini-brand > span { margin-left:auto; display:flex; opacity:.7; }.craft-mini-brand > span svg { width:17px; height:17px; }
.craft-sidebar-rule { position:absolute; top:87px; left:8px; right:8px; border-top:1px solid rgba(61,66,83,.13); }
.craft-sidebar-links { position:absolute; top:99px; left:12px; right:12px; }
.craft-sidebar-row { display:flex; align-items:center; gap:11px; height:38px; padding:0 12px; margin-bottom:4px; font-size:13px; font-weight:500; color:#424655; border-radius:10px; }
.craft-sidebar-row.selected { background:rgba(30,128,239,.14); color:#0068c8; box-shadow:inset 0 0 0 1px rgba(0,122,255,.08); }
.craft-sidebar-bottom { position:absolute; bottom:9px; left:12px; right:12px; border-top:1px solid rgba(61,66,83,.13); padding-top:9px; }
.craft-material-main { position:relative; background:rgba(252,253,255,.3); }
.craft-native-heading { position:absolute; top:187px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:5px; }
.craft-native-heading > strong { font-size:25px; font-weight:600; letter-spacing:-.022em; }
.craft-native-heading > span { font-size:13px; color:#484c5b; }
.craft-mini-url { position:absolute; top:262px; left:74px; right:74px; height:56px; display:flex; align-items:center; gap:12px; padding:0 18px; border-radius:999px; border:1.4px solid rgba(0,122,255,.58); background:rgba(247,250,255,.47); box-shadow:0 0 15px rgba(0,122,255,.1); font-size:18px; color:#7b8090; }
.craft-mini-url > svg { width:20px; height:20px; color:#007ce8; }.craft-mini-url > span { flex:1; }
.craft-mini-url b { display:grid; place-items:center; width:34px; height:34px; color:#858a98; opacity:.4; border-radius:50%; }
.craft-mini-url b svg { width:16px; height:16px; }
.craft-native-hint { position:absolute; top:337px; left:0; right:0; text-align:center; font-size:11px; margin:0; color:#777e8e; }
.craft-native-bottom { position:absolute; bottom:19px; left:34px; right:34px; height:50px; display:flex; align-items:center; gap:10px; padding:9px 9px 9px 18px; border-radius:999px; background:rgba(255,255,255,.43); border:1px solid rgba(255,255,255,.3); box-shadow:0 10px 25px rgba(0,0,0,.09); color:#747987; font-size:11px; }
.craft-native-bottom > strong { color:#3c4150; font-size:12px; font-weight:600; white-space:nowrap; }
.craft-native-destination { display:flex; align-items:center; gap:6px; margin-right:auto; }.craft-native-destination svg { width:13px; height:13px; }
.craft-native-folder { display:grid; place-items:center; width:32px; height:32px; border-radius:12px; border:1px solid rgba(127,127,127,.12); background:rgba(255,255,255,.08); color:#7e8796; }
.craft-native-bottom > b { display:flex; align-items:center; justify-content:center; gap:7px; width:129px; height:32px; border-radius:999px; background:rgba(0,122,255,.34); color:rgba(255,255,255,.65); font-size:13px; font-weight:600; }
.craft-native-bottom > b svg { width:15px; height:15px; }
:root[data-theme="dark"] .craft-material-window { background:rgba(25,31,46,.65); border-color:rgba(233,241,255,.23); color:#f5f6f8; }
:root[data-theme="dark"] .craft-material-sidebar { background:rgba(21,28,41,.12); border-color:rgba(255,255,255,.11); }
:root[data-theme="dark"] .craft-material-main { background:rgba(21,26,37,.3); }
:root[data-theme="dark"] :is(.craft-sidebar-row,.craft-native-heading > span) { color:#d8ddea; }
:root[data-theme="dark"] :is(.craft-sidebar-rule,.craft-sidebar-bottom) { border-color:rgba(255,255,255,.12); }
:root[data-theme="dark"] .craft-sidebar-row.selected { color:#68b6ff; background:rgba(10,132,255,.16); }
:root[data-theme="dark"] .craft-mini-url { background:rgba(20,27,39,.27); color:#aeb8ca; }
:root[data-theme="dark"] .craft-native-hint { color:#95a3b9; }
:root[data-theme="dark"] .craft-native-bottom { background:rgba(18,23,34,.45); border-color:rgba(255,255,255,.1); color:#94a1b7; }
:root[data-theme="dark"] .craft-native-bottom > strong { color:#dce3ee; }
.craft-desktops { position:absolute; bottom:22px; left:0; right:0; display:flex; justify-content:center; gap:9px; }
.craft-desktops button { display:flex; align-items:center; gap:7px; min-height:40px; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(12,23,42,.76); padding:7px 14px; color:#fff; font:inherit; font-size:.8125rem; cursor:pointer; backdrop-filter:blur(10px); }
.craft-desktops button[aria-pressed="true"] { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.15); }
.craft-desktops i { display:block; width:13px; height:13px; border-radius:50%; background:linear-gradient(120deg,#ffc397,#9499da); }
.craft-desktops [data-craft-desktop="cool"] i { background:linear-gradient(120deg,#54bdc8,#5260ad); }
.craft-metal-scene { background:radial-gradient(ellipse at 50% 100%,#15334a,transparent 65%),#0b121e; display:grid; place-items:center; padding:36px; }
.craft-metal-content { width:min(650px,100%); text-align:center; }
.craft-scene-label { font-size:.8125rem; color:#a8b7cc; }
.craft-url-field { position:relative; display:flex; align-items:center; gap:16px; width:100%; height:70px; margin:28px 0 23px; padding:10px 22px; border:1px solid #51627b; border-radius:999px; background:linear-gradient(115deg,#1a283b,#192235); box-shadow:0 12px 28px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.08); color:#d2dbe8; text-align:left; }
.craft-url-symbol { display:flex; color:#8caccd; }.craft-url-symbol svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }.craft-url-clear { display:grid; place-items:center; border-radius:50%; background:#8895a8; color:#1b273b; font-size:14px; width:16px; height:16px; flex-shrink:0; }.craft-url-field.is-analyzing .craft-url-clear { visibility:hidden; }.craft-url-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.375rem; }
.craft-url-action { display:grid; place-items:center; width:42px; height:42px; flex-shrink:0; border-radius:50%; background:#086dd5; color:white; font-size:28px; position:relative; z-index:2; }
.craft-url-action svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.craft-url-action.action-ready { background:#0788ff; box-shadow:0 0 18px rgba(22,158,255,.5); }
.craft-url-action.action-pop { animation:craft-action-pop .41s ease-out; }
#craft-url-effects { position:absolute; inset:-10px; width:calc(100% + 20px); height:calc(100% + 20px); pointer-events:none; }
.craft-effect-status { display:block; min-height:24px; color:#b8cce2; font-size:.875rem; }
.craft-motion-scene { display:grid; place-items:center; padding:36px; background:radial-gradient(ellipse at 40% 20%,rgba(40,140,255,.12),transparent 70%); }
.craft-motion-content { width:min(720px,100%); text-align:center; }
.craft-motion-label { color:var(--secondary); }
.craft-motion-crop { display:flex; justify-content:flex-end; overflow:hidden; width:100%; padding:28px 14px 30px; margin:2px 0 0; }
.craft-download-surface { flex-shrink:0; display:flex; align-items:center; gap:14px; width:100%; min-width:620px; padding:9px 9px 9px 18px; border:1px solid var(--line); border-radius:999px; background:var(--glass-strong); backdrop-filter:blur(22px); box-shadow:0 10px 22px var(--shadow); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif; }
.craft-download-meta { display:flex; align-items:center; gap:10px; flex:1; white-space:nowrap; font-size:13px; }.craft-download-meta > span { color:var(--secondary); font-size:12px; }
.craft-download-meta svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; color:var(--secondary); }
.craft-download-folder { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border:1px solid var(--line); border-radius:12px; background:var(--glass-subtle); }
.craft-download-folder svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; color:var(--secondary); }
.craft-download-button { display:flex; align-items:center; justify-content:center; gap:7px; height:34px; min-width:130px; padding:5px 20px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:#007bea; color:#fff; font:inherit; font-size:13px; font-weight:600; cursor:pointer; position:relative; }
.craft-download-button::before { content:''; position:absolute; inset:-7px; }
.craft-download-button svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.craft-motion-status { display:block; min-height:24px; color:var(--secondary); font-size:.875rem; line-height:1.5; }
.craft-cta { padding:78px 0 90px; max-width:800px; text-align:center; }
.craft-cta h2 { margin:0 0 16px; font-size:clamp(2rem,4vw,3rem); letter-spacing:-.05em; line-height:1.15; }
.craft-cta p { color:var(--secondary); font-size:1.0625rem; line-height:1.65; max-width:600px; margin:0 auto 25px; }
.craft-cta > div { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; }
.craft-cta small { display:block; color:var(--secondary); font-size:.8125rem; line-height:1.6; margin-top:20px; }
@keyframes craft-action-pop { 0% {transform:scale(1)} 38% {transform:scale(1.1)} 72% {transform:scale(.985)} 100% {transform:scale(1)} }
@media (max-width:720px) {
  .craft-page { padding-top:14px; }.craft-section {padding-top:50px;}
  .craft-heading { margin-bottom:30px; }.craft-heading p { font-size:1rem; }
  .craft-showcase { border-radius:20px; }.craft-tabs { gap:3px; padding:10px; }
  .craft-tabs button { min-width:0; flex:1; padding:10px 12px; font-size:.9375rem; }
  .craft-scene { height:280px; }.craft-materials-scene { height:340px; }
  .craft-caption { padding:25px; min-height:265px; flex-direction:column; align-items:flex-start; gap:22px; }
  .craft-caption h2 { font-size:1.45rem; }.craft-caption-note { text-align:left; width:auto; }
  .craft-metal-scene, .craft-motion-scene { padding:24px; }
  .craft-url-field { gap:9px; height:56px; padding:10px 14px; }
  .craft-url-text { font-size:1.125rem; }.craft-url-action { width:34px; height:34px; }.craft-url-symbol svg { width:18px; height:18px; }.craft-url-action svg { width:16px; height:16px; }.craft-url-clear { width:13px; height:13px; font-size:12px; }
  .craft-motion-crop { padding:24px 10px 28px; margin-left:-4px; width:calc(100% + 8px); mask-image:linear-gradient(to right,transparent,#000 14px); }
  .craft-motion-label { font-size:.75rem; }
  .craft-motion-status { font-size:.8125rem; }
  .craft-cta { padding:54px 0 70px; }
}
@media (prefers-reduced-motion:reduce) { .craft-showcase *, .craft-showcase *::before { animation:none !important; transition:none !important; } }
@media (prefers-reduced-transparency:reduce) { .craft-material-window { backdrop-filter:none; background:#edf0f6; }:root[data-theme="dark"] .craft-material-window { background:#1b2332; } }

.craft-page ~ footer a[href="/details/"], .site-header a[aria-current="page"] { color:var(--text); font-weight:650; }
/* Keep enlarged native controls inside the scene's column on narrow screens. */
.craft-metal-scene, .craft-motion-scene { grid-template-columns:minmax(0,1fr); }
.craft-metal-content, .craft-motion-content { min-width:0; justify-self:center; }

/* HDR uses the same native URL crop on a deliberately quiet surface. */
.craft-hdr-scene { min-height:380px; height:auto; display:grid; place-items:center; padding:40px 36px; background:#0b121e; }
.craft-hdr-content { width:min(650px,100%); min-width:0; text-align:center; }
.craft-hdr-stage { position:relative; padding:19px; margin:10px -19px 4px; }
.craft-hdr-field { margin:0; }
#craft-hdr-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; dynamic-range-limit:no-limit; }
#craft-hdr-canvas[hidden] { display:none; }
#craft-hdr-fallback { position:absolute; inset:-10px; width:calc(100% + 20px); height:calc(100% + 20px); pointer-events:none; }
.craft-hdr-stage[data-renderer="webgpu"] .craft-hdr-field { background:transparent; border-color:transparent; box-shadow:none; }
.craft-hdr-stage[data-renderer="webgpu"] #craft-hdr-fallback { display:none; }
.craft-hdr-controls { display:inline-flex; gap:4px; padding:4px; margin-top:10px; border:1px solid #3a475a; border-radius:999px; }
.craft-hdr-controls button { min-height:44px; padding:9px 16px; background:transparent; color:#d2dbe8; border:1px solid transparent; border-radius:999px; font:inherit; font-size:.875rem; font-weight:650; cursor:pointer; }
.craft-hdr-controls button[aria-pressed="true"] { background:#263b55; border-color:#5c82b0; color:#fff; }
.craft-hdr-controls button:disabled { color:#8797ad; cursor:default; }
.craft-hdr-status { color:#b8cce2; font-size:.8125rem; line-height:1.55; max-width:540px; margin:14px auto 0; min-height:40px; }
.craft-hdr-note { padding:0 38px 26px; color:var(--secondary); font-size:.8125rem; line-height:1.65; }
.craft-hdr-note p { margin:0 0 8px; }
.craft-story { max-width:1040px; padding:76px 0 10px; }
.craft-story-intro { max-width:670px; margin-bottom:46px; }
.craft-story-intro h2 { margin:15px 0 19px; font-size:clamp(2rem,3.6vw,3rem); letter-spacing:-.05em; line-height:1.12; text-wrap:balance; }
.craft-story-intro p { font-size:1.125rem; line-height:1.7; color:var(--secondary); margin:0; }
.craft-story-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:68px; row-gap:44px; }
.craft-story-grid article { border-top:1px solid var(--line); padding-top:26px; }
.craft-detail-number { font-size:.8125rem; color:var(--secondary); font-weight:650; }
.craft-story-grid h3 { font-size:1.5rem; letter-spacing:-.035em; margin:16px 0; line-height:1.2; }
.craft-story-grid p { color:var(--secondary); font-size:1rem; line-height:1.75; margin:0 0 14px; }
@media (max-width:720px) {
 .craft-tabs button { padding:10px 5px; font-size:.875rem; }
 .craft-hdr-scene { padding:32px 24px; min-height:330px; grid-template-columns:minmax(0,1fr); }
 .craft-hdr-note { padding:0 25px 23px; }
 .craft-hdr-controls button { padding:9px 12px; font-size:.8125rem; }
 .craft-story { padding-top:44px; }
 .craft-story-intro { margin-bottom:30px; }.craft-story-intro p { font-size:1rem; }
 .craft-story-grid { grid-template-columns:1fr; gap:25px; }
}


/* v0.89 — Details for nerds interactive redesign ------------------------ */
.craft-demo-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 16px; border-bottom:1px solid var(--line); }
.craft-demo-toolbar .craft-tabs { flex:1; padding:0; border:0; justify-content:flex-start; }
.craft-demo-toolbar .craft-tabs button { min-width:142px; }
.craft-appearance { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.craft-appearance > span { color:var(--secondary); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.065em; }
.craft-appearance-options { display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--glass-subtle); }
.craft-appearance-options button { min-height:34px; padding:6px 12px; border:0; border-radius:999px; background:transparent; color:var(--secondary); font:inherit; font-size:.8rem; font-weight:650; cursor:pointer; }
.craft-appearance-options button[aria-pressed="true"] { color:var(--text); background:var(--glass-strong); box-shadow:0 1px 5px rgba(0,0,0,.08); }

/* Local appearance is deliberately independent of the surrounding website. */
.craft-showcase[data-craft-theme="light"] .craft-material-window { background:rgba(247,248,252,.46); border-color:rgba(255,255,255,.55); color:#242630; }
.craft-showcase[data-craft-theme="light"] .craft-material-sidebar { background:rgba(255,255,255,.16); border-color:rgba(61,66,83,.14); }
.craft-showcase[data-craft-theme="light"] .craft-material-main { background:rgba(252,253,255,.3); }
.craft-showcase[data-craft-theme="light"] :is(.craft-sidebar-row,.craft-native-heading > span) { color:#424655; }
.craft-showcase[data-craft-theme="light"] .craft-sidebar-row.selected { color:#0068c8; background:rgba(30,128,239,.14); }
.craft-showcase[data-craft-theme="light"] .craft-mini-url { background:rgba(247,250,255,.47); color:#7b8090; }
.craft-showcase[data-craft-theme="light"] .craft-native-hint { color:#777e8e; }
.craft-showcase[data-craft-theme="light"] .craft-native-bottom { background:rgba(255,255,255,.43); border-color:rgba(255,255,255,.3); color:#747987; }
.craft-showcase[data-craft-theme="light"] .craft-native-bottom > strong { color:#3c4150; }
.craft-showcase[data-craft-theme="dark"] .craft-material-window { background:rgba(25,31,46,.65); border-color:rgba(233,241,255,.23); color:#f5f6f8; }
.craft-showcase[data-craft-theme="dark"] .craft-material-sidebar { background:rgba(21,28,41,.12); border-color:rgba(255,255,255,.11); }
.craft-showcase[data-craft-theme="dark"] .craft-material-main { background:rgba(21,26,37,.3); }
.craft-showcase[data-craft-theme="dark"] :is(.craft-sidebar-row,.craft-native-heading > span) { color:#d8ddea; }
.craft-showcase[data-craft-theme="dark"] :is(.craft-sidebar-rule,.craft-sidebar-bottom) { border-color:rgba(255,255,255,.12); }
.craft-showcase[data-craft-theme="dark"] .craft-sidebar-row.selected { color:#68b6ff; background:rgba(10,132,255,.16); }
.craft-showcase[data-craft-theme="dark"] .craft-mini-url { background:rgba(20,27,39,.27); color:#aeb8ca; }
.craft-showcase[data-craft-theme="dark"] .craft-native-hint { color:#95a3b9; }
.craft-showcase[data-craft-theme="dark"] .craft-native-bottom { background:rgba(18,23,34,.45); border-color:rgba(255,255,255,.1); color:#94a1b7; }
.craft-showcase[data-craft-theme="dark"] .craft-native-bottom > strong { color:#dce3ee; }

.craft-metalhdr-scene { min-height:390px; height:auto; display:grid; place-items:center; padding:42px 36px; transition:background .3s ease,color .3s ease; }
.craft-showcase[data-craft-theme="dark"] .craft-metalhdr-scene { background:radial-gradient(ellipse at 50% 100%,#15334a,transparent 65%),#0b121e; color:#d2dbe8; }
.craft-showcase[data-craft-theme="light"] .craft-metalhdr-scene { background:radial-gradient(ellipse at 50% 100%,rgba(46,133,216,.12),transparent 64%),#eef4fb; color:#1c2938; }
.craft-metalhdr-content { width:min(690px,100%); text-align:center; }
.craft-metalhdr-stage { padding:22px 20px; margin:6px -20px 0; }
.craft-metalhdr-field { margin:0; overflow:visible; transition:background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease; }
.craft-showcase[data-craft-theme="light"] .craft-metalhdr-field { background:rgba(255,255,255,.74); border-color:#9eb0c6; color:#33465b; box-shadow:0 12px 28px rgba(64,88,120,.12),inset 0 1px rgba(255,255,255,.75); }
.craft-showcase[data-craft-theme="light"] .craft-metalhdr-field .craft-url-symbol { color:#5b7c9f; }
.craft-showcase[data-craft-theme="light"] .craft-metalhdr-field .craft-url-clear { background:#aebac9; color:#fff; }
.craft-showcase[data-craft-theme="light"] .craft-metalhdr-scene .craft-scene-label { color:#53677d; opacity:1; }
.craft-showcase[data-craft-theme="light"] .craft-metalhdr-scene .craft-effect-status { color:#536b84; opacity:1; }
.craft-showcase[data-craft-theme="light"] .craft-metalhdr-scene .craft-tech-chips span { color:#40556b; border-color:#718397; background:rgba(255,255,255,.42); opacity:1; }
#craft-metalhdr-sdr,#craft-metalhdr-hdr { position:absolute; inset:-18px; width:calc(100% + 36px); height:calc(100% + 36px); pointer-events:none; }
#craft-metalhdr-hdr { dynamic-range-limit:no-limit; }
#craft-metalhdr-hdr[hidden] { display:none; }
.craft-static-metal { border-color:#0a84ff !important; box-shadow:0 0 0 1px rgba(10,132,255,.25),0 0 22px rgba(10,132,255,.22) !important; }
.craft-tech-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:10px 0 13px; }
.craft-tech-chips span { padding:6px 10px; border-radius:999px; border:1px solid currentColor; opacity:.68; font-size:.72rem; font-weight:700; letter-spacing:.02em; }
.craft-metalhdr-note { padding:0 38px 26px; color:var(--secondary); font-size:.8125rem; line-height:1.65; }
.craft-metalhdr-note p { margin:0; }


@media (max-width:720px) {
  .craft-demo-toolbar { flex-direction:column; align-items:stretch; gap:10px; padding:10px; }
  .craft-demo-toolbar .craft-tabs { width:100%; }
  .craft-demo-toolbar .craft-tabs button { min-width:0; flex:1; font-size:.82rem; padding:9px 5px; }
  .craft-appearance { justify-content:space-between; padding:0 3px 2px; }
  .craft-metalhdr-scene { min-height:330px; padding:30px 22px; }
  .craft-metalhdr-stage { padding:18px 16px; margin:5px -16px 0; }
  .craft-metalhdr-note { padding:0 25px 23px; }
  .craft-tech-chips { gap:6px; }
  .craft-tech-chips span { font-size:.66rem; }
}