/* A calm content hierarchy, clear glass controls, and precise feedback. */
.site-page {
 --ease-out: cubic-bezier(.22, 1, .36, 1);
 --ink: #181818;
 --secondary-ink: #484848;
 --hairline: #18181812;
 --panel-radius: 28px;
 --pill-radius: 999px;
 --logo-radius: 16px;
 --icon-radius: 18px;
 --tool-radius: 22px;
 --shadow-control: 0 4px 12px #18181809;
 --shadow-control-hover: 0 8px 20px #18181814;
 --shadow-surface: 0 8px 24px #1818180d;
 --shadow-surface-hover: 0 14px 32px #18181816;
 --shadow-floating: 0 16px 36px #1818181a;
 -webkit-font-smoothing: antialiased;
}
.site-page :is(.floating-nav, .nav-lens, .search, .button, .brand-symbol, .app-icon, .app-card, .latest-card, .empty-state, .desktop-window, .toolbox, .about-mark, .detail-dialog) {
 --glass-edge: #ffffffd9;
 --glass-highlight: #fff;
 --glass-underside: #1818180d;
 --glass-inset: inset 0 1px 1px var(--glass-highlight), inset 0 -1px 1px var(--glass-underside);
 border-width: 1px;
 border-style: solid;
 border-color: var(--glass-edge);
}
.site-page .brand-symbol { border-radius: var(--logo-radius); box-shadow: var(--glass-inset), var(--shadow-control); }
.site-page .about-mark { box-shadow: var(--glass-inset), var(--shadow-floating); }
html { scroll-padding-top: 120px; scrollbar-gutter: stable; view-transition-name: none; overflow-x: clip; }
.site-page main { view-transition-name: page-content; }
::view-transition { pointer-events: none; clip-path: inset(var(--transition-header-bottom, 100px) 0 0); }
::view-transition-group(page-content) { animation-duration: 220ms; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
::view-transition-image-pair(page-content) { isolation: isolate; }
::view-transition-old(page-content) { animation: page-content-out 200ms ease both; mix-blend-mode: normal; }
::view-transition-new(page-content) { animation: page-content-in 220ms cubic-bezier(.22,.61,.36,1) both; mix-blend-mode: normal; }
@keyframes page-content-out { to { opacity: 0; transform: translateY(-2px); } }
@keyframes page-content-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.site-page .site-header {
 position: sticky;
 top: 0;
 z-index: 40;
 background: #ebebebf2;
 transition: background 180ms ease, box-shadow 180ms ease;
}
.site-page .site-header.scrolled {
 background: #e8e8e8f5;
 box-shadow: 0 1px 0 var(--hairline);
}
.site-page .floating-nav {
 position: relative;
 padding: 6px;
 gap: 3px;
 border-radius: var(--pill-radius);
 box-shadow: var(--glass-inset), var(--shadow-control);
 transition: box-shadow 180ms ease;
}
.site-page .nav-link {
 position: relative;
 z-index: 1;
 min-height: 44px;
 color: #525252;
 cursor: pointer;
 border-radius: var(--pill-radius);
 transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.site-page .nav-link.active { background: transparent; box-shadow: none; color: var(--ink); }
.site-page .nav-link:focus-visible {
 color: #111;
 background: transparent;
 box-shadow: none;
}
.site-page .nav-link:active { transform: none; }
.site-page .nav-lens {
 position: absolute;
 top: 6px;
 left: 6px;
 height: calc(100% - 12px);
 width: 94px;
 border-radius: var(--pill-radius);
 background: linear-gradient(130deg, #ffffffed, #ffffff8c 58%, #ffffffbf);
 box-shadow: var(--glass-inset), var(--shadow-control);
 pointer-events: none;
 visibility: hidden;
 transition: none;
}
.site-page .nav-lens.is-ready { visibility: visible; }
.site-page .floating-nav.is-navigating .nav-link,
.site-page .floating-nav .nav-link.active:hover { background: transparent; box-shadow: none; transform: none; }
.site-page .floating-nav.is-navigating .nav-link { transition: none; }
.site-page .hero-wordmark { font-weight: 600; letter-spacing: -.065em; color: #111; }
.site-page #hero-title { font-weight: 500; letter-spacing: -.04em; color: #282828; }
.site-page .hero-description { color: var(--secondary-ink); max-width: 380px; line-height: 1.9; }
.site-page .hero-actions { gap: 28px; margin-top: 30px; }
.site-page .button { min-height: 48px; border-radius: var(--pill-radius); box-shadow: var(--glass-inset), var(--shadow-control); transition: transform 180ms var(--ease-out), box-shadow 180ms ease, background 180ms ease; }
.site-page .button:hover { transform: none; box-shadow: var(--glass-inset), var(--shadow-control); }
.site-page .button svg { transition: transform 180ms var(--ease-out); }
.site-page .button:hover svg { transform: translateX(3px); }
.site-page .primary {
 color: #fff;
 --glass-edge: #ffffff24;
 --glass-highlight: #ffffff38;
 --glass-underside: #00000033;
 background: linear-gradient(155deg, #363636, #1a1a1a);
 box-shadow: var(--glass-inset), var(--shadow-control);
 --glass-shine: .12;
}
.site-page .primary:hover { background: linear-gradient(155deg, #404040, #242424); }
.site-page .button:active { transform: translateY(0); }
.site-page .text-link { display: inline-flex; align-items: center; gap: 8px; color: #4b4b4b; transition: color 160ms ease; }
.site-page .text-link span { margin: 0; transition: transform 180ms var(--ease-out); }
.site-page .text-link:hover { color: #161616; }
.site-page .text-link:hover span { transform: translate(2px, -2px); }
.site-page .hero-footnote { color: #626262; font-size: 12px; letter-spacing: .2px; }
.site-page .section-heading h2 { font-size: 32px; font-weight: 600; letter-spacing: -.035em; }
.site-page .section-heading p:last-child { color: #5a5a5a; font-size: 14px; line-height: 1.8; }
.site-page .count { background: #e9e9e960; font-size: 12px; color: #5b5b5b; font-weight: 500; }
.site-page .search {
 gap: 10px;
 padding: 11px 15px;
 min-height: 48px;
 border-radius: var(--pill-radius);
 box-shadow: var(--glass-inset), var(--shadow-control);
 transition: background 180ms ease, box-shadow 180ms ease;
}
.site-page .search:hover { background: #ffffff8c; }
.site-page .search:focus-within { background: #ffffffb0; box-shadow: var(--glass-inset), var(--shadow-control-hover); }
.site-page .search input { flex: 1; font-size: 14px; }
.site-page .search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.site-page .search svg { width: 17px; height: 17px; color: #6a6a6a; }
.site-page .search kbd { min-width: 23px; text-align: center; border-color: #18181810; color: #787878; }
.site-page .clear-search { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: #18181806; color: #646464; font-size: 21px; line-height: 1; transition: background 140ms ease, color 140ms ease; }
.site-page .clear-search:hover { background: #18181810; color: #181818; }
.site-page .app-section .section-heading { flex-wrap: wrap; margin-bottom: 28px; }
.site-page .collection-toolbar { display: flex; align-items: stretch; gap: 12px; width: min(440px, 100%); min-width: 0; }
.site-page .collection-toolbar .search { flex: 1; min-width: 0; width: auto; margin: 0; }
.site-page .collection-toolbar .search input { width: 100%; }
.site-page #category { flex: 0 1 140px; min-width: 100px; font-size: 13px; padding: 11px 14px; min-height: 48px; background: #ffffff55; transition: background 160ms ease; }
.site-page #category:hover { background: #ffffffa6; }
.site-page .result-status { font-size: 12px; color: #666; min-height: 20px; margin: -8px 0 16px; }
.site-page .app-grid { gap: 22px; }
.site-page .app-card {
 display: flex;
 flex-direction: column;
 padding: 27px;
 border-radius: var(--panel-radius);
 background: linear-gradient(145deg, #ffffffb3, #ffffff38);
 box-shadow: var(--glass-inset), var(--shadow-surface);
 transition: transform 240ms var(--ease-out), box-shadow 240ms ease, border-color 240ms ease;
 animation: card-arrive 320ms var(--ease-out) backwards;
 animation-delay: calc(var(--card-order, 0) * 35ms);
 cursor: pointer;
}
:where(html[data-view="works-all"]) .site-page .app-card { background: linear-gradient(145deg, #ffffff 0%, #f4f5f6 48%, #e1e3e5 100%); }
.site-page .app-card::before {
 content: "";
 position: absolute;
 inset: 0;
 border-radius: inherit;
 z-index: -1;
 background: radial-gradient(ellipse at var(--card-x, 50%) var(--card-y, 0%), #ffffffa6, transparent 65%);
 opacity: 0;
 pointer-events: none;
 transition: opacity 220ms ease;
}
.site-page .app-card:focus-within { border-color: #18181820; }
.site-page .app-icon { width: 54px; height: 54px; border-radius: var(--icon-radius); color: #292929; box-shadow: var(--glass-inset), var(--shadow-control); }
.site-page .app-icon svg { width: 25px; height: 25px; stroke-width: 1.5; }
.site-page .tag { border: 0; background: #18181805; color: #626262; font-size: 12px; padding: 4px 10px; }
.site-page .app-card h2 { font-size: 21px; font-weight: 600; letter-spacing: -.035em; margin: 23px 0 10px; line-height: 1.4; }
.site-page .app-card h2 button { transition: color 160ms ease; }
.site-page .app-card p { color: #565656; font-size: 14px; line-height: 1.85; min-height: 52px; margin-bottom: 21px; }
.site-page .app-meta { gap: 8px; font-size: 12px; color: #686868; }
.site-page .app-card .app-meta { margin: auto 0 20px; }
.site-page .app-meta span:first-child { color: #505050; font-weight: 500; }
.site-page .app-meta span+span::before { color: #aaa; margin-right: 8px; }
.site-page .card-bottom { border-color: var(--hairline); padding-top: 17px; gap: 10px; min-height: 58px; }
.site-page .card-bottom button { font-size: 13px; font-weight: 500; color: #484848; border-radius: var(--pill-radius); padding: 9px 10px; min-height: 38px; transition: background 160ms ease, color 160ms ease; }
.site-page .card-bottom button span { display: inline-block; transition: transform 180ms var(--ease-out); }
.site-page .card-bottom button:hover { background: #ffffff9e; color: #151515; }
.site-page .card-bottom button:hover span { transform: translate(2px, -2px); }
.site-page .card-bottom a { min-height: 38px; border-radius: var(--pill-radius); padding: 9px 12px; color: #fff; background: #282828; font-size: 12px; font-weight: 500; transition: background 160ms ease, transform 160ms ease; }
.site-page .card-bottom a:hover { background: #414141; transform: translateY(-1px); }
.site-page .card-bottom a:active { transform: none; }
.site-page .card-bottom a svg { width: 14px; height: 14px; }
.site-page .demo-label { font-size: 12px; color: #686868; }
.site-page .empty-state { border-radius: var(--panel-radius); padding: 50px 24px; background: linear-gradient(145deg, #ffffff94, #ffffff24); box-shadow: var(--glass-inset), var(--shadow-surface); }
.site-page .empty-state h3 { font-size: 22px; font-weight: 500; letter-spacing: -.03em; }
.site-page .empty-state p { font-size: 14px; color: #666; margin-top: 12px; }
.site-page .empty-state .button { margin-top: 24px; font-size: 13px; min-height: 40px; padding: 10px 18px; }
.site-page .about-copy h2 { font-weight: 550; letter-spacing: -.035em; }
.site-page .about-copy>p:last-of-type { color: #565656; font-size: 15px; line-height: 1.9; }
.site-page .site-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 24px; color: #707070; }
.site-page .footer-brand { white-space: nowrap; }
.site-page .footer-meta { justify-self: end; text-align: right; min-width: 0; width: auto; order: initial; }
.site-page #copyright { white-space: nowrap; }
.site-page #icp { display: block; margin-top: 6px; overflow-wrap: anywhere; }
.site-page .detail-dialog { position: fixed; inset: 0; margin: auto; width: min(640px, calc(100% - 32px)); padding: 34px; overflow: auto; overscroll-behavior: contain; border-radius: var(--panel-radius); box-shadow: var(--glass-inset), var(--shadow-floating); }
.site-page .detail-dialog[open] { animation: dialog-arrive 220ms var(--ease-out) both; }
.site-page .detail-dialog::backdrop { background: #1818182b; backdrop-filter: blur(5px); animation: backdrop-arrive 180ms ease both; }
.site-page .detail-dialog.is-closing { animation: dialog-leave 160ms ease both; }
.site-page .detail-dialog.is-closing::backdrop { animation: backdrop-leave 160ms ease both; }
.site-page .dialog-close { z-index: 1; width: 34px; height: 34px; top: 18px; right: 18px; background: #18181805; font-size: 23px; border: 0; transition: background 160ms ease, transform 160ms ease; }
.site-page .dialog-close:hover { background: #1818180d; transform: none; }
.site-page .detail-heading { display: flex; align-items: flex-start; gap: 20px; padding-right: 25px; }
.site-page .detail-heading .app-icon { flex-shrink: 0; width: 64px; height: 64px; border-radius: var(--icon-radius); }
.site-page .detail-heading h2 { font-size: 25px; font-weight: 600; line-height: 1.4; margin: 3px 0 0; letter-spacing: -.035em; overflow-wrap: anywhere; }
.site-page .detail-channel { font-size: 12px; color: #686868; }
.site-page .detail-heading .app-meta { margin: 12px 0 0; }
.site-page .source-credit { margin-top: 24px; font-size: 13px; }
.site-page .detail-section-heading { font-size: 13px; font-weight: 600; margin-top: 32px; color: #303030; }
.site-page .detail-description { margin: 12px 0 24px; font-size: 15px; color: #505050; line-height: 1.9; }
.site-page .detail-actions { margin-top: 16px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.site-page .detail-actions .button { margin-top: 0; font-size: 13px; max-width: 100%; }
.site-page .loading-state { grid-column: 1/-1; min-height: 275px; display: grid; place-items: center; color: #747474; font-size: 14px; }
@media (hover:hover) and (pointer:fine) {
 .site-page .floating-nav:hover { box-shadow: var(--glass-inset), var(--shadow-control-hover); }
 .site-page .button:hover { transform: translateY(-2px); box-shadow: var(--glass-inset), var(--shadow-control-hover); }
 .site-page .button:active { transform: translateY(0); }
 .site-page .nav-link:hover {
  color: #111;
  background: linear-gradient(145deg, #fffffffa, #ffffffb8);
  box-shadow: var(--glass-inset), var(--shadow-control-hover);
  transform: none;
 }
 .site-page .nav-link:active { transform: none; }
 .site-page .app-card:hover { transform: translateY(-3px); border-color: #ffffff; box-shadow: var(--glass-inset), var(--shadow-surface-hover); }
 .site-page .app-card:hover::before { opacity: .75; }
 .site-page .app-card:hover .app-icon { transform: translateY(-1px); }
 .site-page .app-icon { transition: transform 220ms var(--ease-out); }
}
@keyframes card-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes dialog-leave { to { opacity: 0; transform: translateY(5px) scale(.985); } }
@keyframes backdrop-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-leave { to { opacity: 0; } }
@media (max-width:1050px) {
 .site-page .app-grid { gap: 18px; }
 .site-page .app-card { padding: 23px; }
}
@media (max-width:760px) {
 html { scroll-padding-top: 110px; }
 .site-page .site-header { min-height: 80px; padding-top: 12px; padding-bottom: 12px; }
 .site-page .floating-nav { padding: 4px; }
 .site-page .nav-link { min-height: 40px; }
 .site-page .nav-lens { top: 4px; height: calc(100% - 8px); }
 .site-page .section-heading h2 { font-size: 29px; }
 .site-page .search { margin-top: 24px; }
 .site-page .search input { font-size: 16px; }
 .site-page .app-grid { gap: 18px; }
}
@media (max-width:480px) {
 .site-page .site-header { padding: 12px 20px; gap: 10px; min-height: 76px; }
 .site-page .floating-nav { gap: 0; }
 .site-page .nav-link { padding: 9px 10px; font-size: 12px; }
 .site-page .hero-actions { gap: 23px; }
 .site-page .hero-actions .button { gap: 17px; padding: 14px 19px; font-size: 14px; }
 .site-page .text-link { font-size: 13px; }
 .site-page #category { flex-basis: 110px; padding: 11px 12px; }
 .site-page .app-card { padding: 25px; }
 .site-page .app-card h2 { font-size: 22px; }
 .site-page .app-card p { min-height: 0; }
 .site-page .empty-state { padding: 44px 18px; }
 .site-page .empty-state h3 { font-size: 21px; }
 .site-page .detail-dialog { padding: 28px 24px; }
 .site-page .detail-heading { gap: 15px; padding-right: 15px; flex-direction: column; }
 .site-page .detail-heading h2 { font-size: 24px; }
 .site-page .detail-heading .app-icon { width: 56px; height: 56px; }
}



/* Separate destinations: a quiet home, an expansive gallery, a personal page. */
html:not([data-view="works"]) #featured-works,
html[data-view="works"] :is(.hero, #apps, #about),
html[data-view="home"] #apps,
html[data-view="home"] #about,
html:is([data-view="works-all"], [data-view="share"]) .hero,
html:is([data-view="works-all"], [data-view="share"]) #about,
html[data-view="about"] .hero,
html[data-view="about"] #apps,
html:not([data-view="home"]) .ambient,
html:not([data-view="home"]) .home-latest { display: none; }
.site-page { min-height: 100svh; min-width: 0; display: flex; flex-direction: column; }
.site-page { overflow-x: clip; }
.site-page.has-navigated .hero-copy,
.site-page.has-navigated .desktop-window,
.site-page.has-navigated .app-card { animation: none; }
.site-page.has-navigated :is(.about-section, .about-reveal).reveal { opacity: 1; transform: none; transition: none; }
.site-page main { flex: 1; }
.site-page .featured-section { width: min(1312px, 100%); padding: 62px clamp(24px, 4vw, 64px) 76px; }
.site-page .featured-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; margin-bottom: 36px; }
.site-page .featured-heading h1 { grid-column: 1; grid-row: 1; margin: 0 0 14px; font-size: clamp(34px, 4vw, 46px); font-weight: 600; letter-spacing: -.045em; }
.site-page .featured-heading > p:last-child { grid-column: 1/-1; color: #5a5a5a; font-size: 15px; line-height: 1.8; }
.site-page .featured-heading .featured-browse-link { grid-column: 2; grid-row: 1; align-self: center; min-height: 44px; padding: 11px 22px; font-size: 14px; white-space: nowrap; }
.site-page .featured-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.site-page .featured-work { display: flex; flex-direction: column; min-width: 0; }
.site-page .featured-lead { grid-column: 1/-1; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: center; gap: clamp(36px, 4vw, 56px); padding: 18px 0 24px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.site-page .featured-visual { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; aspect-ratio: 16/10; padding: 22px; overflow: hidden; border: 1px solid #ffffffc9; border-radius: 24px; background: linear-gradient(145deg, #e3e7eb, #f0f1f3); box-shadow: inset 0 1px 0 #fff; }
.site-page .featured-visual > img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 24px #3138461a; transition: transform 300ms var(--ease-out); }
.site-page .featured-preview-stack { position: relative; min-width: 0; width: calc(100% + 40px); margin-left: -20px; aspect-ratio: 1.3; }
.site-page .featured-preview-stack .featured-visual { position: absolute; padding: 0; border: 0; border-radius: 12px; background: none; overflow: visible; box-shadow: none; }
.site-page .featured-preview-stack .featured-visual > img { box-shadow: 0 18px 34px #30384622, 0 2px 5px #3038460c; }
.site-page .featured-preview-stack .featured-visual:nth-child(1) { top: 2%; left: 2%; width: 78%; transform: rotate(-2deg); z-index: 1; }
.site-page .featured-preview-stack .featured-visual:nth-child(2) { bottom: 0; left: 1%; width: 53%; transform: rotate(-5deg); z-index: 2; }
.site-page .featured-preview-stack .featured-visual:nth-child(3) { bottom: 7%; right: 0; width: 53%; transform: rotate(4deg); z-index: 3; }
.site-page .featured-preview-stack[data-preview-count="1"] { aspect-ratio: 16/10; }
.site-page .featured-preview-stack[data-preview-count="1"] .featured-visual { inset: 0; width: 100%; transform: rotate(-2deg); padding: 0; border-radius: 12px; }
.site-page .featured-preview-stack[data-preview-count="2"] { aspect-ratio: 1.5; }
.site-page .featured-preview-stack[data-preview-count="2"] .featured-visual:nth-child(2) { left: auto; right: 0; width: 58%; transform: rotate(4deg); }
.site-page .featured-preview-stack .featured-visual:focus-visible { z-index: 4; }
.site-page .featured-copy { display: flex; flex-direction: column; min-width: 0; padding: 22px 4px 0; }
.site-page .featured-lead .featured-copy { padding: 10px 4px; }
.site-page .featured-identity { display: flex; align-items: center; gap: 14px; }
.site-page .featured-identity .app-icon { width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0; }
.site-page .featured-work h2 { margin: 17px 0 12px; font-size: 25px; font-weight: 600; letter-spacing: -.035em; overflow-wrap: anywhere; }
.site-page .featured-lead h2 { font-size: clamp(27px, 3vw, 36px); line-height: 1.3; }
.site-page .featured-work h2 button { padding: 0; background: none; font: inherit; text-align: left; }
.site-page .featured-description { margin-bottom: 18px; color: #565656; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.site-page .featured-actions { flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: 22px; border: 0; padding: 0; }
.site-page .featured-actions .featured-detail-button { display: inline-flex; align-items: center; gap: 12px; min-height: 38px; padding: 8px 17px; color: #303030; background: #ffffff85; border: 1px solid #38383830; box-shadow: inset 0 1px 1px #ffffffc7; font-weight: 550; }
.site-page .featured-actions .featured-detail-button:hover { background: #ffffffc7; border-color: #38383850; }
.site-page .featured-fallback-icon { display: grid; place-items: center; width: clamp(90px, 12vw, 140px); aspect-ratio: 1; border-radius: 28%; background: #ffffffb5; box-shadow: inset 0 1px 1px #fff, 0 22px 45px #30364015; }
.site-page .featured-fallback-icon :is(img, svg) { display: block; width: 75%; height: 75%; object-fit: contain; border-radius: 22%; }
.site-page .featured-fallback-icon svg { width: 48%; height: 48%; }
.site-page .featured-empty { grid-column: 1/-1; padding: 48px 0; }
.site-page .featured-empty h2 { margin-bottom: 12px; font-size: 26px; font-weight: 550; }
.site-page .featured-empty p { color: #666; font-size: 15px; }
.site-page .featured-empty .button { margin-top: 18px; }
.site-page .works-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; color: #626262; font-size: 13px; }
.site-page .works-breadcrumb a { padding: 3px 0; text-underline-offset: 4px; }
.site-page .works-breadcrumb a:hover { color: #242424; text-decoration: underline; }
.site-page .works-breadcrumb [aria-current="page"] { color: #303030; }
@media (hover:hover) and (pointer:fine) { .site-page .featured-visual:hover > img { transform: translateY(-3px) scale(1.015); } }
@media (max-width:760px) {
 .site-page .featured-section { padding: 44px 24px 56px; }
 .site-page .featured-heading { column-gap: 12px; margin-bottom: 28px; }
 .site-page .featured-heading .featured-browse-link { padding: 10px 14px; font-size: 12px; }
 .site-page .featured-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
 .site-page .featured-lead { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 6px 0 12px; border-radius: 0; }
 .site-page .featured-preview-stack { width: 100%; margin-left: 0; }
 .site-page .featured-visual { padding: 16px; border-radius: 20px; }
 .site-page .featured-lead .featured-copy { padding: 22px 4px 6px; }
 .site-page .featured-work h2 { font-size: 25px; }
}
@media (prefers-reduced-motion:reduce) { .site-page .featured-visual > img { transition: none; transform: none; } }
.site-page .site-header { width: 100%; padding-left: max(clamp(24px, 4vw, 64px), calc((100% - 1312px) / 2)); padding-right: max(clamp(24px, 4vw, 64px), calc((100% - 1312px) / 2)); }
.site-page .nav-link { padding-left: 17px; padding-right: 17px; }
.site-page .site-footer { width: min(1312px, calc(100% - 96px)); padding-top: 24px; padding-bottom: 28px; }
html[data-view="home"] .hero {
 width: min(1440px, 100%);
 min-height: max(540px, calc(100svh - 265px));
 grid-template-columns: .95fr 1.05fr;
 gap: 30px;
 padding: 50px clamp(24px, 4vw, 64px) 58px;
}
html[data-view="home"] .hero-wordmark { font-size: clamp(68px, 7.1vw, 108px); }
html[data-view="home"] .glass-scene { height: clamp(400px, 35vw, 520px); }
html[data-view="home"] .hero-actions { margin-top: 30px; }
.site-page .desktop-window {
 --glass-shine: .08;
 --glass-edge: #ffffff59;
 --glass-highlight: #ffffff40;
 --glass-underside: #00000033;
 border-radius: var(--panel-radius);
 color: #fafafa;
 background: linear-gradient(135deg, #282828eb, #2e2e2ed4 55%, #161616e8);
 box-shadow: var(--glass-inset), var(--shadow-floating);
}
.site-page .window-refraction { opacity: .07; }
.site-page .window-titlebar { border-color: #ffffff18; color: #e4e4e4; }
.site-page .window-dots i { background: #ffffff55; box-shadow: inset 0 1px 0 #ffffff40; }
.site-page .window-sidebar { color: #e0e0e0; border-color: #ffffff13; }
.site-page .window-sidebar .mini-selected { background: #ffffff14; color: #fff; box-shadow: inset 0 1px 0 #ffffff26, 0 3px 8px #0000000a; }
.site-page .window-label, .site-page .window-workspace p, .site-page .window-status { color: #e9e9e9; }
.site-page .window-workspace strong { color: #fff; font-weight: 550; }
.site-page .window-status .status-dot { background: #d9d9d9; box-shadow: 0 0 0 4px #ffffff0a; }
.site-page .window-status>span:last-child { color: #bcbcbc; }
.site-page .typing-caret { background: #e8e8e8; }
.site-page .creative-lines span { background: #ffffff21; }
.site-page .toolbox {
 scale: .9;
 transform-origin: right bottom;
 --glass-shine: .08;
 --glass-edge: #ffffff59;
 --glass-highlight: #ffffff40;
 --glass-underside: #00000033;
 border-radius: var(--tool-radius);
 background: linear-gradient(140deg, #2a2a2ae8, #1f1f1fdb);
 box-shadow: var(--glass-inset), var(--shadow-floating);
}
.site-page .toolbox-heading { color: #e6e6e6; font-size: 13.3px; }
.site-page .liquid-ribbon { opacity: .52; }
.site-page .toolbox-icons span { color: #f5f5f5; background: linear-gradient(145deg, #ffffff18, #ffffff06); box-shadow: inset 0 1px 0 #ffffff30, inset 0 -1px 0 #00000030; }
/* An icon-led decorative scene, without content categories or interface copy. */
.site-page .icon-board { top: 16%; }
.site-page .icon-board .window-refraction { opacity: .035; }
.site-page .icon-composition { position: relative; height: 310px; overflow: hidden; border-radius: inherit; }
.site-page .coding-texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; font-family: Consolas, "SFMono-Regular", Menlo, monospace; }
.site-page .code-fragment { position: absolute; font-size: 10px; line-height: 1.65; letter-spacing: .1px; color: #ffffff40; }
.site-page .code-fragment-top { left: 7%; top: 5%; }
.site-page .code-fragment-bottom { left: 42%; bottom: 9%; }
.site-page .code-row { display: flex; gap: 13px; align-items: baseline; }
.site-page .code-row code { font: inherit; white-space: pre; }
.site-page .code-line-number { color: #ffffff24; font-size: .85em; font-variant-numeric: tabular-nums; }
.site-page .code-keyword { color: #ffffff59; }
.site-page .code-punctuation { color: #ffffff4a; }
.site-page .code-value { color: #ffffff30; }
.site-page .coding-symbol { position: absolute; color: #ffffff48; font-size: 29px; line-height: 1; font-weight: 400; letter-spacing: -.06em; }
.site-page .coding-symbol-terminal { right: 35%; top: 7%; font-size: 24px; }
.site-page .coding-symbol-tag { left: 7%; top: 51%; transform: rotate(-9deg); }
.site-page .coding-symbol-braces { right: 10%; top: 41%; transform: rotate(8deg); }
.site-page .icon-orbit, .site-page .composition-dot { z-index: 1; }
.site-page .composition-tile { z-index: 2; }
.site-page .icon-orbit { position: absolute; left: 50%; top: 49%; border: 1px solid #ffffff16; border-radius: 50%; pointer-events: none; }
.site-page .icon-orbit-wide { width: 74%; height: 49%; transform: translate(-50%, -50%) rotate(-23deg); }
.site-page .icon-orbit-inner { width: 46%; height: 68%; transform: translate(-50%, -50%) rotate(32deg); border-color: #ffffff09; }
.site-page .composition-tile { position: absolute; display: grid; place-items: center; border: 1px solid #ffffff30; border-radius: 18px; color: #dedede; background: linear-gradient(145deg, #ffffff17, #ffffff04); box-shadow: inset 0 1px 0 #ffffff26, 0 10px 24px #00000018; }
.site-page .composition-tile svg { width: 31px; height: 31px; stroke-width: 1.3; }
.site-page .tile-main { left: 49%; top: 48%; width: 112px; height: 112px; border-radius: 30px; transform: translate(-50%, -50%) rotate(9deg); color: #505050; background: linear-gradient(145deg, #f1f1f1, #bdbdbd); border-color: #ffffffa8; box-shadow: inset 1px 1px 2px #fff, inset -1px -1px 2px #62626230, 0 20px 40px #00000030; }
.site-page .tile-main svg { width: 57px; height: 57px; fill: #ffffff10; stroke-width: 1.4; }
.site-page .composition-tile>img { display: block; width: 83%; height: 83%; object-fit: contain; }
.site-page .composition-tile.has-work-icon { background: linear-gradient(145deg, #ffffff1a, #ffffff05); }
.site-page .tile-main.has-work-icon { background: linear-gradient(145deg, #fafafa, #d5d5d5); }
.site-page .scene-avatar { position: absolute; left: 12%; bottom: -74px; z-index: 2; width: 156px; height: 156px; border-radius: 50%; transform: rotate(5deg); filter: drop-shadow(0 14px 18px #00000022); pointer-events: none; }
.site-page .scene-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.site-page .tile-layers { left: 13%; top: 22%; width: 63px; height: 63px; transform: rotate(-11deg); }
.site-page .tile-spark { right: 14%; top: 15%; width: 53px; height: 53px; transform: rotate(12deg); }
.site-page .tile-share { right: 20%; bottom: 28%; width: 58px; height: 58px; transform: rotate(-7deg); }
.site-page .composition-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffffff70; box-shadow: 0 0 10px #ffffff16; }
.site-page .composition-dot-one { left: 23%; bottom: 22%; }
.site-page .composition-dot-two { right: 31%; top: 18%; width: 3px; height: 3px; background: #ffffff45; }
.site-page .icon-dock { width: 254px; right: -1%; bottom: 9%; padding: 18px; }
.site-page .dock-icons { display: flex; justify-content: space-between; gap: 10px; }
.site-page .dock-icons>span { width: 45px; height: 45px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; border: 1px solid #ffffff17; background: linear-gradient(145deg, #ffffff13, #ffffff04); box-shadow: inset 0 1px 0 #ffffff15; color: #d4d4d4; }
.site-page .dock-icons>span:first-child { color: #fafafa; background: linear-gradient(145deg, #ffffff27, #ffffff0c); border-color: #ffffff27; }
.site-page .dock-icons svg { width: 23px; height: 23px; stroke-width: 1.4; }
@media (min-width:761px) and (max-width:1050px) {
 .site-page .icon-board { top: 18%; }
 .site-page .icon-composition { height: 290px; }
 .site-page .code-fragment { font-size: 9px; }
 .site-page .scene-avatar { width: 136px; height: 136px; bottom: -64px; }
 .site-page .tile-main { width: 100px; height: 100px; border-radius: 27px; }
 .site-page .tile-layers { left: 10%; width: 55px; height: 55px; }
 .site-page .tile-spark { right: 10%; width: 48px; height: 48px; }
 .site-page .tile-share { right: 17%; width: 51px; height: 51px; }
 .site-page .icon-dock { bottom: 5%; }
}
@media (max-width:760px) {
 .site-page .icon-board { top: 14%; }
 .site-page .icon-composition { height: 280px; }
 .site-page .scene-avatar { width: 128px; height: 128px; bottom: -60px; }
 .site-page .icon-dock { bottom: 3%; right: 0; }
}
@media (max-width:480px) {
 .site-page .icon-board { top: 13%; }
 .site-page .icon-composition { height: 250px; }
 .site-page .code-fragment { font-size: 8px; letter-spacing: 0; line-height: 1.7; }
 .site-page .code-row { gap: 8px; }
 .site-page .code-fragment-bottom { left: 58%; }
 .site-page .code-fragment-bottom .code-row { gap: 6px; }
 .site-page .coding-symbol { font-size: 21px; }
 .site-page .coding-symbol-terminal { right: 25%; top: 5%; font-size: 18px; }
 .site-page .coding-symbol-braces { right: 7%; font-size: 18px; }
 .site-page .scene-avatar { left: 10%; width: 110px; height: 110px; bottom: -52px; }
 .site-page .tile-main { width: 91px; height: 91px; border-radius: 25px; }
 .site-page .tile-main svg { width: 47px; height: 47px; }
 .site-page .tile-layers { left: 10%; width: 48px; height: 48px; border-radius: 15px; }
 .site-page .tile-spark { right: 11%; width: 43px; height: 43px; border-radius: 14px; }
 .site-page .tile-share { right: 17%; bottom: 27%; width: 46px; height: 46px; border-radius: 15px; }
 .site-page .composition-tile:not(.tile-main) svg { width: 26px; height: 26px; }
 .site-page .icon-dock { width: 227px; bottom: 0; padding: 15px; }
 .site-page .dock-icons>span { width: 40px; height: 40px; border-radius: 12px; }
 .site-page .dock-icons svg { width: 21px; height: 21px; }
}
html:is([data-view="works-all"], [data-view="share"]) .app-section {
 width: 100%;
 padding: 62px clamp(24px, 4vw, 64px) 88px;
}
html:is([data-view="works-all"], [data-view="share"]) .app-section::before { display: none; }
.site-page .section-heading h1 { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; font-size: 40px; font-weight: 600; letter-spacing: -.04em; }
html:is([data-view="works-all"], [data-view="share"]) .section-heading p:last-child { margin-top: 14px; font-size: 15px; }
html:is([data-view="works-all"], [data-view="share"]) .app-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 22px; }
html:is([data-view="works-all"], [data-view="share"]) .app-card { min-height: 355px; min-width: 0; padding: 24px; }
html:is([data-view="works-all"], [data-view="share"]) .app-card .app-icon { width: 62px; height: 62px; }
html:is([data-view="works-all"], [data-view="share"]) .app-card .app-icon svg { width: 29px; height: 29px; }
html:is([data-view="works-all"], [data-view="share"]) .app-card h2 { font-size: 23px; margin-top: 26px; }
html:is([data-view="works-all"], [data-view="share"]) .app-card p { font-size: 15px; line-height: 1.85; margin-bottom: 27px; }
html:is([data-view="works-all"], [data-view="share"]) .empty-state { min-height: 330px; }
html[data-view="about"] .about-page { width: min(1120px, 100%); margin: auto; padding: 0 56px; }
html[data-view="about"] .about-section {
 width: 100%;
 min-height: 470px;
 padding: 70px 0 80px;
 margin: auto;
 gap: 86px;
 align-items: center;
}
html[data-view="about"] .about-section::before { display: none; }
html[data-view="about"] .about-mark { width: 218px; height: 238px; border-radius: 58px; font-size: 142px; }
html[data-view="about"] .about-mark span { top: 22px; right: 28px; font-size: 35px; }
html[data-view="about"] .about-copy { max-width: 610px; }
.site-page .about-copy h1 { font-size: 43px; font-weight: 550; line-height: 1.4; letter-spacing: -.035em; margin: 20px 0 24px; }
html[data-view="about"] .about-copy>p:last-of-type { font-size: 16px; line-height: 1.95; white-space: pre-line; overflow-wrap: anywhere; }
.site-page .about-browse { margin-top: 30px; font-size: 14px; }
.site-page .about-detail { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; padding: 64px 0; border-top: 1px solid var(--hairline); }
.site-page .about-section-heading h2, .site-page .about-closing h2 { margin: 17px 0 18px; font-size: 29px; line-height: 1.5; font-weight: 550; letter-spacing: -.035em; }
.site-page .about-section-heading>p:last-child, .site-page .about-closing>div>p:last-child { max-width: 330px; color: #565656; font-size: 14px; line-height: 1.95; }
.site-page .about-principles { list-style: none; padding: 0; margin: 0; }
.site-page .about-principles li { display: grid; grid-template-columns: 30px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--hairline); }
.site-page .about-principles li:first-child { padding-top: 0; }
.site-page .about-principles li:last-child { padding-bottom: 0; border-bottom: 0; }
.site-page .about-number { color: #767676; font-size: 12px; line-height: 28px; font-variant-numeric: tabular-nums; }
.site-page :is(.about-principles, .about-destination, .about-contact) h3 { font-size: 17px; line-height: 1.65; font-weight: 550; }
.site-page :is(.about-principles, .about-destination, .about-contact) p { margin-top: 9px; color: #565656; font-size: 14px; line-height: 1.95; }
.site-page .about-destination { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.site-page .about-destination:first-child { padding-top: 0; }
.site-page .about-destination:last-child { padding-bottom: 0; border-bottom: 0; }
.site-page .about-destination-action { display: inline-block; margin-top: 15px; font-size: 13px; color: #444; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #b5b5b5; }
.site-page .about-destination-arrow { flex-shrink: 0; font-size: 27px; color: #555; transition: transform 220ms var(--ease-out); }
.site-page .about-closing { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding: 52px 0 66px; border-top: 1px solid var(--hairline); }
.site-page .about-closing>div:first-child { grid-column: 1/-1; }
.site-page .about-closing>div:first-child>p:last-child { max-width: 570px; }
.site-page .about-closing:has(.about-contact:not([hidden]))>div:first-child { grid-column: auto; }
.site-page .about-contact:not([hidden]) { align-self: center; }
.site-page .about-contact .contact-links { flex-wrap: wrap; gap: 24px; margin-top: 22px; }
@media (hover:hover) and (pointer:fine) {
 .site-page .about-destination:hover .about-destination-arrow { transform: translate(3px, -3px); }
 .site-page .about-destination:hover .about-destination-action { text-decoration-color: #444; }
}
.site-page .home-latest { width: min(1440px, 100%); padding: 26px clamp(24px, 4vw, 64px) 76px; }
.site-page .latest-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.site-page .latest-heading h2 { font-size: 27px; font-weight: 550; letter-spacing: -.035em; }
.site-page .latest-links { display: flex; align-items: center; gap: 28px; }
.site-page .latest-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.site-page .latest-card { padding: 18px 28px; border-radius: var(--panel-radius); background: linear-gradient(145deg, #ffffff9c, #ffffff35); box-shadow: var(--glass-inset), var(--shadow-surface); cursor: pointer; transition: transform 240ms var(--ease-out), background 180ms ease, box-shadow 240ms ease; }
.site-page .latest-card-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-page .latest-channel { font-size: 12px; color: #616161; }
.site-page .latest-card-copy { margin: 22px 0 24px; }
.site-page .latest-card h3 { font-size: 22px; font-weight: 550; letter-spacing: -.035em; }
.site-page .latest-card h3 button { text-align: left; }
.site-page .latest-card-copy>p { color: #555; font-size: 14px; line-height: 1.85; margin-top: 10px; }
.site-page .latest-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--hairline); padding-top: 17px; }
.site-page .latest-card-bottom button { font-size: 13px; white-space: nowrap; color: #454545; }
.site-page .latest-card button { background: none; padding: 0; }
.site-page .latest-card { grid-column: 1/-1; display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 30px; min-height: 120px; }
.site-page .latest-card .latest-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
.site-page .latest-card .app-icon { width: 48px; height: 48px; }
.site-page .latest-card .latest-card-copy { margin: 0; }
.site-page .latest-card .latest-card-bottom { border: 0; padding: 0; flex-direction: column; align-items: flex-end; gap: 10px; }
.site-page .latest-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.site-page .latest-meta .app-meta { margin: 0; justify-content: flex-end; }
.site-page .latest-updated { color: #616161; font-size: 12px; white-space: nowrap; }
.site-page .latest-card-copy { min-width: 0; overflow-wrap: anywhere; }
.site-page .latest-empty { grid-column: 1/-1; color: #626262; font-size: 14px; line-height: 1.8; padding: 22px 0 12px; }
.site-page .latest-empty button { margin-left: 15px; background: none; }
@media (hover:hover) and (pointer:fine) {
 .site-page .latest-card:hover { transform: translateY(-3px); background: linear-gradient(145deg, #ffffffcb, #ffffff60); box-shadow: var(--glass-inset), var(--shadow-surface-hover); }
}
@media (max-width:1050px) {
 html[data-view="home"] .hero { gap: 18px; }
 html[data-view="home"] .hero-wordmark { font-size: clamp(60px, 7.4vw, 78px); }
 html[data-view="home"] .glass-scene { height: 415px; }
 html[data-view="about"] .about-page { padding: 0 40px; }
 html[data-view="about"] .about-section { padding: 65px 0 75px; gap: 60px; }
 .site-page .about-detail, .site-page .about-closing { gap: 50px; }
 html[data-view="about"] .about-mark { width: 180px; height: 195px; font-size: 112px; }
 .site-page .about-copy h1 { font-size: 36px; }
}
@media (max-width:760px) {
 .site-page .site-header { padding: 12px 24px; }
 .site-page .nav-link { padding: 9px 11px; }
 .site-page .site-footer { width: calc(100% - 48px); }
 html[data-view="home"] .hero { min-height: 0; display: block; padding: 55px 24px 42px; }
 html[data-view="home"] .hero-wordmark { font-size: clamp(65px, 15vw, 94px); }
 html[data-view="home"] .glass-scene { height: 385px; margin-top: 46px; }
 html[data-view="home"] .hero-actions { margin-top: 28px; }
 .site-page .home-latest { padding: 16px 24px 56px; }
 .site-page .latest-heading { align-items: flex-start; gap: 18px; }
 .site-page .latest-heading h2 { font-size: 25px; }
 .site-page .latest-links { gap: 18px; }
 .site-page .latest-grid { grid-template-columns: 1fr; gap: 18px; }
 .site-page .latest-card { display: block; }
 .site-page .latest-card .latest-card-head { flex-direction: row; align-items: center; }
 .site-page .latest-card .latest-card-copy { margin: 14px 0 16px; }
 .site-page .latest-card .latest-card-bottom { flex-direction: row; align-items: center; border-top: 1px solid var(--hairline); padding-top: 12px; }
 .site-page .latest-meta { align-items: flex-start; min-width: 0; }
 .site-page .latest-meta .app-meta { justify-content: flex-start; }
 html:is([data-view="works-all"], [data-view="share"]) .app-section { padding: 44px 24px 66px; }
 .site-page .section-heading h1 { font-size: 33px; }
 html:is([data-view="works-all"], [data-view="share"]) .app-card { min-height: 340px; padding: 24px; }
 html:is([data-view="works-all"], [data-view="share"]) .app-card h2 { font-size: 22px; }
 html[data-view="about"] .about-page { padding: 0 28px; }
 html[data-view="about"] .about-section { min-height: 0; padding: 54px 0 60px; gap: 42px; }
 .site-page .about-detail, .site-page .about-closing { grid-template-columns: 1fr; gap: 32px; padding: 40px 0; }
 .site-page .about-section-heading h2, .site-page .about-closing h2 { font-size: 25px; margin-top: 13px; margin-bottom: 13px; }
 .site-page .about-section-heading>p:last-child { max-width: 480px; }
 .site-page .about-principles li { gap: 16px; }
 html[data-view="about"] .about-mark { width: 130px; height: 140px; font-size: 89px; border-radius: 38px; }
 html[data-view="about"] .about-mark span { top: 10px; right: 16px; font-size: 26px; }
}
@media (max-width:480px) {
 .site-page .site-header { padding: 12px 20px; gap: 8px; }
 .site-page .nav-link { padding: 9px 7px; font-size: 12px; }
 html[data-view="home"] .hero { padding-top: 40px; }
 html[data-view="home"] .hero-wordmark { font-size: clamp(56px, 17vw, 78px); }
 html[data-view="home"] .glass-scene { height: 480px; margin-top: 44px; }
 .site-page .latest-heading { flex-direction: column; gap: 12px; margin-bottom: 22px; }
 .site-page .latest-card { padding: 20px; }
 html:is([data-view="works-all"], [data-view="share"]) .app-card { padding: 24px; min-height: 340px; }
 html:is([data-view="works-all"], [data-view="share"]) .app-card .app-icon { width: 58px; height: 58px; }
 html:is([data-view="works-all"], [data-view="share"]) .app-card p { min-height: 48px; }
 html[data-view="about"] .about-section { display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
 html[data-view="about"] .about-mark { width: 110px; height: 118px; font-size: 74px; border-radius: 33px; }
 html[data-view="about"] .about-copy { min-width: 0; }
 .site-page .about-copy h1 { font-size: 33px; }
}
@media (max-width:360px) {
 .site-page .site-header { padding-left: 12px; padding-right: 12px; gap: 6px; }
 .site-page .brand strong { font-size: 16px; }
 .site-page .floating-nav { padding: 3px; }
 .site-page .nav-link { padding-left: 5px; padding-right: 5px; min-height: 38px; }
 .site-page .nav-lens { top: 3px; height: calc(100% - 6px); }
}

@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
 .site-page .site-header.scrolled, .site-page .app-card, .site-page .latest-card, .site-page .empty-state, .site-page .detail-dialog { background: #fafafa; }
 .site-page .detail-description, .site-page .app-card p, .site-page .app-meta { color: #383838; }
}
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
 .site-page .desktop-window, .site-page .toolbox { background: #282828; }
}
@media (prefers-reduced-motion:reduce) {
 html { scroll-behavior: auto; }
 .site-page *, .site-page *::before, .site-page *::after { animation: none !important; transition: none !important; }
 .site-page .app-card:hover, .site-page .app-card:hover .app-icon, .site-page .latest-card:hover, .site-page .button:hover, .site-page .button:active, .site-page .button:hover svg, .site-page .text-link:hover span, .site-page .card-bottom a:hover, .site-page .card-bottom button:hover span, .site-page .nav-link:hover, .site-page .nav-link:active, .site-page .about-destination:hover .about-destination-arrow { transform: none; }
 ::view-transition-group(page-content), ::view-transition-old(page-content), ::view-transition-new(page-content) { animation: none; }
}

/* Real icons on cards; screenshots belong to the detail gallery. */
.site-page .app-icon.real-icon { background: transparent; box-shadow: none; }
.site-page .app-icon img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.site-page .app-card-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.site-page .detail-gallery { margin: 22px 0 24px; }
.site-page .detail-gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.site-page .detail-gallery-heading h3 { font-size: 14px; font-weight: 600; }
.site-page .detail-gallery-heading>span { font-size: 12px; color: #666; }
.site-page .detail-thumbnails { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3); gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; padding: 3px 0 10px; scrollbar-width: thin; scrollbar-color: #77777755 transparent; }
.site-page .detail-thumbnail { min-width: 0; padding: 0; background: transparent; text-align: left; border-radius: 12px; }
.site-page .detail-thumbnail img { width: 100%; height: 100px; object-fit: contain; display: block; border-radius: 12px; background: #dedee533; transition: background 180ms ease; }
.site-page .detail-thumbnail>span { display: flex; justify-content: space-between; padding: 9px 3px 0; font-size: 11px; color: #666; }
.site-page .detail-thumbnail:hover img { background: #dedee566; }
.site-page .image-dialog { border: 0; padding: 20px 24px; margin: auto; width: min(1280px, calc(100% - 40px)); max-width: calc(100% - 40px); max-height: 94svh; background: #222225f5; color: #fafafa; border-radius: 20px; box-shadow: 0 25px 90px #00000040; }
.site-page .image-dialog::backdrop { background: #141417bf; backdrop-filter: blur(8px); }
.site-page .image-dialog[open] { animation: dialog-arrive 180ms var(--ease-out) both; }
.site-page .image-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 14px; }
.site-page .image-toolbar p { font-size: 14px; overflow-wrap: anywhere; }
.site-page .image-toolbar button { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #ffffff12; color: #fff; font-size: 27px; }
.site-page .image-stage { display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 120px; }
.site-page .image-stage img { display: block; max-width: calc(100% - 112px); max-height: calc(94svh - 140px); object-fit: contain; border-radius: 6px; }
.site-page .image-stage:has(.image-step[hidden]) img { max-width: 100%; }
.site-page .image-step { flex-shrink: 0; width: 40px; height: 48px; border-radius: 12px; background: #ffffff12; color: #fff; font-size: 30px; }
.site-page .image-step:hover, .site-page .image-toolbar button:hover { background: #ffffff24; }
.site-page .image-hint { margin-top: 15px; color: #bcbcbc; font-size: 12px; text-align: center; }
.site-page:has(dialog[open]) { overflow: hidden; }
html:has(dialog[open]) { overflow: hidden; }
@media (max-width:760px) {
 .site-page .detail-thumbnails { grid-auto-columns: calc((100% - 14px) / 2); }
 .site-page .detail-thumbnail img { height: 100px; }
 .site-page .image-dialog { width: calc(100% - 20px); max-width: calc(100% - 20px); padding: 12px; border-radius: 16px; }
 .site-page .image-stage { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 .site-page .image-step { width: 44px; height: 44px; grid-row: 2; }
 .site-page #image-prev { grid-column: 1; justify-self: end; }
 .site-page #image-next { grid-column: 2; justify-self: start; }
 .site-page .image-stage img { grid-column: 1/-1; grid-row: 1; max-width: 100%; max-height: calc(94svh - 190px); justify-self: center; }
}
@media (max-width:360px) {
 .site-page .detail-gallery-heading { align-items: flex-start; gap: 6px; flex-direction: column; }
 .site-page .detail-thumbnails { grid-auto-columns: calc((100% - 10px) / 2); gap: 10px; }
 .site-page .detail-thumbnail img { height: 100px; }
}
.detail-recommendation { margin: 24px 0; padding-bottom: 20px; border-bottom: 1px solid #77777720; }
.detail-recommendation .detail-section-heading { margin-top: 0; }
.detail-recommendation p { margin-top: 12px; font-size: 15px; line-height: 1.9; color: #424242; white-space: pre-wrap; overflow-wrap: anywhere; }
.site-page .backup-download { flex-basis: 100%; margin-top: 12px; border-top: 1px solid #77777720; padding-top: 10px; font-size: 13px; color: #505050; }
.backup-download summary { cursor: pointer; }
.backup-download-body { padding-top: 8px; }

/* Keep dense gallery cards readable with long titles and download labels. */
.site-page .app-card-top { gap: 12px; }
.site-page .app-card-top .app-icon { flex-shrink: 0; }
.site-page .app-card-top .tag { min-width: 0; overflow-wrap: anywhere; }
.site-page .app-card :is(h2, p, .app-meta) { overflow-wrap: anywhere; }
.site-page .card-bottom { flex-wrap: wrap; }
@media (max-width:760px) {
 .site-page .collection-toolbar { margin-top: 24px; }
 .site-page #category { font-size: 14px; }
}

/* Square gallery cards show a compact summary; details retain the full text. */
html:is([data-view="works-all"], [data-view="share"]) .app-card {
 aspect-ratio: 1;
 align-self: start;
 min-height: 0;
 padding: 18px;
 overflow: hidden;
}
.site-page .app-card-info { min-height: 0; }
html:is([data-view="works-all"], [data-view="share"]) .app-card .app-icon { width: 48px; height: 48px; }
.site-page .app-card-top .tag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:is([data-view="works-all"], [data-view="share"]) .app-card h2 { margin: 14px 0 6px; font-size: 21px; }
.site-page .app-card h2 button { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:is([data-view="works-all"], [data-view="share"]) .app-card p {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
 min-height: 0;
 margin-bottom: 8px;
 font-size: 14px;
 line-height: 1.5;
}
.site-page .app-card .app-meta { flex-wrap: nowrap; flex-shrink: 0; overflow: hidden; white-space: nowrap; gap: 6px; margin: auto 0 8px; }
.site-page .app-card .app-meta span+span::before { margin-right: 6px; }
.site-page .work-updated { display: block; color: #616161; font-size: 12px; line-height: 1.5; }
.site-page .app-card .work-updated { flex-shrink: 0; margin-bottom: 8px; }
.site-page .detail-heading .work-updated { margin-top: 6px; }
.site-page .featured-copy .work-updated { margin-top: 6px; }
.site-page .app-card .card-bottom { flex-shrink: 0; flex-wrap: nowrap; padding-top: 8px; min-height: 43px; gap: 6px; }
.site-page .app-card .card-bottom :is(a, button) { white-space: nowrap; font-size: 12px; padding: 6px 8px; min-height: 34px; }

/* Keep the work identity fixed while only the detail body scrolls. */
.site-page #app-dialog { padding: 0; max-height: 88svh; overflow: hidden; }
.site-page #app-detail { display: flex; flex-direction: column; max-height: calc(88svh - 2px); min-height: 0; overflow: hidden; padding: 0; overflow-wrap: anywhere; }
.site-page #app-detail > .detail-heading { flex: 0 0 auto; padding: 34px 59px 0 34px; }
.site-page #app-detail > .detail-body { flex: 1 1 auto; min-height: 0; padding: 0 34px 34px; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.site-page #app-detail > .detail-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.site-page #app-dialog > .dialog-close { z-index: 3; background: #f5f5f5ed; }
@media (max-width:480px) {
 .site-page #app-detail > .detail-heading { padding: 28px 54px 0 24px; }
 .site-page #app-detail > .detail-body { padding: 0 24px 28px; }
}

.cloud-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-basis: 100%; min-width: 0; }
.site-page .cloud-downloads .button { min-width: 0; max-width: 100%; padding: 8px 14px; gap: 8px; font-size: 13px; }
.cloud-download-label { min-width: 0; overflow-wrap: anywhere; }

.server-downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px 12px; width: 100%; min-width: 0; }
.server-download-option { min-width: 0; }
.server-download-row { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.site-page .server-download-row .button { width: 100%; min-width: 0; min-height: 40px; padding: 8px 12px; gap: 8px; }
.server-download-label { min-width: 0; overflow-wrap: anywhere; }
.server-download-filename { display: block; padding: 0 6px; color: #666; font-size: 11px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }

/* Match the download menu to the surrounding glass surfaces. */
.site-page .card-bottom a.card-download-link { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; flex-shrink: 0; }
.site-page .card-download-select { flex-shrink: 0; }
.site-page .card-bottom .card-download-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; min-height: 34px; border: 1px solid #ffffff18; border-radius: var(--pill-radius); color: #fff; background: linear-gradient(135deg, #353535, #222); box-shadow: inset 0 1px 1px #ffffff20; font-size: 12px; font-weight: 500; }
.site-page .card-bottom .card-download-toggle:hover,
.site-page .card-bottom .card-download-toggle[aria-expanded="true"] { color: #fff; background: #414141; }
.site-page .card-bottom .card-download-toggle:focus-visible { outline: 2px solid #858585; outline-offset: 2px; }
.site-page .card-bottom .card-download-toggle span,
.site-page .card-bottom .card-download-toggle:hover span { transform: none; }
.site-page .card-download-toggle svg { width: 14px; height: 14px; flex-shrink: 0; }
.site-page .card-download-toggle .download-chevron { width: 12px; transition: transform 160ms ease; }
.site-page .card-download-toggle[aria-expanded="true"] .download-chevron { transform: rotate(180deg); }
.site-page .download-menu { position: fixed; inset: auto; margin: 0; width: max-content; min-width: min(220px, calc(100vw - 24px)); max-width: min(340px, calc(100vw - 24px)); padding: 6px; border: 1px solid #ffffffd9; border-radius: 16px; color: var(--ink); background: linear-gradient(145deg, #ffffffed, #f3f3f3e8); backdrop-filter: blur(20px); box-shadow: inset 0 1px 1px #fff, inset 0 -1px 1px #1818180d, var(--shadow-floating); overflow: auto; overscroll-behavior: contain; }
.site-page .download-menu:popover-open { animation: download-menu-arrive 140ms var(--ease-out); }
.site-page .download-menu::backdrop { background: transparent; }
.site-page .download-menu:focus { outline: none; }
.site-page .download-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: #303030; font-size: 13px; line-height: 1.5; text-decoration: none; transition: background 140ms ease; }
.site-page .download-menu a:hover,
.site-page .download-menu a:focus-visible { outline: none; background: #1818180a; }
.site-page .download-menu a svg { width: 15px; height: 15px; flex-shrink: 0; color: #686868; }
.site-page .download-menu a span { min-width: 0; overflow-wrap: anywhere; }
.site-page .download-menu-copy { display: grid; gap: 2px; }
.site-page .download-menu-filename { color: #666; font-size: 11px; }
@keyframes download-menu-arrive { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
 .site-page .download-menu:popover-open { animation: none; }
 .site-page .card-download-toggle .download-chevron { transition: none; }
}