@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/Fraunces.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/fonts/Fraunces-Italic.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/PublicSans.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("/fonts/PublicSans-Italic.woff2") format("woff2"); }
:root {
color-scheme: dark;
--paper: #161616;
--ink: #f1e9df;
--soft: #b4b4b4;
--line: #343434;
--card: #202020;
--rose: #d36d89;
--rose-ink: #dd8ea4;
--shadow-sprite: drop-shadow(0 22px 26px rgba(0, 0, 0, .55));
--shadow-bubble: 5px 5px 0 rgba(241, 233, 223, .22);
--grain: .05;
--scene-floor: url(/assets/desk_night_floor.webp);
--scene-props: url(/assets/desk_night_props.webp);
--serif: "Fraunces", Georgia, serif;
--sans: "Public Sans", "Segoe UI", system-ui, sans-serif;
--out: cubic-bezier(.22, 1, .36, 1);
--gutter: clamp(20px, 4vw, 56px);
}
html[data-theme="light"] {
color-scheme: light;
--paper: #faf7f1;
--ink: #17130e;
--soft: #5f574c;
--line: #e4ddd0;
--card: #ffffff;
--rose: #c94b6e;
--rose-ink: #ad3a5c;
--shadow-sprite: drop-shadow(0 22px 26px rgba(23, 19, 14, .16));
--shadow-bubble: 5px 5px 0 rgba(23, 19, 14, .14);
--grain: .035;
--scene-floor: url(/assets/desk_day_floor.webp);
--scene-props: url(/assets/desk_day_props.webp);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font: 400 17px/1.65 var(--sans);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
[hidden] { display: none !important; }
body::after {
content: "";
position: fixed; inset: 0; z-index: 90; pointer-events: none;
opacity: var(--grain);
background-image: url(/assets/grain.svg);
}
html[data-theme="light"] body::after { filter: invert(1); }
html.theme-fade, html.theme-fade * { transition: background-color .35s, color .35s, border-color .35s !important; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; font-optical-sizing: auto; margin: 0; }
h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); line-height: 1.06; letter-spacing: -.8px; }
h3 { font-size: 1.4rem; line-height: 1.2; }
p { margin: 0; }
em.rose { font-style: italic; color: var(--rose); }
p em.rose { color: var(--rose-ink); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font: 600 .84rem/1 var(--sans); color: var(--rose-ink); letter-spacing: .4px; margin-bottom: 18px; }
.lede { color: var(--soft); font-size: 1.12rem; max-width: 58ch; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 999px; }
.skip:focus { left: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.d1 { --d: .08s; }
.d2 { --d: .16s; }
.d3 { --d: .24s; }
.d4 { --d: .32s; }
.d5 { --d: .4s; }
.d6 { --d: .45s; }
.d7 { --d: .6s; }
.d8 { --d: .75s; }
.top {
position: sticky; top: 0; z-index: 60;
background: var(--paper);
border-bottom: 1px solid transparent;
transition: border-color .25s, transform .35s var(--out);
view-transition-name: top;
}
.top.scrolled { border-color: var(--line); }
.top.away { transform: translateY(-100%); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.wordmark { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 600 1.5rem/1 var(--serif); }
.wordmark img { width: 40px; height: 40px; border-radius: 50%; }
.nav { display: flex; gap: 6px; margin-left: auto; }
.nav a {
position: relative; text-decoration: none; padding: 8px 14px; border-radius: 999px;
font-weight: 500; font-size: .96rem; color: var(--soft); transition: color .2s;
}
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px;
background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--out);
}
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.kbd-open {
display: flex; align-items: center; gap: 10px; cursor: pointer;
background: var(--card); color: var(--soft); border: 1.5px solid var(--line);
border-radius: 999px; padding: 7px 8px 7px 16px; font: 500 .88rem/1 var(--sans);
transition: border-color .2s, color .2s;
}
.kbd-open:hover { border-color: var(--rose); color: var(--ink); }
kbd {
font: 600 .74rem/1 var(--sans); color: var(--soft);
border: 1.5px solid var(--line); border-bottom-width: 3px; border-radius: 7px;
padding: 4px 7px; background: var(--paper);
}
.lights { display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--soft); cursor: pointer; font: 500 .88rem/1 var(--sans); padding: 6px; }
.lights .track { width: 46px; height: 24px; border: 2px solid var(--ink); border-radius: 999px; position: relative; transition: border-color .2s; }
.lights .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); transition: transform .25s var(--out), background .2s; }
html:not([data-theme="light"]) .lights .knob { transform: translateX(22px); }
.lights:hover .track { border-color: var(--rose); }
.lights:hover .knob { background: var(--rose); }
.btn, .btn-primary, .btn-ghost {
display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
font: 600 1rem/1 var(--sans); text-decoration: none;
padding: 17px 28px; border-radius: 999px; border: 2px solid var(--ink);
transition: background .2s, border-color .2s, color .2s, transform .14s var(--out);
}
.btn, .btn-primary { background: var(--ink); color: var(--paper); }
.btn:hover, .btn-primary:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.btn:active, .btn-primary:active { transform: scale(.97); transition-duration: .08s; }
.btn.ghost, .btn-ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover, .btn-ghost:hover { border-color: var(--rose); color: var(--rose-ink); background: transparent; }
.btn .arrow { transition: transform .25s var(--out); }
.btn:hover .arrow { transform: translateX(4px); }
.full { width: 100%; justify-content: center; }
.btn[aria-disabled="true"], .btn-primary[aria-disabled="true"], .btn-ghost[aria-disabled="true"] {
background: transparent; color: var(--soft); border-color: var(--line); cursor: not-allowed;
}
.btn[aria-disabled="true"]:hover, .btn-primary[aria-disabled="true"]:hover, .btn-ghost[aria-disabled="true"]:hover {
background: transparent; border-color: var(--line); color: var(--soft);
}
.btn.sent, .btn.sent:hover, .btn-primary.sent, .btn-primary.sent:hover { background: var(--rose); border-color: var(--rose); color: #fff; }
.lbl { transition: opacity .12s ease; }
.lbl.swap { opacity: 0; }
.reina { position: relative; aspect-ratio: 760 / 1173; user-select: none; }
.reina img { position: absolute; pointer-events: none; -webkit-user-drag: none; }
.reina .body { inset: 0; width: 100%; height: 100%; filter: var(--shadow-sprite); }
.reina .plate { left: 24.12%; top: 20.23%; width: 50.7%; height: 21.95%; }
.reina .portrait { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; opacity: 0; transition: opacity .3s; filter: var(--shadow-sprite); }
.reina.acting .portrait { opacity: 1; }
.reina.acting .body, .reina.acting .plate { opacity: 0; transition: opacity .3s; }
.reina.noart .reina-breathe { display: none; }
.reina .still { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: var(--shadow-sprite); }
.reina-breathe { position: absolute; inset: 0; transform-origin: 50% 100%; animation: breathe 4.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(1.008) scaleX(.997); } }
.reina-hit { animation: recoil .33s var(--out); transform-origin: 50% 100%; }
@keyframes recoil { 0% { transform: rotate(0); } 35% { transform: rotate(-4deg) translateX(-6px); } 100% { transform: rotate(0); } }
.bubble {
position: absolute; z-index: 3;
background: var(--card); color: var(--ink);
border: 2px solid var(--ink); border-radius: 20px;
box-shadow: var(--shadow-bubble);
padding: 14px 20px; font: 500 1.02rem/1.4 var(--sans);
max-width: 300px; width: max-content;
transform-origin: 100% 100%;
transition: opacity .25s, transform .35s var(--out);
}
.bubble::after {
content: ""; position: absolute; right: 34px; bottom: -9px; width: 14px; height: 14px;
background: var(--card); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
transform: rotate(45deg);
}
.bubble.hide { opacity: 0; transform: scale(.9) translateY(8px); }
.bubble.gone .txt { opacity: 0; }
.stage { position: relative; min-height: calc(100svh - 72px); padding: clamp(36px, 7vh, 80px) 0 0; overflow: clip; --sh: max(520px, calc((100svh - 72px) * .86)); }
.stage .wrap { position: relative; z-index: 2; width: 100%; pointer-events: none; }
.stage .copy { max-width: min(54%, 640px); pointer-events: auto; padding-bottom: calc(var(--sh) * .24); }
.stage .lede { max-width: 46ch; }
.scene { position: absolute; bottom: 0; height: var(--sh); width: calc(var(--sh) * 3); left: calc(84vw - var(--sh) * 3 * .7328); z-index: 1; --mx: 0; --rx: 73.28%; --rb: 6.11%; --rh: 75.36%; }
.scene .layer { position: absolute; inset: 0; clip-path: inset(2px 0 0 0); background: center / 100% 100% no-repeat; transition: transform .5s var(--out); }
.scene .floor { background-image: var(--scene-floor); }
.scene .props { background-image: var(--scene-props); transform: translateX(calc(var(--mx) * -7px)); }
.scene .standing { position: absolute; left: var(--rx); bottom: var(--rb); height: var(--rh); aspect-ratio: 760 / 1173; margin-left: calc(var(--sh) * -.2441); transform: translateX(calc(var(--mx) * -16px)); transition: transform .5s var(--out); view-transition-name: reina; }
.stage h1 {
font-size: clamp(2.7rem, 5.3vw, 5.2rem); line-height: 1; letter-spacing: -2px; position: relative; z-index: 0;
margin-bottom: 30px;
}
h1 .ln { display: block; overflow: hidden; padding-bottom: .12em; white-space: nowrap; }
h1 .ln > span { display: block; transform: translateY(105%); animation: rise .9s var(--out) forwards; }
h1 .ln:nth-child(2) > span { animation-delay: .08s; }
h1 .ln:nth-child(3) > span { animation-delay: .16s; }
@keyframes rise { to { transform: none; } }
.fade-up { opacity: 0; transform: translateY(18px); animation: fadeup .8s var(--out) forwards; animation-delay: var(--d, .3s); }
@keyframes fadeup { to { opacity: 1; transform: none; } }
.stage .cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 30px; color: var(--soft); font-size: .93rem; list-style: none; padding: 0; }
.facts li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); margin-right: 10px; vertical-align: 2px; }
.stage .standing .hit { position: absolute; inset: 4% 12% 0; cursor: pointer; background: none; border: 0; border-radius: 40% 40% 12% 12%; z-index: 2; }
.stage .bubble { right: 60%; top: 2%; }
.standing { position: relative; }
.standing .hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: var(--shadow-sprite); transition: opacity .3s; }
.standing .hero-fallback.gone { opacity: 0; pointer-events: none; }
.standing [data-hero] { position: absolute; inset: 0; }
.mt0 { margin-top: 0; }
.scrollcue { position: absolute; left: 60px; bottom: 24px; font-size: .82rem; color: var(--soft); display: flex; gap: 10px; align-items: center; }
.scrollcue::before { content: ""; width: 1.5px; height: 26px; background: var(--rose); transform-origin: top; animation: cue 2.2s var(--out) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
section.band { padding: clamp(80px, 12vh, 150px) 0; border-top: 1px solid var(--line); position: relative; }
.head { display: grid; gap: 18px; margin-bottom: clamp(40px, 7vh, 80px); max-width: 900px; }
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--out), transform .8s var(--out); transition-delay: var(--d, 0s); }
html.js .reveal.in { opacity: 1; transform: none; }
.does { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(30px, 6vw, 100px); align-items: start; }
.does .pin { position: sticky; top: 110px; }
.does .pin .reina { width: min(100%, 340px); margin: 0 auto; }
.does .pin .tag { text-align: center; margin-top: 18px; font: italic 500 1.05rem var(--serif); color: var(--soft); min-height: 1.6em; transition: opacity .25s; }
.feature { padding: 34px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 74px 1fr; gap: 8px; opacity: .38; transition: opacity .45s; }
.feature:first-child { border-top: 0; padding-top: 0; }
.feature.on { opacity: 1; }
.feature .no { font: italic 600 1.7rem/1.1 var(--serif); color: var(--rose); }
.feature h3 { margin-bottom: 10px; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.feature p { color: var(--soft); max-width: 56ch; }
.moods { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 5vw, 80px); align-items: center; }
.moodlist { list-style: none; margin: 0; padding: 0; }
.moodlist button {
all: unset; cursor: pointer; display: block; width: 100%; white-space: nowrap;
font: 600 clamp(1.7rem, 3.5vw, 3.1rem)/1.16 var(--serif); letter-spacing: -1px;
color: var(--soft); opacity: .55; padding: 5px 0;
transition: color .3s, opacity .3s, transform .45s var(--out);
}
.moodlist button small {
display: block; white-space: normal; font: 500 1rem/1.5 var(--sans); font-style: normal; letter-spacing: 0; color: var(--ink);
max-height: 0; overflow: hidden; opacity: 0; transition: max-height .45s var(--out), opacity .3s, padding .45s var(--out);
}
.moodlist button small::before { content: "\201C"; color: var(--rose-ink); }
.moodlist button small::after { content: "\201D"; color: var(--rose-ink); }
.moodlist button[aria-pressed="true"], .moodlist button:hover, .moodlist button:focus-visible { color: var(--ink); opacity: 1; transform: translateX(14px); }
.moodlist button[aria-pressed="true"] { font-style: italic; color: var(--rose); }
.moodlist button[aria-pressed="true"] small { max-height: 3.2em; opacity: 1; padding: 4px 0 12px; }
.moodstage { position: relative; height: min(70vh, 620px); }
.moodstage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; filter: var(--shadow-sprite); opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .35s, transform .5s var(--out); }
.moodstage img.on { opacity: 1; transform: none; }
.more { margin-top: 26px; color: var(--soft); }
.appshot { perspective: 1600px; }
.win {
--w-bg: #181818; --w-card: #222; --w-line: #333; --w-ink: #f1e9df; --w-soft: #a9a9a9;
background: var(--w-bg); color: var(--w-ink); border: 1.5px solid var(--w-line); border-radius: 14px;
overflow: hidden; max-width: 1040px; margin: 0 auto;
box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7);
transform: rotateX(calc(var(--tilt, 0) * 1deg)) scale(calc(1 - var(--tilt, 0) * .006));
transform-origin: 50% 100%; will-change: transform;
}
.win .bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--w-line); font: 600 1.05rem var(--serif); }
.win .bar i { color: #d36d89; font-style: normal; }
.win .bar .dots { margin-left: auto; display: flex; gap: 18px; color: var(--w-soft); font: 400 .9rem var(--sans); }
.win .cols { display: grid; grid-template-columns: 190px 1fr 220px; min-height: 430px; }
.win nav { border-right: 1px solid var(--w-line); padding: 18px 0; font-size: .9rem; color: var(--w-soft); }
.win nav b { display: block; font: italic 500 .8rem var(--serif); padding: 12px 20px 6px; }
.win nav span { display: block; padding: 7px 20px; border-left: 2px solid transparent; }
.win nav span.on { color: var(--w-ink); border-color: #d36d89; font-weight: 600; }
.win .chat { padding: 22px 26px; display: flex; flex-direction: column; }
.win .chat h4 { font: 600 1.6rem var(--serif); margin: 0 0 16px; }
.win .log { flex: 1; display: grid; align-content: start; gap: 12px; font-size: .95rem; }
.win .msg { display: grid; grid-template-columns: 64px 1fr; gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--out); }
.win .msg.in { opacity: 1; transform: none; }
.win .msg b { font-size: .74rem; letter-spacing: .6px; color: var(--w-soft); padding-top: 3px; }
.win .msg.r b { color: #d36d89; }
.win .msg i { font-family: var(--serif); color: #dd8ea4; }
.win .say { margin-top: 18px; border: 1.5px solid var(--w-line); border-radius: 999px; padding: 12px 20px; color: var(--w-soft); font-size: .92rem; background: var(--w-card); }
.win .side { border-left: 1px solid var(--w-line); padding: 18px; display: grid; align-content: end; justify-items: center; gap: 10px; }
.win .side .reina { width: 150px; }
.win .side small { color: var(--w-soft); font: italic 500 .85rem var(--serif); }
.caption { text-align: center; color: var(--soft); font-size: .9rem; margin-top: 22px; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.chip { border: 1.5px solid var(--line); border-radius: 999px; padding: 12px 22px; font-weight: 500; background: var(--card); transition: border-color .2s, transform .3s var(--out); }
.chip:hover { border-color: var(--rose); transform: translateY(-3px); }
.chip b { color: var(--rose-ink); font-weight: 600; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 30px; transition: transform .45s var(--out), border-color .25s; }
.card:hover { transform: translateY(-6px); border-color: var(--rose); }
.card .no { font: italic 600 1.3rem var(--serif); color: var(--rose); display: block; margin-bottom: 40px; }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--soft); font-size: .98rem; }
.get { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.specs { margin: 0; }
.specs div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.specs dt { font-weight: 600; }
.specs dd { margin: 0; color: var(--soft); font-size: .97rem; }
.panel { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 22px; padding: 36px; margin-top: 120px; }
.panel .perch { position: absolute; right: 26px; bottom: calc(100% - 46px); width: 170px; }
.panel .perch [data-perch] { transform-origin: 50% 80%; animation: sway 5.2s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.panel h3 { font-size: 1.7rem; margin-bottom: 8px; max-width: 14ch; }
.panel .cta { margin: 18px 0 24px; }
.coming { position: relative; display: inline-block; }
.say {
position: absolute; left: calc(100% + 18px); bottom: 0;
width: max-content; max-width: min(320px, 60vw); z-index: 2;
background: var(--card); color: var(--ink);
border: 2px solid var(--ink); border-radius: 18px;
padding: 11px 15px; font-size: .92rem; line-height: 1.45; text-align: left;
box-shadow: var(--shadow-bubble);
}
.say::after {
content: ""; position: absolute; left: -12px; bottom: 12px;
width: 20px; height: 20px; background: var(--card);
border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
transform: rotate(45deg) skew(12deg, 12deg);
}
.say { transition: opacity .4s ease; }
.say.fade { opacity: 0; }
.say .line { transition: opacity .3s ease; }
.say .line.swap { opacity: 0; }
@media (max-width: 620px) {
.say { left: 0; bottom: calc(100% + 14px); max-width: min(300px, calc(100vw - 100px)); }
.say::after { left: 34px; bottom: -12px; border-left: 0; border-right: 2px solid var(--ink); }
}
.panel form { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.notify-label { font: 600 1.05rem var(--sans); }
.notify-row { display: flex; gap: 10px; flex-wrap: wrap; }
.panel input[type="email"] { flex: 1 1 200px; min-width: 0; background: var(--paper); color: var(--ink); border: 2px solid var(--line); border-radius: 999px; padding: 15px 20px; font: inherit; }
.panel input[type="email"]::placeholder { color: var(--soft); opacity: 1; }
.panel input[type="email"]:focus { outline: none; border-color: var(--rose); }
.notify-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 4px; font-size: .86rem; color: var(--soft); line-height: 1.55; }
.notify-consent input { margin-top: 4px; flex: 0 0 auto; }
.notify-status { margin-top: 4px; font-size: .86rem; color: var(--soft); min-height: 1.3em; }
.notify-status.bad { color: var(--rose-ink); }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 70px; }
.notes p { color: var(--soft); font-size: .95rem; border-left: 2px solid var(--line); padding-left: 18px; }
.notes b { color: var(--ink); display: block; margin-bottom: 6px; }
footer { border-top: 1px solid var(--line); padding: 60px 0 110px; }
.foot { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; }
.foot h4 { font: 600 .84rem var(--sans); color: var(--rose-ink); margin: 0 0 14px; }
.foot a { display: block; text-decoration: none; color: var(--soft); padding: 4px 0; transition: color .2s, transform .3s var(--out); }
.foot a:hover { color: var(--ink); transform: translateX(4px); }
.foot .big { font: 600 clamp(3rem, 8vw, 7rem)/.9 var(--serif); letter-spacing: -3px; }
.legal { color: var(--soft); font-size: .85rem; margin-top: 50px; }
.rail { position: fixed; left: 0; right: 0; bottom: 0; height: 74px; z-index: 50; pointer-events: none; }
.rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rose); transform-origin: left; transform: scaleX(var(--p, 0)); }
.walker {
position: absolute; bottom: 1px; left: 0; width: 46px; height: 71px; opacity: 0; transition: opacity .5s;
background: url(/assets/stand.webp) center / contain no-repeat;
transform: translateX(calc(var(--p, 0) * (100vw - 46px)));
filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35));
}
.rail.walking .walker {
width: 41px; background: url(/assets/walk_strip.webp) 0 0 / 1312px 71px no-repeat;
transform: translateX(calc(var(--p, 0) * (100vw - 46px))) scaleX(var(--dir, -1));
}
.rail.moving .walker, .rail.start .walker { opacity: 1; transition-duration: .15s; }
.reina .intro { position: absolute; top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 590 / 900; transform: translateX(-50%); filter: var(--shadow-sprite); transition: opacity .3s; pointer-events: none; }
.reina .intro.gone-intro { opacity: 0; }
.reina.intro-on .reina-breathe { opacity: 0; }
.reina .reina-breathe { transition: opacity .3s; }
.doze { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .45s ease; container-type: inline-size; }
.doze.in { opacity: 1; transition-duration: .6s; }
.reina.asleep .reina-breathe { opacity: 0; }
.bubble.sleeping { opacity: 0; }
.doze-body, .doze-breath { position: absolute; inset: 0; transform-origin: 49% 100%; }
.doze-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: var(--shadow-sprite); }
.doze.waking .doze-still { visibility: hidden; }
.doze-wake { position: absolute; left: 50%; bottom: 0; width: calc(100% * 768 / 640); height: calc(100% * 1027 / 987); translate: -50% 0; background-repeat: no-repeat; background-position: 0% 0%; background-size: 2900% auto; visibility: hidden; filter: var(--shadow-sprite); }
.doze.waking .doze-wake { visibility: visible; animation: doze-wake 1.1667s steps(28) forwards; }
@keyframes doze-wake { from { background-position-x: 0%; } to { background-position-x: 100%; } }
.doze.in .doze-body { animation: doze-sway 7.4s 1.2s infinite, doze-nod 11s infinite; }
.doze.in .doze-breath { animation: doze-breathe 4.6s infinite; }
.doze.in.waking .doze-body, .doze.in.waking .doze-breath {
animation: none;
transition: rotate .45s cubic-bezier(.3, .7, .3, 1), scale .45s cubic-bezier(.3, .7, .3, 1);
}
@keyframes doze-sway { 0% { rotate: 0deg; animation-timing-function: cubic-bezier(.55, .05, .7, 1); } 42% { rotate: -1deg; animation-timing-function: cubic-bezier(.4, 0, .3, 1); } 76% { rotate: .45deg; animation-timing-function: cubic-bezier(.45, .05, .55, .95); } 100% { rotate: 0deg; } }
@keyframes doze-nod { 0% { scale: 1 1; animation-timing-function: cubic-bezier(.55, .05, .85, .45); } 72% { scale: 1.003 .989; animation-timing-function: cubic-bezier(.4, .6, .3, 1); } 78% { scale: .999 1.002; } 100% { scale: 1 1; } }
@keyframes doze-breathe { 0% { scale: 1 1; animation-timing-function: cubic-bezier(.45, .05, .55, .95); } 38% { scale: 1.002 1.007; animation-timing-function: cubic-bezier(.4, .1, .5, 1); } 84% { scale: 1 1; } 100% { scale: 1 1; } }
.doze-zzz { position: absolute; left: 83%; top: 30%; width: 0; height: 0; font: italic 600 9cqw/1 var(--serif); color: var(--ink); text-shadow: 0 0 2px var(--paper); user-select: none; }
.doze-zzz i { position: absolute; left: 0; bottom: 0; opacity: 0; transform-origin: 50% 55%; }
.doze.in .doze-zzz i { animation: zzz-rise 3.9s cubic-bezier(.37, .2, .63, .8) infinite backwards, zzz-fade 3.9s linear infinite backwards; }
.doze.in .doze-zzz i:nth-child(1) { animation-delay: 1.4s; }
.doze.in .doze-zzz i:nth-child(2) { animation-delay: 2.7s; }
.doze.in .doze-zzz i:nth-child(3) { animation-delay: 4s; }
@keyframes zzz-rise { 0% { translate: 0 0; rotate: -14deg; scale: .5; } 36% { translate: -.15em -1.4em; rotate: 6deg; scale: .72; } 64% { translate: .6em -2.7em; rotate: -5deg; scale: .9; } 100% { translate: 2em -4em; rotate: 4deg; scale: 1; } }
@keyframes zzz-fade { 0% { opacity: 0; } 10% { opacity: .85; } 68% { opacity: .85; } 100% { opacity: 0; } }
.doze.waking .doze-zzz { animation: zzz-pop .16s ease-out forwards; }
@keyframes zzz-pop { to { scale: 1.3; opacity: 0; } }
.panel .perch .bubble { right: 78%; top: 8%; bottom: auto; max-width: min(250px, calc(100vw - 196px)); font-size: .95rem; }
.panel .perch [data-perch] { transition: rotate .35s ease; }
.panel .perch.lean [data-perch] { rotate: -7deg; }
dialog { border: 0; padding: 0; background: none; color: var(--ink); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog[open] .sheet { animation: pop .28s var(--out); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.sheet { width: min(620px, calc(100vw - 32px)); background: var(--card); border: 2px solid var(--ink); border-radius: 20px; box-shadow: var(--shadow-bubble); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1.5px solid var(--line); }
.pal-in input { flex: 1; background: none; border: 0; outline: 0; color: var(--ink); font: 500 1.1rem var(--sans); }
.pal-list { list-style: none; margin: 0; padding: 6px 14px 14px; max-height: min(60vh, 520px); overflow: auto; }
.pal-list ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.pal-group h4 { font: 600 .78rem/1 var(--sans); font-style: normal; color: var(--rose-ink); letter-spacing: .4px; margin: 16px 10px 8px; }
.pal-list li[id] { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: .95rem; }
.pal-list li[id] kbd { margin-left: auto; font-size: .68rem; white-space: nowrap; }
.pal-list li[aria-selected="true"] { background: var(--paper); box-shadow: inset 3px 0 0 var(--rose); }
.pal-none { padding: 18px 10px; color: var(--soft); }
@media (max-width: 560px) { .pal-list ul { grid-template-columns: 1fr; } }
.pal-foot { display: flex; gap: 18px; padding: 12px 22px; border-top: 1.5px solid var(--line); color: var(--soft); font-size: .8rem; }
.keys { padding: 26px 30px 30px; }
.keys h3 { margin-bottom: 18px; }
.keys dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 22px; margin: 0; align-items: center; }
.keys dd { margin: 0; color: var(--soft); }
.keys label { display: flex; gap: 10px; align-items: center; margin-top: 22px; color: var(--soft); font-size: .92rem; }
.toast { position: fixed; left: 50%; bottom: 96px; z-index: 120; translate: -50% 0; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 10px 20px; font-size: .9rem; font-weight: 500; opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .35s var(--out); pointer-events: none; }
.toast.in { opacity: 1; transform: none; }
@view-transition { navigation: auto; }
::view-transition-group(top) { z-index: 10; }
::view-transition-group(reina) { z-index: 9; animation-duration: .7s; animation-timing-function: var(--out); }
::view-transition-old(root) { animation: .38s var(--out) both leave; }
::view-transition-new(root) { animation: .6s var(--out) both arrive; }
@keyframes leave { to { opacity: 0; transform: translateY(-26px) scale(.985); } }
@keyframes arrive { from { opacity: 0; transform: translateY(40px); } }
::view-transition-new(reina-lost) { animation: reina-late .25s ease .15s both; }
@keyframes reina-late { from { opacity: 0; translate: 0 6px; } }
.stinger {
position: fixed; right: 0; bottom: 0; z-index: 60; pointer-events: none;
width: 171px; height: 200px; overflow: hidden;
view-transition-name: stinger;
}
.stinger img { height: 100%; width: auto; display: block; animation: sting-cycle .85s steps(17) infinite; }
@keyframes sting-cycle { to { transform: translateX(-100%); } }
.stinger.yank {
right: auto; left: 50%; translate: -50% 0;
width: var(--fw); height: var(--fh); overflow: visible;
background: url(/assets/yank.webp) no-repeat 0 0 / var(--sw) auto;
}
html[data-stinger] .scene .standing,
html[data-stinger] .phero .standing,
html[data-stinger] #lost-portrait { view-transition-name: none; }
html[data-stinger]::view-transition-old(root) { z-index: 1; mix-blend-mode: normal; }
html[data-stinger]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html[data-stinger="run"]::view-transition-old(root) { animation: sting-wipe .9s linear both; }
html[data-stinger="run"]::view-transition-group(stinger) { animation: sting-run .9s linear both; }
html[data-stinger="run"]::view-transition-new(stinger) { animation: none; }
@keyframes sting-wipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); } }
@keyframes sting-run { from { translate: 0 0; } to { translate: -100vw 0; } }
html[data-stinger="yank"]::view-transition-old(root) { animation: yank-down 1.75s linear both; }
html[data-stinger="yank"]::view-transition-group(stinger) { animation: none; }
html[data-stinger="yank"]::view-transition-new(stinger) { animation: yank-stay 1.75s linear both; }
@keyframes yank-down {
0%, 28.6% { translate: 0 0; animation-timing-function: cubic-bezier(.4, 0, 1, .6); }
54.3%, 100% { translate: 0 100vh; }
}
@keyframes yank-stay { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 980px) {
.win .cols { grid-template-columns: 1fr; }
.win nav, .win .side { display: none; }
.trio, .notes { grid-template-columns: 1fr; }
.foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
.nav, .kbd-open kbd, .lights .word, .rail, .scrollcue { display: none; }
.kbd-open { margin-left: auto; padding: 11px 18px; color: var(--ink); }
.stage { padding-top: 0; }
.stage .copy { max-width: none; padding-bottom: 60px; }
.stage .lede { max-width: none; }
.scene { position: static; height: auto; width: auto; padding-top: 64px; }
.scene .layer { display: none; }
.scene .standing { position: relative; left: auto; bottom: auto; height: auto; width: 46%; margin: 0 auto; transform: none; }
.stage .wrap { z-index: 0; }
.stage .bubble { right: 46%; top: -10%; max-width: min(230px, calc(51.7vw - 16px)); font-size: .92rem; }
.does, .moods, .get { grid-template-columns: 1fr; }
.does .pin { position: static; }
.does .pin .reina { width: 190px; }
.feature { grid-template-columns: 48px 1fr; opacity: 1; }
.moodstage { height: 380px; order: -1; }
.specs div { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-height: 760px) and (min-width: 761px) { .stage .facts { display: none; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
h1 .ln { white-space: normal; }
h1 .ln > span, .fade-up, html.js .reveal, .win .msg { opacity: 1; transform: none; }
.rail { display: none; }
@view-transition { navigation: none; }
}
.hero { padding-top: clamp(40px, 8vh, 64px); padding-bottom: 8px; }
.hero h1, .lost-words h1 {
font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.08; letter-spacing: -1px; max-width: 720px;
}
.hero .lede, .lost-words .sub { margin-top: 20px; }
.doc { max-width: 44rem; padding: 8px 0 40px; }
article.doc { padding-top: clamp(24px, 5vw, 52px); }
.doc h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); line-height: 1.08; letter-spacing: -1px; }
.doc .meta { margin-top: 22px; color: var(--soft); font-size: .96rem; }
.doc .meta strong, .doc .colophon strong { color: var(--ink); font-weight: 600; }
.doc .intro { margin-top: 22px; }
.doc hr.rule { border: 0; border-top: 1px solid var(--line); margin: 34px 0 0; }
.doc h2 { font-size: clamp(1.35rem, 2.6vw, 1.6rem); letter-spacing: -.4px; line-height: 1.25; }
.doc h3 { margin-top: 34px; font-size: 1.18rem; }
.doc h2 .no, .doc h3 .no { font-style: normal; font-weight: 400; color: var(--rose-ink); font-size: .88em; margin-right: 5px; }
.doc h2, .doc section li { overflow-wrap: anywhere; }
.doc section { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 40px; scroll-margin-top: 90px; }
.doc h3[id] { scroll-margin-top: 90px; }
.doc .when { margin-top: 8px; color: var(--soft); font-size: .92rem; }
.doc p, .doc section ul { margin-top: 15px; }
.doc p, .doc section li { line-height: 1.72; }
.doc p strong, .doc section li strong { color: var(--ink); font-weight: 600; }
.doc section ul { list-style: none; padding: 0; }
.doc section li { position: relative; padding: 6px 0 6px 22px; }
.doc section li::before {
content: ""; position: absolute; left: 2px; top: 15px;
width: 6px; height: 6px; border-radius: 50%; background: var(--rose);
}
.doc p a, .doc section li a, .doc .meta a { color: var(--rose-ink); }
.doc .empty { border-top: 1px solid var(--line); margin-top: 40px; padding-top: 40px; color: var(--soft); }
.doc .colophon { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--soft); font-size: .92rem; }
.short { font-family: var(--serif); font-style: italic; color: var(--rose-ink); font-size: 1.04rem; line-height: 1.5; margin-top: 14px; }
.toc { margin-top: 34px; }
.toc .toc-title { font-family: var(--serif); font-style: normal; color: var(--rose-ink); font-size: 1.05rem; margin: 0 0 12px; }
.toc ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 34px; counter-reset: toc; }
.toc li { break-inside: avoid; counter-increment: toc; font-size: .94rem; line-height: 1.45; padding: 3px 0 3px 30px; text-indent: -30px; }
.toc li::before {
content: counter(toc) "."; font-family: var(--serif); font-style: normal;
color: var(--rose-ink); margin-right: 8px; display: inline-block; min-width: 22px; text-indent: 0;
}
.toc li.unnumbered { counter-increment: none; }
.toc li.unnumbered::before { content: ""; }
.toc a { color: var(--soft); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
code { font-family: "Cascadia Mono", Consolas, monospace; font-size: .85em; background: var(--card); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--ink); }
.tbl-wrap { margin-top: 4px; }
table.tldr { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; overflow: hidden; }
table.tldr th, table.tldr td { text-align: left; vertical-align: top; padding: 15px 22px; font-size: .95rem; border-bottom: 1px solid var(--line); }
table.tldr thead th { font-family: var(--serif); font-weight: 600; color: var(--ink); background: var(--paper); font-size: .95rem; line-height: 1.3; }
table.tldr tbody tr:last-child td { border-bottom: 0; }
table.tldr tbody td { color: var(--soft); line-height: 1.55; }
table.tldr tbody td:first-child { color: var(--ink); font-weight: 600; }
table.tldr tbody strong { color: var(--rose-ink); font-family: var(--serif); font-style: italic; font-weight: 600; }
table.tldr tbody tr:hover td { background: var(--paper); }
.doc .after-table { margin-top: 22px; }
@media (max-width: 640px) {
table.tldr { border-radius: 14px; }
table.tldr thead { display: none; }
table.tldr, table.tldr tbody, table.tldr tr, table.tldr td { display: block; }
table.tldr tr { border-bottom: 1px solid var(--line); padding: 8px 0 14px; }
table.tldr tr:last-child { border-bottom: 0; }
table.tldr td { border-bottom: 0; padding: 3px 20px; }
table.tldr tbody td:first-child { padding-top: 12px; font-size: 1.02rem; }
table.tldr td::before {
content: attr(data-label); display: block; font-family: var(--serif); font-style: italic;
color: var(--rose-ink); font-size: .84rem; line-height: 1.4;
}
table.tldr tbody td:first-child::before { content: none; }
table.tldr tbody tr:hover td { background: transparent; }
}
.note {
max-width: 44rem; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px;
padding: 16px 20px; margin: 52px 0 72px; font-size: .92rem; color: var(--soft);
}
.note strong { color: var(--ink); }
.note a { color: var(--rose-ink); }
@media (max-width: 620px) {
.doc { padding-top: 0; }
article.doc { padding-top: 0; }
.doc section { margin-top: 32px; padding-top: 32px; }
.toc ol { columns: 1; }
}
.mt26 { margin-top: 26px; }
.panels { padding-bottom: 72px; }
.panels .panel { margin-top: 40px; }
#working, #done, #slow, #noorder, #topup { margin-top: 28px; padding: 30px; }
#working h2, #done h2, #slow h2, #noorder h2, #topup h2 { font-size: 1.35rem; }
.keybox {
display: block; width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 1rem; line-height: 1.5; word-break: break-all;
background: var(--paper); border: 2px dashed var(--line); border-radius: 3px;
padding: 14px 16px; margin: 14px 0; user-select: all;
}
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.muted { color: var(--soft); font-size: .93rem; margin-top: 14px; }
.muted code { font-size: .88em; word-break: break-all; }
#done ol { margin: 12px 0 0 20px; }
#done ol li { margin-top: 8px; }
.spinner {
display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
border: 2px solid var(--line); border-top-color: var(--ink); border-radius: 50%;
animation: spin .8s linear infinite; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.lost { display: grid; grid-template-columns: 1fr 240px; gap: 36px; align-items: center; padding-top: clamp(40px, 8vh, 64px); padding-bottom: clamp(32px, 6vh, 48px); }
.lost-words p { margin-top: 18px; max-width: 36em; }
.lost-words p a { color: var(--rose-ink); }
.lost .portrait { position: relative; text-align: center; }
.lost .stand { position: relative; }
.lost .portrait img {
width: min(220px, 100%); height: auto; display: block; margin: 0 auto;
filter: var(--shadow-sprite); aspect-ratio: 640 / 987; object-fit: contain;
}
#lost-portrait .bubble { top: -18px; left: -44px; max-width: 220px; bottom: auto; right: auto; }
.lost .return {
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
font: inherit; font-weight: 600; font-size: .95rem; padding: 12px 22px; border-radius: 999px;
border: 2px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.lost .return:hover { border-color: var(--rose); color: var(--rose-ink); }
.lost .portrait.away img { opacity: 0; pointer-events: none; }
@media (max-width: 620px) {
.lost { grid-template-columns: 1fr; gap: 24px; }
.lost .portrait { order: -1; }
#lost-portrait .bubble { position: static; margin: 0 auto 14px; }
}
.phero { padding: clamp(40px, 8vh, 110px) 0 clamp(30px, 5vh, 60px); }
.phero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 18vw, 240px); gap: clamp(24px, 4vw, 40px); align-items: end; }
.phero h1 { font-size: clamp(2.3rem, 4.7vw, 4.3rem); line-height: 1; letter-spacing: -2px; margin-bottom: 24px; }
@media (max-width: 1000px) { .phero h1 .ln { white-space: normal; } }
.phero .standing { position: relative; view-transition-name: reina; }
.phero .bubble { right: 70%; top: -4%; }
.billing { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; flex-wrap: wrap; }
.billing .lbl { font-size: .9rem; color: var(--soft); }
.seg { display: inline-flex; padding: 3px; border: 2px solid var(--line); border-radius: 999px; background: var(--card); }
.seg button {
font: 600 .92rem/1 var(--sans); color: var(--soft); background: transparent;
border: 0; border-radius: 999px; padding: 10px 20px; cursor: pointer;
transition: background .2s, color .2s;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button[aria-pressed="true"]:hover { background: var(--rose); color: #fff; }
.seg button em { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: .92em; margin-left: 7px; }
.seg button[aria-pressed="false"] em { color: var(--rose-ink); }
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.tiers .tier { display: flex; flex-direction: column; padding: 28px 24px; }
.tier.best { border-color: var(--ink); }
.tier.best:hover { border-color: var(--rose); }
.tier .flag { font: italic 500 .95rem/1.3 var(--serif); color: var(--rose-ink); display: block; margin-bottom: 4px; }
.tier h3 { font-size: 1.3rem; }
.tier .price { font: 600 2.6rem/1 var(--serif); letter-spacing: -1px; margin: 12px 0 4px; }
.tier .price small { font: 400 .95rem var(--sans); color: var(--soft); letter-spacing: 0; }
.tier .for { font: italic 400 .98rem/1.4 var(--serif); color: var(--rose-ink); }
.tier ul { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 10px; color: var(--soft); font-size: .92rem; }
.tier li { position: relative; padding-left: 20px; line-height: 1.55; }
.tier li::before {
content: ""; position: absolute; left: 0; top: .6em;
width: 6px; height: 6px; border-radius: 50%; background: var(--rose);
}
.tier li b { color: var(--ink); font-weight: 600; }
.tier .cta { margin-top: auto; }
.tier .btn, .tier .btn-primary, .tier .btn-ghost { padding: 14px 20px; font-size: .95rem; }
.tick { font-family: var(--serif); font-style: italic; color: var(--rose-ink); }
.opinion {
appearance: none; font: inherit; font-family: var(--serif); font-style: italic;
color: var(--rose-ink); background: none; border: 0; padding: 0; margin: 0;
cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px;
}
.opinion:hover { text-decoration-style: solid; }
.opinion-say {
position: absolute; left: 20px; top: calc(100% + 8px); z-index: 3;
width: max-content; max-width: calc(100% - 20px);
background: var(--card); color: var(--ink);
border: 2px solid var(--ink); border-radius: 16px;
padding: 10px 14px; font-size: .86rem; line-height: 1.45; text-align: left;
box-shadow: var(--shadow-bubble);
}
.opinion-say::after {
content: ""; position: absolute; left: 26px; top: -11px;
width: 18px; height: 18px; background: var(--card);
border-left: 2px solid var(--ink); border-top: 2px solid var(--ink);
transform: rotate(45deg) skew(12deg, 12deg);
}
.opinion-say .when { display: block; margin-top: 4px; font: italic 400 .8rem var(--serif); color: var(--soft); }
.annual { margin-top: 24px; color: var(--soft); font-size: .92rem; max-width: 74ch; }
.annual b { color: var(--ink); }
.annual a { color: var(--rose-ink); }
.aside-card { margin-top: 30px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.aside-card .lines { flex: 1 1 380px; }
.aside-card h3 { font-size: 1.25rem; margin-bottom: 8px; }
.aside-card .price-tag { font: 600 1.7rem/1 var(--serif); letter-spacing: -.5px; white-space: nowrap; }
.aside-card .price-tag small { font: 400 .85rem var(--sans); color: var(--soft); }
.aside-card .cta { flex: 0 0 auto; width: 210px; }
.aside-card .btn, .aside-card .btn-ghost { padding: 14px 20px; font-size: .95rem; }
#start .panel { margin-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: clamp(26px, 4vw, 44px); align-items: center; }
#start .specs { list-style: none; padding: 0; margin: 0 0 26px; }
#start .specs li { padding: 11px 0; font-size: .95rem; color: var(--soft); border-bottom: 1px solid var(--line); line-height: 1.6; }
#start .specs li:last-child { border-bottom: 0; }
#start .specs b { color: var(--ink); font-weight: 600; }
#start .portrait { position: relative; text-align: center; }
#start .portrait img { width: min(200px, 100%); height: auto; margin: 0 auto; filter: var(--shadow-sprite); }
#start .portrait .bubble { top: -26px; left: -54px; right: auto; max-width: 210px; font-size: .95rem; padding: 12px 16px; }
.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
cursor: pointer; list-style: none; padding: 18px 0;
font: 600 1.1rem/1.35 var(--serif); display: flex; align-items: baseline; gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; color: var(--rose); font-family: var(--serif); font-style: italic; flex: 0 0 auto; }
.faq details[open] summary::before { content: "\2013"; }
.faq summary:hover { color: var(--rose-ink); }
.faq details p { color: var(--soft); font-size: .96rem; line-height: 1.7; padding: 0 0 22px 30px; max-width: 64ch; }
.faq details b { color: var(--ink); font-weight: 600; }
.faq details a { color: var(--rose-ink); }
@media (max-width: 1180px) {
.tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.phero .wrap { grid-template-columns: 1fr; }
.phero .standing { width: 46%; margin: 0 auto; }
.phero .bubble { right: 46%; top: -10%; max-width: min(230px, calc(51.7vw - 16px)); font-size: .92rem; }
.tiers { grid-template-columns: 1fr; }
.tier.best { order: -1; }
#start .panel { grid-template-columns: 1fr; }
.aside-card .cta { width: 100%; }
}
@media (max-width: 620px) {
#start .portrait { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
#start .portrait .bubble:not(.in) { opacity: 0; }
#start .portrait .bubble.in { animation: bubble-pop .3s var(--out) .25s backwards; }
@keyframes bubble-pop { from { opacity: 0; transform: scale(.88) translateY(8px); } }
.opinion-say { animation: bubble-pop .15s var(--out) backwards; transition: opacity .2s; }
.opinion-say.fade { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
#lost-portrait { view-transition-name: reina-lost; }
#lost-portrait .bubble { animation: bubble-in .3s var(--out) .25s backwards; }
@keyframes bubble-in { from { opacity: 0; transform: scale(.88) translateY(8px); } }
#lost-portrait .bubble .line { transition: opacity .3s ease; }
#lost-portrait .bubble .line.swap { opacity: 0; }
.lost .return { transition: border-color .15s ease, color .15s ease, transform .14s var(--out); }
.lost .return:active { transform: translate(-50%, -50%) scale(.97); transition-duration: .15s, .15s, .08s; }
.lost .portrait img { transition: opacity .3s var(--out), transform .3s var(--out); }
.lost .portrait.away img { opacity: 0; transform: scale(.88); transition: opacity .22s ease-in, transform .22s ease-in; }
}