/* fonts, hosted here (SIL Open Font License): Albert Sans for the text, Tilt Warp for the titles — thick and round,
   like moulded plastic: close to Roblox without looking childish */
@font-face { font-family:'Albert Sans'; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/albert-sans-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Albert Sans'; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/albert-sans-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Tilt Warp'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/tilt-warp-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Tilt Warp'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/tilt-warp-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
* { box-sizing:border-box; margin:0; }

/* ---- themes: day = white + periwinkle ramp, night = black + deep periwinkle ramp ---- */
:root {
  color-scheme:light;
  --page:#FFFFFF; --banner:#EEF0FF; --edge:#8E98FF; --ink:#1A1F5C; --soft:#555FB8; --light:#FFFFFF;
  --accent:#4C57E6; --accent2:#6470FF;
  --tint:107 118 255; --glass:255 255 255; --shadow:60 70 200; --hi:.55;
  --danger:#C0352B; --ok:#1F8A52; --ring:rgb(255 255 255 / .95); --rim:rgb(255 255 255 / .55);
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --page:#000000; --banner:#0D1024; --edge:#4B4FBA; --ink:#E6E9FF; --soft:#9CA5EC; --light:#FFFFFF;
  --accent:#5A65F0; --accent2:#7782FF;
  --tint:107 118 255; --glass:18 20 48; --shadow:0 0 0; --hi:.07;
  --danger:#FF8A7D; --ok:#6FE3A5; --rim:rgb(255 255 255 / .09);
}
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition:background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, fill .45s ease !important; }

html { background:var(--page); min-height:100%; }
body { color:var(--ink); min-height:100vh; display:flex; flex-direction:column; font-family:ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; position:relative; overflow-x:hidden; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---- site background: soft light, drifting rounded shapes, fine grain ---- */
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(60vmax 50vmax at 8% -5%, rgb(var(--tint) / .16), transparent 62%),
    radial-gradient(55vmax 45vmax at 100% 45%, rgb(var(--tint) / .10), transparent 64%),
    radial-gradient(70vmax 50vmax at 25% 115%, rgb(var(--tint) / .14), transparent 60%),
    var(--page); }
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.10; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .35  0 0 0 0 .9  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
:root[data-theme="dark"] body::after { mix-blend-mode:screen; opacity:.07; }
.shapes { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.shapes i { position:absolute; display:block; background:rgb(var(--tint) / .10); filter:blur(34px);
  border-radius:42% 58% 63% 37% / 45% 40% 60% 55%; animation:morph 24s ease-in-out infinite, drift 38s ease-in-out infinite alternate; }
.shapes i:nth-child(1) { width:46vmax; height:40vmax; left:-12vmax; top:30vh; }
.shapes i:nth-child(2) { width:38vmax; height:36vmax; right:-10vmax; top:8vh; background:rgb(var(--tint) / .14); animation-delay:-8s,-12s; }
.shapes i:nth-child(3) { width:34vmax; height:30vmax; left:35vw; bottom:-14vmax; background:rgb(var(--tint) / .08); animation-delay:-15s,-4s; }
@keyframes morph { 0%,100% { border-radius:42% 58% 63% 37% / 45% 40% 60% 55%; } 33% { border-radius:60% 40% 38% 62% / 55% 62% 38% 45%; } 66% { border-radius:38% 62% 52% 48% / 62% 38% 62% 38%; } }
@keyframes drift { from { transform:translate(0,0) rotate(0deg); } to { transform:translate(5vw,-4vh) rotate(25deg); } }
.liquid { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.9; }

/* ---- banner ---- */
.banner { position:relative; height:clamp(200px, 32vh, 340px); margin:8px 0; background:var(--banner); border:4px solid var(--edge);
  border-radius:32px; overflow:hidden; cursor:crosshair; touch-action:pan-y; user-select:none;
  box-shadow:0 34px 60px -26px rgb(var(--shadow) / .75), 0 14px 26px -14px rgb(var(--shadow) / .5), 0 2px 4px rgb(var(--shadow) / .25); }
.banner canvas { position:absolute; top:0; left:0; display:block; }

/* ---- segmented nav (Apple style) ---- */
.nav { position:sticky; top:0; z-index:50; text-align:center; padding:6px 16px 22px; transition:padding .6s cubic-bezier(.4,0,.2,1); }
.seg { position:relative; display:inline-flex; gap:2px; padding:6px; border-radius:24px; max-width:100%;
  background:rgb(var(--tint) / .14); box-shadow:inset 0 1px 2px rgb(var(--shadow) / .10), 0 14px 28px -14px rgb(var(--shadow) / .55), 0 3px 6px -2px rgb(var(--shadow) / .2); }
.seg a { position:relative; z-index:1; display:inline-block; padding:11px 24px; border-radius:18px; white-space:nowrap;
  color:var(--ink); font-size:15px; font-weight:600; text-decoration:none; transition:color .3s, transform .2s; }
.seg a.on { color:var(--light); }
.seg a:active { transform:scale(.95); }
.seg a:focus-visible { outline:3px solid var(--edge); outline-offset:2px; }
.seg-ind { position:absolute; z-index:0; top:6px; left:0; height:calc(100% - 12px); width:0; border-radius:18px; opacity:0;
  background:linear-gradient(180deg, var(--accent2), var(--accent));
  box-shadow:0 0 0 2px var(--ring), 0 14px 26px -8px rgb(var(--shadow) / .8), 0 4px 8px -2px rgb(var(--shadow) / .4), inset 0 1px 0 rgb(255 255 255 / .22);
  transition:transform .5s cubic-bezier(.34,1.45,.64,1), width .5s cubic-bezier(.34,1.45,.64,1), opacity .25s; }
.seg-hover { position:absolute; z-index:0; top:6px; left:0; height:calc(100% - 12px); width:0; border-radius:18px; pointer-events:none; opacity:0;
  background:rgb(var(--tint) / .26); transition:transform .45s cubic-bezier(.34,1.45,.64,1), width .45s cubic-bezier(.34,1.45,.64,1), opacity .4s ease; }

/* round buttons living inside the bubble: theme switch + menu */
.seg .seg-btn { position:relative; z-index:1; width:46px; align-self:stretch; border:0; border-radius:18px; background:none; cursor:pointer;
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; color:var(--ink); transition:transform .25s cubic-bezier(.34,1.45,.64,1); }
.seg .seg-btn:active { transform:scale(.9); }
.seg .seg-btn:focus-visible { outline:3px solid var(--edge); outline-offset:2px; }
.seg .theme-btn { margin-left:8px; }
.seg .theme-btn::before { content:""; position:absolute; left:-6px; top:24%; bottom:24%; width:1px; background:rgb(var(--tint) / .5); }
.seg .menu-btn[aria-expanded="true"] { background:linear-gradient(180deg, var(--accent2), var(--accent)); box-shadow:0 0 0 2px var(--ring), 0 8px 20px -6px rgb(var(--shadow) / .55); }
.menu-btn span { display:block; width:20px; height:2.5px; border-radius:2px; background:var(--ink); transition:transform .35s cubic-bezier(.34,1.45,.64,1), opacity .2s, width .25s; }
.menu-btn:hover span:nth-child(2) { width:14px; }
.menu-btn[aria-expanded="true"] span { background:var(--light); }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); }

/* sun <-> moon */
.theme-btn svg { width:22px; height:22px; overflow:visible; }
.theme-btn .core { fill:currentColor; transform-box:fill-box; transform-origin:center; transition:transform .5s cubic-bezier(.34,1.45,.64,1); }
.theme-btn .cut { transition:transform .5s cubic-bezier(.34,1.45,.64,1); }
.theme-btn .rays { stroke:currentColor; stroke-width:2; stroke-linecap:round; transform-box:view-box; transform-origin:center; transition:transform .5s cubic-bezier(.34,1.45,.64,1), opacity .3s; }
:root[data-theme="dark"] .theme-btn .core { transform:scale(1.55); }
:root[data-theme="dark"] .theme-btn .cut { transform:translate(-9px, 5px); }
:root[data-theme="dark"] .theme-btn .rays { transform:rotate(60deg) scale(.4); opacity:0; }
.theme-btn:hover svg { transform:rotate(14deg); transition:transform .3s cubic-bezier(.34,1.45,.64,1); }

/* ---- account popover ---- */
.menu-pop { position:fixed; top:84px; right:26px; z-index:59; width:min(300px, calc(100vw - 32px)); padding:20px; border-radius:24px;
  background:rgb(var(--glass) / .88); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgb(var(--tint) / .4);
  box-shadow:0 24px 50px -18px rgb(var(--shadow) / .55); display:flex; flex-direction:column; gap:12px;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.96); transform-origin:top right;
  transition:opacity .2s, transform .35s cubic-bezier(.34,1.45,.64,1), visibility 0s .35s; }
.menu-pop.open { opacity:1; visibility:visible; transform:none; transition-delay:0s; box-shadow:0 0 0 2px var(--ring), 0 24px 50px -18px rgb(var(--shadow) / .55); }
.menu-pop h3 { font-size:18px; font-weight:800; }
.menu-note { color:var(--soft); font-size:14px; line-height:1.5; }
.menu-err { color:var(--danger); font-size:13px; }
.g-slot { min-height:44px; display:flex; justify-content:center; }
.menu-me { display:flex; align-items:center; gap:12px; min-width:0; }
.menu-me div { min-width:0; display:flex; flex-direction:column; }
.menu-me strong, .menu-me small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-me small { color:var(--soft); font-size:12.5px; }
.menu-av { flex:none; width:42px; height:42px; border-radius:50%; background:var(--accent); color:var(--light); display:grid; place-items:center; font-weight:800; object-fit:cover; }

/* ---- buttons / forms ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:16px; border:0; cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; text-decoration:none; transition:transform .25s cubic-bezier(.34,1.45,.64,1), box-shadow .25s, background .2s, opacity .2s; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:scale(.96); }
.btn:focus-visible { outline:3px solid var(--edge); outline-offset:2px; }
.btn[disabled] { opacity:.55; cursor:not-allowed; transform:none; }
.btn-primary { background:linear-gradient(180deg, var(--accent2), var(--accent)); color:var(--light); box-shadow:0 16px 28px -10px rgb(var(--shadow) / .8), 0 4px 8px -2px rgb(var(--shadow) / .4), inset 0 1px 0 rgb(255 255 255 / .22); }
.btn-soft { background:rgb(var(--tint) / .18); color:var(--ink); box-shadow:0 8px 16px -8px rgb(var(--shadow) / .5), 0 2px 4px -1px rgb(var(--shadow) / .2); }
.btn-soft:hover:not([disabled]) { background:rgb(var(--tint) / .30); }
.btn-danger { background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger); padding:9px 16px; font-size:14px; }
.btn-danger:hover { background:color-mix(in srgb, var(--danger) 24%, transparent); }

/* ---- content ---- */
body.sub { padding-top:28px; }
.panel { background:rgb(var(--glass) / .6); border-radius:28px; padding:28px; margin-bottom:20px; backdrop-filter:blur(6px);
  box-shadow:0 1px 0 rgb(255 255 255 / var(--hi)) inset, 0 20px 40px -28px rgb(var(--shadow) / .35); display:flex; flex-direction:column; gap:16px; }
.panel h2 { font-size:22px; font-weight:800; }
.panel p { color:var(--soft); line-height:1.6; }
.wrap { width:100%; max-width:760px; margin:8px auto 56px; padding:0 16px; }
.wrap.wide { max-width:1080px; }
.field { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700; }
.field span { color:var(--soft); font-size:13px; letter-spacing:.02em; }
.field input, .field textarea, .field select { font:inherit; font-weight:500; color:var(--ink); background:rgb(var(--glass) / .7); border:1.5px solid rgb(var(--tint) / .4);
  border-radius:14px; padding:12px 14px; transition:border-color .2s, box-shadow .2s, background .2s; }
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgb(var(--tint) / .25); background:rgb(var(--glass) / .95); }
.field input[type=file] { padding:10px; background:rgb(var(--tint) / .08); }
.field input[type=file]::file-selector-button { font:inherit; font-weight:700; border:0; border-radius:10px; padding:8px 14px; margin-right:12px; background:var(--accent); color:var(--light); cursor:pointer; }
.bar { height:8px; border-radius:6px; background:rgb(var(--tint) / .2); overflow:hidden; display:none; }
.bar.on { display:block; }
.bar i { display:block; height:100%; width:0; background:var(--accent); border-radius:6px; transition:width .2s; }
.form-msg { min-height:1.4em; font-weight:700; }
.form-msg.ok { color:var(--ok) !important; }
.form-msg.bad { color:var(--danger) !important; }
.rows { display:flex; flex-direction:column; gap:10px; }
.row { display:flex; align-items:center; gap:14px; padding:10px; border-radius:18px; background:rgb(var(--glass) / .45); }
.row img { width:64px; height:44px; object-fit:cover; border-radius:10px; flex:none; background:var(--banner); }
.row-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.row-info strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-info small { color:var(--soft); }
.empty { color:var(--soft); }
.toast { padding:12px 16px; border-radius:16px; background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); font-weight:700; }
.toast.bad { background:color-mix(in srgb, var(--danger) 14%, transparent); color:var(--danger); }

/* ---- asset grid ---- */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:20px; }
.card { background:rgb(var(--glass) / .65); border-radius:26px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 1px 0 rgb(255 255 255 / var(--hi)) inset, 0 18px 36px -26px rgb(var(--shadow) / .5); transition:transform .35s cubic-bezier(.34,1.45,.64,1), box-shadow .3s; }
.card:hover { transform:translateY(-6px); box-shadow:0 1px 0 rgb(255 255 255 / var(--hi)) inset, 0 28px 44px -24px rgb(var(--shadow) / .55); }
.card img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--banner); }
.card-body { padding:18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.card-body h3 { font-size:18px; font-weight:800; }
.card-body p { color:var(--soft); font-size:14px; line-height:1.55; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-body small { color:var(--soft); opacity:.8; }
.card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; }
.price { font-weight:800; font-size:17px; }

@media (max-width:560px) { .banner { margin:6px 0; border-radius:24px; } .seg a { padding:10px 14px; font-size:14px; } .seg .seg-btn { width:40px; }
  .menu-pop { right:16px; } .panel { padding:22px; } }
@media (prefers-reduced-motion: reduce) { .seg-ind, .seg-btn, .menu-btn span, .menu-pop, .btn, .card, .theme-btn .core, .theme-btn .cut, .theme-btn .rays { transition:none; } .seg-hover { transition:opacity .2s; } }

:root[data-theme="dark"] .liquid { opacity:.55; }
:root[data-theme="dark"] .shapes { opacity:.55; }


/* ---- home ---- */
.intro { text-align:center; max-width:640px; margin:34px auto 28px; }
.intro h2 { font-size:clamp(24px, 4vw, 34px); font-weight:800; line-height:1.15; margin-bottom:12px; }
.intro p { color:var(--soft); font-size:17px; line-height:1.6; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:20px; margin-bottom:12px; }
.tile { display:flex; flex-direction:column; gap:10px; padding:26px; border-radius:28px; text-decoration:none; color:var(--ink);
  background:rgb(var(--glass) / .62); backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgb(255 255 255 / var(--hi)) inset, 0 26px 44px -26px rgb(var(--shadow) / .7), 0 6px 12px -6px rgb(var(--shadow) / .25);
  transition:transform .4s cubic-bezier(.34,1.45,.64,1), box-shadow .3s; }
.tile:hover { transform:translateY(-8px); box-shadow:0 1px 0 rgb(255 255 255 / var(--hi)) inset, 0 40px 56px -26px rgb(var(--shadow) / .8), 0 8px 16px -6px rgb(var(--shadow) / .3); }
.tile:focus-visible { outline:3px solid var(--edge); outline-offset:3px; }
.tile-ic { width:54px; height:54px; border-radius:18px; display:grid; place-items:center; color:var(--light);
  background:linear-gradient(180deg, var(--accent2), var(--accent)); box-shadow:0 12px 22px -8px rgb(var(--shadow) / .75), inset 0 1px 0 rgb(255 255 255 / .25); }
.tile-ic svg { width:28px; height:28px; }
.tile h3 { font-size:21px; font-weight:800; margin-top:6px; }
.tile-short { font-weight:700; }
.tile-long { color:var(--soft); font-size:15px; line-height:1.6; flex:1; }
.tile-go { display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--accent); margin-top:6px; }
.tile-go svg { width:18px; height:18px; transition:transform .3s cubic-bezier(.34,1.45,.64,1); }
.tile:hover .tile-go svg { transform:translateX(6px); }
:root[data-theme="dark"] .tile-go { color:var(--accent2); }

/* ---- category + detail pages ---- */
.section-head h2 { font-size:24px; font-weight:800; margin-bottom:6px; }
.section-head p { color:var(--soft); line-height:1.6; max-width:640px; }
a.card { text-decoration:none; color:inherit; }
a.card:focus-visible { outline:3px solid var(--edge); outline-offset:3px; }
.back { display:inline-block; margin:6px 4px 14px; font-weight:700; color:var(--soft); text-decoration:none; }
.back:hover { color:var(--ink); }
.detail { display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:22px; align-items:start; }
.detail-prev { border-radius:28px; overflow:hidden; box-shadow:0 34px 56px -28px rgb(var(--shadow) / .75), 0 10px 18px -10px rgb(var(--shadow) / .35); background:var(--banner); }
.detail-prev img { width:100%; display:block; aspect-ratio:16/10; object-fit:cover; }
.detail-info { gap:12px; margin-bottom:0; }
.detail-info h1 { font-size:clamp(24px, 3.4vw, 32px); font-weight:800; line-height:1.15; }
.pill { align-self:flex-start; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:800; color:var(--accent); background:rgb(var(--tint) / .16); }
:root[data-theme="dark"] .pill { color:var(--accent2); }
.detail-price { font-size:26px; font-weight:800; color:var(--ink) !important; }
.detail-desc { white-space:pre-line; color:var(--ink) !important; opacity:.85; }
.detail-meta, .detail-lic, .buy small { color:var(--soft); font-size:13.5px; }
.detail-lic a, .consent a { color:var(--accent); font-weight:700; }
:root[data-theme="dark"] .detail-lic a, :root[data-theme="dark"] .consent a { color:var(--accent2); }
.buy { display:flex; flex-direction:column; gap:12px; margin-top:6px; }
.buy .btn { width:100%; padding:15px 22px; font-size:16px; }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--soft); cursor:pointer; }
.consent input { margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--accent); }
@media (max-width:820px) { .detail { grid-template-columns:1fr; } }

/* ---- legal pages ---- */
.legal { gap:10px; }
.legal h1 { font-size:clamp(26px, 4vw, 34px); font-weight:800; margin-bottom:2px; }
.legal h2 { font-size:19px; font-weight:800; margin-top:18px; }
.legal p, .legal li { color:var(--ink); opacity:.88; line-height:1.7; font-size:15.5px; }
.legal ul { padding-left:22px; display:flex; flex-direction:column; gap:6px; }
.legal a { color:var(--accent); font-weight:700; }
:root[data-theme="dark"] .legal a { color:var(--accent2); }
.legal .meta { color:var(--soft); opacity:1; font-size:13.5px; }
mark.todo { background:rgb(255 196 0 / .28); color:inherit; padding:1px 6px; border-radius:6px; font-weight:700; }

/* ---- footer ---- */
.foot { margin-top:auto; padding:10px 14px 18px; }
.foot-in { max-width:1080px; margin:0 auto; padding:12px 18px; border-radius:20px; background:rgb(var(--glass) / .45); backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--rim); box-shadow:0 14px 28px -22px rgb(var(--shadow) / .6); display:flex; flex-direction:column; gap:6px; }
.foot-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 18px; }
.foot-row strong { font-size:14px; }
.foot-links { display:flex; flex-wrap:wrap; gap:3px 14px; }
.foot-links a { color:var(--ink); font-size:12.5px; font-weight:700; text-decoration:none; opacity:.8; transition:opacity .2s, color .2s; }
.foot-links a:hover { opacity:1; color:var(--accent); }
:root[data-theme="dark"] .foot-links a:hover { color:var(--accent2); }
.foot-note { color:var(--soft); font-size:11px; line-height:1.5; opacity:.9; }

/* compact nav labels on small screens */
@media (max-width:700px) { .seg a .long { display:none; } .seg a { padding:10px 12px; font-size:13.5px; } }

/* ================= Apple-style layer: scroll-linked hero, reveal, glass, light ================= */
::view-transition-old(root), ::view-transition-new(root) { animation-duration:.35s; }

.page { flex:1 0 auto; width:100%; }
.hero { padding:0 8px; }
.banner { transform:translateY(calc(var(--p, 0) * 44px)) scale(calc(1 - var(--p, 0) * .07)); opacity:calc(1 - var(--p, 0) * .9); transform-origin:50% 100%; will-change:transform, opacity; }
.nav { padding:8px 16px 12px; margin-bottom:10px; }
.seg { backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6); border:1px solid var(--rim); transition:background-color .45s ease, box-shadow .45s ease; }
html.stuck .seg { background:rgb(var(--glass) / .66); box-shadow:0 18px 36px -16px rgb(var(--shadow) / .6), 0 4px 10px -3px rgb(var(--shadow) / .25), inset 0 1px 0 rgb(255 255 255 / var(--hi)); }

/* glass surfaces get a real rim + stronger blur, like frosted Apple panels */
.panel, .tile, .card, .detail-prev { border:1px solid var(--rim); }
.panel, .tile, .card { backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5); }

/* scroll reveal: fade + rise + de-blur, staggered by --d */
@keyframes reveal-in { from { opacity:0; transform:translateY(30px) scale(.985); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }
@keyframes reveal-soft { from { opacity:0; } to { opacity:1; } }
.reveal.pending { opacity:0; }
.reveal.in { animation:reveal-in .95s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) backwards; }
@media (prefers-reduced-motion: reduce) { .reveal.in { animation:reveal-soft .5s ease var(--d, 0ms) backwards; } }

/* cursor-following light */
.glow { position:relative; }
.glow::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s ease; z-index:1;
  background:radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--tint) / .24), transparent 62%); }
.glow:hover::before { opacity:1; }

/* big, tight type */
.intro h2 { font-size:clamp(32px, 5.4vw, 52px); letter-spacing:-.025em; line-height:1.05;
  background:linear-gradient(110deg, transparent 42%, color-mix(in srgb, var(--accent2) 70%, #fff) 50%, transparent 58%) no-repeat,
    linear-gradient(120deg, var(--ink) 25%, var(--accent2) 95%);
  background-size:250% 100%, 100% 100%; background-position:200% 0, 0 0;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 7s cubic-bezier(.45,0,.25,1) 3s infinite; }
/* a slice of light sweeps across the headline now and then */
:root[data-theme="dark"] .intro h2 {
  background-image:linear-gradient(110deg, transparent 42%, #fff 50%, transparent 58%),
    linear-gradient(120deg, color-mix(in srgb, var(--ink) 74%, var(--accent2)) 25%, color-mix(in srgb, var(--accent2) 80%, #000) 95%); }
@keyframes shine { 0% { background-position:200% 0, 0 0; } 22%, 100% { background-position:-100% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .intro h2 { animation:none; } }
.intro p { font-size:clamp(16px, 2vw, 19px); }
.section-head h2 { font-size:clamp(26px, 3.6vw, 36px); letter-spacing:-.02em; }
.tile h3 { letter-spacing:-.01em; }

/* ratings + reviews */
.rate { font-size:13px; font-weight:800; color:var(--accent); white-space:nowrap; }
:root[data-theme="dark"] .rate { color:var(--accent2); }
.rate.none { color:var(--soft); font-weight:600; opacity:.8; }
.detail-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; }
.reviews { margin-top:22px; gap:18px; }
.rv-head h2 { font-size:22px; font-weight:800; }
.rv-sum { color:var(--soft); margin-top:2px; }
.rv-note { color:var(--soft); }
.rv-note a { color:var(--accent); font-weight:700; }
.rv-form { display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:22px; background:rgb(var(--glass) / .5); border:1px solid var(--rim); }
.rate-pick { display:flex; flex-wrap:wrap; gap:8px; }
.rate-btn { width:40px; height:40px; border-radius:50%; border:1.5px solid rgb(var(--tint) / .45); background:rgb(var(--glass) / .6); color:var(--ink); font:inherit; font-weight:800; cursor:pointer;
  transition:transform .25s cubic-bezier(.34,1.45,.64,1), background .2s, color .2s, border-color .2s, box-shadow .2s; }
.rate-btn:hover { transform:translateY(-3px) scale(1.08); }
.rate-btn.on { background:linear-gradient(180deg, var(--accent2), var(--accent)); border-color:transparent; color:var(--light); box-shadow:0 10px 18px -8px rgb(var(--shadow) / .8); }
.rate-btn:focus-visible { outline:3px solid var(--edge); outline-offset:2px; }
.rv-form textarea { font:inherit; color:var(--ink); background:rgb(var(--glass) / .7); border:1.5px solid rgb(var(--tint) / .4); border-radius:14px; padding:12px 14px; resize:vertical; }
.rv-form textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgb(var(--tint) / .25); }
.rv-list { display:flex; flex-direction:column; gap:12px; }
.rv { padding:16px 18px; border-radius:20px; background:rgb(var(--glass) / .5); border:1px solid var(--rim); display:flex; flex-direction:column; gap:8px; }
.rv-top { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.rv .score { padding:3px 10px; border-radius:999px; font-size:13px; font-weight:800; color:var(--light); background:linear-gradient(180deg, var(--accent2), var(--accent)); }
.rv-badge { font-size:12px; font-weight:700; color:var(--ok); }
.rv time { margin-left:auto; color:var(--soft); font-size:12.5px; }
.rv p { color:var(--ink); line-height:1.6; white-space:pre-line; }
.rv-del { align-self:flex-start; background:none; border:0; padding:0; color:var(--danger); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.rv-del:hover { text-decoration:underline; }

/* profile */
.who { display:flex; flex-direction:column; }
.who small { color:var(--soft); }
.pseudo-form { display:flex; flex-direction:column; gap:10px; max-width:420px; }
.hint { color:var(--soft); font-size:12.5px; }
.row-title { font-weight:800; color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row-title:hover { color:var(--accent); }
.row .btn { padding:9px 16px; font-size:14px; }

/* five tabs on small screens: the bubble scrolls sideways instead of overflowing */
@media (max-width:640px) { .seg { overflow-x:auto; scrollbar-width:none; max-width:calc(100vw - 20px); } .seg::-webkit-scrollbar { display:none; } }

/* ---- about ---- */
.about { margin-top:26px; }
.about h2 { font-size:clamp(24px, 3.2vw, 32px); letter-spacing:-.02em; }
.about > p { max-width:680px; font-size:16px; }
.about-points { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-top:4px; }
.about-points li { display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-radius:18px; background:rgb(var(--glass) / .5); border:1px solid var(--rim); }
.about-points strong { font-weight:800; }
.about-points span { color:var(--soft); font-size:14px; line-height:1.5; }

/* about: more breathing room */
.about { gap:20px; padding-bottom:34px; }
.about-points { gap:22px; margin-top:12px; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); }
.about-points li { gap:10px; padding:20px 22px; background:rgb(var(--glass) / .72); box-shadow:0 12px 24px -16px rgb(var(--shadow) / .45); }
.about-points strong { font-size:16px; }
.about-points span { line-height:1.6; }
@media (max-width:560px) { .about-points { gap:16px; } }

/* ---- search toolbar ---- */
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; }
.search { position:relative; flex:1 1 260px; max-width:420px; display:block; }
.search svg { position:absolute; left:14px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--soft); pointer-events:none; }
.search input { width:100%; font:inherit; color:var(--ink); background:rgb(var(--glass) / .7); border:1.5px solid rgb(var(--tint) / .4); border-radius:999px; padding:12px 16px 12px 42px;
  transition:border-color .2s, box-shadow .2s, background .2s; }
.search input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgb(var(--tint) / .25); background:rgb(var(--glass) / .95); }
.toolbar select { font:inherit; font-weight:700; color:var(--ink); background:rgb(var(--glass) / .7); border:1.5px solid rgb(var(--tint) / .4); border-radius:999px; padding:11px 16px; cursor:pointer; }
.toolbar select:focus-visible { outline:3px solid var(--edge); outline-offset:2px; }
.count { color:var(--soft); font-size:13.5px; margin-left:auto; }

/* ---- gallery ---- */
.gallery { display:flex; flex-direction:column; gap:12px; }
.gal-strip { display:flex; flex-wrap:wrap; gap:10px; }
.gal-thumb { width:84px; height:56px; padding:0; border:2px solid transparent; border-radius:14px; overflow:hidden; cursor:pointer; background:var(--banner); opacity:.7;
  transition:transform .25s cubic-bezier(.34,1.45,.64,1), opacity .2s, border-color .2s, box-shadow .2s; box-shadow:0 8px 16px -10px rgb(var(--shadow) / .6); }
.gal-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.gal-thumb:hover { transform:translateY(-3px); opacity:1; }
.gal-thumb.on { opacity:1; border-color:var(--accent); }
.gal-thumb:focus-visible { outline:3px solid var(--edge); outline-offset:2px; }

/* ---- admin editor ---- */
.form-actions { display:flex; gap:10px; flex-wrap:wrap; }
.row-actions { display:flex; gap:8px; flex:none; }
.row-actions .btn { padding:9px 16px; font-size:14px; }
.thumbs { display:flex; flex-wrap:wrap; gap:12px; }
.thumb { position:relative; width:110px; margin:0; }
.thumb img { width:110px; height:72px; object-fit:cover; border-radius:12px; display:block; background:var(--banner); transition:opacity .2s, filter .2s; }
.thumb figcaption { font-size:12px; color:var(--soft); margin-top:4px; text-align:center; }
.thumb-x { position:absolute; top:-8px; right:-8px; width:26px; height:26px; border-radius:50%; border:0; cursor:pointer; background:var(--danger); color:#fff; font-size:18px; line-height:1; box-shadow:0 6px 12px -4px rgb(var(--shadow) / .7); }
.thumb.off img { opacity:.25; filter:grayscale(1); }
.thumb.off .thumb-x { background:var(--ok); transform:rotate(45deg); }
@media (max-width:560px) { .row { flex-wrap:wrap; } .row-actions { width:100%; } }

/* ================= performance =================
   - no backdrop blur on big surfaces sitting above animated layers (it was re-blurred every frame): opaque-ish glass instead
   - the drifting blurred shapes animated border-radius (full repaint each frame): removed, the liquid canvas does that job
   - grain without blend mode, reveal without filter blur */
.shapes { display:none; }
body::after { mix-blend-mode:normal; opacity:.045; }
:root[data-theme="dark"] body::after { mix-blend-mode:normal; opacity:.03; }
.panel, .tile, .card, .foot-in, .rv-form, .rv, .about-points li { backdrop-filter:none; -webkit-backdrop-filter:none; }
.panel { background:rgb(var(--glass) / .84); }
.tile { background:rgb(var(--glass) / .84); }
.card { background:rgb(var(--glass) / .88); }
.foot-in { background:rgb(var(--glass) / .8); }
.liquid { opacity:1; }
:root[data-theme="dark"] .liquid { opacity:.6; }
@keyframes reveal-in { from { opacity:0; transform:translateY(30px) scale(.985); } to { opacity:1; transform:none; } }
.banner { contain:layout paint; }
.tile, .card { contain:layout paint; }

/* ---- 3D animation viewer ---- */
.detail-3d { border-radius:28px; overflow:hidden; border:1px solid var(--rim); background:radial-gradient(120% 90% at 50% 0%, rgb(var(--tint) / .22), rgb(var(--glass) / .9) 70%);
  box-shadow:0 34px 56px -28px rgb(var(--shadow) / .75), 0 10px 18px -10px rgb(var(--shadow) / .35); }
.av { position:relative; display:flex; flex-direction:column; }
.av-c { width:100%; aspect-ratio:16/11; display:block; cursor:grab; touch-action:none; outline:none; }
.av-c.grab { cursor:grabbing; }
.av-c:focus-visible { box-shadow:inset 0 0 0 3px var(--edge); }
.av-msg { position:absolute; inset:0 0 54px; display:grid; place-items:center; color:var(--soft); font-weight:700; text-align:center; padding:20px; }
.av-bar { display:flex; align-items:center; gap:10px; padding:10px 14px 14px; }
.av-btn { flex:none; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer; font:inherit; font-size:15px; font-weight:800; color:var(--ink); background:rgb(var(--tint) / .16);
  transition:transform .25s cubic-bezier(.34,1.45,.64,1), background .2s, color .2s; }
.av-btn:hover { transform:scale(1.08); }
.av-btn:active { transform:scale(.92); }
.av-btn:focus-visible, .av-speed:focus-visible, .av-range:focus-visible { outline:3px solid var(--edge); outline-offset:2px; }
.av-play { background:linear-gradient(180deg, var(--accent2), var(--accent)); color:var(--light); box-shadow:0 10px 18px -8px rgb(var(--shadow) / .7); }
.av-loop.on { color:var(--accent); background:rgb(var(--tint) / .28); }
:root[data-theme="dark"] .av-loop.on { color:var(--accent2); }
.av-range { flex:1; min-width:60px; accent-color:var(--accent); cursor:pointer; }
.av-time { flex:none; font-size:12.5px; font-weight:700; color:var(--soft); font-variant-numeric:tabular-nums; min-width:92px; text-align:right; }
.av-speed { flex:none; font:inherit; font-size:13px; font-weight:700; color:var(--ink); background:rgb(var(--tint) / .14); border:0; border-radius:999px; padding:8px 10px; cursor:pointer; }
@media (max-width:560px) { .av-time { display:none; } .av-bar { gap:8px; padding:8px 10px 12px; } }
.gal-3d { width:auto; padding:0 14px; font:inherit; font-size:13px; font-weight:800; color:var(--light); background:linear-gradient(180deg, var(--accent2), var(--accent)); opacity:.75; }
.gal-3d.on { opacity:1; border-color:var(--ring); }
.badge-3d { position:absolute; top:12px; left:12px; z-index:2; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:800; color:var(--light);
  background:linear-gradient(180deg, var(--accent2), var(--accent)); box-shadow:0 8px 16px -8px rgb(var(--shadow) / .7); }
a.card { position:relative; }
.anim-box { display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:18px; background:rgb(var(--tint) / .08); border:1px dashed rgb(var(--tint) / .45); }
.anim-box[hidden] { display:none; }
textarea.mono { font-family:ui-monospace, Consolas, monospace; font-size:12px; }

/* ---- splash screen (first visit of the session) ---- */
.splash { position:fixed; inset:0; z-index:300; background:var(--page); display:block;
  transition:opacity .6s ease, transform .7s cubic-bezier(.32,.72,0,1), visibility 0s .7s;
  animation:splash-failsafe 0s 7s forwards; }
.splash::before { content:""; position:absolute; inset:0; background:radial-gradient(70% 60% at 50% 45%, rgb(var(--tint) / .22), transparent 70%); }
.splash-stage { position:absolute; inset:0; cursor:pointer; }
.splash-stage canvas { position:absolute; top:0; left:0; display:block; }
.splash.out { opacity:0; visibility:hidden; pointer-events:none; }
html.no-splash .splash { display:none; }
html.splashing { overflow:hidden; }
@keyframes splash-failsafe { to { opacity:0; visibility:hidden; pointer-events:none; } }
@media (prefers-reduced-motion: reduce) { .splash { transition:opacity .3s ease, visibility 0s .3s; } .splash.out { transform:none; } }

/* ---- logo inside the nav bubble ---- */
.seg .logo { position:relative; z-index:1; display:inline-flex; flex-direction:row; border-radius:12px; font-size:inherit; font-weight:inherit; align-items:center; gap:9px; padding:0 14px 0 4px; margin-right:8px; text-decoration:none; color:var(--ink); flex:none; }
.seg .logo::after { content:""; position:absolute; right:-4px; top:24%; bottom:24%; width:1px; background:rgb(var(--tint) / .5); }
.logo-mark { width:32px; height:32px; border-radius:11px; display:grid; place-items:center; font-family:ui-monospace, Consolas, monospace; font-weight:800; font-size:17px;
  color:var(--light); background:linear-gradient(180deg, var(--accent2), var(--accent)); box-shadow:0 8px 16px -8px rgb(var(--shadow) / .8), inset 0 1px 0 rgb(255 255 255 / .25);
  transition:transform .35s cubic-bezier(.34,1.45,.64,1); }
.logo-word { font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight:800; font-size:15px; letter-spacing:-.02em; }
.seg .logo:hover .logo-mark { transform:rotate(-8deg) scale(1.08); }
.seg .logo:focus-visible { outline:3px solid var(--edge); outline-offset:2px; border-radius:12px; }
.nav { padding-top:14px; }
@media (max-width:700px) { .logo-word { display:none; } .seg .logo { padding-right:10px; } }

/* ---- brand: ASCII "H" outside the bubble ---- */
.nav-in { display:flex; align-items:center; justify-content:center; gap:12px; max-width:100%; }
.brand { flex:none; display:inline-flex; align-items:center; gap:11px; height:56px; padding:0 18px 0 12px; border-radius:24px; text-decoration:none; color:var(--ink);
  background:rgb(var(--tint) / .14); border:1px solid var(--rim); backdrop-filter:blur(18px) saturate(1.6); -webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:inset 0 1px 2px rgb(var(--shadow) / .10), 0 14px 28px -14px rgb(var(--shadow) / .55), 0 3px 6px -2px rgb(var(--shadow) / .2);
  transition:transform .35s cubic-bezier(.34,1.45,.64,1), background-color .45s ease, box-shadow .45s ease; }
html.stuck .brand { background:rgb(var(--glass) / .66); }
.brand:active { transform:scale(.96); }
.brand:focus-visible { outline:3px solid var(--edge); outline-offset:3px; }
.brand-h { margin:0; font:800 10.4px/.92 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing:.02em;
  background:linear-gradient(160deg, var(--accent2), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 6px rgb(var(--shadow) / .35)); }
:root[data-theme="dark"] .brand-h { background:linear-gradient(160deg, #ffffff, var(--accent2)); -webkit-background-clip:text; background-clip:text; }
.brand-word { font-family:ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight:800; font-size:16px; letter-spacing:-.02em; }
@media (max-width:760px) { .brand-word { display:none; } .brand { padding:0 12px; } .nav-in { gap:8px; } }

/* ---- asset page: info | viewer | pack content ---- */
.ap { display:grid; grid-template-columns:330px minmax(0, 1fr); gap:20px; align-items:start; }
.ap.with-items { grid-template-columns:320px minmax(0, 1fr) 230px; }
.ap-info { position:sticky; top:92px; max-height:calc(100vh - 110px); display:flex; flex-direction:column; gap:12px; margin:0; }
.ap-title { font-size:clamp(28px, 2.7vw, 38px); font-weight:900; letter-spacing:-.025em; line-height:1.05;
  background:linear-gradient(120deg, var(--ink) 30%, var(--accent2)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-bottom:10px; position:relative; }
.ap-title::after { content:""; position:absolute; left:0; bottom:0; width:56px; height:4px; border-radius:4px; background:linear-gradient(90deg, var(--accent2), var(--accent)); }
.ap-sub { font-size:14px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); margin-top:6px; }
.ap-desc { flex:1 1 auto; min-height:70px; overflow:auto; padding-right:6px; overscroll-behavior:contain; }
.ap-desc::-webkit-scrollbar { width:6px; } .ap-desc::-webkit-scrollbar-thumb { background:rgb(var(--tint) / .4); border-radius:6px; }
.ap-stage { min-width:0; position:sticky; top:92px; }
.ap-items { position:sticky; top:92px; max-height:calc(100vh - 110px); display:flex; flex-direction:column; gap:10px; margin:0; padding:20px 14px; }
.ap-list { display:flex; flex-direction:column; gap:6px; overflow:auto; }
.ap-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border-radius:14px; border:0; cursor:pointer; font:inherit;
  font-size:14px; font-weight:700; color:var(--ink); background:transparent; transition:background .2s, transform .25s cubic-bezier(.34,1.45,.64,1); }
.ap-item:hover { background:rgb(var(--tint) / .14); transform:translateX(3px); }
.ap-item.on { background:linear-gradient(180deg, var(--accent2), var(--accent)); color:var(--light); box-shadow:0 10px 18px -10px rgb(var(--shadow) / .8); }
.ap-item:focus-visible { outline:3px solid var(--edge); outline-offset:2px; }
.ap-ic { flex:none; width:24px; height:24px; border-radius:8px; display:grid; place-items:center; font-size:10px; background:rgb(var(--tint) / .2); }
.ap-item.on .ap-ic { background:rgb(255 255 255 / .22); }
.ap-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-prev video { width:100%; display:block; aspect-ratio:16/10; background:#000; }
.gal-thumb { position:relative; }
.gal-thumb video { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.gal-play { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:16px; text-shadow:0 2px 6px rgb(0 0 0 / .6); }
.reviews { margin-top:26px; }
@media (max-width:1180px) { .ap.with-items { grid-template-columns:300px minmax(0, 1fr); } .ap.with-items .ap-items { grid-column:2; position:static; max-height:none; } }
@media (max-width:860px) { .ap, .ap.with-items { grid-template-columns:1fr; } .ap-info, .ap-stage, .ap-items { position:static; max-height:none; } .ap.with-items .ap-items { grid-column:auto; } .ap-stage { order:-1; } }

/* ---- viewer controls: play / stop / loop ---- */
.av-bar { justify-content:center; gap:10px; padding:12px 14px 16px; }
.av-btn { width:auto; height:40px; padding:0 18px; border-radius:999px; font-size:14px; display:inline-flex; align-items:center; gap:8px; }
.av-btn span { font-size:12px; }
.av-btn.on { background:linear-gradient(180deg, var(--accent2), var(--accent)); color:var(--light); box-shadow:0 10px 18px -8px rgb(var(--shadow) / .7); }
.av-play:not(.on) { background:rgb(var(--tint) / .16); color:var(--ink); box-shadow:none; }
.av-loop.on { color:var(--light); }
.item-name { flex:1; min-width:0; font:inherit; font-weight:700; color:var(--ink); background:rgb(var(--glass) / .7); border:1.5px solid rgb(var(--tint) / .35); border-radius:12px; padding:8px 12px; }

.wrap.xwide { max-width:1380px; }

/* live 3D miniature in the gallery strip */
.gal-3d { width:84px; padding:0; font:inherit; color:var(--light); opacity:.8;
  background:radial-gradient(120% 90% at 50% 0%, rgb(var(--tint) / .35), rgb(var(--glass) / .95) 75%); }
.gal-3d canvas { width:100%; height:100%; display:block; }
.gal-3d-tag { position:absolute; right:5px; bottom:4px; padding:1px 6px; border-radius:6px; font-size:10px; font-weight:800; letter-spacing:.04em;
  color:var(--light); background:linear-gradient(180deg, var(--accent2), var(--accent)); }
.gal-3d.on { opacity:1; border-color:var(--accent); }

.av-btn.on, :root[data-theme="dark"] .av-btn.on { color:var(--light); }

/* ---- availability + admin quick tools ---- */
.badge-off { position:absolute; top:12px; right:12px; z-index:2; padding:5px 11px; border-radius:999px; font-size:12px; font-weight:800;
  color:var(--light); background:rgb(40 40 60 / .78); backdrop-filter:blur(6px); }
.off-note { padding:10px 12px; border-radius:14px; font-size:13.5px; font-weight:700; color:var(--danger) !important; background:color-mix(in srgb, var(--danger) 12%, transparent); }
.admin-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 12px; border-radius:16px; background:rgb(var(--tint) / .1); border:1px dashed rgb(var(--tint) / .5); }
.admin-tag { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--light); background:var(--accent); padding:3px 8px; border-radius:6px; }
.admin-link { font-size:13px; font-weight:700; color:var(--accent); }
:root[data-theme="dark"] .admin-link { color:var(--accent2); }
.switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:13.5px; font-weight:700; color:var(--ink); }
.switch input { position:absolute; opacity:0; width:1px; height:1px; }
.switch-ui { position:relative; width:42px; height:24px; flex:none; border-radius:999px; background:rgb(var(--tint) / .3); transition:background .25s; }
.switch-ui::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgb(0 0 0 / .3);
  transition:transform .3s cubic-bezier(.34,1.45,.64,1); }
.switch input:checked + .switch-ui { background:var(--ok); }
.switch input:checked + .switch-ui::after { transform:translateX(18px); }
.switch input:focus-visible + .switch-ui { outline:3px solid var(--edge); outline-offset:2px; }
.switch input:disabled + .switch-ui { opacity:.5; }
.ap-new { margin-left:auto; flex:none; font-size:10.5px; font-weight:800; padding:2px 7px; border-radius:999px; color:var(--light); background:var(--ok); }
.ap-item.on .ap-new { background:rgb(255 255 255 / .25); }
.quick-add { margin-top:6px; }
.quick-open { width:100%; }
.quick-form { display:flex; flex-direction:column; gap:8px; }
.quick-form[hidden] { display:none; }
.quick-form input:not([type=file]), .quick-form select, .quick-form textarea { font:inherit; font-size:13.5px; color:var(--ink); background:rgb(var(--glass) / .75);
  border:1.5px solid rgb(var(--tint) / .4); border-radius:12px; padding:9px 11px; width:100%; }
.quick-form input[type=file] { font-size:12px; color:var(--soft); }
.quick-form .btn { padding:9px 14px; font-size:13.5px; }

/* ---- brand H: pure characters ---- */
.brand { height:64px; }
.brand-h { margin:0; font:900 13.5px/.88 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing:.5px; white-space:pre;
  background:linear-gradient(170deg, var(--accent2), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 5px rgb(var(--shadow) / .3)); transition:transform .35s cubic-bezier(.34,1.45,.64,1); }
:root[data-theme="dark"] .brand-h { background:linear-gradient(170deg, #ffffff, var(--accent2)); -webkit-background-clip:text; background-clip:text; }

/* ---- no flash between pages ----
   the current tab's pill is plain CSS (present on the very first paint, no JS pop-in),
   and the navigation bar stays put during page transitions instead of cross-fading */
.seg-ind { display:none; }
.seg a[aria-current] { color:var(--light); background:linear-gradient(180deg, var(--accent2), var(--accent));
  box-shadow:0 0 0 2px var(--ring), 0 14px 26px -8px rgb(var(--shadow) / .8), 0 4px 8px -2px rgb(var(--shadow) / .4), inset 0 1px 0 rgb(255 255 255 / .22); }
.nav { view-transition-name:site-nav; }
::view-transition-group(site-nav) { animation-duration:0s; }

/* page changes are view transitions: the old page stays on screen until the new one, background already drawn
   (liquid.js is render-blocking in <head>), takes over; the content cross-fades, the background and the bar don't move */
@view-transition { navigation:auto; }
/* the animated background is its own layer during page transitions: no cross-fade between two backgrounds */
.liquid { view-transition-name:site-bg; }
::view-transition-group(site-bg) { animation-duration:0s; }
::view-transition-old(site-bg) { animation:none; opacity:0; }
::view-transition-new(site-bg) { animation:none; }

/* the scrollbar space is always reserved: hiding/showing the scrollbar (splash screen, short pages) no longer shifts the page sideways */
html { scrollbar-gutter:stable; }

/* after the splash, on-screen content only fades (no slide): reads as one continuous transition */
.reveal.in.soft { animation:reveal-soft .7s ease var(--d, 0ms) backwards; }

/* ---- codes for buyers of animation packs ---- */
.codes { display:flex; flex-direction:column; gap:10px; }
.codes[hidden] { display:none; }
.code-row { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:14px; background:rgb(var(--glass) / .6); border:1px solid var(--rim); }
.code-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.code-top .btn { padding:6px 12px; font-size:13px; }
.code-row textarea { width:100%; resize:none; font-size:11.5px; color:var(--soft); background:transparent; border:0; outline:none; word-break:break-all; }

/* ---- tutorial ---- */
.tuto ol.steps { padding-left:0; list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:12px; }
.tuto ol.steps li { counter-increment:step; position:relative; padding:14px 16px 14px 56px; border-radius:16px; background:rgb(var(--glass) / .55); border:1px solid var(--rim); }
.tuto ol.steps li::before { content:counter(step); position:absolute; left:14px; top:14px; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; color:var(--light); background:linear-gradient(180deg, var(--accent2), var(--accent)); }
.tuto code { font-family:ui-monospace, Consolas, monospace; font-size:.92em; padding:1px 6px; border-radius:6px; background:rgb(var(--tint) / .14); }

/* ---- logo characters (split by brand-fx.js so they can scatter) ---- */
.brand-h:has(.bx) { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--accent); }
.brand .bx { display:inline-block; will-change:transform; }
.brand-h .bx { color:color-mix(in srgb, var(--accent2) calc((1 - var(--row, 0)) * 100%), var(--accent)); }
:root[data-theme="dark"] .brand-h .bx { color:color-mix(in srgb, #ffffff calc((1 - var(--row, 0)) * 100%), var(--accent2)); }

/* ---- Apprendre: posts ---- */
.posts-head { text-align:center; max-width:640px; margin:26px auto 22px; }
.posts { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; }
.post-card { display:flex; flex-direction:column; gap:10px; padding:24px; border-radius:26px; text-decoration:none; color:var(--ink);
  background:rgb(var(--glass) / .84); border:1px solid var(--rim);
  box-shadow:0 1px 0 rgb(255 255 255 / var(--hi)) inset, 0 26px 44px -26px rgb(var(--shadow) / .7), 0 6px 12px -6px rgb(var(--shadow) / .25);
  transition:transform .4s cubic-bezier(.34,1.45,.64,1), box-shadow .3s; }
.post-card:hover { transform:translateY(-6px); }
.post-card:focus-visible { outline:3px solid var(--edge); outline-offset:3px; }
.post-card h3 { font-size:21px; font-weight:800; letter-spacing:-.01em; }
.post-card p { color:var(--soft); line-height:1.6; flex:1; }
.post-meta { font-size:12.5px; color:var(--soft); }
.post .pill { margin-bottom:6px; }

/* ---- admin: leak tracing ---- */
.trace textarea { font-family:ui-monospace, Consolas, monospace; font-size:12.5px; }
.trace-row { border-left:4px solid transparent; }
.trace-match { border-left-color:var(--danger); }
.trace-maybe { border-left-color:#e3a33b; }
.trace-no { opacity:.7; }

/* ---- packs sold item by item ---- */
.price-unit { font-weight:600; color:var(--soft); font-size:.85em; }
.price-sub { margin:-4px 0 10px; color:var(--soft); font-size:13.5px; }
.buy-more { margin:14px 0 6px; font-weight:700; }
.codes-block + .buy-more { margin-top:18px; }
.ap-hint { color:var(--soft); font-size:13px; margin:-4px 0 6px; }
.ap-all { background:none; border:0; padding:2px 0 8px; color:var(--accent); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.ap-all:hover { text-decoration:underline; }
.ap-row { display:flex; align-items:center; gap:8px; transition:opacity .2s; }
.ap-row > .ap-item { flex:1; min-width:0; }
.ap-row.off > .ap-item { opacity:.5; }
.ap-check { position:relative; flex:none; width:22px; height:22px; cursor:pointer; }
.ap-check input { position:absolute; inset:0; margin:0; opacity:0; cursor:inherit; }
.ap-box { display:block; width:22px; height:22px; border-radius:7px; border:2px solid var(--rim); background:rgb(var(--glass) / .6); transition:background .15s, border-color .15s; }
.ap-check input:checked + .ap-box { background:var(--accent); border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size:16px; background-position:center; background-repeat:no-repeat; }
.ap-check input:focus-visible + .ap-box { outline:3px solid var(--edge); outline-offset:2px; }
.ap-check input:disabled { cursor:default; }
.ap-check input:disabled + .ap-box { opacity:.55; }
.ap-own { margin-left:auto; font-size:11px; font-weight:800; padding:2px 8px; border-radius:99px; background:color-mix(in srgb, var(--ok) 18%, transparent); color:var(--ok); }
.ap-new + .ap-own { margin-left:6px; }
.ap-list { overflow-x:hidden; }
.ap-own { flex:none; }
.ap-row .ap-item:hover { transform:none; }

/* ---- model packs: animation option ---- */
.anim-opt { display:flex; align-items:center; gap:10px; margin:8px 0 12px; padding:10px 12px; border-radius:14px; cursor:pointer;
  background:rgb(var(--glass) / .5); border:1px solid var(--rim); transition:border-color .2s, background .2s; }
.anim-opt.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); }
.anim-opt input { position:absolute; opacity:0; width:1px; height:1px; }
.anim-opt .ap-box { flex:none; }
.anim-opt input:checked + .ap-box { background:var(--accent); border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-size:16px; background-position:center; background-repeat:no-repeat; }
.anim-opt input:focus-visible + .ap-box { outline:3px solid var(--edge); outline-offset:2px; }
.anim-opt span:not(.ap-box) { flex:1; display:flex; flex-direction:column; font-weight:700; font-size:14px; }
.anim-opt small { font-weight:500; color:var(--soft); font-size:12px; }
.anim-opt strong { font-size:14px; white-space:nowrap; }
.av-bar.off { display:none; }   /* a model that does not move: no play controls */
.mv .av-c { cursor:grab; }
.mv .av-c:active { cursor:grabbing; }

/* ---- quality levels (right column) ---- */
.q-wrap { display:flex; flex-direction:column; gap:6px; margin:2px 0 4px; }
.q-title { font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--soft); }
.q-tabs { display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:4px; padding:4px; border-radius:16px;
  background:rgb(var(--glass) / .5); border:1px solid var(--rim); }
.q-tab { display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 4px; border:0; border-radius:12px; cursor:pointer;
  background:none; color:var(--ink); font:inherit; transition:background .2s, color .2s, box-shadow .2s; }
.q-tab strong { font-size:13px; font-weight:800; }
.q-tab span { font-size:11.5px; color:var(--soft); font-weight:600; }
.q-tab:hover { background:rgb(var(--tint) / .14); }
.q-tab.on { background:linear-gradient(180deg, var(--accent2), var(--accent)); color:var(--light); box-shadow:0 8px 16px -10px rgb(var(--shadow) / .8); }
.q-tab.on span { color:rgb(255 255 255 / .85); }
.q-tab:focus-visible { outline:3px solid var(--edge); outline-offset:2px; }
.q-hint { color:var(--soft); font-size:11.5px; }
.ap-items .anim-opt { margin:4px 0 2px; padding:8px 10px; }
.ap-items .anim-opt span:not(.ap-box) { font-size:13px; }
.ap-hint.warn { color:var(--danger); font-weight:700; }
.ap-own[hidden], .ap-new[hidden] { display:none; }
/* admin: items validated by the team, one by one (a discreet green check next to the name; visitors never get the flag) */
.ap-valid { position:relative; flex:none; display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%;
  color:#fff; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 20%, transparent); }
.ap-valid::before { content:"\2713"; font-size:10.5px; font-weight:900; line-height:1; }
.ap-valid > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ap-valid[hidden] { display:none; }
:root[data-theme="dark"] .ap-valid { color:#06281A; }
.ap-item.on .ap-valid { color:#1F8A52; background:#fff; box-shadow:0 0 0 3px rgb(255 255 255 / .22); }
.ap-vrow { gap:6px; }
.ap-vrow .ap-name { white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-height:1.25; }   /* the team reads every name */
.ap-vswitch { position:relative; flex:none; padding:4px 2px; }
.switch-sm .switch-ui { width:30px; height:18px; }
.switch-sm .switch-ui::after { width:12px; height:12px; }
.switch-sm input:checked + .switch-ui::after { transform:translateX(12px); }
.ap-vcount { margin:-4px 0 2px; font-size:12.5px; font-weight:800; color:var(--soft); }
.ap-vcount::before { content:"\2713  "; color:var(--ok); }
.ap-vcount.all { color:var(--ok); }

/* ---- languages ---- */
html.i18n-wait body { visibility:hidden; }               /* English: hidden until translated (2 s at most) */
html[lang="en"] [data-l="fr"], html:not([lang="en"]) [data-l="en"] { display:none !important; }
.lang-btn { min-width:38px; font:inherit; font-size:12.5px; font-weight:800; letter-spacing:.04em; }
.lang-note { margin-bottom:14px; font-weight:600; }

/* ---- slow device (detected by the 3D viewer): no blur, still background ---- */
html.low-gpu .seg, html.low-gpu .brand, html.low-gpu .menu-pop, html.low-gpu .badge-off { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html.low-gpu .seg, html.low-gpu .brand { background:rgb(var(--glass) / .94); }
.mv-debug { position:absolute; left:10px; top:10px; z-index:3; margin:0; padding:8px 10px; border-radius:10px; font:11.5px/1.45 ui-monospace, Consolas, monospace;
  color:#e8eaff; background:rgb(10 12 30 / .78); pointer-events:none; white-space:pre; }

/* ---- page background: the loading screen's character field, lightly blurred (liquid.js) ---- */
.liquid { inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px); opacity:1; filter:blur(1px); }
:root[data-theme="dark"] .liquid { opacity:1; }
html.low-gpu .liquid { filter:none; }

/* ---- pale violet glass: frosted, with a sheen and lit edges, the background showing through ---- */
:root { --vg:230 218 255; --vg-a:.34; --vg-line:rgb(255 255 255 / .7); --vg-lo:rgb(167 139 250 / .3); --vg-hi:rgb(255 255 255 / .95);
  --vg-sheen:rgb(255 255 255 / .55); --vg-blur:blur(10px) saturate(1.7) brightness(1.04);
  --vbtn:linear-gradient(160deg, rgb(205 188 255 / .78), rgb(150 120 245 / .72) 55%, rgb(128 98 236 / .8)); --vsoft:rgb(190 170 255 / .22); }
:root[data-theme="dark"] { --vg:190 170 255; --vg-a:.08; --vg-line:rgb(225 214 255 / .3); --vg-lo:rgb(190 170 255 / .12); --vg-hi:rgb(255 255 255 / .28);
  --vg-sheen:rgb(230 220 255 / .14); --vg-blur:blur(10px) saturate(1.5) brightness(1.15);
  --vbtn:linear-gradient(160deg, rgb(190 170 255 / .55), rgb(140 110 240 / .45) 55%, rgb(118 88 226 / .55)); --vsoft:rgb(196 178 255 / .14); }
.panel, .tile, .card, .post-card, .foot-in, .menu-pop, .rv, .rv-form, .about-points li, .row, .code-row, .tuto ol.steps li, .q-tabs, .anim-opt,
.seg, .brand, html.stuck .seg, html.stuck .brand {
  /* a diagonal sheen across the top-left, then the pale violet body */
  background:
    linear-gradient(125deg, var(--vg-sheen) 0%, rgb(255 255 255 / 0) 38%),
    linear-gradient(180deg, rgb(var(--vg) / calc(var(--vg-a) + .1)), rgb(var(--vg) / var(--vg-a))) !important;
  backdrop-filter:var(--vg-blur) !important; -webkit-backdrop-filter:var(--vg-blur) !important;
  border:1px solid var(--vg-line) !important; border-bottom-color:var(--vg-lo) !important; border-right-color:var(--vg-lo) !important;
  box-shadow:inset 0 1px 0 var(--vg-hi), inset 1px 0 0 rgb(255 255 255 / .18), inset 0 -10px 24px -14px rgb(var(--vg) / .5),
    0 24px 44px -26px rgb(var(--shadow) / .5), 0 6px 12px -8px rgb(var(--shadow) / .22) !important; }
.btn-primary, .q-tab.on, .seg-ind, .ap-item.on, .seg .menu-btn[aria-expanded="true"], .tile-ic {
  background:linear-gradient(125deg, rgb(255 255 255 / .4) 0%, rgb(255 255 255 / 0) 45%), var(--vbtn) !important;
  border:1px solid rgb(255 255 255 / .45); border-bottom-color:rgb(255 255 255 / .12);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .6), 0 12px 24px -12px rgb(110 80 220 / .55) !important; }
.btn-soft { background:linear-gradient(125deg, rgb(255 255 255 / .3), rgb(255 255 255 / 0) 50%), var(--vsoft);
  border:1px solid var(--vg-line); box-shadow:inset 0 1px 0 rgb(255 255 255 / .4); }
.btn-soft:hover:not([disabled]) { background:linear-gradient(125deg, rgb(255 255 255 / .35), rgb(255 255 255 / 0) 50%), rgb(167 139 250 / .32); }
.pill { background:var(--vsoft); }
/* slow device: no frost, a more opaque glass instead */
html.low-gpu :is(.panel, .tile, .card, .post-card, .foot-in, .menu-pop, .rv, .rv-form, .about-points li, .row, .code-row, .q-tabs, .anim-opt, .seg, .brand) {
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important; --vg-a:.82; }
html.low-gpu[data-theme="dark"] { --vg:40 34 80; }

/* ---- console style: square corners, monospace labels, frame corners, ASCII marks (less generic than pills and gradients) ---- */
:root { --mono:ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace; --vx:#6a52dc; --vfill:rgb(184 166 255 / .9); --vink:#17123a; }
:root[data-theme="dark"] { --vx:#b8a6ff; --vfill:rgb(184 166 255 / .88); --vink:#120f2a; }
.panel { border-radius:12px; }
.seg, .brand { border-radius:12px; }
.seg a { border-radius:5px; }
.seg a[aria-current] { color:var(--vink) !important; background:var(--vfill) !important; box-shadow:inset 0 1px 0 rgb(255 255 255 / .5) !important; }
.search input, .field input, .field textarea, .field select, select { border-radius:5px !important; }

/* buttons: flat, near-square, monospace capitals; brackets light up on hover */
.btn { border-radius:4px; font-family:var(--mono); text-transform:uppercase; letter-spacing:.07em; font-size:13px; gap:10px; }
.btn:hover { transform:none; }
.btn:active { transform:translateY(1px); }
.btn-primary, .btn-soft { position:relative; }
.btn-primary::before, .btn-soft::before { content:"["; opacity:.35; transition:opacity .2s, transform .2s; }
.btn-primary::after, .btn-soft::after { content:"]"; opacity:.35; transition:opacity .2s, transform .2s; }
.btn-primary:hover:not([disabled])::before, .btn-soft:hover:not([disabled])::before { opacity:1; transform:translateX(-3px); }
.btn-primary:hover:not([disabled])::after, .btn-soft:hover:not([disabled])::after { opacity:1; transform:translateX(3px); }
.btn-primary { background:var(--vfill) !important; color:var(--vink) !important; border:1px solid rgb(255 255 255 / .5);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .55), 0 10px 22px -14px rgb(90 60 200 / .7) !important; }
.btn-soft { background:rgb(var(--vg) / .12); color:var(--ink); border:1px solid color-mix(in srgb, var(--vx) 55%, transparent); box-shadow:none; }
.btn-soft:hover:not([disabled]) { background:color-mix(in srgb, var(--vx) 16%, transparent); }
.q-tab, .ap-item, .q-tabs, .anim-opt { border-radius:5px !important; }
.pill { border-radius:3px; font-family:var(--mono); font-weight:600; font-size:12px; letter-spacing:.04em; text-transform:lowercase; color:var(--vx) !important; }
.pill::before { content:"#"; opacity:.6; margin-right:2px; }

/* tiles and cards: square glass with marked corners instead of rounded floating cards */
.tile, .card, .post-card { border-radius:4px !important; }
.tile:hover, .card:hover, .post-card:hover { transform:none !important; }
.tile::after, .card::after, .post-card::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:2; --k:16px;  /* on the border: tiles use contain:paint */
  background:
    linear-gradient(var(--vx), var(--vx)) top left / var(--k) 2px no-repeat, linear-gradient(var(--vx), var(--vx)) top left / 2px var(--k) no-repeat,
    linear-gradient(var(--vx), var(--vx)) bottom right / var(--k) 2px no-repeat, linear-gradient(var(--vx), var(--vx)) bottom right / 2px var(--k) no-repeat;
  transition:background-size .3s cubic-bezier(.3,.7,.3,1); }
.tile:hover::after, .card:hover::after, .post-card:hover::after {
  background-size:34px 2px, 2px 34px, 34px 2px, 2px 34px; }
.card, .post-card { position:relative; }
.tile-top { display:flex; justify-content:space-between; align-items:baseline; font-family:var(--mono); }
.tile-ix { font-size:12px; letter-spacing:.08em; color:var(--soft); }
.tile .tile-ic { width:auto; height:auto; display:inline; background:none !important; box-shadow:none !important; border:0 !important;
  font-family:var(--mono); font-size:24px; font-weight:700; letter-spacing:.04em; color:var(--vx); transition:letter-spacing .3s; }
.tile:hover .tile-ic { letter-spacing:.2em; }
.tile h3 { margin-top:14px; }
.tile-go { font-family:var(--mono); font-weight:600; font-size:13px; text-transform:lowercase; letter-spacing:.04em; color:var(--vx) !important; gap:0; }
.tile-go::before { content:"> "; white-space:pre; }
.tile-go::after { content:"_"; opacity:0; }
.tile:hover .tile-go::after, .post-card:hover .tile-go::after { animation:hm-caret 1s steps(1) infinite; }
.tile-go svg { display:none; }
@keyframes hm-caret { 0%, 100% { opacity:1; } 50% { opacity:0; } }
.card img { border-radius:0; }
.card { overflow:visible !important; } .card > img { border-radius:3px 3px 0 0; }
/* the product page in the same console style */
.btn { letter-spacing:.04em; font-size:12.5px; }
.detail-3d, .detail-prev { border-radius:6px !important; }
.gal-thumb { border-radius:3px; }
.gal-thumb:hover { transform:none; }
.av-btn { border-radius:4px !important; font-family:var(--mono); text-transform:lowercase; font-size:12.5px; letter-spacing:.04em; }
.av-btn:hover { transform:none; background:color-mix(in srgb, var(--vx) 22%, transparent); }
.av-speed { border-radius:4px; font-family:var(--mono); }
.ap-ic { border-radius:3px; }
.ap-title::after { border-radius:0; height:2px; background:var(--vx); }

/* ---- home showcase: one window, the sections one after the other, a bar fills under the current tab ---- */
.show { position:relative; margin:0 0 22px; padding:0; border-radius:6px; overflow:hidden;
  background:linear-gradient(125deg, var(--vg-sheen) 0%, rgb(255 255 255 / 0) 38%), linear-gradient(180deg, rgb(var(--vg) / calc(var(--vg-a) + .1)), rgb(var(--vg) / var(--vg-a)));
  backdrop-filter:var(--vg-blur); -webkit-backdrop-filter:var(--vg-blur);
  border:1px solid var(--vg-line); border-bottom-color:var(--vg-lo); border-right-color:var(--vg-lo);
  box-shadow:inset 0 1px 0 var(--vg-hi), 0 24px 44px -26px rgb(var(--shadow) / .5); }
.show::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:3; --k:18px;
  background:
    linear-gradient(var(--vx), var(--vx)) top left / var(--k) 2px no-repeat, linear-gradient(var(--vx), var(--vx)) top left / 2px var(--k) no-repeat,
    linear-gradient(var(--vx), var(--vx)) bottom right / var(--k) 2px no-repeat, linear-gradient(var(--vx), var(--vx)) bottom right / 2px var(--k) no-repeat; }
.show-tabs { display:flex; border-bottom:1px solid var(--vg-lo); overflow-x:auto; scrollbar-width:none; }
.show-tabs::-webkit-scrollbar { display:none; }
.show-tab { position:relative; flex:1 0 auto; display:flex; align-items:baseline; gap:10px; padding:16px 20px 18px; border:0; background:none; cursor:pointer;
  font:600 14px/1 var(--mono); letter-spacing:.04em; color:var(--soft); text-align:left; transition:color .25s, background-color .25s; }
.show-tab + .show-tab { border-left:1px solid var(--vg-lo); }
.show-tab:hover { color:var(--ink); background:rgb(var(--vg) / .12); }
.show-tab[aria-selected="true"] { color:var(--ink); }
.show-tab:focus-visible { outline:2px solid var(--vx); outline-offset:-2px; }
.show-ix { font-size:11px; opacity:.7; }
.show-bar { position:absolute; left:0; right:0; bottom:0; height:2px; background:color-mix(in srgb, var(--vx) 18%, transparent); }
.show-bar i { position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:var(--vx); }
.show-tab.done .show-bar i { transform:scaleX(1); opacity:.45; }
.show-tab[aria-selected="true"] .show-bar i { animation:show-fill 7s linear forwards; }
/* held while the keyboard is inside it, or while it is off screen */
.show:has(:focus-visible) .show-tab[aria-selected="true"] .show-bar i,
.show.away .show-tab[aria-selected="true"] .show-bar i { animation-play-state:paused; }
.show.still .show-tab[aria-selected="true"] .show-bar i { animation:none; transform:scaleX(1); }
@keyframes show-fill { to { transform:scaleX(1); } }
.show-stage { display:grid; }
.show-slide { grid-area:1 / 1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr); gap:28px; padding:30px;
  opacity:0; visibility:hidden; transform:translateX(18px); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.7,.2,1), visibility 0s .55s; }
.show-slide.on { opacity:1; visibility:visible; transform:none; transition:opacity .45s ease .08s, transform .55s cubic-bezier(.2,.7,.2,1) .08s, visibility 0s; }
.show-text { display:flex; flex-direction:column; gap:10px; }
.show-text h3 { font-size:clamp(26px, 2.6vw, 34px); font-weight:800; margin-top:10px; letter-spacing:-.01em; }
.show-text .tile-long { flex:1; }
.show-go { align-self:flex-start; margin-top:8px; }
.show-media { display:grid; gap:12px; min-height:300px; }
.show-media.n2 { grid-template-columns:1fr 1fr; }
.show-media.n3 { grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; }
.show-media.n3 .show-item:first-child { grid-row:1 / 3; }
.show-item { position:relative; display:block; overflow:hidden; border-radius:4px; border:1px solid var(--vg-line); background:var(--banner); text-decoration:none; color:#fff; }
.show-item img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.show-item:hover img { transform:scale(1.04); }
.show-cap { position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:28px 14px 12px;
  background:linear-gradient(180deg, rgb(10 8 30 / 0), rgb(10 8 30 / .78)); font-family:var(--mono); font-size:12.5px; letter-spacing:.03em; }
.show-cap b { font-family:inherit; font-size:14px; font-weight:700; }
.show-cap b::before { content:"> "; opacity:.7; }
.show-soon { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; border:1px dashed color-mix(in srgb, var(--vx) 45%, transparent);
  border-radius:4px; font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:lowercase; color:var(--soft); }
.show-glyph { font-size:clamp(48px, 7vw, 84px); font-weight:700; color:var(--vx); letter-spacing:.06em; opacity:.85; }
.show-soon > span:last-child::after { content:"_"; animation:hm-caret 1s steps(1) infinite; }
@media (max-width:760px) {
  .show-slide { grid-template-columns:1fr; padding:22px; gap:20px; }
  .show-media { min-height:220px; }
  .show-tab { padding:14px 14px 16px; }
  .show-tab .show-ix { display:none; }
}
html.low-gpu .show { backdrop-filter:none; -webkit-backdrop-filter:none; --vg-a:.82; }
.show .tile-ic { width:auto; height:auto; display:inline; background:none !important; box-shadow:none !important; border:0 !important;
  font-family:var(--mono); font-size:24px; font-weight:700; letter-spacing:.04em; color:var(--vx); }
.show-text .tile-top { margin-bottom:2px; }
.show-bar { height:3px; }
.about-points li { border-radius:4px !important; }

/* ---- the same window and thumbnail style everywhere: near-square glass, violet frame corners ---- */
/* windows */
.panel, .foot-in, .rv-form, .admin-tools, .detail-3d, .detail-prev, .menu-pop, .seg, .brand, html.stuck .seg, html.stuck .brand { border-radius:6px !important; }
/* thumbnails and rows */
.row, .rv, .about-points li, .code-row, .tuto ol.steps li, .anim-box, .toast, .item-name { border-radius:4px !important; }
.seg a, .seg-ind, .seg-hover, .seg .seg-btn, .rate-btn, .field input[type=file]::file-selector-button { border-radius:4px !important; }
.ap-box { border-radius:3px; }
:where(.panel, .foot-in, .rv-form, .admin-tools, .detail-3d, .detail-prev, .row, .rv, .about-points li, .code-row, .anim-box, .toast, .brand) { position:relative; }
.panel::after, .foot-in::after, .rv-form::after, .admin-tools::after, .detail-3d::after, .detail-prev::after, .menu-pop::after, .seg::after, .brand::after,
.row::after, .rv::after, .about-points li::after, .code-row::after, .tuto ol.steps li::after, .anim-box::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3; --k:18px;
  background:
    linear-gradient(var(--vx), var(--vx)) top left / var(--k) 2px no-repeat, linear-gradient(var(--vx), var(--vx)) top left / 2px var(--k) no-repeat,
    linear-gradient(var(--vx), var(--vx)) bottom right / var(--k) 2px no-repeat, linear-gradient(var(--vx), var(--vx)) bottom right / 2px var(--k) no-repeat;
  transition:background-size .3s cubic-bezier(.3,.7,.3,1); }
.seg::after, .brand::after { --k:12px; }
.row::after, .rv::after, .about-points li::after, .code-row::after, .tuto ol.steps li::after, .anim-box::after { --k:10px; }
.row:hover::after, .about-points li:hover::after, .anim-box:hover::after { background-size:22px 2px, 2px 22px, 22px 2px, 2px 22px; }

/* ---- commissions: presentation, reviews, the big button, the tickets, the chat ---- */
.comm-intro h2 { font-size:clamp(30px, 3.2vw, 42px); margin:10px 0 8px; }
.comm-lead { max-width:760px; font-size:16.5px; line-height:1.65; color:var(--soft); }
.comm-steps { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; margin:22px 0 0; padding:0; }
.comm-steps li { position:relative; display:flex; flex-direction:column; gap:6px; padding:16px; border:1px solid var(--vg-line); border-radius:4px; background:rgb(var(--vg) / .1); }
.comm-steps li::after { content:""; position:absolute; inset:0; pointer-events:none; --k:10px;
  background:linear-gradient(var(--vx), var(--vx)) top left / var(--k) 2px no-repeat, linear-gradient(var(--vx), var(--vx)) top left / 2px var(--k) no-repeat,
    linear-gradient(var(--vx), var(--vx)) bottom right / var(--k) 2px no-repeat, linear-gradient(var(--vx), var(--vx)) bottom right / 2px var(--k) no-repeat; }
.comm-steps p { color:var(--soft); font-size:14px; line-height:1.55; }
.comm-revs-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px; }
.comm-avg, .comm-stars { font-family:var(--mono); color:var(--vx); letter-spacing:.08em; }
.comm-revs { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px; margin-top:14px; }
.comm-rev { position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--vg-line); border-radius:4px; background:rgb(var(--vg) / .12); }
.comm-rev img { width:100%; aspect-ratio:16 / 9; object-fit:cover; display:block; }
.comm-rev-body { display:flex; flex-direction:column; gap:6px; padding:14px 16px; }
.comm-rev h3 { font-size:16px; }
.comm-rev p { color:var(--soft); font-size:14px; line-height:1.55; }
.comm-rev small { color:var(--soft); opacity:.85; font-size:12.5px; }
.comm-cta { display:flex; flex-direction:column; align-items:center; gap:12px; padding:34px 16px 38px; text-align:center; }
.comm-new { font-size:15px; padding:18px 34px; letter-spacing:.08em; }
.comm-cta-note { color:var(--soft); font-size:14px; max-width:460px; }
.comm-row { width:100%; border:1px solid var(--vg-line); cursor:pointer; font:inherit; color:var(--ink); text-align:left;
  background:rgb(var(--vg) / .1) !important; justify-content:space-between; }
.comm-row:hover { background:rgb(var(--vg) / .22) !important; }
.comm-row .row-title { font-weight:700; }
.comm-row small { color:var(--soft); }
.comm-row-side { display:flex; align-items:center; gap:8px; flex:none; }
.comm-state { font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:lowercase; padding:4px 8px; border-radius:3px;
  border:1px solid color-mix(in srgb, var(--vx) 45%, transparent); color:var(--vx); white-space:nowrap; }
.comm-state.s-pay { background:var(--vfill); color:var(--vink); border-color:transparent; }
.comm-state.s-done { opacity:.75; }
.comm-state.s-cancelled { opacity:.5; }
.comm-unread { min-width:22px; height:22px; padding:0 6px; display:grid; place-items:center; border-radius:3px; background:var(--vx); color:var(--vink);
  font:700 12px/1 var(--mono); }
.comm-filters { margin:6px 0 14px; }
.comm-filters .q-tab { font-family:var(--mono); font-size:12px; padding:8px 6px; border:0; cursor:pointer; background:none; color:var(--soft); }
.comm-filters .q-tab.on { background:var(--vfill); color:var(--vink); }
.comm-earn-title { margin:22px 0 10px; font-size:17px; }
.comm-table { width:100%; border-collapse:collapse; font-size:14px; }
.comm-table th, .comm-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--vg-lo); }
.comm-table th { font:600 12px var(--mono); letter-spacing:.05em; color:var(--soft); text-transform:lowercase; }
.comm-table td:last-child, .comm-table th:last-child { text-align:right; font-family:var(--mono); }
.comm-table tr:last-child td { font-weight:700; border-bottom:0; }

/* the ticket */
.comm-view .back { display:inline-block; margin:0 0 12px; }
.comm-grid { display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:20px; align-items:start; }
.comm-chat { display:flex; flex-direction:column; padding:0 !important; min-height:min(76vh, 760px); }
.comm-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid var(--vg-lo); }
.comm-head h2 { font-size:19px; margin:0; overflow-wrap:anywhere; }
.comm-log { flex:1; display:flex; flex-direction:column; gap:12px; padding:20px 22px; overflow-y:auto; max-height:calc(100vh - 290px); min-height:320px; }
.msg { max-width:min(78%, 560px); }
.msg-sys { align-self:center; max-width:90%; text-align:center; font:12.5px/1.5 var(--mono); color:var(--soft); }
.msg-sys::before { content:"\2014  "; }
.msg-sys::after { content:"  \2014"; }
.msg-brief { align-self:flex-end; display:flex; flex-direction:column; gap:6px; padding:14px 16px; border:1px dashed color-mix(in srgb, var(--vx) 55%, transparent);
  border-radius:4px; background:rgb(var(--vg) / .1); }
.msg-brief p { white-space:pre-wrap; font-size:14.5px; line-height:1.55; }
.msg-brief small { color:var(--soft); }
.msg-me { align-self:flex-end; }
.msg-them { align-self:flex-start; }
.msg-meta { display:flex; align-items:baseline; gap:8px; margin:0 2px 4px; font-size:12px; color:var(--soft); }
.msg-me .msg-meta { justify-content:flex-end; }
.msg-meta b { color:var(--ink); font-weight:700; }
.msg-meta time { font-family:var(--mono); font-size:11px; opacity:.8; }
.msg-badge { font:600 10.5px/1 var(--mono); letter-spacing:.06em; text-transform:lowercase; padding:3px 6px; border-radius:3px; background:var(--vfill); color:var(--vink); }
.msg-text { white-space:pre-wrap; overflow-wrap:anywhere; padding:11px 14px; border-radius:4px; font-size:15px; line-height:1.55;
  background:rgb(var(--vg) / .16); border:1px solid var(--vg-lo); }
.msg-me .msg-text { background:color-mix(in srgb, var(--vx) 24%, transparent); border-color:color-mix(in srgb, var(--vx) 40%, transparent); }
.msg-img { position:relative; display:block; margin-top:6px; border-radius:4px; overflow:hidden; border:1px solid var(--vg-line); max-width:320px; }
.msg-img img { display:block; width:100%; max-height:320px; object-fit:cover; background:var(--banner); }
.msg-img .msg-badge { position:absolute; left:8px; top:8px; }
.msg-file { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-top:6px; padding:10px 12px; border-radius:4px; text-decoration:none; color:var(--ink);
  border:1px solid var(--vg-line); background:rgb(var(--vg) / .12); }
a.msg-file:hover { background:color-mix(in srgb, var(--vx) 16%, transparent); }
.msg-file small { color:var(--soft); font-size:12px; }
.msg-file-ic { font:700 13px var(--mono); color:var(--vx); }
.msg-file.locked { opacity:.75; border-style:dashed; }
.comm-compose { border-top:1px solid var(--vg-lo); padding:12px 16px 14px; }
.comm-compose-row { display:flex; align-items:flex-end; gap:10px; }
.comm-compose textarea { flex:1; resize:vertical; min-height:46px; max-height:220px; font:inherit; font-size:15px; color:var(--ink); padding:11px 12px;
  border-radius:5px; border:1px solid var(--vg-line); background:rgb(var(--glass) / .5); }
.comm-compose textarea:focus { outline:2px solid var(--vx); outline-offset:-1px; }
.comm-chips { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.comm-chips:empty { display:none; }
.comm-closed { padding:14px 22px; border-top:1px solid var(--vg-lo); color:var(--soft); font:13px var(--mono); }
.comm-side { position:sticky; top:92px; display:flex; flex-direction:column; gap:4px; padding:20px !important; max-height:calc(100vh - 110px); overflow-y:auto; }
.comm-sec { display:flex; flex-direction:column; gap:10px; padding:14px 0; border-top:1px solid var(--vg-lo); }
.comm-sec:first-child { border-top:0; padding-top:0; }
.comm-sec h3 { font:700 12.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--vx); }
.comm-dl { display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin:0; font-size:14px; }
.comm-dl dt { color:var(--soft); }
.comm-dl dd { margin:0; text-align:right; overflow-wrap:anywhere; }
.comm-consent { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--soft); }
.comm-consent input { margin-top:3px; accent-color:var(--vx); }
.comm-inline { display:flex; gap:8px; }
.comm-inline input { flex:1; min-width:0; font:inherit; color:var(--ink); padding:10px 12px; border-radius:5px; border:1px solid var(--vg-line); background:rgb(var(--glass) / .5); }
.comm-cancel { opacity:.8; }
.comm-star-pick { display:flex; gap:4px; }
.comm-star-pick button { font-size:28px; line-height:1; border:0; background:none; color:var(--vx); cursor:pointer; padding:2px; }
.comm-review textarea { font:inherit; color:var(--ink); padding:10px 12px; border-radius:5px; border:1px solid var(--vg-line); background:rgb(var(--glass) / .5); resize:vertical; }
.comm-publish { display:flex; flex-direction:column; gap:8px; font-size:13.5px; }
.comm-publish label { display:flex; gap:8px; align-items:flex-start; line-height:1.45; cursor:pointer; }
.comm-publish input { margin-top:3px; accent-color:var(--vx); }
.comm-pubbox { display:flex; flex-direction:column; gap:8px; }
.comm-pubbox > img { width:100%; border-radius:4px; }
.comm-thumbs { display:flex; flex-wrap:wrap; gap:8px; }
.comm-thumbs:empty { display:none; }
.comm-thumbs img { width:72px; height:72px; object-fit:cover; border-radius:3px; border:1px solid var(--vg-line); display:block; }
.comm-thumbs.pick button { padding:0; border:2px solid transparent; border-radius:4px; background:none; cursor:pointer; }
.comm-thumbs.pick button:hover { border-color:var(--vx); }
.comm-form { align-self:stretch; display:flex; flex-direction:column; gap:14px; padding:18px; border:1px solid var(--vg-line); border-radius:4px; background:rgb(var(--vg) / .1); }
.comm-cats { display:flex; flex-wrap:wrap; gap:6px; }
.comm-cats .q-tab { font:600 13px var(--mono); padding:9px 14px; border-radius:4px; border:1px solid var(--vg-line); background:none; color:var(--ink); cursor:pointer; }
.comm-cats .q-tab.on { background:var(--vfill); color:var(--vink); border-color:transparent; }
.comm-mini-steps { margin:10px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:8px; color:var(--soft); font-size:14px; line-height:1.5; }
@media (max-width:900px) {
  .comm-grid { grid-template-columns:1fr; }
  .comm-side { position:static; max-height:none; }
  .comm-log { max-height:62vh; }
  .msg { max-width:92%; }
}

/* an element hidden by the page stays hidden, whatever its class sets for display */
[hidden] { display:none !important; }
.comm-intro .tile-ic { width:auto; height:auto; display:inline; background:none !important; box-shadow:none !important; border:0 !important;
  font-family:var(--mono); font-size:24px; font-weight:700; letter-spacing:.04em; color:var(--vx); }

/* ---- admin dashboard ---- */
.stats-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px; }
.stats-period { min-width:280px; }
.stats-period .q-tab, .stats-period button { font:600 12px var(--mono); padding:8px 10px; border:0; cursor:pointer; background:none; color:var(--soft); }
.stats-period .q-tab.on { background:var(--vfill); color:var(--vink); }
.stats-body h3 { margin:26px 0 4px; font:700 13px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--vx); }
.stats-body > .hint { margin-bottom:12px; }
.stat-cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin:8px 0 14px; }
.stat-card { position:relative; display:flex; flex-direction:column; gap:4px; padding:14px 16px; border:1px solid var(--vg-line); border-radius:4px; background:rgb(var(--vg) / .1); }
.stat-label { font:600 11.5px var(--mono); letter-spacing:.05em; color:var(--soft); text-transform:lowercase; }
.stat-value { font-size:26px; font-weight:800; letter-spacing:-.01em; }
.stat-sub { color:var(--soft); font-size:12.5px; }
.stat-bars { display:flex; align-items:stretch; gap:3px; height:150px; padding:8px 0 0; }
.stat-col { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; gap:5px; }
.stat-bar { display:flex; flex-direction:column; min-height:2px; border-radius:2px 2px 0 0; background:color-mix(in srgb, var(--vx) 70%, transparent); overflow:hidden; }
.stat-col:hover .stat-bar { background:var(--vx); }
.stat-bars.money .stat-bar { background:none; }
.stat-bar i { display:block; min-height:0; }
.stat-bar i.s { background:var(--vx); }
.stat-bar i.c { background:#e9a3ff; }
.stat-col small { height:14px; font:10.5px var(--mono); color:var(--soft); text-align:center; white-space:nowrap; overflow:visible; }
.stat-legend { font:11.5px var(--mono); color:var(--soft); margin-top:6px; }
.stat-legend::first-letter { color:var(--vx); }
.stat-cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:18px; margin-top:16px; }
.stat-cols.two { grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
.stat-list h4 { font-size:14px; margin-bottom:8px; }
.stat-li { position:relative; display:flex; justify-content:space-between; gap:10px; padding:6px 8px; font-size:13.5px; border-radius:3px; overflow:hidden; }
.stat-li .stat-fill { position:absolute; inset:0 auto 0 0; background:color-mix(in srgb, var(--vx) 16%, transparent); z-index:0; }
.stat-li > a, .stat-li > span:not(.stat-fill), .stat-li > b { position:relative; z-index:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-li a { color:var(--ink); text-decoration:none; } .stat-li a:hover { text-decoration:underline; }
.stat-li b { font-family:var(--mono); }
.stat-table td { font-size:13px; vertical-align:top; }
.stat-table tr:last-child td { font-weight:400; }
.stat-accounts { overflow-x:auto; }
.stat-who { display:flex; flex-direction:column; gap:2px; min-width:200px; }
.stat-who strong { display:flex; align-items:center; gap:6px; }
.stat-who small { color:var(--soft); overflow-wrap:anywhere; }
.stats-search { width:100%; max-width:420px; margin:6px 0 10px; font:inherit; color:var(--ink); padding:10px 12px; border-radius:5px; border:1px solid var(--vg-line); background:rgb(var(--glass) / .5); }

/* private pack: only the team sees it */
.badge-private { position:absolute; top:46px; left:12px; z-index:2; padding:5px 10px; border-radius:3px; font:700 11.5px var(--mono); letter-spacing:.04em; text-transform:lowercase; background:#ffcf5a; color:#2a1d00; }
.switch-private small { margin-left:6px; font:600 11.5px var(--mono); color:var(--soft); }

/* product ratings: 5 stars, like the commissions */
.rate-pick { gap:2px; }
.rate-btn { width:auto !important; height:auto !important; padding:2px 3px; border:0 !important; background:none !important; box-shadow:none !important; font-size:30px; line-height:1; font-weight:400; color:var(--vx); }
.rate-btn.on { background:none !important; color:var(--vx); }
.rate-btn:hover { transform:scale(1.15); }
.rv .score { background:none !important; color:var(--vx); padding:0; font-family:var(--mono); letter-spacing:.06em; }

/* phone menu: logo + round buttons on the first line, the tabs on a second line that scrolls sideways */
.nav-tools { display:none; }
@media (max-width:700px) {
  .nav-in { flex-wrap:wrap; justify-content:space-between; row-gap:8px; }
  .brand { height:48px !important; padding:0 10px !important; }
  .brand-h { font-size:8.6px; }
  .nav-tools { display:inline-flex; align-items:center; gap:2px; padding:5px; border-radius:6px; border:1px solid var(--vg-line);
    background:linear-gradient(180deg, rgb(var(--vg) / calc(var(--vg-a) + .12)), rgb(var(--vg) / calc(var(--vg-a) + .02)));
    backdrop-filter:var(--vg-blur); -webkit-backdrop-filter:var(--vg-blur); }
  .nav-tools .seg-btn { position:relative; width:40px; height:38px; border:0; border-radius:4px; background:none; cursor:pointer; color:var(--ink);
    display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:4.5px; font:inherit; font-weight:800; font-size:13px; }
  .nav-tools .seg-btn:active { transform:scale(.9); }
  .nav-tools .menu-btn[aria-expanded="true"] { background:var(--vfill); }
  .seg { order:3; flex:1 0 100%; max-width:none !important; overflow-x:auto; justify-content:flex-start; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            mask-image:linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
  .seg::-webkit-scrollbar { display:none; }
  .seg a { flex:none; }
}
html.low-gpu .nav-tools { backdrop-filter:none; -webkit-backdrop-filter:none; }

/* footer: X (Twitter) account */
.foot-social { display:inline-flex; align-items:center; gap:6px; font:600 12.5px var(--mono); color:var(--vx); text-decoration:none; }
.foot-social svg { width:14px; height:14px; }
.foot-social:hover { text-decoration:underline; }

/* model videos (YouTube): poster first, the player only on a click */
.yt { position:relative; width:100%; aspect-ratio:16 / 9; background:#05040d; overflow:hidden; }
.yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-poster { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:#05040d; }
.yt-poster img, .yt.none img { width:100%; height:100%; object-fit:cover; display:block; }
.yt-poster::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgb(5 4 13 / 0) 55%, rgb(5 4 13 / .7)); }
.yt-play { position:absolute; left:50%; top:50%; z-index:1; width:74px; height:54px; display:grid; place-items:center; transform:translate(-50%, -50%);
  border-radius:6px; background:var(--vfill); color:var(--vink); font-size:24px; box-shadow:0 10px 30px -8px rgb(0 0 0 / .6); transition:transform .2s; }
.yt-poster:hover .yt-play { transform:translate(-50%, -50%) scale(1.08); }
.yt-name { position:absolute; left:16px; bottom:12px; z-index:1; font:700 14px var(--mono); color:#fff; text-shadow:0 1px 6px rgb(0 0 0 / .7); }
.yt.none img { filter:brightness(.55) saturate(.8); }
.yt-soon { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); padding:10px 14px; border-radius:4px; background:rgb(5 4 13 / .7);
  color:#fff; font:600 13px var(--mono); text-align:center; max-width:80%; }
.gal-3d img { width:100%; height:100%; object-fit:cover; display:block; }
.item-video { flex:1 1 220px; min-width:0; font:inherit; font-size:13px; color:var(--ink); padding:8px 10px; border-radius:4px; border:1px solid var(--vg-line); background:rgb(var(--glass) / .5); }
.item-video.ok { border-color:#7bd88f; }

.yt-bulk { display:flex; flex-direction:column; gap:8px; margin:12px 0 18px; padding:12px; border:1px dashed color-mix(in srgb, var(--vx) 50%, transparent); border-radius:4px; }
.yt-bulk textarea { font:inherit; font-size:13px; color:var(--ink); padding:10px; border-radius:4px; border:1px solid var(--vg-line); background:rgb(var(--glass) / .5); resize:vertical; }
.yt-bulk .btn { align-self:flex-start; }

/* admin: "client view" bar */
.view-bar { position:sticky; top:84px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; padding:10px 14px; border-radius:4px; background:#ffcf5a; color:#2a1d00; font:600 13px var(--mono); }
.view-bar .btn { color:#2a1d00; border-color:#2a1d00; background:rgb(255 255 255 / .35); }
@media (max-width:700px) { .view-bar { top:110px; flex-wrap:wrap; } }

/* the first H, back in the home button: a drawn H filled with characters */
svg.brand-h { width:36px; height:50px; flex:none; overflow:visible; filter:drop-shadow(0 4px 6px rgb(var(--shadow) / .35));
  background:none !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; font:inherit; letter-spacing:0; }
svg.brand-h .h-fill { fill:rgb(var(--tint) / .16); }
svg.brand-h .h-chars text { font:800 13px ui-monospace, Consolas, monospace; fill:url(#hgrad); letter-spacing:-.5px; }
svg.brand-h .h-line { fill:none; stroke:url(#hgrad); stroke-width:4.5; stroke-linejoin:round; }
:root[data-theme="dark"] svg.brand-h .h-chars text { fill:#e6e9ff; }
:root[data-theme="dark"] svg.brand-h .h-line { stroke:#e6e9ff; }
.brand:hover svg.brand-h { transform:rotate(-5deg) scale(1.06); transition:transform .35s cubic-bezier(.34,1.45,.64,1); }
@media (max-width:700px) { svg.brand-h { width:27px; height:38px; } }

/* the video hosted on the site: fills the stage, plays by itself */
.yt.own video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#05040d; }
.item-host { padding:8px 10px; font-size:11.5px; cursor:pointer; white-space:nowrap; }

/* the catalogue: one list, filtered by type */
.type-chips { grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)); margin:0 0 14px; }
.type-chips .q-tab { padding:9px 6px; }
.card-type { display:block; margin:0 0 4px; font:700 11px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing:.08em;
  text-transform:uppercase; color:var(--soft); }
.card-type::before { content:"// "; opacity:.6; }

/* portfolio */
.work-bar { justify-content:flex-end; min-height:8px; }
.work .work-media { position:relative; display:block; width:100%; padding:0; border:0; background:var(--banner); cursor:zoom-in; border-radius:3px 3px 0 0; overflow:hidden; }
.work .work-media img, .work .work-media video { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; border-radius:0; }
.work .work-media:focus-visible { outline:3px solid var(--edge); outline-offset:2px; }
.work .card-body p { -webkit-line-clamp:4; }
.work-comm { margin-left:8px; padding:2px 6px; border:1px solid currentColor; border-radius:3px; letter-spacing:.06em; }
.work-comm::before { content:none; }
.work-by { font-family:var(--mono); color:var(--vx); letter-spacing:.06em; }
.work-view { width:min(1100px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:0; border:0; border-radius:6px; overflow:auto;
  background:rgb(var(--glass) / .97); color:var(--ink); box-shadow:0 30px 80px -20px rgb(0 0 0 / .6); }
.work-view::backdrop { background:rgb(8 6 20 / .66); backdrop-filter:blur(6px); }
.work-big { background:#05040d; }
.work-big img, .work-big video { display:block; width:100%; max-height:70vh; object-fit:contain; }
.work-text { padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.work-text h2 { font-size:24px; }
.work-desc { color:var(--soft); line-height:1.6; white-space:pre-line; }
.work-close { position:absolute; top:10px; right:10px; z-index:2; width:40px; height:40px; border:0; border-radius:50%; cursor:pointer;
  font-size:24px; line-height:1; color:#fff; background:rgb(0 0 0 / .55); }
.work-close:focus-visible { outline:3px solid var(--edge); }
.admin-works .row video { width:64px; height:44px; object-fit:cover; border-radius:10px; flex:none; background:var(--banner); }
.admin-works .row-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.work-form { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px 16px; margin:12px 0 18px; }
.work-form .form-actions, .work-form .form-msg { grid-column:1 / -1; }

/* ---- portfolio: what we know how to make. One card per skill, a small visual on a "studio" backdrop (the same lavender
   as the rendered videos) or a dark screen. Clips play only under the mouse or after a tap (.play, portfolio.js); the CSS
   scenes move while the card is on screen (.run), never for a visitor who asks for less motion ---- */
.caps-panel .section-head { margin-bottom:20px; }
.caps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
@media (max-width:900px) { .caps { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:600px) { .caps { grid-template-columns:1fr; gap:16px; } }
.cap { display:flex; flex-direction:column; }
.cap-vis-link { display:block; border-radius:3px 3px 0 0; overflow:hidden; text-decoration:none; color:inherit; }
.cap-vis { position:relative; aspect-ratio:4 / 3; overflow:hidden; isolation:isolate;
  background:radial-gradient(120% 95% at 50% 35%, #9896cf, #8b87c4 60%, #7d79b8); color:#fff; font-family:var(--mono); }
.cap-vis video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cap-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.cap-body h3 { font-size:18px; font-weight:800; margin-top:4px; }
.cap-body p { color:var(--soft); font-size:14px; line-height:1.55; flex:1; }
.cap-body .tile-go { align-self:flex-start; text-decoration:none; }
.cap:hover .tile-go::after { animation:hm-caret 1s steps(1) infinite; }
.cap-ic { font-size:18px; font-weight:700; letter-spacing:.04em; color:var(--vx); transition:letter-spacing .3s; }
.cap:hover .cap-ic { letter-spacing:.2em; }
.cap-tag { position:absolute; z-index:3; left:10px; bottom:10px; padding:3px 7px; border-radius:3px; background:rgb(14 10 40 / .6);
  font:600 11px/1.3 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#fff; }

/* a clip waits on its first image with a play mark; under the mouse (or after a tap) it plays and the mark fades */
.cap-play { position:absolute; z-index:3; left:50%; top:50%; width:52px; height:40px; margin:-20px 0 0 -26px; display:grid; place-items:center;
  border-radius:4px; background:rgb(14 10 40 / .55); border:1px solid rgb(255 255 255 / .35); color:#fff; font-size:16px; padding-left:3px;
  box-shadow:0 10px 24px -10px rgb(10 8 40 / .7); transition:opacity .25s, transform .25s; pointer-events:none; }
.cap.play .cap-play { opacity:0; transform:scale(.85); }
.cap:hover .cap-play { background:var(--vfill); color:var(--vink); }
/* low | high: the high clip over the low one, a line sweeps between them */
.lod video + video { clip-path:inset(0 0 0 50%); }
.lod-line { position:absolute; z-index:2; top:0; bottom:0; left:0; right:0; pointer-events:none; transform:translateX(50%); will-change:transform; }
.lod-line::after { content:""; position:absolute; top:0; bottom:0; left:-1px; width:2px; background:#fff; box-shadow:0 0 12px rgb(255 255 255 / .8); }
.lod-l, .lod-r { top:10px; bottom:auto; }
.lod-r { left:auto; right:10px; }
.cap.play .lod video + video { animation:lod-wipe 6s ease-in-out infinite; }
.cap.play .lod-line { animation:lod-line 6s ease-in-out infinite; }
@keyframes lod-wipe { 0%, 100% { clip-path:inset(0 0 0 24%); } 50% { clip-path:inset(0 0 0 76%); } }
@keyframes lod-line { 0%, 100% { transform:translateX(24%); } 50% { transform:translateX(76%); } }

/* UI: a small game screen, health that drops and comes back, experience that fills, a selection that walks the hotbar */
.ui { display:grid; place-items:center; }
.ui-win { width:min(78%, 260px); display:grid; gap:10px; padding:14px; border-radius:6px; background:rgb(18 14 48 / .78);
  border:1px solid rgb(255 255 255 / .22); box-shadow:inset 0 1px 0 rgb(255 255 255 / .18), 0 18px 30px -16px rgb(10 8 40 / .8); }
.ui-row { display:flex; align-items:center; gap:8px; }
.ui-ic { width:14px; font-size:13px; line-height:1; color:#ff7d9c; text-align:center; }
.ui-row + .ui-row .ui-ic { color:#7fe0ff; }
.ui-bar { flex:1; height:9px; border-radius:2px; overflow:hidden; background:rgb(255 255 255 / .13); }
.ui-bar i { display:block; height:100%; transform-origin:left; transform:scaleX(.72); border-radius:2px; background:linear-gradient(90deg, #ff5f87, #ff9d7d); }
.ui-bar.xp i { transform:scaleX(.46); background:linear-gradient(90deg, #7c6cff, #7fe0ff); }
.ui-slots { position:relative; display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-top:2px; }
.ui-slots b { aspect-ratio:1; display:grid; place-items:center; border-radius:3px; background:rgb(255 255 255 / .09); border:1px solid rgb(255 255 255 / .16);
  font:700 13px/1 var(--mono); color:#d9d0ff; }
.ui-sel { position:absolute; left:0; top:0; width:calc((100% - 24px) / 5); aspect-ratio:1; border:2px solid #fff; border-radius:3px;
  box-shadow:0 0 10px rgb(255 255 255 / .6); transform:translateX(calc(200% + 12px)); }
.ui-btn { justify-self:center; margin-top:2px; padding:6px 18px; border-radius:3px; background:#b8a6ff; color:#120f2a;
  font:700 11px/1.2 var(--mono); letter-spacing:.1em; text-transform:uppercase; box-shadow:inset 0 1px 0 rgb(255 255 255 / .5); }
.cap.run .ui-bar.hp i { animation:ui-hp 5s cubic-bezier(.3,.8,.3,1) infinite; }
.cap.run .ui-bar.xp i { animation:ui-xp 5s ease-in-out infinite; }
.cap.run .ui-sel { animation:ui-sel 5s ease-in-out infinite; }
.cap.run .ui-btn { animation:ui-pulse 1.25s ease-in-out infinite alternate; }
@keyframes ui-hp { 0%, 10% { transform:scaleX(.9); } 16%, 34% { transform:scaleX(.62); } 40%, 58% { transform:scaleX(.3); } 72%, 100% { transform:scaleX(.9); } }
@keyframes ui-xp { 0% { transform:scaleX(.08); } 90% { transform:scaleX(1); } 100% { transform:scaleX(.08); } }
@keyframes ui-sel { 0%, 16% { transform:translateX(0); } 20%, 36% { transform:translateX(calc(100% + 6px)); } 40%, 56% { transform:translateX(calc(200% + 12px)); }
  60%, 76% { transform:translateX(calc(300% + 18px)); } 80%, 96% { transform:translateX(calc(400% + 24px)); } 100% { transform:translateX(0); } }
@keyframes ui-pulse { from { transform:scale(1); } to { transform:scale(1.07); } }

/* custom work: a console that writes the four steps of a commission, then starts again */
.term { background:radial-gradient(110% 90% at 50% 45%, #2b2266, #120e33 62%, #0a0820); }
.term { display:flex; flex-direction:column; justify-content:center; gap:9px; padding:18px 22px; font:600 13px/1.35 var(--mono); color:#d9d0ff; }
.term::before { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 4px); }
.term-l { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.term-l::before { content:"> "; color:#7fe0ff; }
.term-l:nth-child(3) { color:#6fe3a5; }
.term-l:last-child { color:#fff; }
.term::after { content:"_"; color:#7fe0ff; }
.cap.run .term::after { animation:hm-caret 1s steps(1) infinite; }
.cap.run .term-l:nth-child(1) { animation:term-1 9s infinite; }
.cap.run .term-l:nth-child(2) { animation:term-2 9s infinite; }
.cap.run .term-l:nth-child(3) { animation:term-3 9s infinite; }
.cap.run .term-l:nth-child(4) { animation:term-4 9s infinite; }
@keyframes term-1 { 0% { clip-path:inset(0 100% 0 0); opacity:1; animation-timing-function:steps(20, end); } 9%, 88% { clip-path:inset(0 0 0 0); opacity:1; } 93%, 100% { clip-path:inset(0 0 0 0); opacity:0; } }
@keyframes term-2 { 0%, 17% { clip-path:inset(0 100% 0 0); opacity:1; animation-timing-function:steps(24, end); } 27%, 88% { clip-path:inset(0 0 0 0); opacity:1; } 93%, 100% { clip-path:inset(0 0 0 0); opacity:0; } }
@keyframes term-3 { 0%, 35% { clip-path:inset(0 100% 0 0); opacity:1; animation-timing-function:steps(20, end); } 44%, 88% { clip-path:inset(0 0 0 0); opacity:1; } 93%, 100% { clip-path:inset(0 0 0 0); opacity:0; } }
@keyframes term-4 { 0%, 52% { clip-path:inset(0 100% 0 0); opacity:1; animation-timing-function:steps(26, end); } 62%, 88% { clip-path:inset(0 0 0 0); opacity:1; } 93%, 100% { clip-path:inset(0 0 0 0); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .cap-vis *, .cap-vis *::before, .cap-vis *::after, .cap-vis::after, .cap .tile-go::after { animation:none !important; } }

/* the work opened in large: a popup in the middle of the screen (the global "margin:0" had pinned it to the top-left),
   that comes in and then breathes softly; on a wide screen the picture on the left, the details on the right */
.work-view[open] { margin:auto; inset:0; animation:work-in .42s cubic-bezier(.2,.8,.2,1) both, work-breathe 5s ease-in-out .42s infinite alternate; }
.work-view::backdrop { animation:work-fade .3s ease both; }
@keyframes work-in { from { opacity:0; transform:scale(.94) translateY(10px); } to { opacity:1; transform:none; } }
@keyframes work-fade { from { opacity:0; } to { opacity:1; } }
@keyframes work-breathe { from { box-shadow:0 30px 80px -20px rgb(0 0 0 / .6), 0 0 0 1px rgb(184 166 255 / .25), 0 0 0 rgb(184 166 255 / 0); }
  to { box-shadow:0 30px 80px -20px rgb(0 0 0 / .6), 0 0 0 1px rgb(184 166 255 / .55), 0 0 46px rgb(184 166 255 / .45); } }
.work-big img, .work-big video { animation:work-zoom 5s ease-in-out .42s infinite alternate; }
@keyframes work-zoom { from { transform:scale(1); } to { transform:scale(1.025); } }
.work-big { overflow:hidden; }
@media (min-width: 900px) {
  .work-view[open] { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(300px, 1fr); max-height:min(680px, calc(100vh - 48px)); overflow:hidden; }
  .work-big { display:grid; place-items:center; min-height:0; }
  .work-big img, .work-big video { max-height:min(680px, calc(100vh - 48px)); height:100%; object-fit:contain; }
  .work-text { overflow:auto; max-height:min(680px, calc(100vh - 48px)); padding:26px 26px 28px; }
}
@media (prefers-reduced-motion: reduce) { .work-view[open], .work-view::backdrop, .work-big img, .work-big video { animation:none; } }

/* commission review: the language it is written in */
.comm-lang { display:flex; align-items:center; gap:10px; margin:8px 0 4px; }
.comm-lang select { font:inherit; padding:6px 10px; border-radius:4px; border:1.5px solid rgb(var(--tint) / .4); background:rgb(var(--glass) / .7); color:var(--ink); }

/* five capabilities (no UI): the second row is centred under the first */
@media (min-width:901px) {
  .caps { grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .caps > .cap { grid-column:span 2; }
  .caps > .cap:nth-child(4):nth-last-child(2) { grid-column:2 / span 2; }
}
@media (max-width:900px) { .caps > .cap:last-child:nth-child(odd) { grid-column:1 / -1; } }

/* the site's type: Albert Sans for the text, Tilt Warp (a single weight: never faked bold) for the titles;
   the console labels keep their monospace font */
:root { --title:"Tilt Warp", "Albert Sans", ui-rounded, "Segoe UI", system-ui, sans-serif; }
html { font-synthesis-weight:none; }
body { font-family:"Albert Sans", ui-rounded, "SF Pro Rounded", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; }
h1, h2, h3, .card-body h3, .show-name, .work-text h2 { font-family:var(--title); font-weight:400; letter-spacing:0; }

/* ---- giveaway (/giveaway/, giveaway.js): the offer, the code, the picker of N models, the winners' choice ---- */
.gw-hero h1 { font-size:clamp(30px, 3.6vw, 44px); margin:10px 0 8px; }
.gw-hero .tile-ic { width:auto; height:auto; display:inline; background:none !important; box-shadow:none !important; border:0 !important;
  font-family:var(--mono); font-size:24px; font-weight:700; color:var(--vx); }
.gw-lead { max-width:760px; font-size:16.5px; line-height:1.65; }
.gw-intro { display:grid; grid-template-columns:minmax(0, 1fr) minmax(240px, 380px); gap:28px; align-items:start; }
.gw-film { width:100%; aspect-ratio:1; display:block; margin-top:10px; border-radius:4px; border:1px solid var(--vg-line); background:var(--banner); }
@media (max-width:760px) { .gw-intro { grid-template-columns:1fr; gap:18px; } .gw-film { max-width:440px; margin:0 auto; } }
.gw-covers { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin:20px 0 6px; }
.gw-cover { position:relative; display:block; border-radius:4px; overflow:hidden; border:1px solid var(--vg-line); color:var(--light); text-decoration:none; }
.gw-cover img { width:100%; aspect-ratio:16 / 9; object-fit:cover; display:block; background:var(--banner); }
.gw-cover span { position:absolute; left:0; right:0; bottom:0; padding:22px 14px 10px; font-weight:800; background:linear-gradient(transparent, rgb(8 6 20 / .75)); }
.gw-lots { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; }
.gw-lots li { display:grid; grid-template-columns:110px 1fr; gap:12px; align-items:baseline; padding:10px 14px; border:1px solid var(--vg-line); border-radius:4px; background:rgb(var(--vg) / .1); }
.gw-lots strong { font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--vx); text-transform:lowercase; }
.gw-when { margin-top:14px; font-family:var(--mono); font-size:13px; }
.gw-steps { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin:16px 0 20px; padding:0; }
.gw-steps li { display:flex; flex-direction:column; gap:4px; padding:14px; border:1px solid var(--vg-line); border-radius:4px; background:rgb(var(--vg) / .1); }
.gw-steps span:last-child { color:var(--soft); font-size:14px; line-height:1.5; }
.gw-main h2 { margin-bottom:10px; }
.gw-main > p { margin:10px 0; }
.gw-google { min-height:44px; margin-top:6px; }
.gw-form { display:flex; flex-direction:column; gap:14px; max-width:520px; }
.gw-form .btn { align-self:flex-start; }
.gw-note { font-size:13px; }
.gw-note a { color:var(--vx); font-weight:700; }
.gw-code { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:6px 0 12px; }
.gw-code-txt { font-family:var(--mono); font-size:clamp(22px, 5vw, 30px); font-weight:700; letter-spacing:.08em; padding:10px 16px; border-radius:4px;
  border:1px dashed color-mix(in srgb, var(--vx) 70%, transparent); background:rgb(var(--vg) / .12); color:var(--ink); user-select:all; overflow-wrap:anywhere; }
.gw-status { display:inline-block; padding:4px 10px; border-radius:3px; font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:lowercase;
  color:var(--soft); background:rgb(var(--tint) / .14); }
.gw-status.gw-active, .gw-status.gw-used { color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, transparent); }
.gw-status.gw-revoked, .gw-status.gw-expired { color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, transparent); }
.gw-use { margin:6px 0 10px; max-width:520px; }
.gw-use-row { display:flex; gap:10px; }
.gw-use-row input { flex:1; min-width:0; font:inherit; font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); padding:11px 14px;
  border-radius:5px; border:1.5px solid rgb(var(--tint) / .4); background:rgb(var(--glass) / .7); }
.gw-use-row input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgb(var(--tint) / .25); }
.gw-got { list-style:none; padding:0; margin:10px 0 16px; display:grid; gap:6px; }
.gw-got li { display:flex; justify-content:space-between; gap:12px; padding:8px 12px; border:1px solid var(--vg-line); border-radius:4px; background:rgb(var(--vg) / .08); }
.gw-got small { color:var(--soft); font-family:var(--mono); font-size:12px; }
.gw-warn { color:var(--danger) !important; font-weight:700; }
.gw-pack-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:22px 0 10px; }
.gw-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.gw-item { position:relative; display:flex; flex-direction:column; border:1px solid var(--vg-line); border-radius:4px; overflow:hidden; cursor:pointer;
  background:rgb(var(--vg) / .1); transition:border-color .15s, box-shadow .15s, opacity .15s; }
.gw-item:hover { border-color:color-mix(in srgb, var(--vx) 70%, transparent); }
.gw-item:focus-within { outline:3px solid var(--edge); outline-offset:2px; }
.gw-item.on { border-color:var(--vx); box-shadow:0 0 0 2px var(--vx); }
.gw-item.on .ap-box { background:var(--accent); border-color:var(--accent); }
.gw-item.owned, .gw-item.full { cursor:default; opacity:.45; }
.gw-item.owned:hover, .gw-item.full:hover { border-color:var(--vg-line); }
.gw-media { display:grid; place-items:center; aspect-ratio:4 / 3; background:var(--banner); overflow:hidden; }
.gw-media video, .gw-media img { width:100%; height:100%; object-fit:cover; display:block; }
.gw-glyph { font-size:28px; color:var(--vx); opacity:.6; }
.gw-cap { display:flex; align-items:center; gap:8px; padding:8px 10px; font-size:13.5px; font-weight:700; min-height:40px; }
.gw-cap .ap-box { flex:none; width:18px; height:18px; }
.gw-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gw-own { font-family:var(--mono); font-size:11px; color:var(--soft); white-space:nowrap; }
.gw-bar { position:sticky; bottom:12px; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; padding:12px 14px;
  border-radius:6px; border:1px solid var(--vg-line); background:rgb(var(--glass) / .92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 16px 36px -18px rgb(var(--shadow) / .6); }
.gw-count { font-family:var(--mono); font-size:18px; color:var(--vx); white-space:nowrap; }
.gw-prize { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; margin:12px 0 16px; }
.gw-prize-pack { display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid var(--vg-line); border-radius:4px; background:rgb(var(--vg) / .08); }
.gw-prize-pack.on { border-color:var(--vx); box-shadow:0 0 0 2px var(--vx); }
.gw-prize-head { display:flex; align-items:center; gap:10px; cursor:pointer; }
.gw-prize-head input { width:18px; height:18px; accent-color:var(--accent); flex:none; }
.gw-prize-head img { width:72px; height:46px; object-fit:cover; border-radius:3px; flex:none; }
.gw-dialog { width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 32px); margin:auto; padding:24px; border:1px solid var(--vg-line); border-radius:8px; overflow:auto;
  background:rgb(var(--glass) / .97); color:var(--ink); box-shadow:0 30px 80px -20px rgb(0 0 0 / .6); }
.gw-dialog::backdrop { background:rgb(8 6 20 / .66); backdrop-filter:blur(6px); }
.gw-dialog h2 { margin-bottom:12px; }
.gw-dialog p { color:var(--soft); line-height:1.6; margin:8px 0; }
.gw-dialog .form-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.news-switch { margin-top:16px; }
@media (max-width: 560px) {
  .gw-lots li { grid-template-columns:1fr; gap:2px; }
  .gw-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .gw-use-row { flex-direction:column; }
  .gw-bar { bottom:8px; padding:10px; }
  .gw-bar .btn { white-space:nowrap; padding:10px 12px; font-size:12px; }
  .gw-count-txt { display:none; }
}
.gw-admin h3 { margin:22px 0 6px; }
.gw-admin-form { display:flex; flex-direction:column; gap:12px; margin:10px 0; }
.gw-admin-packs { display:flex; flex-direction:column; gap:6px; font-weight:500; }
.gw-admin-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:8px; margin:16px 0; }
.gw-admin-stat { display:flex; flex-direction:column; padding:10px 12px; border:1px solid var(--vg-line); border-radius:4px; background:rgb(var(--vg) / .08); }
.gw-admin-stat strong { font-family:var(--mono); font-size:22px; color:var(--vx); }
.gw-admin-stat small { color:var(--soft); }
.gw-admin-row > input { width:18px; height:18px; flex:none; accent-color:var(--accent); }
.gw-admin-row .row-info small { overflow-wrap:anywhere; }
.gw-admin .form-actions { display:flex; flex-wrap:wrap; gap:10px; }
.gw-main > .gw-status, .gw-main > .btn { align-self:flex-start; justify-self:start; }
.gw-still { display:block; margin:0 0 12px; border-radius:4px; overflow:hidden; border:1px solid var(--vg-line); }
.gw-still img { width:100%; display:block; }
.gw-grid.compact { grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:6px; }
.gw-grid.compact .gw-cap { min-height:36px; }