/* Hyprtile site. Every color comes from the theme tokens below, so the
   theme switcher on the home page recolors the whole page at once. */
:root, [data-theme="tokyo"] {
  --bg: #1a1b26; --bg2: #1f2335; --fg: #c0caf5; --dim: #a9b1d6; --com: #8a93bf;
  --blue: #7aa2f7; --cyan: #7dcfff; --green: #9ece6a; --yellow: #e0af68; --red: #f7768e; --mag: #bb9af7;
  --c1: #33ccff; --c2: #00ff99;
  --wp1: #3d59a1; --wp2: #7a3fa0; --wp3: #1f6f78;
}
[data-theme="mocha"] {
  --bg: #1e1e2e; --bg2: #262637; --fg: #cdd6f4; --dim: #bac2de; --com: #9399b2;
  --blue: #89b4fa; --cyan: #89dceb; --green: #a6e3a1; --yellow: #f9e2af; --red: #f38ba8; --mag: #f5c2e7;
  --c1: #cba6f7; --c2: #89b4fa;
  --wp1: #6c4fa0; --wp2: #3b5ba8; --wp3: #a04f7a;
}
[data-theme="gruvbox"] {
  --bg: #282828; --bg2: #32302f; --fg: #ebdbb2; --dim: #d5c4a1; --com: #a89984;
  --blue: #83a598; --cyan: #8ec07c; --green: #b8bb26; --yellow: #fabd2f; --red: #ff7a68; --mag: #d3869b;
  --c1: #fabd2f; --c2: #fe8019;
  --wp1: #9d5c0e; --wp2: #79740e; --wp3: #427b58;
}
[data-theme="nord"] {
  --bg: #2e3440; --bg2: #3b4252; --fg: #eceff4; --dim: #d8dee9; --com: #aab4c6;
  --blue: #88c0d0; --cyan: #8fbcbb; --green: #a3be8c; --yellow: #ebcb8b; --red: #eba0a7; --mag: #d4b0cf;
  --c1: #88c0d0; --c2: #b48ead;
  --wp1: #5e81ac; --wp2: #4c566a; --wp3: #81a1c1;
}
[data-theme="rosepine"] {
  --bg: #191724; --bg2: #1f1d2e; --fg: #e0def4; --dim: #a6a2c4; --com: #908caa;
  --blue: #9ccfd8; --cyan: #9ccfd8; --green: #9ccfd8; --yellow: #f6c177; --red: #eb6f92; --mag: #c4a7e7;
  --c1: #ebbcba; --c2: #c4a7e7;
  --wp1: #31748f; --wp2: #7a3d5c; --wp3: #524f67;
}
/* True black with one blue light source. */
[data-theme="matte"] {
  --bg: #000000; --bg2: #0b0d12; --fg: #e8f1ff; --dim: #9fb0cc; --com: #8899b8;
  --blue: #4d94ff; --cyan: #7cb8ff; --green: #8fc1ff; --yellow: #e8f1ff; --red: #ff6b6b; --mag: #4d94ff;
  --c1: #0068ff; --c2: #66a3ff;
  --wp1: #0068ff; --wp2: #002a66; --wp3: #001a40;
}
:root {
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gap: 10px;
  --out: 12px;
  --round: 12px;
  --border: 2px;
  --snap: cubic-bezier(0.05, 0.9, 0.1, 1.05);
  color-scheme: dark;
}
@media (min-width: 760px) { :root { --gap: 16px; --out: 24px; --round: 14px; } .w-intro h1 { font-size: clamp(44px, 6.2vw, 92px) !important; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: transparent;
  color: var(--fg);
  font: 16px/1.6 var(--sans);
  overflow-x: hidden;
}
a { color: var(--blue); }
a:hover, a:focus-visible { color: var(--fg); }
:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
code, pre, kbd, .mono { font-family: var(--mono); }

/* ---------- wallpaper ---------- */
/* The painted scene sits behind the whole page (scene.js). Until it is
   ready, a soft gradient in the theme colors stands in. */
html {
  background:
    radial-gradient(80% 60% at 30% 10%, color-mix(in srgb, var(--wp1) 45%, transparent), transparent),
    radial-gradient(70% 50% at 80% 30%, color-mix(in srgb, var(--wp2) 35%, transparent), transparent),
    var(--bg);
  background-attachment: fixed;
}
#scene {
  position: fixed; inset: 0; z-index: -2;
  width: 100vw; height: 100lvh; height: 100vh;
  opacity: 0; transition: opacity 0.9s ease;
  pointer-events: none;
}
@supports (height: 100lvh) { #scene { height: 100lvh; } }
#scene.on { opacity: 1; }
.veil { position: fixed; inset: 0; z-index: -1; background: var(--bg); opacity: 0; pointer-events: none; }

/* ---------- the desktop hero ---------- */
.desk {
  position: relative;
  isolation: isolate;
  padding: var(--out);
  padding-top: max(var(--out), env(safe-area-inset-top));
  display: flex; flex-direction: column; gap: var(--gap);
  overflow: hidden;
}
@media (min-width: 760px) {
  .desk { height: max(680px, calc(100svh / var(--z, 1))); }
}
/* Big screens: scale the whole layout up so a 4K screen at 100 percent
   looks like a 1440 one, not a postage stamp. The scene canvas stays out
   of it; it already paints at full resolution. */
@media (min-width: 2200px) { :root { --z: 1.4; } }
@media (min-width: 2800px) { :root { --z: 1.75; } }
@media (min-width: 3400px) { :root { --z: 2.1; } }
@media (min-width: 2200px) { .desk, main, .foot { zoom: var(--z); } }
.desk > * { position: relative; z-index: 1; }

/* waybar */
.waybar {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 5px 8px;
  border-radius: calc(var(--round) - 2px);
  background: color-mix(in srgb, var(--bg) 64%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 0 0 1px color-mix(in srgb, var(--c1) 30%, transparent);
  font: 13px/1 var(--mono);
}
.pills { display: flex; gap: 6px; }
.pill {
  font: inherit; color: var(--dim); background: var(--bg2);
  border: 0; border-radius: 999px;
  min-width: 34px; height: 30px; padding: 0 10px; cursor: pointer;
  transition: min-width 0.35s var(--snap), background 0.2s, color 0.2s;
}
.pill[aria-pressed="true"] {
  min-width: 52px; color: var(--bg);
  background: linear-gradient(90deg, var(--c1), var(--c2));
  font-weight: 700;
}
.wb-clock { margin: 0 auto; color: var(--fg); font-weight: 700; letter-spacing: 0.5px; white-space: nowrap; }
.mods { display: flex; gap: 6px; }
.mod { padding: 6px 8px; border-radius: 8px; background: var(--bg2); white-space: nowrap; }
.mod.cpu { color: var(--green); } .mod.mem { color: var(--mag); }
.mod.net { color: var(--cyan); } .mod.bat { color: var(--yellow); }
.wallbtn {
  font: inherit; color: var(--c1); border: 0; cursor: pointer; min-height: 30px;
  background: color-mix(in srgb, var(--c1) 14%, var(--bg2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c1) 45%, transparent);
}
.wallbtn:hover { color: var(--fg); }
[data-theme="matte"] .wallbtn { color: var(--blue); }
.wb-name { color: var(--fg); font-weight: 700; padding-left: 4px; }
@media (max-width: 520px) { .mod.net, .mod.mem, .mod.cpu, .wb-name, .wb-clock { display: none; } .wallbtn { margin-left: auto; } }

/* workspaces: both live in one grid cell and slide */
.spaces { flex: 1; display: grid; min-height: 0; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.ws {
  grid-area: 1 / 1;
  display: grid; gap: var(--gap); min-height: 0; min-width: 0;
  transition: transform 0.55s var(--snap), opacity 0.4s;
}
/* until the first switch, the hidden workspace is not rendered at all */
.ws.cold { content-visibility: hidden; }
.ws[data-pos="left"] { transform: translateX(calc(-100% - var(--out) * 2)); opacity: 0; }
.ws[data-pos="right"] { transform: translateX(calc(100% + var(--out) * 2)); opacity: 0; }

/* phone: dwindle stacks top to bottom */
.ws1 { grid-template-columns: 1fr 1fr; grid-template-rows: auto 300px 112px 112px; }
.ws1 .w-intro, .ws1 .w-term { grid-column: 1 / -1; }
.ws1 .w-btop { grid-column: 1; grid-row: 3 / 5; }
.ws1 .w-clock { grid-column: 2; grid-row: 3; }
.ws1 .w-cava { grid-column: 2; grid-row: 4; }
.ws2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; align-content: start; }
.ws2 .w-rofi, .ws2 .w-cal { grid-column: 1 / -1; }
.ws2 .w-notif { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .ws1 { grid-template-columns: 1fr 1fr 0.85fr; grid-template-rows: 1.15fr 0.5fr 0.5fr; }
  .ws1 .w-intro { grid-column: 1; grid-row: 1 / 4; }
  .ws1 .w-term { grid-column: 2 / 4; grid-row: 1; }
  .ws1 .w-btop { grid-column: 2; grid-row: 2 / 4; }
  .ws1 .w-clock { grid-column: 3; grid-row: 2; }
  .ws1 .w-cava { grid-column: 3; grid-row: 3; }
  .ws2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; align-content: stretch; }
  .ws2 .w-rofi { grid-column: 1; grid-row: 1 / 3; }
  .ws2 .w-cal { grid-column: 2; grid-row: 1; }
  .ws2 .w-notif { grid-column: 2; grid-row: 2; }
}

/* ---------- a window ---------- */
.win {
  position: relative;
  border-radius: var(--round);
  min-width: 0; min-height: 0;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  animation: popin 0.6s var(--snap) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: box-shadow 0.35s ease;
}
/* Hyprland focus follows the pointer: the focused window blooms in its
   border colors. With nothing hovered, the intro window has focus. */
.ws .win:not(.frameless):hover,
.ws:not(:has(.win:hover)) .w-intro {
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.45),
    0 0 26px -2px color-mix(in srgb, var(--c1) 55%, transparent),
    0 0 70px -6px color-mix(in srgb, var(--c2) 40%, transparent);
}
.win-body {
  position: relative; height: 100%;
  border-radius: inherit;
  background: color-mix(in srgb, var(--bg) 66%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.8); backdrop-filter: blur(18px) saturate(1.8);
  padding: 14px;
  overflow: hidden;
  font: 13px/1.5 var(--mono);
}
/* The border: a ring masked out of a spinning conic gradient. Only a
   transform animates, so it stays on the compositor. */
.ring {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: var(--border); overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.ring::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 200%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: conic-gradient(from 45deg, var(--c1), var(--c2), var(--c1), var(--c2), var(--c1));
  animation: spin 6s linear infinite;
  animation-delay: calc(var(--i, 0) * -900ms);
}
.win.dimmed .ring { opacity: 0.45; }
/* tall windows need a bigger square so the corners stay covered */
@media (min-width: 760px) { .w-intro .ring::before, .w-rofi .ring::before { width: 320%; } }
@keyframes spin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(1turn); } }
@keyframes popin { from { transform: scale(0.86); opacity: 0; } }
.w-intro { animation-name: popin-solid; }
@keyframes popin-solid { from { transform: scale(0.94); } }

.title {
  display: flex; justify-content: space-between; gap: 8px;
  color: var(--dim); font: 12px/1 var(--mono); margin-bottom: 10px;
  white-space: nowrap; overflow: hidden;
}
.title b { color: var(--fg); font-weight: 700; }

/* intro window */
.w-intro .win-body { background: color-mix(in srgb, var(--bg) 74%, transparent); }
.w-intro .win-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 22px; font-family: var(--sans); font-size: 16px; }
.w-intro h1 {
  margin: 0; font: 800 clamp(44px, 13vw, 64px)/0.95 var(--mono); letter-spacing: -2px;
  background: linear-gradient(100deg, var(--c1), var(--c2) 60%, var(--c1));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  color: var(--fg);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .w-intro h1 { color: transparent; }
}
.w-intro .tag { margin: 0; font-size: clamp(17px, 4.6vw, 22px); line-height: 1.4; color: var(--fg); }
.w-intro .sub { margin: 0; color: var(--dim); font-size: 15px; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }

/* the gradient ring button */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 12px;
  background: var(--bg2); color: var(--fg);
  font: 700 15px/1.2 var(--mono); text-decoration: none;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--c1) 30%, transparent);
  transition: transform 0.25s var(--snap);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); color: var(--fg); }
.btn .ring { --border: 2px; }
.btn small { display: block; font: 400 11px/1.2 var(--mono); color: var(--dim); }
.btn .play { width: 22px; height: 22px; flex: none; }
.price { font: 700 15px/1.2 var(--mono); color: var(--dim); }
.price b { color: var(--green); }

/* terminal */
.w-term .win-body { padding: 12px 14px; display: flex; flex-direction: column; }
.term-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.term { display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; }
.term { margin: 0; white-space: pre; font: 12px/1.45 var(--mono); color: var(--fg); overflow: hidden; }
@media (max-width: 380px) { .term { font-size: 11px; } }
.term .p { color: var(--green); } .term .u { color: var(--blue); font-weight: 700; }
.term .k { color: var(--blue); font-weight: 700; } .term .d { color: var(--dim); }
.term .y { color: var(--yellow); } .term .r { color: var(--red); } .term .m { color: var(--mag); } .term .c { color: var(--cyan); }
.term .lg { display: inline-block; width: 13ch; vertical-align: top; position: relative; }
.term .tiles i { position: absolute; left: 1ch; top: 4px; width: 5ch; height: 64px; border: 2px solid var(--blue); border-radius: 5px; }
.term .tiles i + i { left: 7ch; width: 4.5ch; height: 29px; border-color: var(--mag); }
.term .tiles i + i + i { top: 39px; border-color: var(--cyan); }
.cursor { display: inline-block; width: 0.6em; height: 1.15em; vertical-align: -0.2em; background: var(--fg); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.term-in { display: flex; gap: 6px; align-items: baseline; font: 12px/1.45 var(--mono); }
.term-in input {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--fg);
  font: inherit; padding: 2px 0; caret-color: var(--fg);
}
.term-in input:focus { outline: none; }
.term-in:focus-within { box-shadow: 0 1px 0 var(--c1); }
.term-in .p { color: var(--green); }

/* btop */
.w-btop .win-body { display: flex; flex-direction: column; }
.graph { position: relative; flex: 1; min-height: 56px; display: flex; align-items: flex-end; gap: 2px; }
.graph span {
  flex: 1; border-radius: 2px 2px 0 0; height: 10%;
  background: linear-gradient(to top, var(--green), var(--yellow) 65%, var(--red)) bottom / 100% var(--gh, 120px) no-repeat;
  transition: height 0.6s var(--snap);
}
.stats { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; margin-top: 8px; font-size: 12px; align-items: center; }
.stats .meter { height: 6px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.stats .meter i { display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--c1), var(--c2)); transition: width 0.6s var(--snap); }
.stats .l { color: var(--dim); } .stats .v { color: var(--fg); text-align: right; min-width: 4ch; }

/* clock: frameless, straight on the wallpaper, in neon */
.frameless { box-shadow: none; }
.frameless .win-body { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.w-clock .win-body { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 4px; overflow: visible; }
.big {
  font: 200 clamp(46px, 13vw, 76px)/1 var(--sans); letter-spacing: -1px;
  background: linear-gradient(100deg, var(--c1), var(--c2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c2) 80%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--c1) 70%, transparent));
}
@media (min-width: 760px) { .big { font-size: clamp(56px, 6vw, 96px); } }
.big .colon { animation: blink 2s steps(1) infinite; }
.date { color: #fff; font: 600 13px/1.4 var(--sans); margin-top: 6px; letter-spacing: 0.5px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9); }

/* cava */
.w-cava .win-body { display: flex; flex-direction: column; padding: 10px 12px; }
.song { font: 12px/1.3 var(--mono); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song span { color: var(--dim); }
.cava { flex: 1; display: flex; align-items: flex-end; gap: 3px; min-height: 30px; margin-top: 6px; }
.cava i {
  flex: 1; height: 100%; border-radius: 3px 3px 1px 1px;
  background: linear-gradient(to top, var(--c1), var(--c2));
  transform-origin: bottom; transform: scaleY(0.3);
  animation: cava 0.9s ease-in-out infinite alternate;
}
@keyframes cava { 0% { transform: scaleY(0.15); } 40% { transform: scaleY(0.85); } 70% { transform: scaleY(0.4); } 100% { transform: scaleY(1); } }

/* rofi */
.w-rofi .win-body { display: flex; flex-direction: column; gap: 10px; }
.rofi-in { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--bg2); }
.rofi-in label { color: var(--c1); font-weight: 700; }
[data-theme="matte"] .rofi-in label { color: var(--blue); }
.rofi-in input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--fg); font: 14px/1.4 var(--mono); }
.rofi-in input::placeholder { color: var(--dim); opacity: 1; }
.rofi-in input:focus { outline: none; }
.rofi-in:focus-within { box-shadow: 0 0 0 2px var(--c1); }
.apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; overflow: hidden; }
.apps li { padding: 6px 10px; border-radius: 8px; color: var(--fg); display: flex; gap: 10px; }
.apps li .ic { color: var(--dim); width: 1.2em; text-align: center; }
.apps li.sel { background: color-mix(in srgb, var(--c1) 22%, var(--bg)); }
.apps li mark { background: none; color: var(--yellow); font-weight: 700; }
.apps .none { color: var(--dim); }

/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 12px; }
.cal b { color: var(--dim); font-weight: 400; }
.cal span { padding: 3px 0; border-radius: 6px; color: var(--fg); }
.cal span.today { background: linear-gradient(135deg, var(--c1), var(--c2)); color: var(--bg); font-weight: 700; }
.cal span.ev { box-shadow: inset 0 -2px 0 var(--mag); }

/* notifications */
.notes { display: grid; gap: 8px; }
.note { padding: 8px 10px; border-radius: 10px; background: var(--bg2); border-left: 3px solid var(--c1); }
.note b { display: block; color: var(--fg); font-size: 12px; }
.note span { color: var(--dim); font-size: 12px; }

/* theme dock under the desktop */
.dock {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: calc(var(--round) - 2px);
  background: color-mix(in srgb, var(--bg) 64%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.8); backdrop-filter: blur(16px) saturate(1.8);
  overflow-x: auto; scrollbar-width: none;
  font: 13px/1 var(--mono);
}
.dock::-webkit-scrollbar { display: none; }
.dock .lbl { color: var(--dim); padding: 0 4px; white-space: nowrap; }
.sw {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font: inherit; color: var(--fg); background: var(--bg2);
  border: 1px solid transparent; border-radius: 999px;
  padding: 7px 12px 7px 8px; min-height: 34px; cursor: pointer;
}
.sw[aria-pressed="true"] { border-color: var(--c1); box-shadow: 0 0 0 1px var(--c1) inset; }
.sw i { width: 18px; height: 18px; border-radius: 50%; display: block; }
.hint { color: var(--dim); font: 12px/1.4 var(--mono); text-align: center; margin: 0; }

/* ---------- sections ---------- */
main { position: relative; }
.sec { max-width: 1100px; margin: 0 auto; padding: 72px 18px 0; content-visibility: auto; contain-intrinsic-size: auto 900px; }
.eyebrow { font: 13px/1 var(--mono); color: var(--c1); margin: 0 0 12px; }
[data-theme="matte"] .eyebrow { color: var(--blue); }
.eyebrow::before { content: "❯ "; }
h2 { font: 800 clamp(28px, 7vw, 46px)/1.08 var(--mono); letter-spacing: -1px; margin: 0 0 14px; color: var(--fg); }
.lead { color: var(--fg); font-size: 18px; max-width: 640px; margin: 0 0 30px; text-shadow: 0 1px 12px var(--bg), 0 0 2px var(--bg); }
.sec h2 { text-shadow: 0 2px 18px var(--bg); }

/* wallpaper gallery */
.walls { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .walls { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.wp {
  position: relative; display: block; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--round); overflow: hidden; background: var(--bg2);
  aspect-ratio: 16 / 10; color: #fff; font: 700 13px/1 var(--mono);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 0.35s var(--snap), box-shadow 0.35s;
}
.wp canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s; }
.wp canvas.on { opacity: 1; }
.wp span {
  position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.wp:hover, .wp:focus-visible { transform: translateY(-3px); }
.wp[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--c1), 0 0 30px -2px color-mix(in srgb, var(--c1) 60%, transparent), 0 0 70px -8px color-mix(in srgb, var(--c2) 45%, transparent);
}
.wp[aria-pressed="true"] span::before { content: "● "; color: var(--c2); }
.note2 { color: var(--fg); font: 13px/1.5 var(--mono); margin: 16px 0 0; text-shadow: 0 1px 10px var(--bg); }

.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }
.card { animation: none; }
.card .win-body { padding: 18px; font: 15px/1.6 var(--sans); background: color-mix(in srgb, var(--bg2) 80%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); }
.card h3 { font: 700 17px/1.3 var(--mono); margin: 0 0 8px; color: var(--fg); }
.card p { margin: 0; color: var(--dim); }
.card .ring::before { animation-duration: 14s; }
.card:not(:hover):not(:focus-within) .ring { opacity: 0.35; }
.card .ring { transition: opacity 0.3s; }
.card:not(:hover):not(:focus-within) .ring::before { animation-play-state: paused; }

.grid .wide { grid-column: 1 / -1; }
@media (min-width: 640px) and (max-width: 979px) { .grid > .card:nth-child(9) { grid-column: 1 / -1; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 0; list-style: none; }
.chips li { font: 12px/1 var(--mono); padding: 7px 10px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 80%, transparent); color: var(--fg); }

/* config block */
.conf { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .conf { grid-template-columns: 0.9fr 1.1fr; } }
.code .win-body { background: color-mix(in srgb, var(--bg2) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 0; }
.code .title { padding: 12px 16px 0; }
.code pre { margin: 0; padding: 4px 16px 16px; overflow-x: auto; font: 13px/1.65 var(--mono); color: var(--fg); }
.code .ring::before { animation-duration: 10s; }
.hl-c { color: var(--com); font-style: italic; }
.hl-s { color: var(--mag); font-weight: 700; }
.hl-k { color: var(--blue); }
.hl-n { color: var(--yellow); }
.hl-v { color: var(--green); }
.hl-o { color: var(--cyan); }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.points li { padding-left: 26px; position: relative; color: var(--fg); text-shadow: 0 1px 10px var(--bg); }
.points li::before { content: "▸"; position: absolute; left: 4px; color: var(--c1); }
.points b { color: var(--fg); }

/* pricing */
.buy .win-body { background: color-mix(in srgb, var(--bg2) 84%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.6); backdrop-filter: blur(14px) saturate(1.6); padding: 28px 22px; text-align: center; font-family: var(--sans); }
.buy { max-width: 560px; margin: 0 auto; animation: none; }
.amount { font: 800 clamp(48px, 14vw, 72px)/1 var(--mono); color: var(--fg); margin: 6px 0 4px; letter-spacing: -2px; }
.amount small { font-size: 0.32em; letter-spacing: 0; color: var(--dim); font-weight: 400; }
.buy ul { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; gap: 6px; color: var(--dim); }
.buy ul li::before { content: "✓ "; color: var(--green); }

/* footer */
.foot {
  max-width: 1100px; margin: 80px auto 0; padding: 24px 18px calc(40px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--bg2);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font: 13px/1.6 var(--mono); color: var(--fg);
  background: color-mix(in srgb, var(--bg) 70%, transparent); border-radius: var(--round) var(--round) 0 0;
}
.foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.foot .aff { flex-basis: 100%; margin: 0; }

/* ---------- document pages ---------- */
.doc { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 18px; }
.doc .waybar { margin: 12px -6px 0; position: sticky; top: 8px; z-index: 5; }
.doc .waybar nav { display: flex; gap: 6px; margin-left: auto; }
.doc .waybar nav a { color: var(--fg); text-decoration: none; padding: 6px 10px; border-radius: 999px; background: var(--bg2); }
.doc .waybar nav a[aria-current] { color: var(--bg); background: linear-gradient(90deg, var(--c1), var(--c2)); font-weight: 700; }
.doc .waybar .wb-name { display: inline; }
.doc h1 { font: 800 clamp(32px, 8vw, 48px)/1.1 var(--mono); letter-spacing: -1px; margin: 48px 0 6px; color: var(--fg); }
.doc h2 { font-size: 21px; letter-spacing: 0; margin: 36px 0 10px; }
.doc p, .doc li { color: var(--fg); }
.doc .dim { color: var(--dim); }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 8px; }
.doc strong { color: var(--fg); }
.glow {
  position: fixed; inset: 0 0 auto; height: 50vh; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--c1) 22%, transparent), transparent);
}
.doc .foot { margin-top: 64px; padding-left: 0; padding-right: 0; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cava i:nth-child(odd) { transform: scaleY(0.55); }
  .cava i:nth-child(3n) { transform: scaleY(0.85); }
}