:root {
  --bg: #0b0806;
  --fg: #f6efe6;
  --muted: #b6aa9c;
  --card: #17120e;
  --line: #2d2520;
  --accent: #FFB23E;
  --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
}
.page, main { max-width: 760px; margin: 0 auto; padding: 96px 16px 80px; }
h1 { font-size: clamp(34px, 7vw, 52px); line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 16px; }
h2 { font-size: 22px; letter-spacing: -0.01em; margin: 48px 0 12px; }
p.lead { font-size: 19px; color: var(--muted); max-width: 560px; margin: 0 0 32px; }
.button {
  display: inline-block; background: var(--fg); color: var(--bg); padding: 12px 22px;
  border-radius: 999px; text-decoration: none; font-weight: 600;
}
.note { color: var(--muted); font-size: 14px; margin-top: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 13px; }
.table-wrap { overflow-x: auto; }
footer { margin-top: 72px; color: var(--muted); font-size: 14px; }
footer a, main a:not(.button), .page p a { color: var(--accent); }

/* The showcase: one window, and scrolling changes what's in it */
.stage { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
.chapter { margin-bottom: 40px; }
.chapter > img { width: 100%; height: auto; display: block; border-radius: 16px; }
.eyebrow { color: var(--accent); font-size: 13px; font-weight: 600; margin: 16px 0 4px; }
.chapter h3 { font-size: clamp(24px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 10px; }
.chapter-copy p:last-child { color: var(--muted); font-size: 17px; margin: 0; }

.tabs, .shape, .progress { display: none; }
.js .stage { height: calc(var(--chapters, 9) * 80svh + 100svh); perspective: 1400px; }
.js .stage-pin {
  position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column;
  justify-content: center; gap: 20px; padding: 16px 0;
}
.js .stage-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.js .tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.js .shape { display: flex; flex: none; gap: 2px; }
.tabs button, .shape button {
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: none; border: 0;
  padding: 7px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  transition: color .2s, background .2s;
}
.tabs button:hover, .shape button:hover { color: var(--fg); }
.tabs button[aria-current="true"], .shape button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.tabs button:focus-visible, .shape button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.js .stage-body { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 40px; align-items: center; min-height: 0; }
.js .copy { position: relative; min-height: 240px; }
.js .chapter { position: absolute; inset: 0; display: flex; align-items: center; margin: 0; opacity: 0; transform: translateX(-22px); filter: blur(6px); transition: opacity .4s, transform .5s var(--ease), filter .4s; pointer-events: none; }
.js .chapter.is-active { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.window {
  --arrive-tilt: calc(var(--arrive, 0) * 26deg);
  transform: rotateX(calc(var(--arrive-tilt) + var(--tilt-x, 0deg))) rotateY(var(--tilt-y, 0deg)) scale(calc(1 - var(--arrive, 0) * .14));
  transform-origin: center top; transition: transform .25s ease-out;
  position: relative; aspect-ratio: 840 / 470; overflow: hidden; border-radius: 22px;
  background: linear-gradient(100deg, #ffd27a, #f8a445 55%, #dc6a22);
  box-shadow: 0 30px 80px -30px rgb(180 83 10 / .55), 0 0 0 1px rgb(255 255 255 / .08) inset;
  max-height: calc(100svh - 150px); margin-inline: auto; width: 100%;
}
/* A light that travels around the window's edge as you scroll */
@property --trail { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.window::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--trail), transparent 0 72%, #fff4e4 88%, #ffb23e 94%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.window img {
  position: absolute; top: 0; left: 50%; width: 100%; height: auto; opacity: 0;
  transform: translateX(-50%) translateY(26px) scale(.96); transform-origin: top center; filter: blur(6px);
  transition: opacity .45s, transform .6s var(--ease), filter .45s;
  -webkit-mask-image: linear-gradient(#000 82%, transparent);
  mask-image: linear-gradient(#000 82%, transparent);
}
.window[data-direction="down"] img { transform: translateX(-50%) translateY(-26px) scale(.96); }
.window img.is-active, .window[data-direction="down"] img.is-active { opacity: 1; transform: translateX(-50%); filter: none; }
.js .progress { display: block; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }

@media (max-width: 820px) {
  .js .stage-head { flex-direction: column; align-items: stretch; gap: 8px; }
  .js .shape { align-self: center; }
  .js .stage-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .js .copy { order: 2; min-height: 170px; }
  .js .chapter { align-items: flex-start; }
  .window { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .word { animation: none !important; opacity: 1; filter: none; transform: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
    .js .chapter, .window img, .tabs button { transition: none; transform: none; }
  .window img, .window img.is-active { transform: translateX(-50%); filter: none; }
  .window { transform: none; transition: none; }
  .js .chapter { filter: none; }
}

/* The top bar is a notch, like the app's: closed it shows where you are, open it's the menu */
.notch {
  position: fixed; top: 0; left: 50%; z-index: 20; translate: -50% 0; width: 208px; height: 36px;
  background: #000; color: #fff4e4; border-radius: 0 0 16px 16px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .09), 0 12px 32px -12px rgb(0 0 0 / .7);
  transition: width .4s var(--ease), height .4s var(--ease), border-radius .4s var(--ease), translate .35s var(--ease);
}
.notch.is-tucked { translate: -50% -130%; }
/* The little flares where a real notch meets the top of the screen */
.notch::before, .notch::after {
  content: ""; position: absolute; top: 0; width: 10px; height: 10px; pointer-events: none;
  background: radial-gradient(circle at 0 100%, transparent 10px, #000 10.5px);
}
.notch::before { right: 100%; }
.notch::after { left: 100%; transform: scaleX(-1); }
.notch.has-label { width: 300px; }
.notch.is-open { width: min(460px, calc(100vw - 32px)); height: 92px; border-radius: 0 0 24px 24px; }
.notch-bar {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 14px;
  font: inherit; font-size: 13px; font-weight: 600; color: inherit; background: none; border: 0; border-radius: inherit; cursor: pointer;
}
.notch-bar:focus-visible, .notch-menu a:focus-visible { outline: 2px solid #ffb23e; outline-offset: -2px; }
.notch-bar img { border-radius: 5px; flex: none; }
.notch-label { margin-left: auto; color: #ffb23e; white-space: nowrap; opacity: 0; transition: opacity .25s; }
.notch.has-label .notch-label { opacity: 1; }
/* The menu keeps its open size and the notch uncovers it, so nothing shifts or spills out. */
.notch-clip { position: absolute; inset: 36px 0 0; overflow: hidden; border-radius: 0 0 24px 24px; }
.notch-menu {
  position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(460px, calc(100vw - 32px));
  display: flex; align-items: center; justify-content: space-between; gap: 4px; height: 56px; padding: 0 14px 10px;
  opacity: 0; visibility: hidden; transition: opacity .1s, visibility .1s;
}
.notch.is-open .notch-menu { opacity: 1; visibility: visible; transition: opacity .25s .12s, visibility 0s; }
.notch-menu a { color: rgb(255 244 228 / .8); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 8px; border-radius: 999px; }
.notch-menu a:hover { color: #fff; }
.notch-menu .notch-github { display: inline-flex; padding: 6px; }
.notch-menu .notch-download { background: #fff4e4; color: #1a0f08; font-weight: 600; padding: 6px 13px; }
@media (max-width: 420px) {
  .notch.has-label { width: 248px; }
  .notch-menu a { font-size: 13px; padding: 6px 4px; }
  .notch-menu .notch-download { padding: 6px 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .notch, .notch-label, .notch-menu, .dn, .dn * { transition: none; }
  .dn *, .tile *, .shimmer, .pulse-ring, .pill-tag .dot { animation: none !important; }
}

/* Page-wide moving background */
.has-bg { background: #0b0806; overflow-x: clip; }
#bg { position: fixed; inset: 0; z-index: -2; background: radial-gradient(90% 70% at 50% 0, #8a430f, #0b0806 72%); }
#bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 30%, rgb(8 5 3 / .55)); pointer-events: none; }
#bg canvas { display: block; }
.pointer-glow {
  position: fixed; top: -260px; left: -260px; z-index: -1; width: 520px; height: 520px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(255 190 90 / .2), transparent 65%); mix-blend-mode: screen;
}
@media (hover: none) { .pointer-glow { display: none; } }
.scroll-line { position: fixed; inset: 0 0 auto; z-index: 30; height: 2px; background: linear-gradient(90deg, #ffd27a, #ff8a1f); transform: scaleX(0); transform-origin: left; }
body.is-switching [data-i18n], body.is-switching .tabs, body.is-switching .marquee-track { opacity: 0; filter: blur(5px); }
[data-i18n], .tabs, .marquee-track { transition: opacity .2s, filter .2s; }

/* Language switch */
.lang { position: relative; display: inline-flex; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / .1); }
.lang::before { content: ""; position: absolute; inset: 3px auto 3px 3px; width: calc(50% - 3px); border-radius: 999px; background: #fff4e4; transition: transform .35s var(--ease); }
.lang.is-tr::before { transform: translateX(100%); }
.lang button { position: relative; font: inherit; font-size: 12px; font-weight: 700; color: rgb(255 244 228 / .75); background: none; border: 0; width: 32px; padding: 4px 0; cursor: pointer; transition: color .25s; }
.lang button[aria-pressed="true"] { color: #1a0f08; }
.lang button:focus-visible { outline: 2px solid var(--accent); border-radius: 999px; }
.lang-corner { transition: opacity .25s; position: fixed; top: 9px; right: 14px; z-index: 21; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgb(0 0 0 / .45); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); }
.notch-menu .lang { display: none; }
@media (max-width: 620px) {
  .lang-corner { display: none; }
  .notch-menu .lang { display: inline-flex; }
  .notch-menu .lang button { width: 26px; }
  .notch.is-open { height: 128px; }
  .notch-menu { flex-wrap: wrap; height: 92px; justify-content: center; }
}

/* Hero */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 108px 16px 40px; }
.pill-tag { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff4e4; background: rgb(255 255 255 / .1); box-shadow: 0 0 0 1px rgb(255 255 255 / .14) inset; backdrop-filter: blur(10px); }
.pill-tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #5dff9b; box-shadow: 0 0 10px #5dff9b; animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.hero h1 { font-size: clamp(40px, 7.4vw, 84px); line-height: 1.02; color: #fff8ee; text-shadow: 0 8px 50px rgb(0 0 0 / .35); margin-bottom: 18px; }
.hero .lead { max-width: 620px; color: rgb(255 244 228 / .86); margin-inline: auto; }
.hero .note { color: rgb(255 244 228 / .7); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.button { display: inline-flex; align-items: center; gap: 8px; background: #fff4e4; color: #1a0f08; padding: 14px 24px; box-shadow: 0 14px 44px -12px rgb(255 178 62 / .7); transition: transform .2s var(--ease), box-shadow .25s, background .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 18px 56px -10px rgb(255 178 62 / .95); }
.button.ghost { background: rgb(255 255 255 / .1); color: #fff4e4; box-shadow: 0 0 0 1px rgb(255 255 255 / .2) inset; backdrop-filter: blur(10px); }
.word { display: inline-block; }
.js [data-words] .word { opacity: 0; filter: blur(12px); transform: translateY(22px) rotate(2deg); animation: word-in .8s var(--ease) forwards; animation-delay: calc(var(--i) * 80ms + 100ms); }
.js .big[data-words]:not(.is-in) .word { animation-play-state: paused; }
@keyframes word-in { to { opacity: 1; filter: none; transform: none; } }

/* A MacBook with the app's real notch. The desktop is laid out in real points (1470 × 956) and
   scaled to fit, so the notch has its true size and shape. */
.mac { --s: .7; width: min(1080px, 100%, calc((100svh - 130px) * 1.5)); margin-top: 52px; animation: rise 1s var(--ease) both .35s; }
@keyframes rise { from { opacity: 0; transform: translateY(50px) scale(.97); } }
.mac-lid { padding: 1.05%; border-radius: 2.1% / 3.2%; background: #050506; box-shadow: 0 0 0 1px #4b4b4f, 0 0 0 2.5px #232325, 0 50px 90px -30px rgb(0 0 0 / .75); }
.mac-screen { position: relative; aspect-ratio: 1470 / 956; overflow: hidden; border-radius: 1.2% / 1.85%; background: #000; }
.mac-desktop { position: absolute; top: 0; left: 0; width: 1470px; height: 956px; transform: scale(var(--s)); transform-origin: 0 0; background: radial-gradient(circle at 30% 20%, #ffd27a 0, #ff9a3c 35%, #c2410c 75%, #3b1405 100%); }
.mac-bar { position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 22px; height: 33px; padding: 0 18px; color: #fff; font-size: 14px; font-weight: 500; background: rgb(0 0 0 / .16); text-align: left; text-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.mac-bar i { flex: 1; }
.mac-base { position: relative; width: 112%; margin-left: -6%; height: 0; padding-bottom: 2.1%; border-radius: 0 0 50% 50% / 0 0 62% 62%; background: linear-gradient(#2d2d30 0 7%, #d8d8db 10%, #c2c2c6 42%, #8e8e93 88%, #5d5d62); box-shadow: 0 26px 40px -12px rgb(0 0 0 / .6); }

/* The notch: same sizes as the app's (EarLayout), and real screenshots when open */
.dn {
  --w: 179px; --h: 32px;
  position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 3; width: var(--w); height: var(--h); overflow: hidden; color: #fff;
  background: #000; border-radius: 0 0 10px 10px; cursor: pointer; outline: none;
  transition: width .5s var(--ease), height .5s var(--ease), border-radius .5s var(--ease);
}
.dn:focus-visible { box-shadow: 0 0 0 3px var(--accent); }
.dn[data-state="music"] { --w: 259px; }
.dn[data-state="focus"] { --w: 315px; }
.dn[data-state="volume"], .dn[data-state="charge"] { --w: 343px; }
.dn[data-state="note"] { --w: 331px; --h: 94px; border-radius: 0 0 20px 20px; }
.dn.is-open { --w: 602px; border-radius: 0 0 24px 24px; }
.dn-cam { position: absolute; top: 12px; left: 50%; translate: -50% 0; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #2a3a55, #0a0d14 65%); z-index: 2; transition: opacity .2s; }
.dn.is-open .dn-cam { opacity: 0; }
.dn-ear { position: absolute; top: 0; height: 32px; width: var(--ear, 0); }
.dn-left { left: 6px; }
.dn-right { right: 6px; }
.dn-ear > * { position: absolute; top: 50%; opacity: 0; scale: .6; translate: 0 -50%; transition: opacity .2s, scale .3s var(--ease); white-space: nowrap; }
.dn-left > * { left: 14px; }
.dn-right > * { right: 14px; }
.dn[data-state="music"] [data-show="music"], .dn[data-state="volume"] [data-show="volume"], .dn[data-state="focus"] [data-show="focus"],
.dn[data-state="note"] [data-show="note"], .dn[data-state="charge"] [data-show="charge"] { opacity: 1; scale: 1; transition-delay: .14s; }
.dn-art { width: 20px; height: 20px; border-radius: 5px; background: conic-gradient(from 210deg at 35% 35%, #ffd27a, #e8670f, #5a2408, #e8670f, #ffd27a); }
.dn-left img { border-radius: 4px; }
.dn-bars { display: flex; align-items: center; gap: 2px; height: 14px; }
.dn-bars i { width: 2.5px; height: 14px; border-radius: 2px; background: rgb(255 255 255 / .9); animation: bars .42s ease-in-out infinite alternate; }
.dn-bars i:nth-child(2) { animation-duration: .55s; } .dn-bars i:nth-child(3) { animation-duration: .36s; } .dn-bars i:nth-child(4) { animation-duration: .48s; }
@keyframes bars { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
.dn-level { width: 52px; height: 5px; border-radius: 3px; background: rgb(255 255 255 / .25); overflow: hidden; }
.dn-level i { display: block; width: var(--level, 62%); height: 100%; border-radius: 3px; background: #fff; transition: width .3s var(--ease); }
.dn-num { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dn-charge { display: flex; align-items: center; gap: 4px; color: #30d158; font-size: 12px; }
.dn-charge u { display: block; width: 22px; height: 11px; padding: 2px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.dn-charge s { display: block; height: 100%; border-radius: 1.5px; background: #30d158; }
.dn-shots { position: absolute; inset: 0; opacity: 0; transition: opacity .1s; }
.dn.is-open .dn-shots { opacity: 1; transition: opacity .3s .12s; }
.dn-shots img { position: absolute; top: 0; left: 50%; width: 840px; max-width: none; height: auto; translate: -50% 0; opacity: 0; transition: opacity .25s; }
.dn-shots img.is-on { opacity: 1; }
.dn-drop { position: absolute; top: 36px; left: 50%; translate: -50% 0; width: 295px; display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 13px; color: rgb(255 255 255 / .62); opacity: 0; transition: opacity .1s; }
.dn-drop img { border-radius: 5px; }
.dn-drop p { display: grid; gap: 1px; margin: 0; min-width: 0; }
.dn-drop b { color: #fff; font-size: 13px; font-weight: 600; }
.dn[data-state="note"] .dn-drop { opacity: 1; transition: opacity .25s .16s; }
.demo-gap { width: 10px; }
.demo-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 24px; }
.demo-hint { color: rgb(255 244 228 / .75); font-size: 13px; margin-right: 4px; }
.demo-controls button { font: inherit; font-size: 13px; font-weight: 600; color: #fff4e4; background: rgb(255 255 255 / .1); border: 0; box-shadow: 0 0 0 1px rgb(255 255 255 / .14) inset; padding: 6px 13px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(8px); transition: background .2s, color .2s, transform .2s var(--ease); }
.demo-controls button:hover { transform: translateY(-2px); }
.demo-controls button.is-on { background: #fff4e4; color: #1a0f08; }
.demo-controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Marquee */
.marquee { overflow: hidden; padding: 26px 0; margin-top: 30px; border-block: 1px solid rgb(255 255 255 / .1); background: rgb(0 0 0 / .22); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; gap: 44px; font-size: clamp(20px, 3vw, 30px); font-weight: 700; letter-spacing: -.02em; color: rgb(255 244 228 / .9); will-change: transform; }
.marquee-track span::after { content: "✦"; margin-left: 44px; color: var(--accent); font-size: .7em; }

/* Stage on the moving background */
.stage { max-width: 1280px; }
.js .tabs { background: rgb(0 0 0 / .35); padding: 4px; border-radius: 999px; backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); max-width: 100%; }
.js .shape { background: rgb(0 0 0 / .35); padding: 4px; border-radius: 999px; backdrop-filter: blur(14px); }
.chapter h3 { text-shadow: 0 4px 30px rgb(0 0 0 / .5); }
.chapter-copy p:last-child { color: rgb(255 244 228 / .85); }
.js .copy { padding: 4px; }
.progress { background: rgb(255 255 255 / .15) !important; }
.window { box-shadow: 0 50px 110px -30px rgb(0 0 0 / .8), 0 0 80px -20px rgb(255 160 60 / .5); }

/* More: animated tiles */
.more { max-width: 1120px; margin: 0 auto; padding: 120px 16px 60px; }
.big { font-size: clamp(34px, 6vw, 64px); line-height: 1.05; letter-spacing: -.035em; text-align: center; margin: 0 0 44px; color: #fff8ee; text-shadow: 0 6px 40px rgb(0 0 0 / .45); }
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tile { position: relative; overflow: hidden; padding: 20px; border-radius: 22px; background: rgb(14 11 9 / .62); box-shadow: 0 0 0 1px rgb(255 255 255 / .1) inset; backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3); transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .2s ease-out, box-shadow .25s; }
.tile.wide { grid-column: span 2; }
.tile::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .25s; pointer-events: none; background: radial-gradient(260px circle at var(--x, 50%) var(--y, 50%), rgb(255 178 62 / .22), transparent 70%); }
.tile:hover { box-shadow: 0 0 0 1px rgb(255 190 110 / .45) inset; }
.tile:hover::before { opacity: 1; }
.tile h3 { position: relative; margin: 14px 0 4px; font-size: 18px; letter-spacing: -.01em; }
.tile p { position: relative; margin: 0; color: var(--muted); font-size: 14.5px; }
.art { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 110px; border-radius: 14px; background: rgb(255 255 255 / .05); overflow: hidden; }
.art-search { justify-content: flex-start; padding-inline: 18px; font-size: 18px; font-weight: 600; }
.key { padding: 4px 8px; border-radius: 7px; background: rgb(255 255 255 / .12); font-size: 13px; }
.typed::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--accent); animation: blink 1s steps(2) infinite; }
.art-note .pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(255 178 62 / .7); } 100% { box-shadow: 0 0 0 22px rgb(255 178 62 / 0); } }
.art-note .bubble { padding: 7px 13px; border-radius: 999px; background: #000; font-size: 13px; font-weight: 600; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.ring { --size: 58px; position: relative; display: grid; place-items: center; width: var(--size); height: var(--size); border-radius: 50%; font-size: 14px; background: conic-gradient(#5dff9b calc(var(--p, 0) * 1%), rgb(255 255 255 / .1) 0); }
.ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #14100d; }
.ring b { position: relative; }
.ring:nth-child(3) { background: conic-gradient(#ffb23e calc(var(--p, 0) * 1%), rgb(255 255 255 / .1) 0); }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.ring { transition: --p 1.3s var(--ease); }
.is-in .ring { --p: var(--v); }
.art-toggles { flex-direction: column; gap: 7px; }
.art-toggles i { position: relative; width: 62px; height: 22px; border-radius: 999px; background: rgb(255 255 255 / .14); animation: toggle-bg 4.5s infinite; }
.art-toggles i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; animation: toggle 4.5s var(--ease) infinite; }
.art-toggles i:nth-child(2), .art-toggles i:nth-child(2)::after { animation-delay: .5s; }
.art-toggles i:nth-child(3), .art-toggles i:nth-child(3)::after { animation-delay: 1s; }
@keyframes toggle { 15%, 60% { transform: translateX(40px); } 75% { transform: none; } }
@keyframes toggle-bg { 15%, 60% { background: #ff9a2e; } 75% { background: rgb(255 255 255 / .14); } }
.art-eq { gap: 5px; }
.art-eq i { width: 8px; height: 62px; border-radius: 5px; transform-origin: center; background: var(--album, #ffb23e); box-shadow: 0 0 14px -2px var(--album, #ffb23e); animation: bars .7s ease-in-out infinite alternate, album 9s linear infinite; }
.art-eq i:nth-child(2n) { animation-duration: .55s, 9s; } .art-eq i:nth-child(3n) { animation-duration: .9s, 9s; } .art-eq i:nth-child(5) { animation-delay: -.3s, 0s; }
@property --album { syntax: "<color>"; inherits: false; initial-value: #ffb23e; }
/* The colours of a few album covers, one after another. */
@keyframes album { 0%, 100% { --album: #ffb23e; } 20% { --album: #ff5f6d; } 40% { --album: #b58cff; } 60% { --album: #4fc3f7; } 80% { --album: #5dff9b; } }

/* Sections fade up */
.js .reveal { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s var(--delay, 0s), transform .8s var(--ease) var(--delay, 0s); }
.js .reveal.is-in { opacity: 1; transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.js .tile.reveal.is-in { transition: opacity .7s, transform .2s ease-out, box-shadow .25s; }

/* Closing */
.closing { min-height: 92svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 100px 16px 32px; text-align: center; }
.closing .big { margin: 0; font-size: clamp(42px, 9vw, 104px); }
.closing > p { max-width: 560px; margin: 0; font-size: 18px; color: rgb(255 244 228 / .9); }
/* background-clip paints only inside the box, so it needs room for ç, ş, ğ and Ç, İ. */
.shimmer { line-height: 1.25; padding-block: .1em; background: linear-gradient(100deg, #fff8ee 30%, #ffb23e 50%, #fff8ee 70%); background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: shimmer 5s linear infinite; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.pulse-ring { animation: halo 2.4s ease-out infinite; }
@keyframes halo { 0% { box-shadow: 0 0 0 0 rgb(255 244 228 / .55); } 100% { box-shadow: 0 0 0 26px rgb(255 244 228 / 0); } }
.closing footer { margin-top: auto; padding-top: 60px; color: rgb(255 244 228 / .75); }
.closing footer a { color: #fff4e4; }

@media (max-width: 820px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .tile.wide { grid-column: auto; }
  .hero { padding-top: 84px; }
}

/* Feedback page */
.feedback { max-width: 720px; padding-top: 110px; }
.feedback h1 { font-size: clamp(38px, 7vw, 64px); line-height: 1.06; }
.feedback .lead { color: rgb(255 244 228 / .88); }
.feedback h2 { font-size: 24px; margin-top: 44px; }
.feedback footer { color: rgb(255 244 228 / .75); }
.feedback .tile { transform: none; }
.fb-form { display: grid; gap: 16px; padding: 24px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.fb-kinds legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.fb-kinds input { position: absolute; opacity: 0; }
.fb-kinds span { display: block; padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--fg); background: rgb(255 255 255 / .08); box-shadow: 0 0 0 1px rgb(255 255 255 / .12) inset; cursor: pointer; transition: background .2s, color .2s; }
.fb-kinds input:checked + span { background: #fff4e4; color: #1a0f08; }
.fb-kinds input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.fb-field { display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.fb-field textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; font-weight: 400; color: var(--fg); background: rgb(0 0 0 / .3); border: 0; border-radius: 12px; box-shadow: 0 0 0 1px rgb(255 255 255 / .14) inset; resize: vertical; }
.fb-field textarea:focus { outline: 2px solid var(--accent); }
.fb-error { margin: 0; color: #ffb4a8; font-size: 14px; }
.fb-form .button { justify-self: start; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.fb-form .note { margin: 0; color: var(--muted); }
.fb-links { display: grid; gap: 10px; }
.fb-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--fg); text-decoration: none; }
a.fb-link:hover { box-shadow: 0 0 0 1px rgb(255 190 110 / .5) inset; }
.fb-link[hidden] { display: none; }
.fb-link > svg { flex: none; color: var(--accent); }
.fb-link h3 { margin: 0; font-size: 15px; }
.fb-link > div { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); }
.fb-link a { color: var(--muted); overflow-wrap: anywhere; }
.fb-copy { flex: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--fg); background: rgb(255 255 255 / .1); border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }