/* Malcaits Directory: a glass cube in the dark. The page is black, the five sticker colours glow behind it as soft
   light, and everything on top is frosted glass. The home page's hero is one cube face where every app gets a square.
   App pages bring their own theme (body.theme-*, at the bottom). */

@view-transition { navigation: auto; }

:root {
  --black: #000;
  --text-1: #f5f5f7;
  --text-2: rgb(245 245 247 / .62);
  --glass: rgb(255 255 255 / .06);
  --glass-hi: rgb(255 255 255 / .1);
  --edge: rgb(255 255 255 / .12);
  --red: #e5383b; --orange: #f6943b; --yellow: #f7c948; --green: #2bb673; --blue: #3a6ff0; --white: #fff;
  --display: "Unbounded", "Arial Black", sans-serif;
  --text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --blur: blur(22px) saturate(1.6);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--text-1);
  font: 400 1.125rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}
/* The light behind the glass: three sticker colours, far off and slowly drifting. */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28% 32% at 72% 26%, rgb(58 111 240 / .30), transparent 70%),
    radial-gradient(22% 26% at 88% 52%, rgb(229 56 59 / .20), transparent 70%),
    radial-gradient(26% 24% at 60% 70%, rgb(247 201 72 / .12), transparent 70%),
    radial-gradient(30% 30% at 12% 90%, rgb(43 182 115 / .10), transparent 70%);
  animation: drift 40s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(-4%, 3%) rotate(8deg) scale(1.08); } }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7.4vw, 4.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.25rem); }
h3 { font-size: 1.3125rem; font-weight: 600; }
p { margin: 0 0 1em; text-wrap: pretty; }
code { font-size: .88em; }
.muted { color: var(--text-2); }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.lead { font-size: 1.3125rem; line-height: 1.55; color: var(--text-2); max-width: 32em; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 12px; z-index: 10; background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
::selection { background: rgb(58 111 240 / .5); }

/* ---------------------------------------------------------------- header and footer */

/* A floating bar of frosted glass */
.site-header {
  position: sticky; top: 12px; z-index: 5; margin: 12px auto 0; width: min(1144px, 100% - 20px);
  background: rgb(18 18 20 / .55); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--edge); border-radius: 18px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 12px 32px -16px rgb(0 0 0 / .8);
  view-transition-name: site-header;              /* stays put while the page changes */
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; width: auto; padding: 0 10px 0 16px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 .95rem/1 var(--display); letter-spacing: -0.01em; }

/* The logo: a little scrambled face */
.mark { display: grid; grid-template-columns: repeat(3, 7px); gap: 2px; padding: 3px; background: #000; border-radius: 6px; flex: none; box-shadow: 0 0 0 1px var(--edge); }
.mark i { width: 7px; height: 7px; border-radius: 2px; background: var(--c); }
.mark i:nth-child(1) { --c: var(--red); }    .mark i:nth-child(2) { --c: var(--yellow); }
.mark i:nth-child(3) { --c: var(--blue); }   .mark i:nth-child(4) { --c: var(--green); }
.mark i:nth-child(5) { --c: #fff; }          .mark i:nth-child(6) { --c: var(--orange); }
.mark i:nth-child(7) { --c: var(--blue); }   .mark i:nth-child(8) { --c: var(--red); }
.mark i:nth-child(9) { --c: var(--yellow); }

.nav { display: flex; gap: 2px; }
.nav a {
  position: relative; text-decoration: none; font-weight: 600; font-size: .98rem; color: var(--text-2);
  padding: 8px 14px; border-radius: 11px; transition: color .25s var(--ease), background .25s var(--ease);
}
.nav a::after {                                   /* the page's sticker: a small dot under the current link */
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: var(--c); opacity: 0; transform: scale(0); transition: transform .3s var(--ease), opacity .3s;
}
.nav a:nth-child(1) { --c: var(--red); }   .nav a:nth-child(2) { --c: var(--blue); }
.nav a:nth-child(3) { --c: var(--yellow); } .nav a:nth-child(4) { --c: var(--green); }
.nav a:hover { color: var(--text-1); background: var(--glass); }
.nav a[aria-current="page"] { color: var(--text-1); }
.nav a[aria-current="page"]::after { opacity: 1; transform: none; box-shadow: 0 0 8px var(--c); }
@media (max-width: 600px) { .brand .name { display: none; } }
@media (max-width: 420px) { .nav a { padding: 8px 9px; } }

.site-footer { border-top: 1px solid var(--edge); margin-top: 120px; padding: 36px 0 48px; font-size: 1rem; color: var(--text-2); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--text-1); }

/* ---------------------------------------------------------------- building blocks */

.section { padding-top: 120px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.section-head h2 { margin: 0; }
.section-head a { font-weight: 600; white-space: nowrap; color: var(--text-2); text-decoration: none; transition: color .2s; }
.section-head a:hover { color: var(--text-1); }
.page-head { padding: 88px 0 16px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1rem/1 var(--text);
  padding: 15px 24px; border-radius: 999px; border: 1px solid transparent;
  background: var(--btn, #fff); color: var(--btn-text, #000);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px rgb(255 255 255 / .12), 0 10px 30px -10px var(--btn-glow, rgb(255 255 255 / .45)); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.ghost {
  background: var(--glass); color: var(--text-1); border-color: var(--edge);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.btn.ghost:hover { background: var(--glass-hi); box-shadow: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------------------------------------------------------------- home: the directory face */

.hero { display: grid; grid-template-columns: 1fr minmax(280px, 440px); gap: clamp(36px, 6vw, 96px); align-items: center; padding: clamp(56px, 9vw, 120px) 0 24px; }
.hero h1 { margin-bottom: .35em; }
.hero h1, .hero .lead, .hero .actions { animation: rise 1s var(--ease) backwards; }
.hero .lead { animation-delay: .08s; }
.hero .actions { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } }

.face-wrap { position: relative; isolation: isolate; margin: 0; }
.face-wrap::before {                                /* coloured light right behind the glass */
  content: ""; position: absolute; inset: 4% 4% 14%; z-index: -1; border-radius: 40%;
  background: conic-gradient(from 20deg, var(--red), var(--yellow), var(--green), var(--blue), var(--orange), var(--red));
  filter: blur(60px); opacity: .45; animation: glow-turn 30s linear infinite;
}
@keyframes glow-turn { to { transform: rotate(1turn); } }
.face-wrap figcaption { font-size: 1rem; color: var(--text-2); margin-top: 16px; }
.face {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px;
  background: rgb(255 255 255 / .05); border: 1px solid var(--edge); border-radius: 28px; perspective: 900px;
  backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 40px 80px -40px rgb(0 0 0 / .9);
}
/* Each pane shows a scrambled colour on its back, then turns over to its real colour: the face solves itself. */
.tile {
  position: relative; aspect-ratio: 1; border-radius: 16px; transform-style: preserve-3d;
  animation: solve 1.1s var(--ease) backwards; animation-delay: calc(.35s + var(--d, 0) * 90ms);
}
.tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--s, var(--red)) 70%, transparent);
  transform: rotateY(180deg); backface-visibility: hidden;
}
.tile > .front {
  position: absolute; inset: 0; border-radius: inherit; backface-visibility: hidden; overflow: hidden;
  background: linear-gradient(155deg, rgb(255 255 255 / .38), rgb(255 255 255 / 0) 42%), color-mix(in srgb, var(--c) 90%, transparent);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), inset 0 -10px 24px -12px rgb(0 0 0 / .35);
}
@keyframes solve { from { transform: rotateY(-180deg); } }
.tile.core > .front {
  background: linear-gradient(155deg, rgb(255 255 255 / .95), rgb(255 255 255 / .78));
  color: #000; display: grid; place-items: center; font: 800 clamp(2rem, 6vw, 2.8rem)/1 var(--display);
}
.tile.app { text-decoration: none; transition: transform .5s var(--ease); }
.tile.app > .front {
  background: linear-gradient(155deg, rgb(255 255 255 / .16), rgb(255 255 255 / .03) 60%), rgb(10 10 12 / .55);
  display: flex; flex-direction: column; justify-content: space-between; padding: 12px; color: var(--text-1);
}
.tile.app img { width: 42%; margin: 4px auto 0; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .6)); transition: transform .6s var(--ease); }
.tile.app span { font: 700 clamp(.6rem, 1.6vw, .78rem)/1.2 var(--display); }
.tile.app:hover { transform: translateY(-3px) scale(1.04); }
.tile.app:hover img { transform: rotate(-10deg) scale(1.06); }

/* The featured app on the home page: a glass panel lit by a candle behind the cube */
.feature {
  position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 24px;
  border-radius: 32px; overflow: hidden; color: #f0e2c2; padding: clamp(28px, 5vw, 64px);
  background: radial-gradient(55% 75% at 76% 52%, rgb(232 177 74 / .3), transparent 70%), rgb(255 255 255 / .04);
  border: 1px solid var(--edge); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
  --btn: #e8b14a; --btn-text: #1d110a; --btn-glow: rgb(232 177 74 / .6);
}
.feature h2 { font-family: "Pirata One", serif; font-weight: 400; letter-spacing: 0; font-size: clamp(2.4rem, 5vw, 3.6rem); }
.feature p { color: rgb(240 226 194 / .72); max-width: 30em; }
.feature .btn.ghost { color: #f0e2c2; }
@media (max-width: 820px) { .feature { grid-template-columns: 1fr; } .feature .cube-box { max-width: 360px; margin: 0 auto; width: 100%; } }

/* ---------------------------------------------------------------- apps: one row per app */

.app-list { list-style: none; margin: 0; padding: 0; }
.app-row {
  position: relative; display: grid; grid-template-columns: clamp(110px, 18vw, 180px) 1fr; gap: clamp(20px, 4vw, 40px);
  align-items: center; padding: 20px; margin: 0 -20px; border-radius: 26px; transition: background .35s var(--ease);
}
.app-row + .app-row { margin-top: 8px; }
@media (max-width: 640px) { .app-row { padding: 12px; margin: 0 -12px; } }
.app-row:hover { background: var(--glass); }
.app-row .square {
  aspect-ratio: 1; border-radius: 22px; overflow: hidden; padding: 6px;
  background: var(--glass); border: 1px solid var(--edge);
  animation: solve 1.1s var(--ease) backwards; animation-delay: calc(.2s + var(--d, 0) * 120ms);
  transition: transform .5s var(--ease);
}
.app-row .square img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.app-row h3 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-bottom: .3em; }
.app-row h3 a { text-decoration: none; }
.app-row h3 a::after { content: ""; position: absolute; inset: 0; }   /* the whole row opens the app */
.app-row p { color: var(--text-2); max-width: 36em; margin: 0 0 .6em; }
.app-row .platforms { font-size: 1rem; font-weight: 600; color: var(--text-1); margin: 0; }
.app-row:hover .square { transform: translateY(-3px) scale(1.03); }
.app-row.empty:hover { background: none; }
.app-row.empty .square { background: none; border: 1px dashed rgb(255 255 255 / .2); }
.app-row.empty:hover .square { transform: none; }
.app-row.empty a { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- news: a timeline */

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { display: grid; grid-template-columns: 11rem 1fr; gap: 4px 32px; }
.timeline time { color: var(--text-2); font-size: 1rem; padding-top: 2px; }
.timeline .entry { position: relative; padding: 0 0 52px 34px; max-width: 42em; }
.timeline .entry::before {                         /* the track to the next entry */
  content: ""; position: absolute; left: 5px; top: 24px; bottom: 6px; width: 2px; border-radius: 1px;
  background: linear-gradient(var(--c, var(--blue)), rgb(255 255 255 / .08) 60%); opacity: .7; transform-origin: top;
}
.timeline > li:last-child .entry::before { display: none; }
.timeline .entry::after {                          /* the entry's sticker, glowing */
  content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 4px;
  background: var(--c, var(--blue)); box-shadow: 0 0 14px var(--c, var(--blue));
}
.timeline h3 { margin: 0 0 8px; }
.timeline p { color: var(--text-2); margin: 0; }
.timeline ul { margin: 12px 0 0; padding-left: 1.1em; color: var(--text-2); }
.timeline li li { margin-bottom: 4px; }
@media (max-width: 640px) { .timeline > li { grid-template-columns: 1fr; } .timeline time { padding-left: 34px; } }

.prose { max-width: 36em; }
.prose p { color: var(--text-2); }
.prose .lead { color: var(--text-1); }
.prose h2 { font-size: 1.5rem; margin-top: 2em; }

/* ---------------------------------------------------------------- the CSS cube (assets/cube.js) */

.cube-box { position: relative; aspect-ratio: 1; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.cube-box:active { cursor: grabbing; }
.cube-box::before {                                  /* a soft shadow under the cube */
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 6%; height: 12%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .45), transparent); filter: blur(6px);
}
.cube-scene { position: absolute; inset: 0; display: grid; place-items: center; }
.cube3d { position: relative; width: 0; height: 0; transform-style: preserve-3d; }
.cubie { position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; transform-style: preserve-3d; }
.cubie i { position: absolute; inset: 0; background: #22150c; border-radius: 9px; backface-visibility: hidden; }
.cubie i[class]::after {
  content: ""; position: absolute; inset: 7px; border-radius: 15px;
  background: linear-gradient(150deg, rgb(255 255 255 / .32), rgb(255 255 255 / 0) 46%), var(--c);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / .12);
}
.s-w { --c: #efe6d3; } .s-y { --c: #f1c232; } .s-r { --c: #c7362c; }
.s-o { --c: #ee8a26; } .s-g { --c: #3f9b46; } .s-b { --c: #2e6fd0; }

/* ---------------------------------------------------------------- 404: a scrambled face */

.face.scrambled { max-width: 260px; margin-top: 40px; }

/* ---------------------------------------------------------------- motion that needs newer browsers */

/* Between pages: the old one blurs away, the new one comes into focus. */
::view-transition-old(root) { animation: defocus .32s var(--ease) both; }
::view-transition-new(root) { animation: focus .38s var(--ease) both; }
@keyframes defocus { to { opacity: 0; filter: blur(10px); transform: scale(.985); } }
@keyframes focus { from { opacity: 0; filter: blur(10px); transform: scale(1.015); } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .timeline .entry::after { animation: pop linear both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
    .timeline .entry::before { animation: draw linear both; animation-timeline: view(); animation-range: entry 60% cover 55%; }
    @keyframes pop { from { transform: scale(0); opacity: 0; } }
    @keyframes draw { from { transform: scaleY(0); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ---------------------------------------------------------------- app theme: The Twisted Cube (a medieval tavern) */

.theme-tavern {
  --paper: #efe2c4;
  --tile: #f6ecd6;
  --ink: #2a1a10;
  --text-2: #5c4630;
  --line: #d4bf95;
  --oak: #2b1a10;
  --gold: #e8b14a;
  --cream: #f0e2c2;
  --btn: #9e2a1c; --btn-text: #f6ecd6; --btn-glow: rgb(158 42 28 / .6);
  --text: "Alegreya", Georgia, serif;
  --display: "Alegreya SC", Georgia, serif;
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
  font-size: 1.12rem;
  line-height: 1.65;
}
.theme-tavern::before { display: none; }                 /* no sticker light on parchment */
.theme-tavern :focus-visible { outline-color: #9e2a1c; }
.theme-tavern ::selection { background: rgb(232 177 74 / .45); }
.theme-tavern .site-header { position: fixed; left: 0; right: 0; background: rgb(29 17 10 / .55); border-color: rgb(240 226 194 / .14); color: var(--cream); }
.theme-tavern .brand { color: var(--cream); font-family: "Unbounded", sans-serif; }
.theme-tavern .nav a { color: rgb(240 226 194 / .7); }
.theme-tavern .nav a:hover, .theme-tavern .nav a[aria-current="page"] { color: var(--cream); background: rgb(240 226 194 / .08); }
.theme-tavern h2 { letter-spacing: .01em; }
.theme-tavern .btn { border-radius: 10px; font-family: var(--display); letter-spacing: .03em; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 6px 16px -8px rgb(110 28 18 / .8); }
.theme-tavern .btn:hover { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 10px 26px -10px var(--btn-glow); }
.theme-tavern .site-footer { border-color: var(--line); color: var(--text-2); }
.theme-tavern .site-footer a:hover { color: var(--ink); }
.theme-tavern .section-head a { color: var(--ink); text-decoration: underline; }

.tavern-hero {
  color: var(--cream); padding: 150px 0 96px; overflow: hidden;
  background:
    radial-gradient(60% 70% at 72% 45%, rgb(232 177 74 / .22), transparent 70%),
    radial-gradient(140% 100% at 50% 0%, #4a2e1a 0%, #2b1a10 55%, #1d110a 100%);
}
.tavern-hero .wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 32px; }
.tavern-hero p { color: #dccaa5; max-width: 30em; }
.tavern-hero .btn.ghost { color: var(--cream); background: rgb(240 226 194 / .06); border-color: rgb(240 226 194 / .3); }
.tavern-hero .btn.ghost:hover { background: rgb(240 226 194 / .12); }
.tavern-hero .hint { font-size: .95rem; color: #b39b74; text-align: center; margin-top: -8px; }

/* The title is the game's hanging tavern sign: oak board, iron chains, and a swing when you arrive. */
.sign {
  position: relative; display: inline-block; margin: 0 0 26px; padding: 14px 30px 18px;
  background:
    repeating-linear-gradient(176deg, rgb(0 0 0 / 0) 0 9px, rgb(0 0 0 / .1) 9px 11px),
    linear-gradient(#6b4428, #4a2e1a 60%, #3b2414);
  border: 3px solid #1d110a; border-radius: 12px;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / .12), 0 18px 30px -12px rgb(0 0 0 / .7);
  transform-origin: 50% -64px;
  animation: swing 2.6s cubic-bezier(.25, .6, .3, 1) .2s both;
}
.sign::before, .sign::after {
  content: ""; position: absolute; bottom: 100%; width: 4px; height: 64px; border-radius: 2px;
  background: repeating-linear-gradient(#8a6a3f 0 7px, #2b1a10 7px 10px); left: 16%;
}
.sign::after { left: auto; right: 16%; }
.sign h1 { font-family: "Pirata One", serif; font-weight: 400; letter-spacing: .01em; color: var(--cream); font-size: clamp(2.6rem, 6.4vw, 4.75rem); margin: 0; text-shadow: 0 2px 0 #1d110a; }
@keyframes swing {
  0% { transform: rotate(8deg); } 22% { transform: rotate(-5deg); } 42% { transform: rotate(3deg); }
  62% { transform: rotate(-1.5deg); } 80% { transform: rotate(.6deg); } 100% { transform: rotate(0); }
}
.tavern-hero .tagline {
  display: block; width: fit-content; font-style: italic; color: var(--ink); background: var(--cream);
  padding: 4px 16px; border-radius: 4px; box-shadow: 0 4px 0 -1px #b0966880; margin-bottom: 22px;
}
.table-top { position: relative; isolation: isolate; }   /* keeps the table (z-index -1) above the hero background */
.table-top::after {                                  /* the round wooden table the cube stands on */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: 4%; height: 26%; z-index: -1; border-radius: 50%;
  background:
    repeating-radial-gradient(ellipse at 50% 50%, rgb(0 0 0 / 0) 0 14px, rgb(0 0 0 / .1) 15px 16px),
    radial-gradient(ellipse at 50% 35%, #7a4c2a, #4a2e1a 70%);
  box-shadow: 0 10px 0 #2b1a10, 0 30px 50px -10px rgb(0 0 0 / .6);
}
.table-top .cube-box { z-index: 1; }
@media (max-width: 820px) {
  .tavern-hero .wrap { grid-template-columns: 1fr; }
  .tavern-hero .table-top { max-width: 420px; width: 100%; margin: 0 auto; }
}

.shot-wide { margin-top: -48px; position: relative; perspective: 1400px; }
.shot { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgb(43 26 16 / .55); transform-origin: 50% 100%; }

/* Features: a list on parchment, ruled like a ledger */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0 56px; margin-top: 36px; }
.feat { display: grid; grid-template-columns: 44px 1fr; gap: 2px 18px; padding: 22px 0; border-top: 1px solid var(--line); align-content: start; }
.feat .glyph { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--oak); color: var(--gold); }
.feat .glyph svg { width: 22px; height: 22px; }
.feat h3 { font-family: var(--display); font-size: 1.3rem; margin: 0; letter-spacing: .01em; }
.feat p { margin: 0; color: var(--text-2); }

.gallery { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin-top: 36px; }
.gallery figure { margin: 0; }
.gallery a { display: block; border-radius: 14px; overflow: hidden; cursor: zoom-in; }
.gallery img { border-radius: 14px; border: 1px solid var(--line); transition: transform .6s var(--ease); }
.gallery a:hover img { transform: scale(1.04); }
.gallery figcaption { font-size: 1rem; color: var(--text-2); margin-top: 10px; }

/* The screenshot viewer (assets/site.js) */
.lightbox { padding: 0; border: 0; background: transparent; width: min(1400px, 94vw); max-width: none; max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgb(15 9 5 / .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.lightbox img { width: 100%; max-height: 84vh; object-fit: contain; border-radius: 12px; }
.lightbox p { color: var(--cream); text-align: center; margin: 12px 0 0; }
.lightbox button {
  position: absolute; top: -46px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--cream); color: var(--ink); font: 700 1.4rem/1 var(--text);
}
.lightbox[open] { animation: zoom .45s var(--ease); }
.lightbox[open]::backdrop { animation: fade .3s ease; }
@keyframes zoom { from { transform: scale(.9); opacity: 0; filter: blur(8px); } }
@keyframes fade { from { opacity: 0; } }

.band {
  background: var(--oak); color: var(--cream); border-radius: 28px; padding: clamp(28px, 5vw, 56px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
}
.band h2 { color: var(--cream); }
.band p, .band li { color: #dccaa5; }
.band ul { margin: 0; padding-left: 1.2em; }
.band li { margin-bottom: 8px; }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; } }

.download { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 28px; }
.dl { position: relative; background: var(--tile); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.dl h3 { font-family: var(--display); font-size: 1.35rem; }
.dl .btn { margin: 6px 0 14px; }
.dl small { display: block; color: var(--text-2); font-size: .95rem; }
.dl ol { margin: 0 0 12px; padding-left: 1.2em; color: var(--text-2); font-size: 1rem; }
.dl code { font-size: .82em; }
.dl.yours { border: 2px solid var(--gold); box-shadow: 0 18px 40px -24px rgb(110 28 18 / .55); }
.dl.yours::before {
  content: "For this computer"; position: absolute; top: -13px; left: 20px; padding: 2px 12px; border-radius: 999px;
  background: var(--gold); color: var(--ink); font: 700 .85rem/1.6 var(--text);
}

.tavern-news { list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--line); }
.tavern-news li { display: grid; grid-template-columns: 9em 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.tavern-news b { font-family: var(--display); font-weight: 700; }
.tavern-news p { margin: 0; color: var(--text-2); }
@media (max-width: 600px) { .tavern-news li { grid-template-columns: 1fr; gap: 4px; } }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* the big screenshot lies down flat as it comes into view, like a card laid on the table */
    .shot { animation: lay-down linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes lay-down { from { transform: rotateX(32deg) scale(.9); opacity: .4; } }
  }
}

/* ---------------------------------------------------------------- app theme: Eclipse Local AI (the app's own Eclipse Dusk) */

.theme-dusk {
  --text-1: #e4e8e7;
  --text-2: rgb(211 218 217 / .66);
  --edge: rgb(211 218 217 / .12);
  --glass: rgb(211 218 217 / .05);
  --glass-hi: rgb(211 218 217 / .09);
  --rose: #b49c9c; --sage: #9dbfae;
  --line: var(--edge); --tile: var(--glass); --gold: var(--rose); --ink: #1d1c22; --cream: #e4e8e7;
  --btn: #ece2df; --btn-text: #241f24; --btn-glow: rgb(180 156 156 / .6);
  --text: "Geist", system-ui, sans-serif;
  --display: "Geist", system-ui, sans-serif;
  background: #18171c;
}
.theme-dusk::before {
  background:
    radial-gradient(30% 34% at 74% 24%, rgb(180 156 156 / .2), transparent 70%),
    radial-gradient(26% 30% at 90% 62%, rgb(157 191 174 / .1), transparent 70%),
    radial-gradient(30% 30% at 8% 88%, rgb(113 90 90 / .2), transparent 70%);
}
.theme-dusk ::selection { background: rgb(180 156 156 / .4); }
.theme-dusk :focus-visible { outline-color: var(--rose); }
.theme-dusk .brand { font-family: "Unbounded", sans-serif; }
.theme-dusk h1, .theme-dusk h2 { font-weight: 600; letter-spacing: -0.035em; }
.theme-dusk code { font-family: "Geist Mono", ui-monospace, monospace; font-size: .85em; }

.dusk-hero { overflow-x: clip; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; padding: clamp(56px, 8vw, 110px) 0 40px; }
.dusk-hero h1 { font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1; margin-bottom: .4em; }
@media (max-width: 820px) { .dusk-hero { grid-template-columns: 1fr; } }

/* The hero: the moon slides over the sun once, and the corona lights up at totality. */
.eclipse { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; }
.eclipse span { position: absolute; border-radius: 50%; }
.eclipse .sun {
  inset: 22%; background: radial-gradient(circle, #fff7f1 0 60%, #f1d6cc 70%, rgb(226 193 184 / 0) 71%);
  box-shadow: 0 0 46px 8px rgb(255 232 222 / .22), 0 0 4px 1px rgb(255 245 240 / .9);
  animation: sun-dim 3.2s var(--ease) .3s both;
}
@keyframes sun-dim { from { box-shadow: 0 0 120px 40px rgb(255 236 226 / .45), 0 0 4px 1px rgb(255 245 240 / .9); } }
.eclipse .corona {
  inset: 6%;
  background: conic-gradient(rgb(240 214 205 / .35), rgb(240 214 205 / .95), rgb(157 191 174 / .45), rgb(200 170 165 / .9),
                             rgb(240 214 205 / .3), rgb(200 170 165 / .85), rgb(240 214 205 / .35));
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 42%, rgb(0 0 0 / .35) 55%, transparent 72%);
          mask: radial-gradient(circle, transparent 38%, #000 42%, rgb(0 0 0 / .35) 55%, transparent 72%);
  filter: blur(9px);
  animation: corona-in 2.4s ease 2s both, corona-turn 90s linear infinite;
}
@keyframes corona-in { from { opacity: 0; } }
@keyframes corona-turn { to { rotate: 1turn; } }
.eclipse .moon {
  inset: 22.3%; background: radial-gradient(circle at 38% 32%, #1c1b22, #0b0a0e 70%);   /* a hair smaller than the sun: its bright rim shows */
  animation: transit 3s cubic-bezier(.3, .6, .2, 1) .3s both;
}
@keyframes transit { from { transform: translate(-64%, 12%); } }


.dusk-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0 48px; margin-top: 32px; }
.dusk-list > div { padding: 22px 0; border-top: 1px solid var(--edge); }
.dusk-list h3 { margin: 0 0 6px; font-size: 1.15rem; font-weight: 600; }
@property --m { syntax: "<percentage>"; inherits: false; initial-value: 50%; }
.dusk-list h3::before {                              /* a tiny eclipse: the dark disc sits at --m, 50% is total */
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 12px; vertical-align: 1px; border-radius: 50%;
  background: radial-gradient(circle 5px at var(--m) 50%, #0e0d12 4.4px, #f3dcd3 5px);
  box-shadow: 0 0 0 2px var(--rose), 0 0 10px rgb(180 156 156 / .7);
}
.dusk-list p { margin: 0; color: var(--text-2); }

.theme-dusk .gallery { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.theme-dusk .lightbox::backdrop { background: rgb(12 11 15 / .78); }
.theme-dusk .dl { background: var(--glass); border-color: var(--edge); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.theme-dusk .dl.yours { border-color: var(--rose); box-shadow: 0 18px 40px -24px rgb(180 156 156 / .5); }
.theme-dusk .dl.yours::before { background: var(--rose); color: #1d1c22; }
.dusk-needs { margin: 24px 0 0; padding-left: 1.2em; color: var(--text-2); }
.dusk-needs b { color: var(--text-1); font-weight: 600; }

/* Its square on the home page */
.tile.app.dusk > .front { background: linear-gradient(155deg, rgb(255 255 255 / .12), rgb(255 255 255 / .02) 60%), rgb(29 28 34 / .8); }
.app-row .square.icon { display: grid; place-items: center; }
.app-row .square.icon img { width: 58%; height: auto; filter: drop-shadow(0 0 18px rgb(226 193 184 / .35)); }
.app-row .square.dusk { background: radial-gradient(90% 90% at 30% 20%, #3a3640, #1d1c22 70%); }

/* The last bead of sunlight just before totality (the diamond ring), then the stars come out */
.eclipse .stars {
  inset: -16%; opacity: .6; border-radius: 0;
  background:
    radial-gradient(circle at 8% 18%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 22% 84%, #fff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 31% 9%, #f3dcd3 0 1.2px, transparent 1.8px), radial-gradient(circle at 88% 14%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 94% 47%, #fff 0 .8px, transparent 1.4px), radial-gradient(circle at 79% 90%, #dfe9e4 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 6% 58%, #fff 0 .9px, transparent 1.5px), radial-gradient(circle at 60% 4%, #fff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 50% 97%, #fff 0 1px, transparent 1.6px), radial-gradient(circle at 97% 76%, #fff 0 .8px, transparent 1.4px);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 72%); mask: radial-gradient(circle, #000 35%, transparent 72%);
  animation: stars-in 3s ease 3s both;
}
@keyframes stars-in { from { opacity: 0; } }
.eclipse .flare {                                    /* on the sun's rim, where the moon's leading edge meets it last */
  left: 76.1%; top: 43.6%; width: 3%; height: 3%; background: #fff; opacity: 0;
  box-shadow: 0 0 10px 4px #fff, 0 0 46px 16px rgb(255 238 228 / .65);
  animation: flare 1.5s ease-out 2.65s both;
}
@keyframes flare { 35% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(.5); } }

/* The chat demo (assets/eclipse-demo.js), in the app's own Eclipse Dusk colours */
.demo-wrap { margin: 0 auto; }
.demo-wrap figcaption { color: var(--text-2); font-size: .95rem; margin-top: 16px; text-align: center; }
.demo {
  max-width: 880px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #37353e; color: #d3dad9;
  border: 1px solid rgb(211 218 217 / .1); box-shadow: 0 50px 100px -40px rgb(0 0 0 / .9), 0 0 0 6px rgb(211 218 217 / .03);
}
.demo-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgb(211 218 217 / .08); font-size: .9rem; }
.demo-title { font-weight: 600; color: #e4e8e7; }
.demo-model { display: flex; align-items: center; gap: 8px; color: #a3a8ab; font-size: .85rem; }
.demo-model i { width: 7px; height: 7px; border-radius: 50%; background: #9dbfae; box-shadow: 0 0 8px #9dbfae; }
.demo-body { padding: 28px clamp(14px, 4vw, 40px) 30px; }
.demo-you { width: fit-content; max-width: 30em; margin: 0 0 24px auto; padding: 12px 18px; border-radius: 16px; background: #4e4d58; color: #e4e8e7; font-size: .98rem; }
.demo-ai { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 14px; }
.demo-avatar { width: 28px; height: 28px; margin-top: 4px; border-radius: 50%; background: #0e0d12; box-shadow: 0 0 0 1.5px #d9bcb4, 0 0 12px rgb(226 193 184 / .5); }
.demo-code { background: #2e2c34; border-radius: 14px; overflow: hidden; border: 1px solid rgb(211 218 217 / .07); }
.demo-code-bar { display: flex; align-items: center; gap: 14px; padding: 9px 14px; font-size: .82rem; color: #a3a8ab; border-bottom: 1px solid rgb(211 218 217 / .06); }
.demo-code-bar .lights { display: flex; gap: 6px; margin-right: auto; }
.demo-code-bar .lights i { width: 10px; height: 10px; border-radius: 50%; background: #d98a84; }
.demo-code-bar .lights i:nth-child(2) { background: #d4bc9f; }
.demo-code-bar .lights i:nth-child(3) { background: #9dbfae; }
.demo-run { padding: 3px 9px; border-radius: 7px; transition: background .3s, color .3s; }
.demo.ran .demo-run { background: rgb(157 191 174 / .18); color: #9dbfae; animation: press .45s var(--ease); }
@keyframes press { 40% { transform: scale(.9); } }
.demo pre { margin: 0; padding: 16px 18px; overflow-x: auto; font: 400 .88rem/1.7 "Geist Mono", ui-monospace, monospace; min-height: calc(7 * 1.7em + 32px); }
.demo pre code { font: inherit; }
.demo .k { color: #c9a0a0; } .demo .s { color: #a9c4b8; } .demo .c { color: #7f7d8a; }
.demo .n { color: #d4bc9f; } .demo .f { color: #e8edec; } .demo .b { color: #a9b6c9; }
.demo.streaming pre code::after {                    /* the cursor while it writes */
  content: ""; display: inline-block; width: .55em; height: 1.15em; margin-left: 1px; vertical-align: -.22em; background: #b49c9c;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.demo-out { display: flex; gap: 14px; align-items: baseline; padding: 10px 18px 14px; border-top: 1px solid rgb(211 218 217 / .06); font-size: .85rem; color: #a3a8ab; }
.demo-out code { font-family: "Geist Mono", ui-monospace, monospace; color: #9dbfae; }
.demo.live:not(.ran) .demo-out { display: none; }
.demo.ran .demo-out { animation: rise .6s var(--ease) both; }
.demo-stats { grid-column: 2; margin: 12px 0 0; font-size: .85rem; color: #a3a8ab; font-variant-numeric: tabular-nums; }

.theme-dusk .dl { transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.theme-dusk .dl:hover { border-color: rgb(180 156 156 / .4); box-shadow: 0 0 44px -12px rgb(226 193 184 / .3); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .dusk-list h3::before { animation: totality linear both; animation-timeline: view(); animation-range: entry 30% cover 40%; }
    @keyframes totality { from { --m: -15%; } }
  }
}

/* ---------------------------------------------------------------- The Twisted Cube: motion from the game itself */

/* Candlelight behind the cube that never quite holds still, and petals drifting across, as in the courtyard */
.tavern-hero { position: relative; isolation: isolate; }
.tavern-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(34% 46% at 72% 52%, rgb(232 177 74 / .2), transparent 70%);
  animation: candle 7s ease-in-out infinite;
}
@keyframes candle { 0%, 100% { opacity: .7; } 17% { opacity: 1; } 29% { opacity: .82; } 46% { opacity: .97; } 63% { opacity: .76; } 81% { opacity: .93; } }
.tavern-hero .wrap { position: relative; z-index: 1; }
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.petals i {
  position: absolute; top: -24px; left: var(--x); width: 11px; height: 8px; border-radius: 80% 0 80% 0; opacity: .7;
  background: linear-gradient(135deg, #f8dade, #e7a3b0);
  animation: petal var(--t) linear var(--delay) infinite;
}
@keyframes petal {
  50% { transform: translate(calc(var(--dx) * .6), 420px) rotate(230deg); }
  100% { transform: translate(var(--dx), 880px) rotate(480deg); }
}

/* The race (assets/twisted-cube.js): seven stages per racer, the clock, the winner in gold */
.race { margin-top: 26px; padding: 16px 18px 14px; border-radius: 16px; background: rgb(240 226 194 / .06); border: 1px solid rgb(240 226 194 / .14); }
.race-row { display: grid; grid-template-columns: 3.2em 1fr 4.4em; gap: 14px; align-items: center; padding: 6px 0; }
.race-row b { font-family: var(--display); color: var(--cream); transition: color .4s; }
.race-bar { position: relative; height: 10px; border-radius: 5px; overflow: hidden; background: rgb(240 226 194 / .12); }
.race-bar i { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #b8351f, #e8b14a); transition: transform .35s var(--ease); }
.race-bar::after {                                   /* the seven stages */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 7 - 2px), #2b1a10 calc(100% / 7 - 2px) calc(100% / 7));
}
.race-time { text-align: right; color: #dccaa5; font-variant-numeric: tabular-nums; transition: color .4s; }
.race-row.won b, .race-row.won .race-time { color: var(--gold); }
.race-result { margin: 10px 0 0; font-size: .95rem; color: var(--gold); }
.race.live:not(.over) .race-result { visibility: hidden; }
.race.over .race-result { animation: rise .6s var(--ease) both; }

/* Its cover on the Apps page: one turning cube on dark oak, lit from behind like a candle */
.app-row .square.tavern { background: radial-gradient(55% 55% at 50% 56%, rgb(232 177 74 / .32), transparent 72%), radial-gradient(90% 90% at 30% 20%, #4a2e1a, #1d110a 70%); }
.app-row .square.icon .cube-box { width: 84%; cursor: inherit; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* the feature marks press in like wax seals */
    .feat .glyph { animation: seal linear both; animation-timeline: view(); animation-range: entry 25% cover 35%; }
    @keyframes seal { from { transform: scale(1.7) rotate(-25deg); opacity: 0; } 70% { transform: scale(.92) rotate(3deg); opacity: 1; } }
  }
}