/* The zine look (9 Oct 2026). Loaded after styles.css on every page: it changes the palette to
   paper and ink and adds the magazine pieces (masthead, stamps, prints, film box, contact sheet,
   receipt). Blinq's own rules are appended by build_zine_css.py. */

:root {
  --bg: #f3eee4; --bg-2: #e8e1d1; --card: #ffffff; --line: #d3cab6;
  --text: #15130f; --muted: #4d473d; --dim: #5a554a;
  --accent: #ffc72c; --accent-ink: #15130f; --rec: #c8402a;
  --paper: #f3eee4; --ink: #15130f; --red: #c8402a;
  color-scheme: light;
}
body { font-size: 18px; line-height: 1.55; }
::selection { background: var(--accent); color: var(--ink); }
h1, h2, h3 { letter-spacing: -0.03em; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; color: inherit; }

/* masthead */
.site-header { background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom: 1px solid var(--line); }
.site-header.scrolled { border-bottom-color: var(--line); }
.brand { align-items: center; gap: 10px; }
.brand .bq { height: 34px; width: auto; }
.brand b { font-weight: 800; letter-spacing: -0.03em; font-size: 20px; }
.brand small { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 400; margin-left: 2px; }
.nav a { color: var(--text); }
.btn { border: 1.5px solid var(--ink); color: var(--text); background: transparent; border-radius: 999px; font-weight: 600; }
.btn:hover { background: var(--bg-2); }
.btn-accent, .btn-amber { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn-accent:hover, .btn-amber:hover { background: #f5b800; border-color: #f5b800; }
.nav .btn-accent { color: var(--ink); }
.btn-light { border-color: rgba(255,255,255,.45); color: #fff; }
.btn-light:hover { background: rgba(255,255,255,.08); }
.btn-ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 560px) { .brand small { display: none; } .brand b { white-space: nowrap; } }

/* shared bits */
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.frame-no, .label { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--dim); text-transform: none; display: block; margin-bottom: 14px; }
.sec { padding: 88px 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px 40px; align-items: end; margin-bottom: 36px; max-width: none; }
.sec-head h2, .sec-head > div { max-width: none; }
/* older section heads put the label, heading and crumbs straight in the grid: keep those stacked */
.sec-head > .label, .sec-head > h1, .sec-head > h2, .sec-head > .crumbs { grid-column: 1 / -1; }
.sec-head > .label { margin-bottom: 0; }
.sec-head h2 { font-size: clamp(32px, 4.4vw, 56px); }
.sec-head p { margin: 0; color: var(--muted); max-width: 44ch; }
@media (max-width: 900px) { .sec { padding: 64px 0; } .sec-head { grid-template-columns: 1fr; } }

/* cover */
.cover { padding: 64px 0 56px; }
.cover .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.cover .wrap > * { min-width: 0; }
.issue { display: flex; gap: 14px; flex-wrap: wrap; color: var(--dim); margin: 0 0 22px; }
.issue span + span::before { content: "·"; margin-right: 14px; }
.cover h1 { font-size: clamp(42px, 6.4vw, 88px); line-height: 1.02; }
.cover .lede { font-size: 21px; color: var(--muted); max-width: 38ch; margin: 24px 0 30px; }
.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.cta-note { font-size: 15px; color: var(--muted); }
.stamps { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 34px; }
.stamp { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border: 1.5px solid var(--red); color: var(--red); border-radius: 4px; transform: rotate(-1.5deg); opacity: .9; }
.stamp:nth-child(2) { transform: rotate(1deg); }
.stamp:nth-child(3) { transform: rotate(-.5deg); }
.print { background: #fff; padding: 14px 14px 18px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.45); transform: rotate(1.5deg); max-width: 440px; margin: 0 auto; }
.print img { width: 100%; height: auto; }
.print figcaption { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-top: 12px; }
.print figcaption b { color: var(--ink); }
@media (max-width: 900px) { .cover { padding-top: 40px; } .cover .wrap { grid-template-columns: 1fr; gap: 36px; } }

/* the look row */
.strip { background: #0b0b0c; color: #d8d4ca; }
.strip .wrap { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding-top: 18px; padding-bottom: 18px; }
.strip img { height: 84px; width: 444px; max-width: 100%; aspect-ratio: 697 / 132; object-fit: contain; border-radius: 4px; }
.strip p { margin: 0; font-size: 16px; max-width: 52ch; }
.strip p span { color: var(--accent); }
@media (max-width: 900px) { .strip .wrap { grid-template-columns: 1fr; } .strip img { height: 64px; width: 338px; } }

/* looks: the film box, with the scene picker above it */
.looks2 { padding-top: 88px; }
.looks2 .frame-no, .sec .frame-no { color: var(--dim); }
.scene-picker { margin: 0 0 24px; }
.scene-q { font-weight: 700; font-size: 18px; margin: 0 0 12px; }
.scene { background: #fff; border-color: var(--line); color: var(--text); }
.scene:hover { border-color: var(--ink); }
.scene[aria-pressed="true"] { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.scene-result { color: var(--muted); }
.scene-result b { color: var(--text); }
.box { border: 2px solid var(--ink); border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: 240px 1fr; background: #fff; }
.box .side { background: var(--ink); color: var(--accent); padding: 26px 22px; display: grid; align-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.box .side b { font-size: 40px; letter-spacing: -0.02em; font-family: var(--font); display: block; line-height: 1; color: #fff; }
.box .side b small { display: block; font-size: 13px; color: var(--accent); font-family: var(--mono); letter-spacing: .14em; margin-top: 8px; }
.looks2-grid { margin: 0; padding: 20px 26px; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 28px; }
.looks2 .look { display: grid; grid-template-columns: minmax(0, 1fr) auto; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border: 0; border-bottom: 1px dotted var(--line); border-radius: 0; background: none; font-size: 17px; transition: opacity .2s; min-width: 0; }
.looks2 .look-name { display: grid; gap: 2px; font-size: 17px; min-width: 0; }
.looks2 .look-use { font-size: 13px; color: var(--dim); margin: 0; }
.looks2 .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; padding: 3px 7px; border-radius: 3px; background: var(--bg-2); color: var(--text); white-space: nowrap; }
.looks2 .tag-free { background: var(--accent); color: var(--ink); }
.looks2-grid.filtering .look { opacity: .3; }
.looks2-grid.filtering .look.match { opacity: 1; }
.looks2-grid.filtering .look.match .look-name { font-weight: 700; }
.looks2 .foot-note { color: var(--muted); margin-top: 20px; }
.also-read { margin-top: 22px; line-height: 1.9; color: var(--muted); }
.also-read a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 900px) { .box { grid-template-columns: 1fr; } .box .side { display: block; padding: 20px 18px; } .box .side b { margin: 10px 0; } .looks2-grid { grid-template-columns: 1fr; gap: 0; padding: 12px 18px; } }

/* pro tools lab, on paper */
.lab { background: var(--bg-2); border-block: 1px solid var(--line); }
.lab-copy > p { color: var(--muted); }
.tools dd { color: var(--muted); }
.lab-screen { border-radius: 10px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.45); border: 10px solid #fff; background: #fff; }
.ev-dial-head { color: var(--muted); }
.ev-dial-head output { color: var(--ink); }
.ev-dial input[type="range"]::-webkit-slider-runnable-track { background: repeating-linear-gradient(90deg, var(--dim) 0 1px, transparent 1px 10%) center / calc(100% - 20px) 12px no-repeat, repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 2.5%) center / calc(100% - 20px) 6px no-repeat, #fff; border-color: var(--line); }
.ev-dial input[type="range"]::-moz-range-track { background: #fff; border-color: var(--line); }
.ev-dial input[type="range"]::-webkit-slider-thumb { background: var(--ink); box-shadow: 0 0 0 3px rgba(255,199,44,.6); }
.ev-dial input[type="range"]::-moz-range-thumb { background: var(--ink); }
.switch { background: #fff; border-color: var(--line); }
.switch:has(input:checked) { border-color: var(--ink); }
.muted-note a { color: var(--text); }

/* contact sheet */
.sheet { background: #0b0b0c; color: #e9e6df; }
.sheet .frame-no { color: #a9a49a; }
.sheet .sec-head p { color: #a9a49a; }
.sheet .frames { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.sheet figure { margin: 0; }
.sheet .fr { border: 1px solid #2a2a2e; background: #000; padding: 8px 8px 6px; border-radius: 4px; }
.sheet .fr img { border-radius: 3px; width: 100%; height: auto; }
.sheet figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #a9a49a; margin-top: 10px; display: flex; justify-content: space-between; }
.sheet figcaption b { color: var(--accent); font-weight: 500; }
.edge { font-family: var(--mono); font-size: 11px; letter-spacing: .3em; color: var(--accent); display: flex; justify-content: space-between; padding: 10px 0 20px; border-top: 1px solid #2a2a2e; margin-top: 26px; }
@media (max-width: 900px) { .sheet .frames { grid-template-columns: repeat(3, 1fr); gap: 10px; } .edge span:nth-child(n+4) { display: none; } }
@media (max-width: 520px) { .sheet .frames { grid-template-columns: repeat(2, 1fr); } }

/* on the box + the receipt */
.spec .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
.spec h2 { margin-bottom: 28px; font-size: clamp(32px, 4.4vw, 56px); }
.spec table { width: 100%; border-collapse: collapse; font-size: 17px; }
.spec th { text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding: 0 14px 12px; border-bottom: 1.5px solid var(--ink); background: none; }
.spec td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec td:first-child { font-weight: 600; width: 38%; }
.spec td small { display: block; color: var(--dim); font-size: 14px; font-weight: 400; }
.spec .foot { font-size: 14px; color: var(--dim); margin-top: 14px; }
.receipt-wrap { display: grid; justify-items: center; }
.receipt { position: relative; background: #fff; color: #1a1814; width: min(360px, 100%); padding: 26px 24px 34px; font-family: var(--mono); font-size: 13px; line-height: 1.7; transform: rotate(-2deg); box-shadow: 0 30px 50px -24px rgba(0,0,0,.5); overflow: visible; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: linear-gradient(45deg, transparent 33.3%, #fff 33.3%, #fff 66.7%, transparent 66.7%), linear-gradient(-45deg, transparent 33.3%, #fff 33.3%, #fff 66.7%, transparent 66.7%); background-size: 14px 20px; }
.receipt h3 { font-family: var(--mono); font-size: 13px; letter-spacing: .18em; text-align: center; margin: 0 0 4px; font-weight: 700; }
.receipt .c { text-align: center; color: #6b655a; font-size: 11px; letter-spacing: .1em; margin: 0; }
.receipt hr { border: 0; border-top: 1.5px dashed #bdb6a8; margin: 14px 0; }
.receipt .row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.receipt .row span:first-child { flex: 1; }
.receipt .row small { display: block; color: #6b655a; font-size: 11px; line-height: 1.5; margin: -2px 0 6px 12px; }
.receipt .sum { font-weight: 700; font-size: 14px; }
.receipt .paid { position: absolute; right: 16px; bottom: 122px; transform: rotate(-14deg); border: 2.5px solid var(--red); color: var(--red); font-size: 15px; letter-spacing: .22em; padding: 6px 10px; border-radius: 4px; opacity: .85; }
.receipt .bar { height: 38px; margin: 14px 0 6px; background: repeating-linear-gradient(90deg, #1a1814 0 2px, transparent 2px 4px, #1a1814 4px 5px, transparent 5px 9px, #1a1814 9px 12px, transparent 12px 14px); }
.receipt .bq-receipt { position: absolute; right: -118px; bottom: -58px; height: 170px; width: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.25)); }
@media (max-width: 1300px) { .receipt .bq-receipt { right: -26px; bottom: -56px; height: 140px; } }
@media (max-width: 900px) { .spec .wrap { grid-template-columns: 1fr; } .spec td:first-child { width: auto; } .receipt { margin-top: 20px; } .receipt .bq-receipt { right: -14px; bottom: -44px; height: 120px; } }

.spec-more { grid-column: 1 / -1; }
.plans2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; margin-top: 34px; max-width: 900px; }
.plans2 h3 { font-size: 20px; margin: 0 0 10px; }
.plans2 ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 16px; }
.plans2 li { margin-bottom: 6px; }
.steps2 { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; font-size: 16px; color: var(--muted); }
.steps2 li { border-left: 2px solid var(--accent); padding-left: 14px; }
.steps2 b { color: var(--text); }
@media (max-width: 700px) { .plans2 { grid-template-columns: 1fr; } }

/* what it doesn't do */
.dont { background: var(--bg-2); }
.dont ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dont li { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px; position: relative; }
.dont li b { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--dim); display: block; margin-bottom: 10px; }
.dont li strong { display: block; font-size: 21px; letter-spacing: -0.02em; margin-bottom: 6px; }
.dont li span { color: var(--muted); font-size: 15px; }
.dont li.has-bq { padding-right: 92px; }
.dont li.has-bq .bq { position: absolute; right: 10px; top: 14px; height: 96px; width: auto; }
@media (max-width: 900px) { .dont ol { grid-template-columns: 1fr 1fr; } .dont li.has-bq { padding-right: 80px; } .dont li.has-bq .bq { height: 80px; right: 6px; } }
@media (max-width: 520px) { .dont ol { grid-template-columns: 1fr; } }

/* field notes + guide cards everywhere */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide-card, .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.guide-card:hover, .card:hover { border-color: var(--ink); }
.guide-card p, .card p { color: var(--muted); }
.guide-card .more { color: var(--ink); }
.card { padding: 24px; text-decoration: none; display: grid; align-content: start; gap: 10px; min-height: 190px; }
.card .mono { color: var(--dim); }
.card.hi { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card.hi .mono, .card.hi p { color: #cfcbc2; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } }

/* faq, final, footer */
.faq { max-width: none; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 0 22px; margin-bottom: 10px; }
.faq summary { color: var(--text); }
.faq summary::after { color: var(--ink); right: 2px; }
.faq details p { padding-right: 20px; }
.faq details p { color: var(--muted); }
.final { background: var(--ink); color: var(--paper); }
.final p { color: #cfcbc2; }
.site-footer { border-top: 1px solid var(--line); color: var(--dim); }
.site-footer .made { display: flex; align-items: center; gap: 14px; }
.site-footer .made .bq { height: 56px; width: auto; }
.site-footer a { color: var(--text); }

/* document pages (guides, pro, privacy, about) */
.doc p, .doc li { color: var(--text); }
.doc .meta { color: var(--dim); }
.doc a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc .summary { background: #fff; border: 1.5px solid var(--ink); }
.doc table { background: #fff; }
.doc th { color: var(--dim); background: var(--bg-2); }
.doc td { color: var(--text); }
.toc { background: #fff; border: 1px solid var(--line); }
.toc a { color: var(--text); }
.callout { background: #fff; border-left: 3px solid var(--accent); color: var(--text); }
.callout p { color: var(--text); }
.app-cta { background: var(--ink); color: var(--paper); border: 0; }
.app-cta p { color: #cfcbc2; }
.app-cta .btn { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.crumbs, .crumbs a { color: var(--dim); }
.doc code, .doc kbd { background: var(--bg-2); color: var(--ink); }
.guide-section { color: var(--text); border-color: var(--line); }

/* looks page */
.looks-page section { padding: 0; }
.looks-page .how { margin-top: 8px; }
.looks-page .scenes { margin-top: 12px; }
.looks-page a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.looks-page h1 em { font-style: italic; color: inherit; }
.looks-page .scene-block { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px 16px; }
.looks-page .scene-block h3 { margin: 0; }
.looks-page .scene-picks { color: var(--muted); }
.looks-page .look-card { background: #fff; border: 1px solid var(--line); }
.looks-page .look-for { color: var(--muted); }
.looks-page .look-for span { color: var(--dim); }
.looks-page .faq details { background: #fff; padding: 0 22px; }
.looks-page .more { color: var(--text); }

/* 404 */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.notfound .bq { height: 150px; width: auto; margin: 0 auto 18px; }
.notfound p { color: var(--muted); }

/* install bar */
.install-bar { background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.install-bar small { color: #bdb8ad; }

/* "New in this version" band, between the cover and the look row */
section.newband { padding: 0; border-top: 1.5px dashed var(--line); }
.newband .wrap { padding-top: 26px; padding-bottom: 26px; }
.newband h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.newband h2 .stamp { font-size: 12px; }
.newband ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.newband li { background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; gap: 4px; align-content: start; }
.newband li b { font-size: 16px; }
.newband li span { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.newband-more { display: inline-block; margin-top: 14px; font-weight: 600; }
@media (max-width: 900px) { .newband ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .newband ul { grid-template-columns: 1fr; } }

/* The band's little scenes: each card acts out its feature in a small viewfinder. Base styles are
   the finished state (no JS, off screen, or after one play with "reduce motion"); the animations
   run only while the band is in view (.in-view, set by home.js). */
@property --nbt { syntax: '<integer>'; inherits: true; initial-value: 9; }
.nb-art { position: relative; display: block; height: 104px; margin: 0 0 12px; border-radius: 9px; overflow: hidden; background: #121110; }
.nb-art i, .nb-art span { position: absolute; display: block; font-style: normal; }
.nb-art .sky { inset: 0; background: linear-gradient(#f6d58c, #efa766 72%, #e2865a); }
.nb-art .sky::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #fff3c8; left: 62%; top: 22%; box-shadow: 0 0 18px 6px rgba(255, 243, 200, .55); }
.nb-art .hills { left: 0; right: 0; bottom: 0; height: 64%;
  background: radial-gradient(58% 72% at 28% 100%, #3d4c34 97%, transparent 100%) 0 100% / 160px 100% repeat-x,
              radial-gradient(70% 95% at 76% 100%, #222c1c 97%, transparent 100%) 0 100% / 220px 100% repeat-x; }
.nb-art .hud { left: 8px; top: 8px; height: 17px; padding: 0 7px; border-radius: 5px; background: rgba(12, 11, 10, .62);
  color: #fff; font: 600 10px/17px var(--mono, monospace); letter-spacing: .06em; display: flex; align-items: center; gap: 6px; }
.nb-art .hud i { position: static; }
.nb-art .dot { width: 7px; height: 7px; border-radius: 50%; background: #e5483a; }
.nb-art .tc { --nbt: 9; }
.nb-art .tc::after { counter-reset: nbt var(--nbt); content: "00:0" counter(nbt); }

/* pause */
.nb-pause .paused { inset: 0; background: rgba(18, 17, 16, .5); opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nb-pause .paused i { position: static; }
.nb-pause .pz { width: 16px; height: 20px; background: linear-gradient(90deg, #fff 0 5px, transparent 5px 11px, #fff 11px 16px); }
.nb-pause .pl { color: #ffc72c; font: 700 9px/1 var(--mono, monospace); letter-spacing: .2em; text-transform: uppercase; }
.nb-pause .tl { left: 8px; right: 8px; bottom: 8px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.nb-pause .fill { left: 0; top: 0; bottom: 0; width: 100%; background: #e5483a; }
.nb-pause .cut { left: 50%; top: 0; bottom: 0; width: 2px; background: #ffc72c; }

/* photo while recording */
.nb-photo .flash { inset: 0; background: #fff; opacity: 0; }
.nb-photo .still { right: 10px; bottom: 9px; width: 62px; height: 46px; border: 3px solid #fff; border-bottom-width: 9px; border-radius: 2px;
  overflow: hidden; box-shadow: 0 4px 10px rgba(0, 0, 0, .45); transform: rotate(7deg); }
.nb-photo .still .sky::after { width: 8px; height: 8px; box-shadow: none; }
.nb-photo .still .hills { background-size: 40px 100%, 55px 100%; }

/* level */
.nb-level .world { inset: -40%; background: linear-gradient(#bcd4e6, #e4edf2 49.6%, #2e4b5e 50.4%, #24394a); }
.nb-level .mark { top: calc(50% - 1px); width: 14px; height: 2px; background: #ffc72c; border-radius: 1px; }
.nb-level .ml { left: 16%; }
.nb-level .mr { right: 16%; }
.nb-level .line { left: 31%; right: 31%; top: calc(50% - 1.5px); height: 3px; border-radius: 2px; background: #ffc72c; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.nb-level .ok { left: 0; right: 0; bottom: 9px; text-align: center; color: #ffc72c; font: 700 9px/1 var(--mono, monospace); letter-spacing: .2em; text-transform: uppercase; }

/* location */
.nb-loc .file { left: 12px; right: 12px; top: 11px; bottom: 11px; background: #f7f3ea; border-radius: 6px; box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.nb-loc .fn { left: 10px; top: 8px; color: #15130f; font: 700 9.5px/1 var(--mono, monospace); letter-spacing: .06em; }
.nb-loc .row { left: 10px; height: 5px; border-radius: 3px; background: #ddd5c4; }
.nb-loc .r1 { top: 25px; width: 58%; }
.nb-loc .r2 { top: 36px; width: 40%; }
.nb-loc .place { left: 10px; right: 8px; top: 50px; height: 18px; }
.nb-loc .pin { left: 1px; top: 2px; width: 11px; height: 11px; border-radius: 50% 50% 50% 0; background: #e5483a; transform: rotate(-45deg); }
.nb-loc .pin::after { content: ""; position: absolute; left: 3.5px; top: 3.5px; width: 4px; height: 4px; border-radius: 50%; background: #f7f3ea; }
.nb-loc .ptext { left: 18px; top: 3px; max-width: 100%; overflow: hidden; white-space: nowrap; color: #15130f;
  font: 700 9.5px/1.3 var(--mono, monospace); letter-spacing: .05em; text-transform: uppercase; }

/* timing: one 7-second take per card, staggered */
.js .newband.in-view .stamp { animation: nb-thunk .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.js .newband.in-view .nb-pause > .hills { animation: nb-pan-hold 7s linear infinite; }
.js .newband.in-view .nb-pause .tc { animation: nb-tc-hold 7s linear infinite; }
.js .newband.in-view .nb-pause .fill { animation: nb-fill 7s linear infinite; }
.js .newband.in-view .nb-pause .cut { animation: nb-cut 7s step-end infinite; }
.js .newband.in-view .nb-pause .paused { animation: nb-paused 7s linear infinite; }
.js .newband.in-view .nb-pause .dot { animation: nb-dot-hold 7s step-end infinite; }
.js .newband.in-view .nb-photo > .hills { animation: nb-pan 7s linear infinite .5s backwards; }
.js .newband.in-view .nb-photo .tc { animation: nb-tc 7s linear infinite .5s backwards; }
.js .newband.in-view .nb-photo .dot { animation: nb-blink 1s step-end infinite; }
.js .newband.in-view .nb-photo .flash { animation: nb-flash 7s linear infinite .5s backwards; }
.js .newband.in-view .nb-photo .still { animation: nb-still 7s cubic-bezier(.3, .8, .3, 1) infinite .5s backwards; }
.js .newband.in-view .nb-level .world { animation: nb-tilt 7s ease-in-out infinite 1s backwards; }
.js .newband.in-view .nb-level .line { animation: nb-tilt 7s ease-in-out infinite 1s backwards, nb-ok-col 7s step-end infinite 1s backwards; }
.js .newband.in-view .nb-level .mark { animation: nb-ok-col 7s step-end infinite 1s backwards; }
.js .newband.in-view .nb-level .ok { animation: nb-ok 7s linear infinite 1s backwards; }
.js .newband.in-view .nb-loc .pin { animation: nb-pin 7s ease-in infinite 1.5s backwards; }
.js .newband.in-view .nb-loc .ptext { animation: nb-type 7s steps(26, end) infinite 1.5s backwards; }
.js .newband.in-view .nb-loc .place { animation: nb-fade-end 7s linear infinite 1.5s backwards; }

@keyframes nb-thunk { from { opacity: 0; transform: scale(1.7) rotate(-14deg); } to { opacity: 1; transform: scale(1) rotate(-3deg); } }
@keyframes nb-pan { from { background-position: 0 100%, 0 100%; } to { background-position: -160px 100%, -220px 100%; } }
@keyframes nb-pan-hold { 0% { background-position: 0 100%, 0 100%; } 40%, 60% { background-position: -80px 100%, -110px 100%; } 100% { background-position: -160px 100%, -220px 100%; } }
@keyframes nb-tc { from { --nbt: 0; } to { --nbt: 9; } }
@keyframes nb-tc-hold { 0% { --nbt: 0; } 40%, 60% { --nbt: 4; } 100% { --nbt: 9; } }
@keyframes nb-fill { 0% { width: 0; } 40%, 60% { width: 50%; } 100% { width: 100%; } }
@keyframes nb-cut { 0% { opacity: 0; } 60% { opacity: 1; } }
@keyframes nb-paused { 0%, 40% { opacity: 0; } 42%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes nb-dot-hold { 0% { opacity: 1; } 40% { opacity: .25; } 60% { opacity: 1; } }
@keyframes nb-blink { 0% { opacity: 1; } 50% { opacity: .25; } }
@keyframes nb-flash { 0%, 43% { opacity: 0; } 45% { opacity: .95; } 56%, 100% { opacity: 0; } }
@keyframes nb-still { 0%, 44% { opacity: 0; transform: translate(-70px, -26px) scale(2.6) rotate(0); }
  45% { opacity: 1; transform: translate(-70px, -26px) scale(2.6) rotate(0); }
  60%, 92% { opacity: 1; transform: translate(0, 0) scale(1) rotate(7deg); } 100% { opacity: 0; transform: translate(0, 6px) scale(1) rotate(7deg); } }
@keyframes nb-tilt { 0% { transform: rotate(0); } 10% { transform: rotate(-13deg); } 27% { transform: rotate(9deg); } 40% { transform: rotate(-4deg); }
  50% { transform: rotate(1.5deg); } 57%, 100% { transform: rotate(0); } }
@keyframes nb-ok-col { 0% { background-color: #ffc72c; } 4% { background-color: rgba(255, 255, 255, .85); } 57% { background-color: #ffc72c; } }
@keyframes nb-ok { 0%, 3% { opacity: 1; } 6%, 56% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes nb-pin { 0%, 4% { opacity: 0; transform: translateY(-60px) rotate(-45deg); } 18% { opacity: 1; transform: translateY(0) rotate(-45deg); }
  23% { transform: translateY(-6px) rotate(-45deg); } 28%, 100% { opacity: 1; transform: translateY(0) rotate(-45deg); } }
@keyframes nb-type { 0%, 30% { max-width: 0; } 62%, 100% { max-width: 100%; } }
@keyframes nb-fade-end { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .js .newband.in-view .nb-art, .js .newband.in-view .nb-art * { animation-iteration-count: 1 !important; }
}

/* /creators/: the kit's screenshots and the fact sheet */
.creators-shots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 18px 0 8px; }
.creators-shots figure { margin: 0; }
.creators-shots img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); display: block; }
.creators-shots figcaption { font: 500 12px/1.35 var(--mono, monospace); color: var(--dim); margin-top: 6px; }
@media (max-width: 900px) { .creators-shots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .creators-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.creators .facts th { width: 26%; text-align: left; white-space: nowrap; }
.creators .lede + p .btn { margin: 4px 8px 4px 0; }

/* Game pages (/restore-island/, /puzzle-crew/), redesigned 14 Oct 2026: bands in each game's own
   colours, taken from its Play screenshots (Restore Island green, Puzzle Crew purple, both on cream). */
.gp { --g: #2ea966; --g-ink: #17693d; --g-hi: #63d495; --g-soft: #e2f2e2; --g-cream: #fff6e7; --g-deep: #10331f; --g-hot: #b4501c; }
.gp-pc { --g: #6c4cf4; --g-ink: #4f32cc; --g-hi: #b9a8ff; --g-soft: #ece6ff; --g-cream: #fff5ea; --g-deep: #221852; --g-hot: #b4501c; }
.gp section { scroll-margin-top: 80px; }
.gp h2 em, .gp h1 em { font-style: normal; font-weight: inherit; color: var(--g-ink); }

/* hero: the game's name and Play button beside a fan of three real screenshots */
.gp-hero { position: relative; padding: 34px 0 72px; overflow: hidden;
  background: radial-gradient(520px 420px at 82% 38%, color-mix(in srgb, var(--g) 26%, transparent), transparent 70%),
              radial-gradient(380px 300px at 4% 96%, rgba(240,138,62,.16), transparent 70%), var(--g-cream); }
.gp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 16px;
  background: radial-gradient(circle at 50% 100%, var(--ink) 11px, transparent 11.5px) 0 100% / 30px 16px repeat-x; }
.gp-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
.gp-hero .crumbs { margin-bottom: 26px; }
.gp-app { display: inline-flex; align-items: center; gap: 12px; margin: 0; padding: 6px 16px 6px 6px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.gp-app img { width: 48px; height: 48px; border-radius: 12px; }
.gp-app span { display: grid; line-height: 1.2; }
.gp-app b { font-size: 16px; }
.gp-app small { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.gp-hero h1 { font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; margin: 22px 0 0; }
.gp-hero h1 em { display: block; }
.gp-lede { font-size: 20px; color: var(--muted); max-width: 40ch; margin: 20px 0 26px; }
.gp-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; }
.gp-cta span { font-size: 15px; color: var(--muted); max-width: 30ch; }
.gp-fan { position: relative; height: 560px; }
.gp-phone { position: absolute; top: 20px; left: 50%; width: 46%; margin: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.gp-phone img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 22px 44px rgba(21,19,15,.22), 0 2px 6px rgba(21,19,15,.12); }
.gp-phone-0 { transform: translateX(-106%) translateY(46px) rotate(-8deg); }
.gp-phone-2 { transform: translateX(6%) translateY(46px) rotate(8deg); }
.gp-phone-1 { transform: translateX(-50%); z-index: 1; }
.gp-fan:hover .gp-phone-0 { transform: translateX(-118%) translateY(40px) rotate(-11deg); }
.gp-fan:hover .gp-phone-2 { transform: translateX(18%) translateY(40px) rotate(11deg); }
.gp-fan:hover .gp-phone-1 { transform: translateX(-50%) translateY(-8px); }

/* numbers band */
.gp-numbers { background: var(--ink); color: var(--paper); padding: 0; }
.gp-numbers ul { list-style: none; margin: 0 auto; padding-top: 30px; padding-bottom: 34px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.gp-numbers li { display: grid; gap: 4px; border-left: 2px solid rgba(243,238,228,.16); padding-left: 18px; }
.gp-numbers b { font-size: clamp(38px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.04em; color: var(--g-hi); font-weight: 800; }
.gp-numbers span { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #cfcbc2; }

/* bands and section heads */
.gp-band { padding: 84px 0; }
.gp-tint { background: var(--g-soft); }
.gp-head { max-width: 640px; margin-bottom: 34px; }
.gp-kicker { font: 600 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--g-hot); margin: 0 0 10px; }
.gp-head h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.05; margin: 0; }
.gp-head p:not(.gp-kicker) { color: var(--muted); margin: 14px 0 0; max-width: 46ch; }
.gp-after { color: var(--muted); font-size: 16px; margin: 26px 0 0; max-width: 60ch; }
.gp-after a { color: var(--ink); text-decoration-color: var(--g); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gp-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }
.gp-split .gp-head { margin-bottom: 26px; }
.gp-pair { display: flex; gap: 18px; justify-content: center; align-items: flex-start; }
.gp-pair figure { margin: 0; flex: 0 1 250px; }
.gp-pair figure:nth-child(2) { margin-top: 56px; }
.gp-pair img { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 18px 36px rgba(21,19,15,.18); }
.gp-pair-1 figure { flex-basis: 290px; transform: rotate(2.5deg); }

/* Restore Island: the five puzzles as cards */
.gp-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.gp-pcard { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 10px 10px 18px; transition: transform .25s, box-shadow .25s; }
.gp-pcard:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 16px 30px rgba(21,19,15,.12); }
.gp-pcard figure { margin: 0 0 14px; }
.gp-pcard img { display: block; width: 100%; height: auto; border-radius: 13px; }
.gp-pcard .gp-no, .gp-age .gp-no { display: inline-block; margin: 0 8px; padding: 3px 9px; border-radius: 999px; background: var(--g-soft); color: var(--g-ink); font: 600 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.gp-pcard h3 { font-size: 22px; margin: 8px 8px 4px; }
.gp-pcard p:last-child { margin: 0 8px; font-size: 15px; color: var(--muted); line-height: 1.45; }

/* Restore Island: the islands as a route */
.gp-route { list-style: none; margin: 0; padding: 0; counter-reset: isle; }
.gp-isle { --c: #6dbb5e; position: relative; counter-increment: isle; padding: 2px 0 24px 64px; display: grid; gap: 2px; }
.gp-isle::before { content: counter(isle); position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: var(--ink); display: grid; place-items: center; font: 700 17px/1 var(--mono); box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(21,19,15,.14); }
.gp-isle:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 50px; bottom: 4px; border-left: 2.5px dashed color-mix(in srgb, var(--g-ink) 45%, transparent); }
.gp-isle b { font-size: 21px; }
.gp-isle span { color: var(--muted); font-size: 16px; }
.gp-isle-2 { --c: #a9dcef; } .gp-isle-3 { --c: #f0bf5e; } .gp-isle-4 { --c: #7fb6e3; } .gp-isle-5 { --c: #f5b3cc; }

/* Puzzle Crew: the age groups, each with a board that gets busier */
.gp-ages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.gp-age { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 12px 12px 20px; transition: transform .25s, box-shadow .25s; }
.gp-age:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(21,19,15,.12); }
.gp-board { --c: 2; --r: 2; --f: #ffe08a; display: block; aspect-ratio: 4 / 3; border-radius: 14px; margin-bottom: 16px; border: 2px solid var(--g-ink);
  background: linear-gradient(90deg, var(--g-ink) 1.5px, transparent 1.5px) -1px 0 / calc(100% / var(--c)) 100%,
              linear-gradient(180deg, var(--g-ink) 1.5px, transparent 1.5px) 0 -1px / 100% calc(100% / var(--r)), var(--f); }
.gp-age-2 .gp-board { --c: 4; --r: 3; --f: #ffc9b5; }
.gp-age-3 .gp-board { --c: 8; --r: 6; --f: #d8cdfd; }
.gp-age-4 .gp-board { --c: 16; --r: 12; --f: #b7a6fb; }
.gp-age h3 { font-size: 22px; margin: 10px 8px 4px; }
.gp-age p:last-child { margin: 0 8px; font-size: 15px; color: var(--muted); line-height: 1.45; }

/* lists with icons (Puzzle Crew pictures) and the "good to know" tiles */
.gp-ico { flex: none; color: var(--g-ink); }
.gp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.gp-list li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.gp-list .gp-ico, .gp-tiles .gp-ico { box-sizing: content-box; padding: 12px; width: 28px; height: 28px; border-radius: 14px; background: var(--g-soft); }
.gp-list .gp-ico { grid-row: span 2; }
.gp-list b { font-size: 18px; }
.gp-list span { color: var(--muted); font-size: 16px; }
.gp-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.gp-tiles li { display: grid; align-content: start; gap: 6px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.gp-tiles .gp-ico { margin-bottom: 8px; }
.gp-tiles b { font-size: 18px; line-height: 1.25; }
.gp-tiles span { color: var(--muted); font-size: 15px; line-height: 1.45; }

/* Puzzle Crew: play together, on the dark band */
.gp-dark { background: var(--g-deep); color: #f3eee4; }
.gp-dark .gp-head h2 { color: #fff; }
.gp-dark h2 em { color: var(--g-hi); }
.gp-dark .gp-kicker { color: #ffb38a; }
.gp-dark .gp-after { color: #cfc8ea; }
.gp-code { display: inline-block; background: #fff; color: var(--ink); border-radius: 20px; padding: 16px 20px 20px; transform: rotate(-1.5deg); box-shadow: 0 16px 34px rgba(0,0,0,.3); margin-bottom: 26px; }
.gp-code small { display: block; text-align: center; font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.gp-code p { display: flex; gap: 8px; margin: 0; }
.gp-code span { display: grid; place-items: center; width: 52px; height: 62px; border-radius: 12px; background: var(--g-soft); color: var(--g-ink); font: 700 34px/1 var(--mono); }
.gp-modes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gp-modes li { display: grid; gap: 4px; border-left: 3px solid var(--g-hi); padding: 2px 0 2px 16px; }
.gp-modes b { font-size: 19px; color: #fff; }
.gp-modes span { color: #cfc8ea; font-size: 16px; }

/* the three stars */
.gp-stars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gp-stars li { display: grid; justify-items: center; text-align: center; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 14px 20px; }
.gp-stars li:nth-child(1) { transform: rotate(-1.5deg); } .gp-stars li:nth-child(3) { transform: rotate(1.5deg); }
.gp-star { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: #fff3c4; color: #f2b100; margin-bottom: 8px; }
.gp-stars b { font-size: 18px; }
.gp-stars span:not(.gp-star) { color: var(--muted); font-size: 15px; }
.gp-stars-band { background: var(--g-cream); border-block: 1px solid var(--line); }

/* FAQ and the closing band */
.gp-faq-band { padding-top: 0; }
.gp-more { padding-top: 0; }
.gp-more .app-cards { margin-bottom: 0; }
.gp-faq-band .faq { max-width: 860px; }
.gp-final { background: var(--g-ink); color: #fff; padding: 56px 0; }
.gp-final .wrap { display: flex; align-items: center; gap: 28px; }
.gp-final .wrap > img { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 10px 26px rgba(0,0,0,.28); transform: rotate(-4deg); flex: none; }
.gp-final h2 { color: #fff; font-size: clamp(28px, 3.6vw, 44px); margin: 0; }
.gp-final p { margin: 6px 0 0; color: rgba(255,255,255,.86); }
.gp-final .wrap > div { flex: 1; }

@media (prefers-reduced-motion: no-preference) {
  .gp-phone-1 img { animation: gp-float 6s ease-in-out infinite; }
  @keyframes gp-float { 50% { transform: translateY(-10px); } }
}
@media (max-width: 1000px) {
  .gp-cards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(200px, 34%); overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -24px; padding: 4px 24px 18px; scroll-padding-inline: 24px; }
  .gp-pcard { scroll-snap-align: start; }
  .gp-pcard:hover { transform: translateY(-4px); }
  .gp-ages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .gp-hero { padding-bottom: 56px; }
  .gp-hero .wrap, .gp-split { grid-template-columns: 1fr; gap: 36px; }
  .gp-fan { height: min(118vw, 520px); max-width: 520px; width: 100%; margin: 0 auto; }
  .gp-numbers ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .gp-band { padding: 64px 0; }
}
@media (max-width: 560px) {
  .gp-cards { grid-auto-columns: 64%; }
  .gp-ages { gap: 12px; }
  .gp-age { padding: 8px 8px 16px; }
  .gp-age h3 { font-size: 18px; }
  .gp-modes { grid-template-columns: 1fr; }
  .gp-code span { width: 44px; height: 54px; font-size: 28px; }
  .gp-stars { gap: 10px; }
  .gp-stars li { padding: 16px 6px; }
  .gp-star { width: 56px; height: 56px; }
  .gp-star svg { width: 34px; height: 34px; }
  .gp-stars span:not(.gp-star) { font-size: 14px; }
  .gp-final .wrap { flex-direction: column; text-align: center; }
  .gp-tiles li { grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 2px; padding: 16px; }
  .gp-tiles .gp-ico { grid-row: span 2; margin-bottom: 0; }
}

/* home: "Also from Blinqdroid" */
section.more-apps { padding: 34px 0 40px; border-top: 1.5px dashed var(--line); }
.more-apps h2 { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 14px; }
.more-app { display: flex; align-items: center; gap: 16px; max-width: 640px; padding: 14px 18px; background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: 16px; color: inherit; text-decoration: none; }
.more-app img { border-radius: 13px; flex: none; }
.more-app span { display: grid; gap: 3px; flex: 1; }
.more-app b { font-size: 17px; }
.more-app small { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.more-app i { font-style: normal; font-size: 22px; color: var(--dim); }
.more-app:hover, .more-app:focus-visible { border-color: var(--ink, #15130f); }

/* equal app cards: /apps/ and the home's "Apps by Blinqdroid" */
.app-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 6px 0 18px; }
.app-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 18px; }
.app-card img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 4px 12px rgba(21,19,15,.12); }
.app-card .app-kind { margin: 6px 0 0; font: 600 11px/1.3 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.app-card h3, .app-card h2 { margin: 0; font-size: 21px; line-height: 1.2; }
.app-card h3 a, .app-card h2 a { color: inherit; text-decoration: none; }
.app-card h3 a:hover, .app-card h2 a:hover { text-decoration: underline; }
.app-card p { margin: 0; color: var(--muted); }
.app-card ul { margin: 2px 0 0; padding-left: 18px; color: var(--muted); font-size: 15px; }
.app-card { --app: var(--accent); --app-soft: #fff4d1; border-top: 6px solid var(--app); background: linear-gradient(180deg, var(--app-soft) 0 96px, var(--card, #fff) 96px); transition: transform .25s, box-shadow .25s; }
.app-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(21,19,15,.1); }
.app-card.app-ri { --app: #2ea966; --app-soft: #e2f2e2; }
.app-card.app-pc { --app: #6c4cf4; --app-soft: #ece6ff; }
.app-card .app-actions { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .app-cards { grid-template-columns: 1fr; } }
section.more-apps .foot-note { margin: 0; }

/* Nothing on the page (Blinq mid-flight included) may make it scroll sideways. */
html, body { overflow-x: clip; }

/* /tools/photo-privacy-check/ (14 Oct 2026): drop zone, findings by risk, clean-copy button */
.ppc { margin: 26px 0 40px; }
.ppc-drop { position: relative; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 34px 20px; background: #fff; border: 2px dashed var(--ink); border-radius: 18px; cursor: pointer; transition: background .2s, transform .2s; }
.ppc-drop:hover, .ppc-drop.is-over { background: #fff8dc; }
.ppc-drop.is-over { transform: scale(1.01); }
.ppc-drop:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
.ppc-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ppc-drop svg { color: var(--ink); margin-bottom: 4px; }
.ppc-drop b { font-size: 21px; }
.ppc-drop span { color: var(--muted); }
.ppc-drop small { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-top: 6px; }
.ppc-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 0; }
.ppc-badges span { font: 600 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.ppc-try { text-align: center; color: var(--muted); font-size: 15px; margin: 12px 0 0; }
.ppc-sample { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.ppc-out { margin-top: 24px; }
.ppc-result { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.ppc-preview { margin: 0; }
.ppc-preview img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.ppc-preview figcaption { font: 500 12px/1.4 var(--mono); color: var(--dim); margin-top: 8px; word-break: break-all; }
.ppc-verdict { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; border-left: 5px solid; background: #fff; }
.ppc-verdict.ppc-high { border-color: var(--red); background: #fdecea; }
.ppc-verdict.ppc-mid { border-color: #d98a00; background: #fff4dc; }
.ppc-verdict.ppc-ok { border-color: #2e8b57; background: #e6f4ea; }
.ppc-group { background: #fff; border: 1px solid var(--line); border-left-width: 5px; border-radius: 12px; padding: 12px 16px; margin-bottom: 10px; }
.ppc-group.ppc-high { border-left-color: var(--red); }
.ppc-group.ppc-mid { border-left-color: #d98a00; }
.ppc-group.ppc-low { border-left-color: var(--line); }
.ppc-group h3 { font-size: 16px; margin: 0 0 6px; letter-spacing: 0; }
.ppc-group dl { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 15px; }
.ppc-group dt { color: var(--dim); }
.ppc-group dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ppc-actions { margin-top: 16px; }
.ppc-actions .btn { font-size: 16px; }
.ppc-note { font-size: 14px; color: var(--muted); margin: 8px 0 0; }
.ppc-status { font-size: 15px; margin: 8px 0 0; }
@media (max-width: 640px) {
  .ppc-result { grid-template-columns: 1fr; }
  .ppc-preview img { max-height: 220px; }
  .ppc-group dl { grid-template-columns: 1fr; }
  .ppc-group dt { margin-top: 6px; }
}

/* /looks/: "All 18 looks at a glance" uses the same table style as the guides */
.looks-table { margin: 56px 0 8px; }
.looks-table table { border-collapse: collapse; width: 100%; font-size: 15.5px; min-width: 560px; background: #fff; }
.looks-table th, .looks-table td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text); }
.looks-table th { background: var(--bg-2); color: var(--dim); font-weight: 600; }
.looks-table tr:last-child td { border-bottom: 0; }
.looks-table td:first-child a { font-weight: 700; color: var(--ink); }
.looks-table a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* /duskfox/ (18 Oct 2026): a day/night page for a day/night game. Night navy and lantern gold from its
   screenshots; landscape screenshots, so its own fan, card grid, day/night table and shards. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gp-df { --g: #ffc53d; --g-ink: #2b2f86; --g-hi: #ffc53d; --g-soft: #ebe9f8; --g-cream: #fbf7ec; --g-deep: #191b4c; --g-hot: #9a5b00; }
.gp-df .gp-final { background: var(--g-deep); }
.gp-df .gp-final h2 { color: var(--g); }
.gp-fan-land { height: 470px; }
.gp-fan-land .gp-phone { width: 92%; top: 50%; }
.gp-fan-land .gp-phone img { border-radius: 14px; }
.gp-fan-land .gp-phone-0 { transform: translate(-58%, -88%) rotate(-4deg) scale(.82); }
.gp-fan-land .gp-phone-2 { transform: translate(-42%, -12%) rotate(4deg) scale(.82); }
.gp-fan-land .gp-phone-1 { transform: translate(-50%, -50%); }
.gp-fan-land:hover .gp-phone-0 { transform: translate(-62%, -94%) rotate(-6deg) scale(.82); }
.gp-fan-land:hover .gp-phone-2 { transform: translate(-38%, -6%) rotate(6deg) scale(.82); }
.gp-fan-land:hover .gp-phone-1 { transform: translate(-50%, -52%); }
.gp-fan-land .gp-phone-1 img { animation: none; }
.gp-dn table { border-collapse: collapse; width: 100%; min-width: 560px; background: #fff; font-size: 16px; }
.gp-dn th, .gp-dn td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.gp-dn tbody tr:last-child th, .gp-dn tbody tr:last-child td { border-bottom: 0; }
.gp-dn thead th { font-size: 15px; font-weight: 700; }
.gp-dn thead th:nth-child(2) { background: #fff3c4; color: #6b4300; }
.gp-dn thead th:nth-child(3) { background: var(--g-deep); color: #fff; }
.gp-dn td:nth-child(3) { background: #f1f0fb; }
.gp-dn tbody th { font-weight: 700; color: var(--text); }
.gp-dn-ico { display: inline-flex; vertical-align: -5px; margin-right: 8px; }
.gp-dn-day { color: #e0a000; }
.gp-dn-night { color: var(--g); }
.gp-lcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gp-lcard { background: #262a6e; border-radius: 18px; padding: 10px 10px 18px; transition: transform .25s; }
.gp-lcard:hover { transform: translateY(-5px); }
.gp-lcard figure { margin: 0 0 12px; }
.gp-lcard img { display: block; width: 100%; height: auto; border-radius: 11px; }
.gp-lcard .gp-no { display: inline-block; margin: 0 8px; padding: 3px 9px; border-radius: 999px; background: rgba(255,197,61,.16); color: var(--g); font: 600 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.gp-lcard h3 { color: #fff; font-size: 20px; margin: 8px 8px 4px; }
.gp-lcard p:last-child { margin: 0 8px; font-size: 15px; color: #c9c7ec; }
.gp-shards { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 22px; }
.gp-shard { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--g-deep); color: var(--g); box-shadow: 0 0 0 6px #fff, 0 0 40px rgba(255,197,61,.45); }
.gp-shards li:nth-child(2) .gp-shard { transform: translateY(-14px); }
.app-card.app-df { --app: #2b2f86; --app-soft: #ebe9f8; }
/* /smartshelf/ (26 Oct 2026): the icon's yellow and charcoal on the screenshots' cream. Yellow is only ever a
   fill or a highlight on charcoal; text in the theme colour uses the darker olive (--g-ink). */
.gp-ss { --g: #fdd600; --g-ink: #6e5f00; --g-hi: #fdd600; --g-soft: #fff4b8; --g-cream: #faf7f2; --g-deep: #262b35; --g-hot: #7a5a00; }
.gp-ss .gp-final { background: var(--g-deep); }
.gp-ss .gp-final h2 { color: var(--g); }
.gp-ss .gp-final p { color: #e6e3dc; }
.gp-ss .gp-dark { background: var(--g-deep); }
.gp-ss .gp-modes span, .gp-ss .gp-dark .gp-head p:not(.gp-kicker) { color: #d9d6cf; }
.gp-ss .gp-dark .gp-kicker { color: var(--g); }
.gp-ss .gp-dark h2 em { color: var(--g); }
.gp-ss .gp-dark .gp-after a { color: #fff; }
@media (min-width: 1001px) { .gp-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; } }
.app-card.app-ss { --app: #6e5f00; --app-soft: #fff4b8; }
/* /spellora/ (29 Oct 2026): the game's charcoal, grid green and amber. */
.gp-sp { --g: #27a06a; --g-ink: #1b6b47; --g-hi: #3dbb7d; --g-soft: #e3f3ea; --g-cream: #f3f6f4; --g-deep: #1b2025; --g-hot: #a8780a; }
.gp-sp .gp-final { background: var(--g-deep); }
.gp-sp .gp-final h2 { color: var(--g-hi); }
.gp-sp .gp-dark .gp-kicker { color: #f2c14e; }
.gp-sp .gp-modes span, .gp-sp .gp-dark .gp-after { color: #c9cfd3; }
.gp-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; counter-reset: step; }
.gp-steps li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; counter-increment: step; }
.gp-steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; align-self: center; font: 700 15px/1 var(--mono); color: var(--g-ink); background: var(--g-soft); border-radius: 12px; width: 40px; height: 40px; display: grid; place-items: center; }
.gp-steps b { font-size: 17px; }
.gp-steps span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.gp-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gp-legend li { display: grid; grid-template-columns: 44px auto 1fr; column-gap: 12px; align-items: center; }
.gp-legend b { font-size: 15px; }
.gp-legend li > span:last-child { color: var(--muted); font-size: 15px; }
.gp-sq { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 9px; font: 800 20px/1 var(--sans, inherit); color: #fff; }
.gp-sq-green { background: #1b6b47; }
.gp-sq-amber { background: #f2c14e; color: #1b2025; }
.gp-sq-grey { background: #3a4047; }
.app-card.app-sp { --app: #1b6b47; --app-soft: #e3f3ea; }
@media (max-width: 1000px) { .gp-lcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .gp-fan-land { height: min(70vw, 400px); } }
@media (max-width: 560px) {
  .gp-lcards { grid-template-columns: 1fr; }
  .gp-shard { width: 72px; height: 72px; }
  .gp-shard svg { width: 30px; height: 30px; }
}
.gp-dark .gp-head p:not(.gp-kicker) { color: #cfc8ea; }
@media (max-width: 560px) {
  .gp-dn table { min-width: 0; font-size: 14px; }
  .gp-dn th, .gp-dn td { padding: 10px 9px; }
  .gp-dn-ico { display: none; }
}

/* Blinq, the Blinqdroid droid. CSS-only behaviour for the inline SVG from blinq.py. */
.bq { display: inline-block; vertical-align: middle; overflow: visible; }
.bq .all, .bq .head, .bq .eyes, .bq .arm, .bq .prop, .bq .halo, .bq .zz, .bq .spark { transform-box: fill-box; }
.bq .all { transform-origin: 50% 100%; }
.bq .head { transform-origin: 50% 100%; }
.bq .eyes { transform-origin: 50% 50%; }
.bq .arm-l { transform-origin: 100% 0; }
.bq .arm-r { transform-origin: 0 0; }
.bq .halo { transform-origin: 50% 50%; }
.bq .eyes-happy { opacity: 0; }
.bq-happy .eyes-happy { opacity: 1; }

/* idle: bob, blink, glance, breathing light; hover it and it waves */
.bq-idle .all { animation: bq-bob 3.2s ease-in-out infinite; }
.bq-idle .eyes-open { animation: bq-blink 4.4s infinite, bq-glance 9s infinite; }
.bq-idle .halo, .bq-happy .halo { animation: bq-halo 2.2s ease-in-out infinite; }
.bq-idle:hover .eyes-open, a:hover .bq-idle .eyes-open { opacity: 0; animation: none; }
.bq-idle:hover .eyes-happy, a:hover .bq-idle .eyes-happy { opacity: 1; }
.bq-idle:hover .arm-r, a:hover .bq-idle .arm-r { animation: bq-wave 1.2s ease-in-out infinite; }

/* happy: hop, wave, sparks */
.bq-happy .all { animation: bq-hop 1.4s ease-in-out infinite; }
.bq-happy .arm-r { animation: bq-wave 1.4s ease-in-out infinite; }
.bq-happy .spark { animation: bq-spark 1.4s ease-in-out infinite; transform-origin: 50% 50%; }

/* thinking: tilt, loading dots */
.bq-think .head { animation: bq-tilt 3s ease-in-out infinite; }
.bq-think .d1 { animation: bq-dot 1.2s infinite; }
.bq-think .d2 { animation: bq-dot 1.2s .2s infinite; }
.bq-think .d3 { animation: bq-dot 1.2s .4s infinite; }

/* at work: tapping on the prop */
.bq-work .arm-l { animation: bq-tap 1s ease-in-out infinite; }
.bq-work .prop { animation: bq-tapblock 1s ease-in-out infinite; transform-origin: 50% 100%; }

/* asleep: slow breathing, zz, light off */
.bq-sleep .all { animation: bq-breathe 4s ease-in-out infinite; }
.bq-sleep .zz { animation: bq-zz 3s ease-in-out infinite; transform-origin: 50% 100%; }
.bq-sleep .halo { opacity: 0; }

@keyframes bq-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bq-blink { 0%, 92%, 100% { transform: scaleY(1); } 95%, 97% { transform: scaleY(.1); } }
@keyframes bq-glance { 0%, 40%, 62%, 100% { translate: 0 0; } 46%, 56% { translate: 4px 1px; } }
@keyframes bq-halo { 0%, 100% { transform: scale(.8); opacity: .15; } 50% { transform: scale(1.25); opacity: .4; } }
@keyframes bq-hop { 0%, 100% { transform: translateY(0) scale(1,1); } 30% { transform: translateY(0) scale(1.04,.94); } 60% { transform: translateY(-12px) scale(.98,1.04); } }
@keyframes bq-wave { 0%, 100% { transform: rotate(-60deg); } 50% { transform: rotate(-95deg); } }
@keyframes bq-spark { 0%, 100% { opacity: .3; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes bq-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes bq-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes bq-tap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg); } }
@keyframes bq-tapblock { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes bq-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02, .985); } }
@keyframes bq-zz { 0% { transform: translateY(4px); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
/* walking: legs and arms swing, body jogs */
.bq .leg { transform-box: fill-box; transform-origin: 50% 0; }
.bq .look { transition: translate .25s ease-out; }
.bq-walk .leg-l, .bq-roam.walking .leg-l { animation: bq-step .42s ease-in-out infinite alternate; }
.bq-walk .leg-r, .bq-roam.walking .leg-r { animation: bq-step .42s ease-in-out infinite alternate-reverse; }
.bq-walk .arm-l, .bq-roam.walking .arm-l { animation: bq-swing .42s ease-in-out infinite alternate-reverse; }
.bq-walk .arm-r, .bq-roam.walking .arm-r { animation: bq-swing .42s ease-in-out infinite alternate; }
.bq-walk .all, .bq-roam.walking .all { animation: bq-jog .21s ease-in-out infinite alternate !important; }
@keyframes bq-step { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes bq-swing { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }

/* roaming: the droid lives on the floor of the viewport and walks along it (blinq.js) */
.bq-roam { position: absolute; left: 0; top: 0; z-index: 50; width: 66px; height: 72px; will-change: transform; cursor: pointer; transition: opacity .4s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bq-roam.resting { opacity: .72; }
.bq .pin { opacity: 0; transition: opacity .2s; }
.bq-roam.pinned { position: fixed; }
.bq-roam.pinned .pin { opacity: 1; }
.bq-roam .bq-hint button { display: inline-block; margin-top: 7px; background: #ffc72c; color: #15130f; border: 0; font: 600 13px "Inter Tight", system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.bq-roam .bq-hint button + button { background: transparent; color: #f3eee4; border: 1px solid rgba(255,255,255,.35); margin-left: 6px; }
.bq-roam:hover { opacity: 1; }
.bq .jet { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; transition: opacity .15s; }
.bq .leg { transition: transform .25s ease-out; }
.bq-roam.flying .leg-l { transform: rotate(-50deg); animation: none !important; }
.bq-roam.flying .leg-r { transform: rotate(50deg); animation: none !important; }
.bq-roam.flying .jet { opacity: 1; animation: bq-jet .12s ease-in-out infinite alternate; }
.bq-roam.flying .all { animation: bq-sway 1.1s ease-in-out infinite alternate !important; }
.bq-roam.flying .arm-l { animation: none !important; transform: rotate(-30deg); }
.bq-roam.flying .arm-r { animation: none !important; transform: rotate(30deg); }
/* sitting on a ledge: legs out in front, head turning now and then */
.bq-roam.sitting .leg-l { transform: rotate(-78deg); animation: none !important; }
.bq-roam.sitting .leg-r { transform: rotate(-78deg); animation: none !important; }
.bq-roam.sitting .all { animation: none !important; transform: translateY(14px); }
.bq-roam.sitting .head { animation: bq-neck 7s ease-in-out infinite; }
.bq-roam.sitting .arm-l { transform: rotate(12deg); }
.bq-roam.sitting .arm-r { transform: rotate(-12deg); }
.bq-roam.shy .all { transition: transform .2s; }
@keyframes bq-neck { 0%, 18%, 100% { transform: rotate(0); } 8% { transform: rotate(-7deg); } 42%, 50% { transform: rotate(6deg) translateY(-1px); } 72%, 80% { transform: rotate(-3deg); } }
@keyframes bq-jet { from { transform: scaleY(.7); } to { transform: scaleY(1.15); } }
@keyframes bq-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.bq-roam svg { width: 100%; height: 100%; overflow: visible; }
.bq-roam.face-left svg { transform: scaleX(-1); }
.bq-roam.parked { width: 44px; height: 48px; }
.bq-roam .bq-hint { position: absolute; left: 50%; bottom: calc(100% + 10px); translate: -50% 0; width: max-content; max-width: min(240px, calc(100vw - 24px)); background: #15130f; color: #f3eee4; font: 500 13px/1.4 "Inter Tight", system-ui, sans-serif; padding: 9px 12px; border-radius: 12px; opacity: 0; transition: opacity .25s, translate .25s; pointer-events: none; box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.bq-roam .bq-hint::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 7px solid transparent; border-top-color: #15130f; }
.bq-roam.face-left .bq-hint { transform: none; }
.bq-roam.below .bq-hint { bottom: auto; top: calc(100% + 10px); }
.bq-roam.below .bq-hint::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #15130f; }
.bq-roam.edge-r .bq-hint { left: auto; right: 0; translate: 0 0; }
.bq-roam.edge-r .bq-hint::after { left: auto; right: 22px; translate: 0 0; }
.bq-roam.edge-l .bq-hint { left: 0; translate: 0 0; }
.bq-roam.edge-l .bq-hint::after { left: 22px; translate: 0 0; }
.bq-roam.say .bq-hint { opacity: 1; pointer-events: auto; }
.bq-roam .bq-hint a { display: inline-block; margin-top: 7px; background: #ffc72c; color: #15130f; text-decoration: none; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.bq-roam .bq-hint a + a { background: transparent; color: #f3eee4; border: 1px solid rgba(255,255,255,.35); margin-left: 6px; }
.bq-roam .bq-hint .bq-x { position: absolute; top: 2px; right: 6px; color: #a9a49a; font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.bq-roam .bq-hint .bq-x:hover { color: #fff; }
@media (max-width: 900px) { .bq-roam { width: 54px; height: 60px; } }

/* ---- life: small acts blinq.js plays now and then (one at a time), and reactions ---- */
.bq .ant, .bq .emote, .bq .yawn, .bq .eyes-open { transform-box: fill-box; }
.bq .ant { transform-origin: 50% 100%; }
.bq .emote { opacity: 0; transform-origin: 50% 100%; pointer-events: none; }
.bq .yawn { opacity: 0; transform-origin: 50% 50%; }
/* walking: head bobs, body leans into the stride */
.bq-roam.walking .head { animation: bq-headbob .21s ease-in-out infinite alternate; }
@keyframes bq-headbob { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes bq-jog { from { transform: translateY(0) rotate(4deg); } to { transform: translateY(-3px) rotate(4deg); } }
/* landing: squash, then settle into the seat */
.bq-roam.sitting.act-land .all { animation: bq-land .42s ease-out !important; }
@keyframes bq-land { 0% { transform: translateY(8px) scale(1.14, .82); } 55% { transform: translateY(14px) scale(.96, 1.05); } 100% { transform: translateY(14px) scale(1); } }
/* kicking legs over the ledge */
.bq-roam.sitting.act-kick .leg-l { animation: bq-kick-l .4s ease-in-out 6 alternate !important; }
.bq-roam.sitting.act-kick .leg-r { animation: bq-kick-r .4s ease-in-out 6 alternate !important; }
@keyframes bq-kick-l { from { transform: rotate(-26deg); } to { transform: rotate(14deg); } }
@keyframes bq-kick-r { from { transform: rotate(14deg); } to { transform: rotate(-26deg); } }
/* antenna boing (also part of surprise and of being clicked) */
.bq-roam.act-boing .ant, .bq-roam.act-bang .ant { animation: bq-boing 1s ease-out; }
@keyframes bq-boing { 0% { transform: rotate(0); } 12% { transform: rotate(-22deg); } 28% { transform: rotate(17deg); } 44% { transform: rotate(-11deg); }
  60% { transform: rotate(6deg); } 76% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
/* reading along: head dips toward the page */
.bq-roam.sitting.act-read .head { animation: bq-read 3.2s ease-in-out !important; }
@keyframes bq-read { 0%, 100% { transform: rotate(0); } 18%, 82% { transform: rotate(9deg) translateY(3px); } 50% { transform: rotate(6deg) translateY(3px); } }
/* humming: a note floats up, head sways */
.bq-roam.act-hum .em-note { animation: bq-float 2.4s ease-out; }
.bq-roam.sitting.act-hum .head { animation: bq-hum .6s ease-in-out 4 alternate !important; }
@keyframes bq-hum { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes bq-float { 0% { opacity: 0; transform: translate(-4px, 8px) scale(.5); } 18% { opacity: 1; transform: translate(0, 0) scale(1); }
  70% { opacity: 1; } 100% { opacity: 0; transform: translate(8px, -26px) scale(1) rotate(10deg); } }
/* scratching its head (with the thinking face from blinq.js) */
.bq-roam.sitting.act-scratch .arm-l { animation: bq-scratch 1.7s ease-in-out !important; }
@keyframes bq-scratch { 0%, 100% { transform: rotate(12deg); } 22% { transform: rotate(122deg); } 32% { transform: rotate(110deg); } 42% { transform: rotate(124deg); }
  52% { transform: rotate(110deg); } 62% { transform: rotate(123deg); } 84% { transform: rotate(30deg); } }
/* waving hello */
.bq-roam.act-wave .arm-r { animation: bq-wave .45s ease-in-out 6 alternate !important; }
/* surprise: eyes go wide, a "!" pops up */
.bq-roam.act-bang .em-bang { animation: bq-pop .9s ease-out; }
.bq-roam.act-bang .eyes-open { animation: bq-wide .9s ease-out !important; transform-origin: 50% 50%; }
@keyframes bq-pop { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; transform: scale(1.15); } 40%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes bq-wide { 0%, 100% { transform: scale(1); } 20%, 60% { transform: scale(1.22, 1.32); } }
/* a heart, for a Play click */
.bq-roam.act-heart .em-heart { animation: bq-float 1.8s ease-out; }
/* celebrating: arms up, hops, a heart */
.bq-roam.act-cheer .all { animation: bq-hop .7s ease-in-out 3 !important; }
.bq-roam.act-cheer .arm-l { animation: bq-cheer-l .35s ease-in-out 6 alternate !important; }
.bq-roam.act-cheer .arm-r { animation: bq-cheer-r .35s ease-in-out 6 alternate !important; }
.bq-roam.act-cheer .em-heart { animation: bq-float 2s ease-out .3s; }
@keyframes bq-cheer-l { from { transform: rotate(72deg); } to { transform: rotate(98deg); } }
@keyframes bq-cheer-r { from { transform: rotate(-72deg); } to { transform: rotate(-98deg); } }
/* yawning before a nap, stretching on waking */
.bq-roam.act-yawn .yawn { animation: bq-yawn 2s ease-in-out; }
.bq-roam.act-yawn .eyes-open { animation: bq-squint 2s ease-in-out !important; transform-origin: 50% 50%; }
.bq-roam.act-yawn .head { animation: bq-yawnhead 2s ease-in-out !important; }
@keyframes bq-yawn { 0%, 100% { opacity: 0; transform: scale(.4); } 25%, 70% { opacity: 1; transform: scale(1.1, 1.35); } }
@keyframes bq-squint { 0%, 100% { transform: scaleY(1); } 25%, 70% { transform: scaleY(.25); } }
@keyframes bq-yawnhead { 0%, 100% { transform: rotate(0); } 30%, 65% { transform: rotate(-8deg) translateY(-2px); } }
.bq-roam.act-stretch .arm-l { animation: bq-cheer-l .6s ease-in-out 2 alternate !important; }
.bq-roam.act-stretch .arm-r { animation: bq-cheer-r .6s ease-in-out 2 alternate !important; }
.bq-roam.act-stretch .all { animation: bq-stretch 1.2s ease-in-out !important; }
@keyframes bq-stretch { 0%, 100% { transform: scale(1); } 40%, 60% { transform: scale(.96, 1.08); } }

/* ---- tricks (blinq.js): dizzy, the photo, the backflip, peekaboo, being carried ---- */
.bq .eyes-dizzy { opacity: 0; }
.bq-roam.act-dizzy .eyes-open, .bq-roam.act-dizzy .eyes-happy { opacity: 0 !important; animation: none !important; }
.bq-roam.act-dizzy .eyes-dizzy { opacity: 1; animation: bq-spin 1s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.bq-roam.act-dizzy .head { animation: bq-woozy .5s ease-in-out infinite alternate !important; }
@keyframes bq-spin { to { transform: rotate(360deg); } }
@keyframes bq-woozy { from { transform: rotate(-8deg) translateX(-2px); } to { transform: rotate(8deg) translateX(2px); } }
.bq .cam { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.bq .cam-flash { opacity: 0; }
.bq-roam.act-snap .cam { animation: bq-cam 2.2s ease-out; }
.bq-roam.act-snap .cam-flash { animation: bq-camflash 2.2s linear; }
.bq-roam.act-snap .arm-l { animation: bq-hold-l 2.2s ease-out !important; }
.bq-roam.act-snap .arm-r { animation: bq-hold-r 2.2s ease-out !important; }
@keyframes bq-cam { 0% { opacity: 0; transform: translateY(40px) scale(.6); } 18%, 82% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(30px) scale(.7); } }
@keyframes bq-camflash { 0%, 44% { opacity: 0; } 46%, 52% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes bq-hold-l { 0%, 100% { transform: rotate(12deg); } 18%, 82% { transform: rotate(140deg); } }
@keyframes bq-hold-r { 0%, 100% { transform: rotate(-12deg); } 18%, 82% { transform: rotate(-140deg); } }
.bq-shutter { position: fixed; inset: 0; z-index: 49; background: #fff; pointer-events: none; opacity: 0; animation: bq-shutter .5s ease-out; }
@keyframes bq-shutter { 0% { opacity: 0; } 15% { opacity: .55; } 100% { opacity: 0; } }
.bq-roam.act-flip .all { animation: bq-flip .9s cubic-bezier(.3, .7, .4, 1) !important; transform-origin: 50% 60%; }
@keyframes bq-flip { 0% { transform: translateY(0) rotate(0); } 15% { transform: translateY(4px) scale(1.06, .9) rotate(0); }
  55% { transform: translateY(-46px) rotate(-200deg); } 85% { transform: translateY(-4px) rotate(-360deg); } 100% { transform: translateY(0) rotate(-360deg); } }
.bq-roam.peek svg { rotate: -24deg; transition: rotate .4s; }
.bq-roam.carried { cursor: grabbing; transition: none; }
.bq-roam.carried .all { animation: bq-dangle .5s ease-in-out infinite alternate !important; }
.bq-roam.carried .leg-l { animation: bq-step .3s ease-in-out infinite alternate !important; }
.bq-roam.carried .leg-r { animation: bq-step .3s ease-in-out infinite alternate-reverse !important; }
@keyframes bq-dangle { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) {
  .bq-shutter { animation-duration: .7s; animation-name: bq-shutter-soft; }
  @keyframes bq-shutter-soft { 0%, 100% { opacity: 0; } 30% { opacity: .2; } }
  .bq-roam.act-flip .all, .bq-roam.act-dizzy .eyes-dizzy { animation: none !important; }
}

/* Reduced motion: Blinq is small and its habits are small (blinks, glances, antenna, kicks, head turns),
   so those stay. Hopping and the fast jet flicker are the kind of motion the setting is for: those stop. */
@media (prefers-reduced-motion: reduce) {
  .bq-happy .all, .bq-roam.act-cheer .all { animation: none !important; }
  .bq-roam.flying .jet, .bq-roam.flying .all { animation: none !important; }
}