/* ============================================================
   Krona Werke — the site's one stylesheet (rebuilt Sep 2026)
   Company: Lord Skippy LLC · Brand: Krona · Sunlight · Tidewater · Moonrise
   Tokens per branding/new/tokens.css. Self-hosted fonts, no external requests.

   One grammar for every page, in the store listings' own idiom: a product
   wears ITS accent (--accent / --accent-hi / --accent-ink / --wash), the brand
   pages wear the violet; cards carry a gradient outline that the pointer
   lights up (.spot, site.js sets --mx/--my); section labels are uppercase in
   the accent; bullets are accent dots. Deliberately single-theme: the dial is
   dark in the apps, and the site is the dial's ground.
   ============================================================ */

@font-face { font-family:"Instrument Sans"; src:url("fonts/InstrumentSans-Variable.woff2") format("woff2-variations"), url("fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Sans"; src:url("fonts/InstrumentSans-Italic-Variable.woff2") format("woff2-variations"), url("fonts/InstrumentSans-Italic-Variable.woff2") format("woff2"); font-weight:400 700; font-style:italic; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("fonts/InstrumentSerif-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Instrument Serif"; src:url("fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }

/* ---- tokens ---- */
:root {
  color-scheme:dark;
  --bg:#08090c; --surface:#0e1016; --surface-2:#14171f;
  --text:#eceef4; --dim:#98a0b3; --faint:#5b6274;
  --line:rgba(236,238,244,.09); --line-2:rgba(236,238,244,.16);
  --gold:#ffd60a; --gold-hi:#fff06a; --gold-deep:#e8a303;
  --night:#7171ab; --night-deep:#4e4e8f; --rain:#3091f2;
  --krona:#8b5cf6; --krona-hi:#a78bfa; --krona-deep:#6d28d9;
  --tide:#7fc6d8; --tide-hi:#b5eaf5; --tide-deep:#2fa8c4;
  --rise:#e8703c; --rise-hi:#f79b63; --rise-deep:#b8431c;
  --ok:#3fcf8e; --warn:#e9c04a; --bad:#e2544a;
  --font-ui:"Instrument Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-display:"Instrument Serif",Georgia,serif;
  --r-sm:10px; --r-md:16px; --r-lg:22px;
  --wrap:1120px;

  /* The BRAND accent — every page starts here; a product page re-declares
     the four on <body>. --accent-ink is the text colour ON a filled accent. */
  --accent:var(--krona); --accent-hi:var(--krona-hi); --accent-deep:var(--krona-deep);
  --accent-ink:#160b33; --wash:rgba(139,92,246,.10); --wash-2:rgba(139,92,246,.05);
  --glow:rgba(139,92,246,.28);
}
body.sun  { --accent:var(--gold); --accent-hi:var(--gold-hi); --accent-deep:var(--gold-deep); --accent-ink:#221b00;
            --wash:rgba(255,214,10,.10); --wash-2:rgba(255,214,10,.045); --glow:rgba(255,214,10,.26); }
body.tide { --accent:var(--tide); --accent-hi:var(--tide-hi); --accent-deep:var(--tide-deep); --accent-ink:#03242e;
            --wash:rgba(47,168,196,.14); --wash-2:rgba(47,168,196,.06); --glow:rgba(47,168,196,.30); }
body.rise { --accent:var(--rise); --accent-hi:var(--rise-hi); --accent-deep:var(--rise-deep); --accent-ink:#1a0800;
            --wash:rgba(232,112,60,.12); --wash-2:rgba(232,112,60,.05); --glow:rgba(232,112,60,.26); }
/* A card that MEANS a product on a brand page (the home's three cards) */
.acc-sun  { --accent:var(--gold); --accent-hi:var(--gold-hi); --accent-deep:var(--gold-deep); --accent-ink:#221b00; --wash:rgba(255,214,10,.10); --wash-2:rgba(255,214,10,.045); --glow:rgba(255,214,10,.26); }
.acc-tide { --accent:var(--tide); --accent-hi:var(--tide-hi); --accent-deep:var(--tide-deep); --accent-ink:#03242e; --wash:rgba(47,168,196,.14); --wash-2:rgba(47,168,196,.06); --glow:rgba(47,168,196,.30); }
.acc-rise { --accent:var(--rise); --accent-hi:var(--rise-hi); --accent-deep:var(--rise-deep); --accent-ink:#1a0800; --wash:rgba(232,112,60,.12); --wash-2:rgba(232,112,60,.05); --glow:rgba(232,112,60,.26); }
.acc-krona { --accent:var(--krona); --accent-hi:var(--krona-hi); --accent-deep:var(--krona-deep); --accent-ink:#160b33; --wash:rgba(139,92,246,.10); --wash-2:rgba(139,92,246,.05); --glow:rgba(139,92,246,.28); }

/* ---- base ---- */
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  background:var(--bg); color:var(--text);
  font:400 16px/1.6 var(--font-ui); -webkit-font-smoothing:antialiased;
  min-height:100vh; overflow-x:hidden; position:relative;
}
/* The apps' own backdrop: the product's glow top-right, the night bottom-left,
   a third wash mid-right — fixed, so it does not scroll with the page. */
body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 700px at 85% -12%, var(--wash), transparent 60%),
    radial-gradient(900px 720px at -12% 108%, rgba(113,113,171,.16), transparent 60%),
    radial-gradient(680px 480px at 110% 62%, rgba(48,145,242,.07), transparent 60%),
    var(--bg); }
/* A faint light that follows the pointer over the whole page (site.js sets --px/--py). */
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background:radial-gradient(520px circle at var(--px, 50%) var(--py, 30%), var(--wash), transparent 70%);
  transition:opacity .6s ease; }
body.has-pointer::after { opacity:1; }
a { color:var(--accent-hi); text-decoration:none; }
@media (hover:hover) { a:hover { text-decoration:underline; text-underline-offset:.15em; } }
img, svg, video, table { max-width:100%; }
a, button, summary, [role="button"] { touch-action:manipulation; }
/* the browser's own tap flash (a square of grey-blue over the pressed thing) — the page draws its own */
html { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:2px solid var(--accent-hi); outline-offset:3px; border-radius:4px; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 20px; }
@media (max-width:760px) { .wrap { padding:0 16px; } }
.numeric, time, [data-reading] { font-variant-numeric:tabular-nums; }
b, strong { font-weight:600; color:var(--text); }
em { font-style:italic; }

/* ---- type ---- */
h1, h2, h3 { font-weight:700; line-height:1.1; letter-spacing:-.015em; text-wrap:balance; margin:0; }
h1 { font-size:clamp(2.3rem, 5.6vw, 3.6rem); }
h2 { font-size:clamp(1.5rem, 3vw, 2rem); }
h1 em, h2 em, .serif { font-family:var(--font-display); font-weight:400; font-style:italic; letter-spacing:0;
  background:linear-gradient(100deg, var(--accent-hi), var(--accent) 45%, var(--accent-deep));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* the gradient paints only inside the box, and an italic g's hook reaches
     left of it (the owner: "the g of ganzen Tag is weirdly cut off"): the box
     grows past the glyphs on both sides and below, the margin gives the room back */
  padding:0 .08em .08em .16em; margin-left:-.16em; }
.lead { color:var(--dim); font-size:1.08rem; line-height:1.55; max-width:36rem; }
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); font-weight:700; }
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.eyebrow.plain { color:var(--dim); } .eyebrow.plain::before { background:var(--faint); }
.section { padding:56px 0 8px; }
.section > .eyebrow { margin-bottom:12px; }
.section > h2 { margin-bottom:8px; }
.section > .lead { margin-bottom:22px; }
.note { color:var(--faint); font-size:.86rem; line-height:1.55; margin-top:14px; max-width:60rem; }
.note a, .fine a { color:var(--dim); text-decoration:underline; text-underline-offset:.15em; }

/* ---- header ---- */
header.top { position:sticky; top:0; z-index:30; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:rgba(8,9,12,.62); border-bottom:1px solid var(--line); }
header.top .bar { display:flex; align-items:center; gap:14px; padding-top:11px; padding-bottom:11px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); flex:none; }
.brand:hover { text-decoration:none; }
.brand img.mk { width:30px; height:30px; display:block; }
.brand img.wm { display:block; height:19px; width:auto; }
header.top .spacer { flex:1; }
header.top nav { display:flex; align-items:center; gap:22px; }
header.top nav a { color:var(--dim); font-size:.93rem; font-weight:500; }
header.top nav a:hover, header.top nav a[aria-current="page"] { color:var(--text); text-decoration:none; }
header.top nav a[aria-current="page"] { color:var(--accent-hi); }

/* The language switch — the listings page's pill segmented control. Links,
   not buttons: every language is its own page. */
.seg { display:inline-flex; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px; }
.seg a { font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--dim); padding:5px 9px; border-radius:999px; line-height:1.2; }
.seg a:hover { color:var(--text); text-decoration:none; }
.seg a[aria-current="true"] { background:var(--accent); color:var(--accent-ink); }
.navtoggle { display:none; }
@media (max-width:860px) {
  header.top .bar { gap:10px; }
  .navtoggle { display:inline-grid; place-items:center; width:40px; height:40px; flex:none; background:var(--surface);
    border:1px solid var(--line); border-radius:12px; color:var(--text); cursor:pointer; padding:0; }
  .navtoggle span, .navtoggle span::before, .navtoggle span::after { content:""; display:block; width:18px; height:2px;
    border-radius:2px; background:currentColor; transition:transform .22s ease, opacity .16s ease; }
  .navtoggle span { position:relative; }
  .navtoggle span::before { position:absolute; top:-6px; } .navtoggle span::after { position:absolute; top:6px; }
  .navtoggle[aria-expanded="true"] span { background:transparent; }
  .navtoggle[aria-expanded="true"] span::before { transform:translateY(6px) rotate(45deg); }
  .navtoggle[aria-expanded="true"] span::after { transform:translateY(-6px) rotate(-45deg); }
  header.top nav { display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch;
    gap:0; padding:6px 16px 16px; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,.6); }
  header.top nav.open { display:flex; }
  header.top nav a:not(.seg a) { padding:13px 4px; font-size:1rem; border-bottom:1px solid var(--line); }
  header.top nav .seg { margin-top:14px; align-self:flex-start; }
  body.nav-open { overflow:hidden; }
}

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.95rem; padding:11px 20px;
  border-radius:12px; border:1px solid transparent; line-height:1.2; white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
@media (hover:hover) { .btn:hover { text-decoration:none; transform:translateY(-1px); } }
.btn.fill { background:linear-gradient(120deg, var(--accent-hi), var(--accent)); color:var(--accent-ink); box-shadow:0 6px 30px var(--glow); }
@media (hover:hover) { .btn.fill:hover { box-shadow:0 8px 38px var(--glow); } }
.btn.ghost { background:var(--wash-2); color:var(--text); border-color:var(--line-2); }
@media (hover:hover) { .btn.ghost:hover { border-color:var(--accent); } }
/* An app's door on the home page (2026-10-06, the owner: "outlined, not
   filled, maybe with the app icon prepended to the text"): its colour as a
   hairline and a faint wash, its logo before its name. */
.btn.line { background:color-mix(in srgb, var(--accent) 7%, transparent); color:var(--accent-hi);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent); padding:9px 18px 9px 12px; }
@media (hover:hover) { .btn.line:hover { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 13%, transparent); } }
.btn.line img { width:24px; height:24px; flex:none; }
.btns { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.pill { display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); background:var(--wash-2); border-radius:999px; padding:5px 12px; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }

/* ---- cards: the gradient outline, and the pointer that lights it ----
   The outline is a 1px ring cut out of a gradient with mask-composite; over it
   a second ring, lit only near the pointer (--mx/--my, set by site.js), fades in
   on hover. No shadows, no fills doing the work — the edge is the object. */
.card { position:relative; background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); }
.card > * { position:relative; z-index:1; }
.edge { border-color:transparent; }
.edge::before, .edge::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:0;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.edge::before { background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 55%, transparent), rgba(236,238,244,.10) 38%, rgba(236,238,244,.06) 62%, color-mix(in srgb, var(--night) 55%, transparent)); }
.edge::after { background:radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), var(--accent-hi), transparent 60%); opacity:0; transition:opacity .35s ease; }
.spot:hover::after, .spot:focus-within::after { opacity:.9; }
/* the soft light inside the card, under the content */
.spot > .light { position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), var(--wash), transparent 70%); }
.spot:hover > .light { opacity:1; }
@media (hover:none) { .edge::after, .spot > .light { display:none; } }

/* ---- the listing grammar (from PLAYSTORE.md, rendered by build.py) ---- */
.sec h3 { font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; }
.sec p { margin:0 0 10px; color:var(--dim); }
.sec p:last-child { margin-bottom:0; }
.sec ul { margin:0 0 10px; padding:0; list-style:none; }
.sec ul:last-child { margin-bottom:0; }
.sec li { position:relative; padding-left:18px; margin:0 0 5px; color:var(--dim); }
.sec li::before { content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.9; }
.sec .tag { display:inline-block; font-size:.92rem; font-weight:700; color:var(--text); background:var(--wash); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius:999px; padding:4px 12px; margin:2px 0 12px; font-variant-numeric:tabular-nums; }

/* ---- home ---- */
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; padding:64px 0 40px; }
.hero .eyebrow { margin-bottom:16px; }
.hero h1 { margin-bottom:18px; }
.hero .lead { margin-bottom:26px; }
.hero .dialwrap { position:relative; display:grid; place-items:center; }
.hero .dialwrap::before { content:""; position:absolute; inset:6%; border-radius:50%; filter:blur(30px); opacity:.6;
  background:radial-gradient(closest-side, var(--wash), transparent 75%); }
/* The store row: Google's own badge beside an App Store "coming soon" of the
   same height and corner, drawn as a DISABLED control — no fill, a dashed
   hairline, grey type, a plain phone outline (Apple's logo and badge are for
   apps already on the App Store) — and not a link until the app is there. */
.stores { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.stores a.gp { display:block; border-radius:7px; transition:transform .2s ease, box-shadow .2s ease; }
@media (hover:hover) { .stores a.gp:hover { transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.5); } }
.stores img { display:block; height:48px; width:auto; }
.stores .as { box-sizing:border-box; height:48px; display:inline-flex; align-items:center; gap:9px;
  padding:0 16px 0 12px; background:rgba(255,255,255,.025); color:#7c7c85; border:1px dashed rgba(255,255,255,.2);
  border-radius:7px; cursor:not-allowed; user-select:none; }
.stores .as svg { width:22px; height:22px; flex:none; opacity:.8; }
.stores .as span { display:flex; flex-direction:column; line-height:1.08; }
.stores .as small { font-size:.66rem; font-weight:500; color:#6c6c75; letter-spacing:.01em; }
.stores .as b { font-size:1.3rem; font-weight:600; letter-spacing:-.015em; color:#7c7c85; }
/* The explainer video: the Play badge's own black and hairline, YouTube's icon. */
.stores a.yt { box-sizing:border-box; height:48px; display:inline-flex; align-items:center; gap:10px;
  padding:0 16px 0 12px; background:#000; color:#fff; border:1px solid #a6a6a6; border-radius:7px;
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
@media (hover:hover) { .stores a.yt:hover { transform:translateY(-1px); box-shadow:0 10px 30px rgba(0,0,0,.5); } }
.stores a.yt svg { width:30px; height:auto; flex:none; }
.stores a.yt span { display:flex; flex-direction:column; line-height:1.08; }
.stores a.yt small { font-size:.66rem; font-weight:500; letter-spacing:.01em; }
.stores a.yt b { font-size:1.3rem; font-weight:600; letter-spacing:-.015em; }
.hero h1 .mark { width:.92em; height:.92em; vertical-align:-.12em; margin-right:.22em; border-radius:28%; }
@media (max-width:860px) { .hero { grid-template-columns:1fr; padding-top:36px; } .hero .dialwrap { order:-1; } }

.cards { display:grid; gap:14px; padding:6px 0 10px; }
.pcard { display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; padding:28px 30px; color:var(--text); }
a.pcard:hover { text-decoration:none; }
.pcard .art { position:relative; width:150px; height:150px; display:grid; place-items:center; }
.pcard .art::before { content:""; position:absolute; inset:-12%; border-radius:50%; filter:blur(14px);
  background:radial-gradient(closest-side, var(--wash), transparent 75%); }
.pcard .art img { position:relative; width:150px; height:150px; }
.pcard .name { font-size:clamp(1.7rem, 3.6vw, 2.3rem); letter-spacing:-.015em; line-height:1.1; }
.pcard .name .k { font-weight:700; }
.pcard .name .s { font-family:var(--font-display); font-style:italic; font-weight:400; padding-left:.14em;
  background:linear-gradient(100deg, var(--accent-hi), var(--accent) 45%, var(--accent-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pcard .desc { color:var(--dim); font-size:1.02rem; margin:8px 0 10px; max-width:34rem; }
.pcard .tags { color:var(--faint); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; }
.pcard .go { display:inline-flex; align-items:center; gap:.5rem; margin-top:18px; font-weight:600; color:var(--accent-hi); }
.pcard .go::after { content:"→"; transition:transform .2s ease; }
@media (hover:hover) { a.pcard:hover .go::after { transform:translateX(4px); } }
.pcard.dim { cursor:default; }
.pcard.dim .name, .pcard.dim .desc { opacity:.8; }
.pcard.dim .art img { opacity:.86; }
.pcard.dim .go { color:var(--faint); } .pcard.dim .go::after { content:none; }
@media (max-width:640px) { .pcard { grid-template-columns:1fr; text-align:center; justify-items:center; padding:24px 20px; }
  .pcard .art, .pcard .art img { width:124px; height:124px; } .pcard .desc { margin-inline:auto; } }

.trust { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:26px 30px; margin:40px 0 64px; }
.trust h3 { font-size:1.15rem; margin-bottom:6px; }
.trust p { color:var(--dim); max-width:56rem; }
@media (max-width:760px) { .trust { grid-template-columns:1fr; } }

/* ---- the hero's picture (a Blender render, transparent; it replaced the dial) ---- */
.heroimg { position:relative; display:block; width:min(420px, 82vw); height:auto; aspect-ratio:1; }

/* ---- product page ---- */
.ringrow { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; }
.ringrow .sec { max-width:34rem; }
.ringrow .sec p { font-size:1.02rem; }
@media (max-width:860px) { .ringrow { grid-template-columns:1fr; } }
.vramp { margin-top:20px; max-width:34rem; }
.vramp .bar { height:8px; border-radius:6px; background:linear-gradient(90deg, #e2544a 0 19.5%, #e9c04a 30.5% 44.5%, #3fcf8e 55.5% 69.5%, #3fc6dc 80.5% 100%); }
.vramp .lbls { display:flex; justify-content:space-between; margin-top:8px; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

.screens { display:grid; grid-auto-flow:column; grid-auto-columns:280px; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px 18px; scrollbar-width:thin; }
.screens figure { margin:0; scroll-snap-align:center; }
.screens img { display:block; width:100%; height:auto; border-radius:24px; filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)); }
.screens figcaption { color:var(--dim); font-size:.92rem; line-height:1.45; margin-top:12px; }
.screens figcaption b { display:block; color:var(--text); margin-bottom:3px; }
.screens figcaption span b { display:inline; color:var(--text); margin:0; font-weight:600; }
@media (min-width:900px) { .screens { grid-auto-flow:unset; grid-template-columns:repeat(4, 1fr); grid-auto-columns:unset; overflow:visible; gap:20px; } }

/* A picture waits behind a blurred 24 px copy of itself and fades in once it
   has loaded (site.js lqFade). Only with script: without it the picture shows. */
.lq { position:relative; display:block; }
.lq::before { content:""; position:absolute; inset:0; background:var(--lq) center/100% 100% no-repeat;
  filter:blur(10px); opacity:.9; transition:opacity .6s ease .1s; pointer-events:none; }
.lq-phone::before { border-radius:24px; clip-path:inset(0 round 24px); }
.lq-round::before { border-radius:50%; clip-path:circle(50%); }
.lq-hero { display:grid; place-items:center; }
.lq-hero::before { inset:0; margin:auto; width:min(420px, 82vw); aspect-ratio:1; filter:blur(18px); }
.lq > img { position:relative; }
html.js .lq > img { opacity:0; transition:opacity .6s ease; }
html.js .lq.in > img { opacity:1; }
html.js .lq.in::before { opacity:0; }
html:not(.js) .lq::before { display:none; }
@media (prefers-reduced-motion:reduce) { .lq::before, html.js .lq > img { transition:none; } }
.wristrow { display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:center; margin-top:8px; }
.wrist { display:flex; gap:28px; }
.wrist figure { margin:0; text-align:center; width:170px; }
.wrist img { display:block; width:170px; height:170px; border-radius:50%; margin:0 auto; filter:drop-shadow(0 14px 30px rgba(0,0,0,.55)); }
.wrist figcaption { color:var(--dim); font-size:.86rem; margin-top:10px; }
@media (max-width:860px) { .wristrow { grid-template-columns:1fr; } .wrist { justify-content:center; } }
/* The wrist and the widgets side by side, each a card: its picture on the
   left (the face over the watch app; the launcher's widget list), its words
   beside it. One column under 960 px; under 560 px the picture on top. */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:4px; }
.duo .panel { padding:24px 26px 26px; display:flex; flex-direction:column; gap:18px; }
.duo .panel > .eyebrow { margin:0; }
.duo .prow { flex:1; display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center; }
.duo .sec p { font-size:.98rem; line-height:1.55; }
.duo .sec p.lead { color:var(--text); font-weight:650; font-size:1.12rem; line-height:1.3; margin-bottom:8px; }
/* Japanese: break a heading only where the copy marks a phrase (a zero-width space), never inside a word */
:lang(ja) .duo .sec p.lead { word-break:keep-all; }
.duo .sec p b { color:var(--text); font-weight:600; }
.wrist.stack { flex-direction:column; align-items:center; gap:12px; }
.wrist.stack figure.disc { width:140px; }
.wrist.stack figure.disc img { width:140px; height:140px; filter:none; }
/* the watch app's three pages fanned out; the outlines are baked into the pictures */
.wrist.stack figure.fan { width:211px; }
.wrist.stack figure.fan img { width:211px; height:auto; border-radius:0; filter:none; }
.lq-fan::before { filter:blur(6px); }
.wrist.stack figcaption { margin-top:6px; font-size:.8rem; }
.duo .sec ul.wlist { margin:12px 0 0; }
.duo .sec ul.wlist li { font-size:.92rem; line-height:1.45; margin-bottom:7px; }
.duo .sec ul.wlist li b { color:var(--text); font-weight:600; }
.picker { margin:0; width:211px; }
.picker img { display:block; width:211px; height:auto; filter:drop-shadow(0 14px 28px rgba(0,0,0,.55)); }
.lq-picker::before { filter:blur(6px); }
.picker figcaption { color:var(--dim); font-size:.8rem; margin-top:6px; text-align:center; }
@media (max-width:960px) { .duo { grid-template-columns:1fr; } }
@media (max-width:560px) {
  .duo .prow { grid-template-columns:1fr; justify-items:center; gap:20px; }
  .wrist.stack { flex-direction:column; }
  .wrist.stack figure.disc { width:128px; } .wrist.stack figure.disc img { width:128px; height:128px; }
  .picker, .picker img { width:211px; }
}

.grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; margin-top:22px; }
.grid .card { padding:22px 24px; }
.grid .card.wide { grid-column:1 / -1; }
@media (max-width:760px) { .grid { grid-template-columns:1fr; } }
.other { display:flex; align-items:center; gap:18px; }
.other .imgs { display:flex; gap:8px; flex:none; }
.other .imgs img { width:56px; height:56px; border-radius:16px; }
.other .gos { display:flex; flex-direction:column; align-items:flex-end; gap:.5rem; margin-left:auto; }
.other .go { font-weight:600; color:var(--accent-hi); white-space:nowrap; }
.other.many { flex-wrap:wrap; }
.other.many .imgs img { width:44px; height:44px; border-radius:13px; }
.other.many .sec { flex:1 1 200px; }
.other.many .gos { flex-direction:row; flex-wrap:wrap; gap:.4rem 1.4rem; margin-left:0; width:100%; }
.facecard { margin-top:22px; }
.facecard .head { display:flex; gap:18px; align-items:center; padding:22px 24px 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(150deg, var(--wash), transparent 60%); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.facecard .head img { width:64px; height:64px; border-radius:16px; flex:none; }
.facecard .head h3 { font-size:1.25rem; letter-spacing:-.01em; }
.facecard .head p { color:var(--dim); font-size:.95rem; margin-top:4px; }
.facecard .body { padding:20px 24px 24px; display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; }
.facecard .body .sec:first-child { grid-column:1 / -1; }
.split { display:grid; grid-template-columns:1fr 190px; gap:24px; align-items:center; }
.split img { width:190px; height:auto; border-radius:18px; filter:drop-shadow(0 14px 30px rgba(0,0,0,.5)); }
@media (max-width:860px) { .facecard .body { grid-template-columns:1fr; } .split { grid-template-columns:1fr; } .split img { margin:0 auto; } }

/* ---- FAQ ---- */
.faq h1 { font-size:clamp(1.9rem, 4vw, 2.6rem); }
.comparewrap { overflow-x:auto; margin-top:16px; border-radius:var(--r-md); }
table.compare { width:100%; border-collapse:collapse; font-size:.9rem; min-width:940px; }
.compare th, .compare td { padding:10px 14px; text-align:center; border-top:1px solid var(--line); vertical-align:top; }
.compare thead th { border-top:none; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; padding-top:14px; padding-bottom:10px; }
.compare .grouprow th { padding:16px 14px 8px; }
.compare .grouprow img { height:16px; width:auto; vertical-align:middle; }
.compare .grouprow .g-sun { border-bottom:2px solid rgba(255,214,10,.3); }
.compare .grouprow .g-rise { border-bottom:2px solid rgba(232,112,60,.35); }
.compare .grouprow .g-tide { border-bottom:2px solid rgba(127,198,216,.35); }
.compare .grouprow small { margin-top:6px; }
.compare th:first-child, .compare td:first-child { text-align:left; color:var(--dim); font-weight:400; min-width:180px; }
.compare thead th:first-child { color:var(--faint); }
.compare .h-basic, .compare .h-free { color:#a8b2c7; } .compare .h-custom { color:#5aa9f5; } .compare .h-premium { color:var(--gold); }
.compare .h-rise { color:var(--rise-hi); } .compare .h-tide { color:var(--tide); }
.compare td.risecol, .compare th.risecol { background:rgba(232,112,60,.045); }
.compare .rfirst { border-left:1px solid rgba(232,112,60,.2); }
.compare td.tidecol, .compare th.tidecol { background:rgba(127,198,216,.05); border-left:1px solid rgba(127,198,216,.18); }
.compare .yes { color:var(--krona-hi); font-weight:700; } .compare .risecol.yes { color:var(--rise-hi); } .compare .tidecol.yes { color:var(--tide); }
.compare .no { color:var(--faint); } .compare .val { color:var(--text); }
.compare .nw { white-space:nowrap; }
.compare small { display:block; color:var(--faint); font-weight:400; letter-spacing:0; text-transform:none; font-size:.78rem; }
@media (max-width:760px) {
  .compare th:first-child, .compare td:first-child { position:sticky; left:0; z-index:1; min-width:132px; max-width:150px; background:var(--surface); box-shadow:1px 0 0 var(--line); }
}
.qa { margin-top:10px; }
.qa .eyebrow { margin:34px 0 10px; }
details.q { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin:8px 0; overflow:hidden; transition:border-color .2s ease; }
details.q[open] { border-color:color-mix(in srgb, var(--accent) 40%, transparent); }
details.q summary { list-style:none; cursor:pointer; padding:15px 18px; font-weight:600; display:flex; align-items:center; gap:12px; }
details.q summary::-webkit-details-marker { display:none; }
details.q summary::after { content:"+"; margin-left:auto; color:var(--faint); font-size:1.25rem; font-weight:400; transition:transform .2s ease; flex:none; }
details.q[open] summary::after { transform:rotate(45deg); color:var(--accent); }
details.q .a { padding:0 18px 16px; color:var(--dim); }
details.q .a p { margin:0 0 10px; } details.q .a p:last-child { margin-bottom:0; }
details.q .a ul { margin:0 0 10px; padding-left:0; list-style:none; }
details.q .a li { position:relative; padding-left:18px; margin:0 0 5px; }
details.q .a li::before { content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--accent); opacity:.9; }
.watchgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap:14px; margin-top:16px; }
.maker { padding:18px 20px; }
.maker h3 { font-size:1rem; margin-bottom:8px; }
.maker h3 small { color:var(--faint); font-weight:400; margin-left:6px; font-size:.8rem; }
.maker ul { list-style:none; margin:0; padding:0; }
.maker li { display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--line); font-size:.93rem; }
.maker li:first-child { border-top:none; }
.var { color:var(--faint); font-size:.76rem; }
.chip { margin-left:auto; flex:none; font-size:.7rem; font-weight:600; letter-spacing:.04em; border-radius:999px; padding:2px 9px; white-space:nowrap; }
.chip.ok { color:var(--ok); background:rgba(63,207,142,.1); } .chip.upd { color:var(--warn); background:rgba(233,192,74,.12); }
.note .chip { margin-left:0; }

/* ---- legal & simple pages ---- */
main.legal { max-width:780px; margin:0 auto; padding:40px 20px 72px; }
main.legal h1 { font-size:clamp(1.8rem, 4vw, 2.3rem); margin-top:8px; }
main.legal h2 { font-size:1.15rem; margin-top:36px; color:var(--text); }
main.legal h3 { font-size:1.05rem; margin-top:4px; }
main.legal p, main.legal li { color:var(--dim); margin-top:10px; }
main.legal ul, main.legal ol { padding-left:1.2rem; }
main.legal details.warn-list { margin:.6em 0 1em; }
main.legal details.warn-list summary { cursor:pointer; font-weight:600; }
main.legal ul.warn-sources { font-size:.88em; line-height:1.5; }
main.legal ul.warn-sources li { margin:.35em 0; }
main.legal a { color:var(--accent-hi); }
main.legal .meta { color:var(--faint); font-size:.9rem; }
main.legal .lead { margin-top:14px; }
main.legal .en-note { margin:0 0 18px; }
main.legal table { border-collapse:collapse; width:100%; font-size:.9rem; margin:16px 0; }
main.legal td, main.legal th { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; color:var(--dim); }
main.legal th { color:var(--dim); font-weight:600; }
main.legal table.what td { border:0; padding:4px 12px 4px 0; }
main.legal table.what td:first-child { color:var(--text); white-space:nowrap; }
@media (max-width:640px) {
  main.legal table:not(.what), main.legal table:not(.what) tbody, main.legal table:not(.what) tr, main.legal table:not(.what) td { display:block; }
  main.legal table:not(.what) tr:first-child { display:none; }
  main.legal table:not(.what) tr { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); padding:6px 14px 12px; margin:0 0 12px; }
  main.legal table:not(.what) td { border:0; padding:8px 0 4px; }
  main.legal table:not(.what) td::before { content:attr(data-label); display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:3px; }
}
/* The privacy table in groups (2026-09-29, the owner: "more separated
   headlines for the three apps and the section about all apps … on top"): a
   heading row per group — the app's mark and wordmark, the three marks for
   what all three share — with no side borders and room above it, underlined
   in the app's colour, so each group reads as its own section. */
main.legal tr.grp th { border-left:0; border-right:0; border-top:0; border-bottom:2px solid var(--accent);
  padding:34px 2px 10px; background:none; color:var(--text); font-size:1rem; font-weight:600; }
main.legal table.groups tr:nth-child(2) th { padding-top:18px; }
main.legal tr.grp th > * { vertical-align:middle; }
main.legal tr.grp .marks { display:inline-flex; margin-right:10px; }
main.legal tr.grp img.mk { width:26px; height:26px; display:block; }
main.legal tr.grp .marks img + img { margin-left:-6px; }
main.legal tr.grp img.wm { height:18px; width:auto; display:inline-block; }
@media (max-width:640px) {
  main.legal table:not(.what) tr.grp { display:block; border:0; border-radius:0; background:none; padding:0; margin:26px 0 12px; }
  main.legal table.groups tr.grp:nth-child(2) { margin-top:8px; }
  main.legal tr.grp th { display:block; padding:0 2px 8px; }
}
main.legal code { background:var(--surface-2); border-radius:6px; padding:.1rem .4rem; font-size:.86em; }
main.legal .note { border:1px solid var(--line); border-left:3px solid var(--accent); padding:14px 18px; border-radius:var(--r-sm); background:var(--surface); font-size:.95rem; color:var(--dim); margin-top:16px; }
main.legal .note p { margin:0; } main.legal .note p + p { margin-top:10px; }
main.legal .panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:20px 22px; margin-top:20px; }
main.legal .panel h2 { margin:0 0 8px; font-size:1.1rem; }
main.legal .panel ol { margin:4px 0 0; }
main.legal .fine { color:var(--faint); font-size:.88rem; margin-top:22px; line-height:1.6; }
/* contact rows */
.crows { display:grid; gap:12px; margin-top:24px; }
.crow { display:flex; gap:16px; align-items:flex-start; padding:18px 20px; }
.crow .ic { flex:none; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--wash); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.crow .ic svg { width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.7; }
.crow h3 { margin:0 0 4px; }
.crow p { margin:2px 0 0; font-size:.95rem; }
.crow a { font-weight:600; font-size:1.02rem; }
.crow a.plain { font-weight:400; font-size:.95rem; color:var(--dim); }
/* delete-data */
.del .row { margin-top:16px; display:flex; flex-direction:column; align-items:center; gap:14px; }
textarea#key { --rows:4; --lh:1.55; --pad-y:.85rem; display:block; width:100%; box-sizing:border-box; resize:none; overflow:hidden;
  background:#05070a; color:var(--text); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:var(--pad-y) .9rem;
  height:calc(var(--rows) * var(--lh) * 1em + 2 * var(--pad-y) + 2px); transition:padding-top .12s ease;
  font-family:ui-monospace,Consolas,monospace; font-weight:400; font-size:clamp(15px, 5vw, 21px); line-height:var(--lh);
  letter-spacing:.18em; text-align:center; text-indent:.18em; }
textarea#key::placeholder { letter-spacing:normal; text-indent:0; font-size:15px; color:var(--faint); }
textarea#key:focus { outline:none; border-color:var(--accent); }
textarea#key.full { border-color:rgba(63,207,142,.6); }
button#go { background:linear-gradient(120deg, var(--accent-hi), var(--accent)); color:var(--accent-ink); font-weight:600; border:0;
  border-radius:12px; padding:11px 22px; cursor:pointer; font:inherit; font-weight:600; min-width:12rem; }
button#go:disabled { opacity:.5; cursor:default; }
#result { margin-top:14px; font-size:.95rem; display:none; }
#result.ok { color:var(--ok); display:block; } #result.err { color:var(--bad); display:block; }

/* ---- footer ---- */
footer { border-top:1px solid var(--line); margin-top:24px; padding:36px 0 52px; color:var(--faint); font-size:.86rem; line-height:1.6; }
footer .row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
footer .row img { height:16px; width:auto; opacity:.8; }
footer .row a { color:var(--dim); }
footer .row a:hover { color:var(--text); }
footer p { margin-top:8px; max-width:72rem; }
footer a { color:var(--dim); }
footer .owm { display:inline-flex; align-items:center; gap:8px; margin-top:12px; opacity:.75; }
footer .owm img { height:18px; width:auto; display:block; }

/* ---- a press answers at once, a page on its way shows a band (site.js) ----
   The ripple and its sparkles are drawn on one canvas by site.js. */
#kw-fx { position:fixed; inset:0; pointer-events:none; z-index:70; }
#kw-fx canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* A pressed link whose page is on its way stays lit until the page is in:
   its colour only — a text link in the accent, a button with the accent edge. */
a.kw-pending:not(.btn) { color:var(--accent-hi); transition:color .15s ease; }
header.top nav a.kw-pending, footer .row a.kw-pending, .seg a.kw-pending { color:var(--accent-hi); }
.btn.kw-pending { border-color:var(--accent); }
.btn.line.kw-pending { background:color-mix(in srgb, var(--accent) 13%, transparent); }
.btn.fill.kw-pending { filter:brightness(1.08); }
/* The band: under the header's lower edge, a light running along it while
   the page loads, then a full stroke that fades. */
#kw-load { position:fixed; left:0; right:0; top:0; height:2px; z-index:65; pointer-events:none; overflow:hidden;
  opacity:0; transition:opacity .28s ease; }
#kw-load.on { opacity:1; background:color-mix(in srgb, var(--accent) 16%, transparent); }
#kw-load::before { content:""; position:absolute; top:0; bottom:0; left:-45%; width:45%;
  background:linear-gradient(90deg, transparent, var(--accent-deep), var(--accent-hi), transparent);
  box-shadow:0 0 10px var(--accent); }
#kw-load.on::before { animation:kw-load 1.05s cubic-bezier(.45,.05,.55,.95) infinite; }
#kw-load.done::before { animation:none; left:0; width:100%;
  background:linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-hi)); transition:width .2s ease; }
@keyframes kw-load { from { left:-45%; } to { left:100%; } }

/* ---- a page change in place (site.js swaps the body; View Transitions animate it) ----
   The header and the footer hold still while the page between them leaves
   upward and the next one rises into its place. */
header.top { view-transition-name:kw-top; }
body > main { view-transition-name:kw-main; }
body > footer { view-transition-name:kw-foot; }
::view-transition-group(root), ::view-transition-group(kw-top), ::view-transition-group(kw-foot) { animation-duration:.3s; }
::view-transition-old(kw-main) { animation:.18s cubic-bezier(.4,0,1,1) both kw-leave; }
::view-transition-new(kw-main) { animation:.34s cubic-bezier(0,0,.2,1) .06s both kw-arrive; }
@keyframes kw-leave { to { opacity:0; transform:translateY(-10px); } }
@keyframes kw-arrive { from { opacity:0; transform:translateY(14px); } }

@media (prefers-reduced-motion:reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation:none !important; }
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}