/* Detail polish: keep the established page, grids and hero composition. */
:root,
:root[data-theme="clean"] {
  --paper: #f8f9fb;
  --paper-2: #eef1f5;
  --hero-paper: #fff;
  --ink-3: #667180;
  --line: #dde3eb;
  --line-2: #cdd5e0;
  --edge-light: rgba(255,255,255,.9);
  --surface-shadow: 0 2px 3px rgba(27,39,57,.04), 0 12px 28px -12px rgba(27,39,57,.17);
  --surface-hover: 0 3px 5px rgba(27,39,57,.05), 0 20px 36px -14px rgba(27,39,57,.24);
  --small-shadow: 0 1px 2px rgba(27,39,57,.05), 0 6px 14px -8px rgba(27,39,57,.18);
  --tray-shadow: inset 0 1px 3px rgba(27,39,57,.07), 0 1px 0 var(--edge-light);
}
:root[data-theme="paper"] {
  --hero-paper: #f4f1ea;
  --ink-3: #756e62;
  --edge-light: rgba(255,253,246,.85);
  --surface-shadow: 0 2px 3px rgba(64,49,24,.05), 0 12px 28px -12px rgba(64,49,24,.19);
  --surface-hover: 0 3px 5px rgba(64,49,24,.06), 0 20px 36px -14px rgba(64,49,24,.27);
  --small-shadow: 0 1px 2px rgba(64,49,24,.06), 0 6px 14px -8px rgba(64,49,24,.2);
  --tray-shadow: inset 0 1px 3px rgba(64,49,24,.08), 0 1px 0 var(--edge-light);
}
:root[data-theme="dark"] {
  --paper: #101419;
  --paper-2: #151b23;
  --card: #1c232d;
  --panel: #1c232d;
  --hero-paper: #13171d;
  --ink-3: #99a7ba;
  --line: #333e4d;
  --line-2: #465366;
  --edge-light: rgba(226,237,255,.06);
  --surface-shadow: 0 2px 4px rgba(0,0,0,.23), 0 16px 28px -12px rgba(0,0,0,.52);
  --surface-hover: 0 3px 5px rgba(0,0,0,.25), 0 22px 38px -12px rgba(0,0,0,.65);
  --small-shadow: 0 2px 4px rgba(0,0,0,.22), 0 8px 16px -8px rgba(0,0,0,.45);
  --tray-shadow: inset 0 1px 4px rgba(0,0,0,.36), 0 1px 0 var(--edge-light);
}

/* The background establishes depth without competing with the content. */
.ambient-grid {
  background-size: 48px 48px;
  opacity: .48;
  -webkit-mask-image: linear-gradient(#000, rgba(0,0,0,.55));
  mask-image: linear-gradient(#000, rgba(0,0,0,.55));
}
.ambient-glow { opacity: .22; }
#ambientDots { opacity: .36; }
.sec-alt, .sec-footer { background: color-mix(in srgb, var(--paper-2) 89%, transparent); }
.sec-block, .sec-footer { box-shadow: inset 0 1px 0 var(--edge-light); }
.sec-head h2 { line-height: 1.25; }
.sec-head .section-kicker, .footer-lead .section-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--small-shadow);
  color: var(--accent-ink);
}
.sec-head .sec-desc { max-width: 650px; line-height: 1.75; }

/* Two independent inset trays, with a raised selected option. */
.topbar { border-bottom-color: var(--line); transition: box-shadow .2s ease; }
.is-scrolled .topbar { box-shadow: 0 3px 14px -6px color-mix(in srgb, var(--ink) 20%, transparent); }
.top-actions { gap: 9px; }
.nav-tab { display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; }
.nav-tab:hover { background: color-mix(in srgb, var(--paper-2) 70%, transparent); }
.control-tray {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: var(--paper-2);
  box-shadow: var(--tray-shadow);
  flex-shrink: 0;
}
.tray-option {
  display: grid;
  place-items: center;
  height: 32px;
  min-width: 32px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1;
  transition: background .16s, color .16s, box-shadow .16s;
}
.tray-option:hover { background: color-mix(in srgb, var(--card) 75%, transparent); color: var(--ink); }
.tray-option[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 13%, transparent), inset 0 1px var(--edge-light);
}
.tray-option .icon { width: 17px; height: 17px; }
.language-tray .tray-option { font-weight: 600; }
.mobile-menu-button { border-color: var(--line); background: var(--card); box-shadow: var(--small-shadow); }

/* Content width and spacing follow the density of each card family. */
.page { max-width: 1248px; padding-inline: clamp(20px, 4vw, 48px); }
.product-grid, .note-grid, .about-grid { gap: 24px; }
.product-card, .note-card, .tool-card, .about-card { min-width: 0; }

/* A consistent resting surface is as important as the hover state. */
.product-card, .note-card, .tool-card, .about-card, .contact-card {
  border-color: var(--line);
  box-shadow: inset 0 1px 0 var(--edge-light), var(--surface-shadow);
}
.product-grid { gap: 24px; }
.product-card { border-radius: 16px; }
.pc-body { padding: 20px 22px; gap: 14px; }
.pc-media { flex-shrink: 0; }
.card-top { align-items: center; }
.card-top h3 { font-size: 19px; line-height: 1.4; }
.card-top .product-icon, .card-top .product-logo { width: 38px; height: 38px; flex-shrink: 0; }
.product-card p { font-size: 14px; line-height: 1.75; }
.tag-row span { background: var(--paper); border-color: var(--line); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 3%, transparent); }
.card-actions { padding-top: 14px; gap: 16px; border-top: 1px solid var(--line); }
.card-actions .tag-row { flex: 1; min-width: 0; gap: 6px; }
.card-actions .pc-open { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; color: var(--accent-ink); font-weight: 600; }
.card-actions .pc-open .icon { width: 20px; height: 20px; color: var(--ink-2); transition: transform .2s, color .2s; }
.product-card::after { background: radial-gradient(320px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb, var(--accent) 6%, transparent), transparent 64%); }
.product-card:hover, .product-card:focus-visible, .note-card:hover { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); box-shadow: var(--surface-hover); transform: translateY(-3px); }
.product-card:hover .pc-open .icon { color: var(--accent-ink); transform: translateX(2px); }
.product-card:hover .pc-media img { transform: scale(1.012); }

/* Selected notes share the blog's topic covers and editorial hierarchy. */
.note-card { --note-ink: #3a5e8c; border-radius: 16px; }
.note-card[data-note-tone="green"] { --note-ink: #2f6f5e; }
.note-card[data-note-tone="gold"] { --note-ink: #85671e; }
.note-card[data-note-tone="orange"] { --note-ink: #a34c30; }
:root[data-theme="dark"] .note-card { --note-ink: #92b9e5; }
:root[data-theme="dark"] .note-card[data-note-tone="green"] { --note-ink: #8bc5af; }
:root[data-theme="dark"] .note-card[data-note-tone="gold"] { --note-ink: #d2ba77; }
:root[data-theme="dark"] .note-card[data-note-tone="orange"] { --note-ink: #e8a17f; }
.note-cover { margin: 12px 12px 0; aspect-ratio: 20 / 7; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--note-ink) 16%, var(--line)); border-radius: 9px; box-shadow: inset 0 1px 0 var(--edge-light), 0 2px 5px rgba(20,30,45,.04); }
.note-cover img { object-fit: contain; }
.note-card-body { display: flex; flex-direction: column; gap: 12px; padding: 20px; flex: 1; }
.note-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.note-topic { display: inline-flex; align-items: center; gap: 7px; color: var(--note-ink); font-size: 12px; font-weight: 600; }
.note-topic::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, var(--note-ink) 9%, transparent); }
.note-reading { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.note-reading .icon { width: 14px; height: 14px; }
.note-card h3 { font-size: 17px; line-height: 1.55; letter-spacing: 0; text-wrap: pretty; }
@media (min-width: 621px) { .note-card h3 { min-height: 3.1em; } }
.note-summary { color: var(--ink-2); font-size: 13.5px; line-height: 1.8; text-wrap: pretty; }
.note-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.note-footer time { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--ink-3); }
.note-card-go { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; color: var(--accent-ink); font-size: 12px; font-weight: 600; }
.note-card-go .icon { width: 17px; height: 17px; transition: transform .2s; }
.note-card:hover .note-card-go .icon { transform: translateX(2px); }
.note-card:hover .note-cover img { transform: none; }
:root[data-theme="dark"] .note-cover img { filter: brightness(.84) saturate(.88); }
.result-count { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--ink-2); }
.result-count a { color: var(--accent-ink); text-underline-offset: 4px; }
.result-count a:hover { text-decoration: underline; }

/* Small icon plates give the existing toolbox and about cards a focal point. */
.tool-grid { gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.tool-card { --tool-accent: var(--accent-ink); padding: 20px; gap: 16px; min-height: 164px; border-radius: 14px; transition: border-color .18s, box-shadow .2s, transform .2s; }
.tool-card[data-tool-group="1"] { --tool-accent: #7963a5; }
.tool-card[data-tool-group="2"] { --tool-accent: #427499; }
.tool-card[data-tool-group="3"] { --tool-accent: #337e70; }
:root[data-theme="dark"] .tool-card { --tool-accent: #edaa86; }
:root[data-theme="dark"] .tool-card[data-tool-group="1"] { --tool-accent: #b6a2e0; }
:root[data-theme="dark"] .tool-card[data-tool-group="2"] { --tool-accent: #8ab4dc; }
:root[data-theme="dark"] .tool-card[data-tool-group="3"] { --tool-accent: #7abfaf; }
.tool-icon, .about-icon, .contact-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--tool-accent, var(--accent-ink)) 17%, var(--line));
  border-radius: 11px;
  color: var(--tool-accent, var(--accent-ink));
  background: color-mix(in srgb, var(--tool-accent, var(--accent-ink)) 7%, var(--card));
  box-shadow: inset 0 1px 0 var(--edge-light), var(--small-shadow);
}
.tool-icon .icon { width: 20px; height: 20px; color: inherit; }
.tool-card-head { justify-content: flex-start; gap: 10px; }
.tool-heading { display: grid; gap: 4px; min-width: 0; }
.tool-group-tag { justify-self: start; color: var(--ink-3); background: none; border: 0; padding: 0; font-size: 10px; line-height: 1.3; }
.tool-card strong { margin: 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.tool-outbound { margin-left: auto; align-self: flex-start; }
.tool-outbound .icon { width: 13px; height: 13px; color: var(--ink-3); }
.tool-card .tool-desc { font-size: 13.5px; line-height: 1.7; }
.tool-card, a.tool-card { grid-template-rows: auto 1fr; }
.tool-card:not(a):hover { border-color: var(--line); transform: none; }
a.tool-card:hover { border-color: color-mix(in srgb, var(--tool-accent) 48%, var(--line)); box-shadow: var(--surface-hover); }
a.tool-card:hover .tool-outbound .icon { color: var(--tool-accent); }
.about-grid { gap: 24px; }
.about-card { padding: 24px; border-radius: 16px; }
.about-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.about-index { margin-left: auto; font-family: var(--mono); font-size: 14px; color: color-mix(in srgb, var(--ink-3) 65%, var(--card)); }
.about-card h3 { font-size: 17px; line-height: 1.45; margin: 0; }
.about-card p { line-height: 1.8; font-size: 14px; }
.principle-list { padding: 4px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: var(--surface-shadow); }
.principle-item { align-items: center; padding-block: 13px; gap: 12px; }
.principle-item > span { display: flex; align-items: baseline; gap: 14px; }
.principle-item strong { min-width: 76px; }
.principle-item small { margin-top: 0; }
.principle-item:first-child { border-top: 0; }
.principle-item:last-child { border-bottom: 0; }

/* Contact actions and consistent tactile buttons. */
.contact-card { width: 100%; text-align: left; border-radius: 12px; padding: 16px 18px; min-height: 82px; gap: 12px; transition: border-color .18s, transform .18s, box-shadow .18s; }
.contact-card:hover { box-shadow: var(--surface-hover); }
.contact-card small { color: var(--ink-2); overflow-wrap: anywhere; }
.contact-card > span:nth-child(2) { min-width: 0; }
.contact-action { margin-left: auto; color: var(--ink-3); }
.contact-action .icon { width: 14px; height: 14px; color: inherit; }
.contact-card.is-copied .contact-action { color: var(--ok); }
.command-button { box-shadow: inset 0 1px 0 var(--edge-light), var(--small-shadow); }
.command-button.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 10px -3px rgba(15,21,30,.23); }
.command-button.primary::before { display: none; }
.command-button.primary:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 92%, var(--accent)); }
.command-button.ghost { background: var(--card); }
.command-button:active, .tray-option:active { transform: translateY(1px); }
.hero-actions .command-button { box-shadow: var(--small-shadow); }

/* Drawer controls stay reachable while screenshots and details scroll. */
.detail-drawer { height: 100dvh; background: var(--paper); overscroll-behavior: contain; visibility: hidden; transition: transform .28s ease, visibility .28s; }
.detail-drawer.is-open { visibility: visible; }
.drawer-inner { padding-top: 18px; }
.drawer-close { position: sticky; top: 18px; margin: 0 0 -24px auto; width: 40px; height: 40px; z-index: 2; border-color: var(--line-2); background: var(--card); color: var(--ink-2); box-shadow: var(--small-shadow); }
.drawer-title { margin-top: 0; }
.drawer-banner { box-shadow: var(--surface-shadow); }
.drawer-section h3 { color: var(--ink-2); }
.meta-grid div { background: var(--card); box-shadow: var(--small-shadow); }
.drawer-shots { padding: 4px 4px 12px; gap: 14px; scroll-snap-type: x proximity; }
.drawer-shots a { flex: 0 0 auto; scroll-snap-align: start; border-radius: 12px; }
.drawer-shots img { display: block; max-height: 52dvh; box-shadow: var(--small-shadow); }
.mobile-nav { visibility: hidden; }
.mobile-nav.is-open { visibility: visible; }
.mobile-nav-item.is-active { background: var(--accent-soft); color: var(--accent-ink); }
.mobile-nav-item:hover { background: var(--paper-2); }
.site-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 80; transform: translate(-50%,8px); padding: 10px 18px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); box-shadow: var(--surface-hover); pointer-events: none; opacity: 0; transition: opacity .18s, transform .18s; }
.site-toast.is-visible { opacity: 1; transform: translate(-50%,0); }

:where(a, button, [tabindex="0"]):focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.product-card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.sec h1:focus, .sec h2:focus { outline: none; }

@media (max-width: 1180px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-card { min-height: 148px; }
  .principle-item > span { display: block; }
  .principle-item small { margin-top: 4px; }
  .nav-tabs { gap: 4px; }
  .nav-tab { padding-inline: 10px; }
}
@media (max-width: 1020px) {
  .topbar { grid-template-columns: 1fr auto; height: 64px; gap: 8px; }
  .nav-tabs { display: none; }
  .mobile-menu-button { display: inline-flex; height: 36px; min-width: 36px; padding: 0; }
  .mobile-nav { display: grid; position: fixed; left: 12px; right: 12px; top: 72px; z-index: 40; padding: 10px; gap: 6px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--panel); box-shadow: var(--surface-hover); }
  .mobile-nav-item { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 14px; border-radius: 8px; }
  .sec { scroll-margin-top: 64px; }
  .scene-layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scene-layer, .scene-layer > div { min-width: 0; }
  .scene-layer strong, .scene-spine strong { width: auto; overflow-wrap: anywhere; }
  .scene-layer .layer-index { flex-shrink: 0; }
}
@media (min-width: 621px) and (max-width: 1020px) {
  .scene-layers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .product-grid { grid-template-columns: 1fr; }
  .tool-grid { grid-auto-rows: auto; }
}
@media (max-width: 620px) {
  .topbar { padding-inline: 14px; }
  .brand-mark { font-size: 18px; }
  .brand-caret { font-size: 14px; }
  .top-actions { gap: 6px; }
  .tray-option { min-width: 27px; height: 32px; padding-inline: 3px; }
  .control-tray { padding: 2px; gap: 1px; border-radius: 9px; }
  .tray-option .icon { width: 16px; height: 16px; }
  .pc-body, .note-card-body { padding: 18px; }
  .product-grid, .note-grid { gap: 22px; }
  .tool-grid { grid-template-columns: 1fr; gap: 12px; }
  .tool-card { padding: 18px; min-height: 0; gap: 12px; }
  .about-grid { gap: 16px; }
  .about-card { padding: 20px; }
  .about-card-top { gap: 10px; margin-bottom: 14px; }
  .about-index { display: none; }
  .card-actions { gap: 10px; }
  .principle-list { padding-inline: 18px; }
  .contact-grid { gap: 10px; }
  .product-card, .note-card, .tool-card, .about-card, .contact-card { box-shadow: inset 0 1px 0 var(--edge-light), var(--small-shadow); }
  .drawer-inner { padding-inline: 20px; }
  .drawer-shots img { max-width: 78vw; object-fit: contain; }
}
@media (max-width: 360px) {
  .topbar { padding-inline: 10px; gap: 4px; }
  .brand { gap: 4px; }
  .brand-mark { font-size: 16px; }
  .brand-caret { font-size: 12px; }
  .top-actions { gap: 4px; }
  .tray-option { min-width: 25px; }
  .mobile-menu-button { min-width: 32px; }
  .hero-actions .command-button { white-space: nowrap; padding-inline: 15px; font-size: 13px; }
  .hero-footnote { margin-top: 8px; justify-content: flex-start; }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .product-card:hover, .note-card:hover, .tool-card:hover, .contact-card:hover { transform: none; }
  .product-card:hover .pc-media img, .note-card:hover .note-cover img { transform: none; }
}