/* Layout: a notebook laid open. Stippled paper bands alternate with the app's graphite library. */
:root {
  --paper: #fbf7ed;
  --sheet: #f4ecdc;
  --ink: #222224;
  --soft: #5f5a52;
  --graphite: #262628;
  --cream: #f7f0e3;
  --accent: #c23a22;
  --serif: ui-serif, "New York", "Source Serif 4", Georgia, serif;
  --sans: -apple-system, system-ui, "SF Pro Text", "Source Sans 3", "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.125rem/1.6 var(--sans);
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.12; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 7vw, 5rem); line-height: .98; letter-spacing: -.015em; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
main { overflow-x: clip; }
main > .wrap { padding-block: clamp(56px, 8vw, 104px); }

/* Sketched icons: pencil lines drawn twice, slightly off, like a real hand. */
.sk { width: 56px; height: 56px; flex: none; overflow: visible; filter: url(#pencil); }
.sk g { fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sk .ink { stroke: var(--ink); }
.sk .red { stroke: var(--accent); }
.sk .ghost { opacity: .5; stroke-width: 1.1; }
.dark .sk .ink { stroke: var(--cream); }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 1.375rem var(--serif); }
.brand img { width: 44px; height: 44px; border-radius: 22.4%; }
.links { display: flex; gap: 22px; }
.links a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1rem; }
.links a:hover { color: var(--accent); }

.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.herotext { display: grid; gap: 22px; min-width: 0; }
.eyebrow { font-weight: 600; font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.lead { font-size: clamp(1.1875rem, 2vw, 1.375rem); line-height: 1.5; color: var(--soft); max-width: 34em; }
.lead.narrow { margin-top: 14px; }
.soon { display: flex; align-items: center; gap: 14px; font-size: 1rem; line-height: 1.35; color: var(--soft); }
.soon strong { color: var(--ink); font-size: 1.125rem; font-weight: 600; }
.soon img { border-radius: 22.4%; box-shadow: 0 4px 10px rgb(34 34 36 / .18); }

/* The folded iPhone Duo: flat hinge down the left, big round corners on the right. */
.duo {
  position: relative;
  display: block;
  background: linear-gradient(135deg, #8d8e93, #4c4d52 45%, #2f3034);
  padding: 1.3%;
  border-radius: 1.6% 13.5% 13.5% 1.6% / 1.1% 9.4% 9.4% 1.1%;
  box-shadow: 0 22px 46px rgb(34 34 36 / .32);
}
.duo img { width: 100%; background: #000; box-shadow: 0 0 0 2px #000; border-radius: 1.2% 13% 13% 1.2% / .85% 9% 9% .85%; }
/* The two halves of the phone meet at the hinge. */
.duo::before { content: ""; position: absolute; left: -2.6%; top: 1%; bottom: 1%; width: 3.4%; background: linear-gradient(90deg, #3a3b3f, #6f7075 60%, #2f3034); border-radius: 4px 0 0 4px; }
.duo .key { position: absolute; background: #55565b; border-radius: 2px; }
.duo .key.a { top: -.55%; left: 46%; width: 13%; height: .7%; }
.duo .key.b { top: -.55%; left: 62%; width: 11%; height: .7%; }
.duo .key.c { right: -1%; top: 29%; width: 1.3%; height: 16%; }
.phones { position: relative; margin: 0; min-width: 0; padding-bottom: 8%; }
.phones .back { width: 60%; transform: rotate(-5deg); }
.phones .front { position: absolute; width: 68%; right: 2%; top: 13%; transform: rotate(3deg); }
.scrawl { position: relative; white-space: nowrap; }
.scrawl svg { position: absolute; left: 0; bottom: -.16em; width: 100%; height: .22em; overflow: visible; filter: url(#pencil); }
.scrawl path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.duofold { display: grid; gap: 34px; }
.duohead { display: flex; gap: 18px; align-items: center; }
.duohead .sk { width: 84px; height: 84px; }
.duohead .eyebrow { margin-bottom: 6px; }
.duolist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.duolist p { color: var(--soft); font-size: 1rem; line-height: 1.45; margin-top: 8px; }
.fine { font-size: .875rem; opacity: .6; margin-top: 10px; }
.foot .small a { text-decoration: underline; }

.foldrow { display: grid; gap: 36px; }
.foldhead { display: grid; gap: 12px; max-width: 38em; }
.folds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 4vw, 44px); }
.folds li { position: relative; display: grid; gap: 8px; min-width: 0; align-content: start; }
.folds .duo { width: 100%; margin-bottom: 10px; }
.folds p { color: var(--soft); font-size: 1rem; }
.withpencil { position: relative; min-width: 0; }
.pencil { position: absolute; height: auto; filter: drop-shadow(10px 14px 10px rgb(34 34 36 / .3)); pointer-events: none; }
.heropen { width: 22px; left: 2%; top: -2%; transform: rotate(-20deg); }
.rowpen { width: 18px; right: 6%; top: -2%; transform: rotate(20deg); }
.storypen { width: 18px; right: -4%; top: 2%; transform: rotate(20deg); }

.band.paper {
  background-color: var(--sheet);
  background-image: radial-gradient(circle, rgb(110 100 84 / .28) 1px, transparent 1.2px);
  background-size: 24px 24px;
  padding-block: clamp(56px, 8vw, 96px);
}
.features { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 36px; }
.features li { display: flex; gap: 14px; min-width: 0; }
.features p { font-size: 1rem; line-height: 1.45; color: var(--soft); margin-top: 4px; }

.story { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(32px, 7vw, 88px); align-items: center; }
.story > div { display: grid; gap: 16px; min-width: 0; max-width: 34em; }
.story .sk { width: 72px; height: 72px; }

.band.dark { background: var(--graphite); color: var(--cream); padding-block: clamp(56px, 8vw, 96px); }
.dark p { color: rgb(247 240 227 / .82); }

.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.plan { background: var(--sheet); border-radius: 0 28px 28px 0; padding: 32px; min-width: 0; }
.plan.plus { background: var(--graphite); color: var(--cream); }
.plan.plus .sk .ink { stroke: var(--cream); }
.plan.plus .sk .red { stroke: #f07a60; }
.plan h3 { font-size: 1.625rem; margin-bottom: 16px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.iconlist li { display: flex; align-items: center; gap: 14px; }
.iconlist .sk { width: 42px; height: 42px; }

.promise { display: flex; gap: 28px; align-items: center; }
.promise .sk { width: 96px; height: 96px; }
.promise p { margin-top: 12px; color: var(--soft); max-width: 36em; }

.doc { max-width: 760px; display: grid; gap: 14px; }
.doc h1 { font-size: clamp(2.5rem, 6vw, 3.75rem); }
.doc h2 { font-size: 1.5rem; margin-top: 18px; }
.doc ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.meta { color: var(--soft); font-size: 1rem; }
.faq { margin-top: 18px; display: grid; }
details { border-top: 1px solid rgb(34 34 36 / .16); padding-block: 14px; }
details:last-child { border-bottom: 1px solid rgb(34 34 36 / .16); }
summary { cursor: pointer; font: 700 1.1875rem var(--serif); }
details p { margin-top: 10px; color: var(--soft); }

.foot { background: var(--graphite); color: var(--cream); padding-block: 40px; }
.footgrid { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot .tag { font: 700 1.375rem var(--serif); }
.foot .small { font-size: 1rem; opacity: .75; margin-top: 4px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot a { color: var(--cream); font-size: 1rem; }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .phones { max-width: 460px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .folds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .duolist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story { grid-template-columns: minmax(0, 1fr); }
  .story .duo { max-width: 280px; }
}
@media (max-width: 600px) {
  .features, .plans, .duolist { grid-template-columns: minmax(0, 1fr); }
  .folds { grid-template-columns: minmax(0, 300px); justify-content: center; gap: 28px; }
  .promise { flex-direction: column; align-items: flex-start; }
  .plan { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The opened Duo: rounded all round, with the fold down the middle. */
.duo.open { border-radius: 7.4% / 10.5%; padding: .9%; }
.duo.open img { border-radius: 6.9% / 9.8%; box-shadow: 0 0 0 2px #000; }
.duo.open::before { left: 50%; top: 0; bottom: 0; width: .3%; background: rgb(0 0 0 / .16); border-radius: 0; z-index: 1; }
.duo.open .key { display: none; }
.phones { aspect-ratio: 1 / .92; padding-bottom: 0; }
.phones .open.back { width: 100%; transform: rotate(-2deg); }
.phones .front { width: 38%; left: -4%; right: auto; top: 37%; transform: rotate(-5deg); }
.heropen { left: auto; right: 2%; top: -6%; transform: rotate(16deg); }
.openrow { display: grid; gap: 36px; }
.openrow .foldhead .lead { color: rgb(247 240 227 / .82); }
.openrow .duo { max-width: 900px; width: 100%; justify-self: center; }

/* A small working notebook. */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(32px, 7vw, 88px); align-items: center; }
.demostage { min-width: 0; }
.demophone { width: 100%; }
.screen { position: relative; container-type: inline-size; aspect-ratio: 699 / 1017; overflow: hidden; background: #000; border-radius: 1.2% 12.5% 12.5% 1.2% / .85% 8.7% 8.7% .85%; perspective: 1400px; }
.sheet { position: absolute; inset: 0; background-color: #fbf7ed; }
.sheet.dots { background-image: radial-gradient(circle, rgb(110 100 84 / .5) 1px, transparent 1.3px); background-size: 6.6% 4.54%; }
.sheet canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.printed { position: absolute; left: 0; width: 100%; top: 8.9%; pointer-events: none; font: 600 2.1cqw/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #8d8779; }
.printed .row { height: 5.2cqw; display: flex; justify-content: flex-end; padding: .8cqw 18.9% 0 0; border-bottom: 1px solid rgb(110 100 84 / .22); }
.printed .row.start { box-shadow: 0 -1px 0 rgb(110 100 84 / .6); }
.printed .frame { aspect-ratio: 16 / 6.4; margin-left: 2.6%; margin-right: 2.6%; border: 1px solid rgb(110 100 84 / .65); border-radius: 1cqw; margin-top: 4cqw; }
.printed .frame:first-child { margin-top: 0; }
.cam { position: absolute; width: 8%; aspect-ratio: 1; top: 4.7%; right: 6.3%; border-radius: 50%; background: #000; z-index: 3; }
.demorail, .demobar { position: absolute; z-index: 1; display: flex; background: rgb(251 247 237 / .86); box-shadow: 0 0 0 1px rgb(110 100 84 / .22), 0 2cqw 5cqw rgb(34 34 36 / .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.demorail { right: 4.6%; top: 16%; width: 11.4cqw; flex-direction: column; border-radius: 6cqw; }
.demorail button { aspect-ratio: 1; }
.demorail .aa { font: 500 5cqw var(--sans); }
.demotexts { position: absolute; inset: 0; pointer-events: none; }
.demotext { position: absolute; pointer-events: auto; touch-action: none; cursor: grab; max-width: 76%; }
.demotext .words { min-width: 3em; min-height: 1.3em; padding: 1.5cqw 2.5cqw; font: 400 4.6cqw/1.3 var(--serif); color: var(--ink); outline: none; white-space: pre-wrap; }
.demotext .words[contenteditable="plaintext-only"] { cursor: text; box-shadow: inset 0 0 0 1px #d8412f; border-radius: 2cqw; }
.demotext.on .words { outline: 1.5px dashed #d8412f; border-radius: 2cqw; }
.demotext .knob { display: none; position: absolute; left: 50%; top: -11cqw; width: 8cqw; height: 8cqw; margin-left: -4cqw; border-radius: 50%; background: #d8412f; cursor: grab; }
.demotext .knob::after { content: "\21BB"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 700 4.6cqw var(--sans); font-style: normal; }
.demotext.on .knob { display: block; }
.demobar { left: 5.5%; right: 5.5%; bottom: 3.8%; height: 11.4cqw; border-radius: 6cqw; padding: 0 1.5cqw; justify-content: space-between; }
.demorail button, .demobar button { flex: 1; min-width: 0; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 50%; }
.demorail svg, .demobar svg { width: 6cqw; height: 6cqw; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.demobar button.on { color: #d8412f; }
.demobar button:disabled { opacity: .3; cursor: default; }
.demobar .well i { display: block; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; box-shadow: 0 0 0 .5cqw #fbf7ed, 0 0 0 1.1cqw #8d8779; }
.demobar .well[aria-expanded="true"] i { box-shadow: 0 0 0 .5cqw #fbf7ed, 0 0 0 1.1cqw #d8412f; }
.demorail button:focus-visible, .demobar button:focus-visible, .demopop button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.demopop { position: absolute; z-index: 2; background: #fffdf7; border-radius: 6cqw; box-shadow: 0 0 0 1px rgb(110 100 84 / .16), 0 4cqw 10cqw rgb(34 34 36 / .22); }
.demopop[hidden] { display: none; }
.demomenu { right: 18%; top: 16%; width: 48cqw; padding: 2cqw; display: grid; }
.demomenu button { font: 500 4.4cqw var(--sans); color: var(--ink); text-align: left; background: none; border: 0; border-radius: 3cqw; padding: 0 3.5cqw; min-height: 11cqw; cursor: pointer; }
.demomenu button.on { color: #d8412f; font-weight: 600; }
.tin { left: 5.5%; right: 5.5%; bottom: 13%; padding: 2.5cqw; display: flex; flex-wrap: wrap; gap: 2cqw; justify-content: center; }
.tin button, .tin label { width: 8.6cqw; height: 8.6cqw; padding: 0; border: 1px solid rgb(34 34 36 / .2); border-radius: 50%; cursor: pointer; background: var(--c); }
.tin button.on { outline: 2px solid var(--ink); outline-offset: 2px; }
.tin label { position: relative; overflow: hidden; background: conic-gradient(red, orange, yellow, green, cyan, blue, purple, red); }
.tin input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.democover { position: absolute; inset: 0; z-index: 4; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: left center; transition: transform .8s cubic-bezier(.42, .02, .2, 1), opacity .25s .55s; }
.democover img { width: 100%; height: 100%; }
.democover:hover { transform: rotateY(-7deg); }
.democover:focus-visible { outline: 3px solid var(--accent); outline-offset: -5px; }
[data-state="open"] .democover { transform: rotateY(-115deg); opacity: 0; pointer-events: none; }
@media (max-width: 760px) {
  .demo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .demostage { width: 100%; max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) { .democover { transition: opacity .2s; } .democover:hover { transform: none; } }

.herotext .lead { margin-top: 14px; }
.openrow .duo.open::before { display: none; }

.note { display: grid; gap: 16px; max-width: 40em; }
.note p:not(.eyebrow) { font-size: 1.125rem; }
.note .sign { font-family: var(--serif); font-style: italic; font-size: 1.375rem; }

/* iPhone 18 Pro beside the Duo: thin even bezels and a smaller Dynamic Island. */
.iphone { position: relative; display: block; padding: 1.5%; background: linear-gradient(135deg, #8d8e93, #4c4d52 45%, #2f3034); border-radius: 14.5% / 6.8%; box-shadow: 0 22px 46px rgb(34 34 36 / .32); }
.iphone img { width: 100%; background: #000; box-shadow: 0 0 0 3px #000; border-radius: 13% / 6%; }
.iphone .island { position: absolute; z-index: 1; left: 50%; top: 2.5%; width: 21%; height: 2.5%; background: #000; border-radius: 99px; transform: translateX(-50%); }
.iphone .key { position: absolute; background: #55565b; border-radius: 2px; }
.iphone .key.a { left: -1%; top: 18%; width: 1.3%; height: 5%; }
.iphone .key.b { left: -1%; top: 25%; width: 1.3%; height: 5%; }
.iphone .key.c { right: -1%; top: 24%; width: 1.3%; height: 8%; }
.folds .iphone { width: 68%; margin: 0 auto 10px; }
.phones .iphone.front { width: 28%; left: -3%; right: auto; top: 16%; transform: rotate(-5deg); }

/* Three notebooks fanned out, the one you're writing in up front. */
.soon span { display: grid; gap: 3px; }
.soon small { font-size: .95rem; line-height: 1.35; color: var(--soft); }
.phones.trio { aspect-ratio: 1 / .9; }
.phones.trio .left, .phones.trio .right, .phones.trio .mid { position: absolute; }
.phones.trio .left { width: 45%; left: -1%; right: auto; top: 14%; transform: rotate(-7deg); }
.phones.trio .right { width: 30%; left: auto; right: 5%; top: 12%; transform: rotate(7deg); }
.phones.trio .mid { z-index: 2; width: 33%; left: 41%; top: 0; transform: none; box-shadow: 0 30px 60px rgb(34 34 36 / .4); }
.phones.trio .heropen { z-index: 1; left: auto; right: -1%; top: 22%; transform: rotate(10deg); }

/* The squiggle from the icon, big and faint, filling the space behind the devices. */
.bgsquiggle { position: absolute; z-index: 0; pointer-events: none; overflow: visible; filter: url(#pencil); }
.bgsquiggle path { fill: none; stroke: #8f8b85; stroke-width: 56; stroke-linecap: round; stroke-linejoin: round; opacity: .1; }
.foldrow { position: relative; }
.foldrow > .folds, .foldrow > .foldhead { position: relative; z-index: 1; }
.rowsq { width: min(980px, 92%); right: -6%; top: 26%; transform: rotate(-8deg); }
.startsq { width: min(760px, 80%); left: -8%; top: 30%; transform: rotate(10deg) scaleX(-1); }
.folds.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }

/* Hero: the Duo opened on its side behind, folded in front, an iPhone beside. */
.phones.stage { aspect-ratio: 1 / .9; }
.phones.stage .herosq { width: 112%; left: -8%; top: -6%; transform: rotate(-6deg); }
.phones.stage .herosq path { opacity: .1; }
.phones.stage .spread { position: absolute; z-index: 1; width: 94%; left: 4%; top: 10%; transform: rotate(-3deg); box-shadow: 0 30px 60px rgb(34 34 36 / .34); }
.phones.stage .shut { position: absolute; z-index: 2; width: 34%; left: -3%; top: 44%; transform: rotate(-8deg); filter: drop-shadow(0 24px 30px rgb(34 34 36 / .35)); }
.phones.stage .tilt { position: absolute; z-index: 3; width: 25%; right: -2%; top: 40%; transform: rotate(7deg); }
.phones.stage .heropen { z-index: 4; left: auto; right: 22%; top: 50%; transform: rotate(24deg); }
@media (max-width: 600px) {
  .folds.two { grid-template-columns: minmax(0, 1fr); }
  .rowsq, .startsq { display: none; }
}

/* The working name, said once and quietly. */
.foot .was { margin-top: 10px; opacity: .75; }
/* The gratitude page leads the hero. */
.phones.stage .shut { width: 42%; left: 1%; top: 34%; transform: rotate(-6deg); }

/* The squiggle and the name read as one mark. */
.brand { gap: 3px; }
.brand img { margin-right: -2px; }
.begin { display: grid; gap: 10px; margin-top: 6px; }
.begintitle { font: 700 1.125rem var(--serif); color: var(--ink); }
.begin ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.begin li { font-size: .95rem; padding: 6px 14px; border-radius: 99px; border: 1px solid rgb(34 34 36 / .18); background: rgb(255 255 255 / .55); color: var(--soft); }
.begin li:first-child { border-color: rgb(194 58 34 / .4); color: var(--accent); }
.folds.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 860px) { .folds.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Artist packs: the covers fanned, and a Darkroom page beside them. */
.band.packs { background: var(--cream); padding-block: clamp(56px, 8vw, 96px); }
.packrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.packtext { display: grid; gap: 14px; min-width: 0; }
.packcard { margin-top: 10px; padding: 22px 24px; border-radius: 0 24px 24px 0; background: var(--graphite); color: var(--cream); display: grid; gap: 6px; }
.packcard .by { color: #e9c87a; font-weight: 600; font-size: .95rem; }
.packcard p { color: rgb(247 240 227 / .82); font-size: 1rem; line-height: 1.5; }
.packart { position: relative; margin: 0; min-width: 0; }
.packart img { width: 100%; height: auto; display: block; }
.darkpage { position: absolute; right: -8%; bottom: -30%; width: 34%; aspect-ratio: 699 / 1017; padding: 9% 8%; display: grid; align-content: start; gap: .35em; border-radius: 0 22px 22px 0; transform: rotate(5deg);
  background-color: #1d1b1a; background-image: radial-gradient(circle, rgb(238 228 210 / .32) 1px, transparent 1.3px); background-size: 14px 14px;
  box-shadow: 0 26px 50px rgb(20 20 21 / .38); color: #f2ebdc; font: 400 clamp(.6rem, .95vw, .8rem)/1.45 var(--serif); }
.packart { margin-bottom: 12%; }
.darkpage .dk1 { font-weight: 700; font-size: 1.35em; margin-bottom: .2em; }
@media (max-width: 860px) {
  .packrow { grid-template-columns: minmax(0, 1fr); }
  .darkpage { width: 40%; bottom: -6%; right: -1%; }
}
.duolist { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* On a narrow screen the Darkroom page sits under the covers, so nothing hangs off the edge. */
@media (max-width: 600px) {
  .packart { margin-bottom: 0; display: grid; justify-items: center; gap: 18px; }
  .darkpage { position: static; width: 58%; transform: rotate(2deg); }
}

/* The demo's rail and bar, laid out like the app: the way out on its own under the camera, the modes, then the page.
   Drawing brings the tool bar to the top and leaves only Done and Select on the rail. */
.demorail { right: 4.2%; top: 11.5%; width: 12cqw; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; gap: 2.2cqw; }
.demorail .solo, .demorail .group { background: rgb(255 255 255 / .94); box-shadow: 0 0 0 1px rgb(110 100 84 / .12), 0 1.6cqw 4cqw rgb(34 34 36 / .12); }
.demorail .solo { width: 12cqw; height: 12cqw; flex: none; }
.demorail .group { display: flex; flex-direction: column; border-radius: 6cqw; padding: 1cqw 0; }
.demorail .group button { width: 12cqw; height: 10.4cqw; flex: none; aspect-ratio: auto; border-radius: 50%; }
.demorail svg .fill { fill: currentColor; stroke: none; }
.demorail svg .bold { stroke-width: 2.3; }
.demorail .raildiv { display: block; width: 6cqw; height: 1.5px; margin: 1cqw auto; background: rgb(34 34 36 / .16); }
.demorail button.on { background: #d8412f; color: #fff; }
.demorail .done { display: none; background: #d8412f; color: #fff; }
.demorail .done svg { stroke-width: 2.4; }
[data-mode="draw"] .demorail .solo:not(.done), [data-mode="draw"] .demorail .tools, [data-mode="draw"] #demotype, [data-mode="draw"] #demodraw { display: none; }
[data-mode="draw"] .demorail .done { display: grid; }
.demobar { top: 3%; bottom: auto; left: 3.5%; right: 22%; height: 11cqw; transition: opacity .2s; }
.demobar svg { width: 5.4cqw; height: 5.4cqw; }
.demobar .grip { display: grid; place-items: center; width: 6cqw; flex: none; color: #8d8779; }
.demobar .grip svg { width: 4.6cqw; height: 4.6cqw; }
[data-mode="read"] .demobar, [data-mode="select"] .demobar { opacity: 0; pointer-events: none; }
.tin { top: 15%; bottom: auto; left: 3.5%; right: 22%; }
.demonote { right: 19%; top: 46%; width: 56cqw; padding: 3.5cqw 4cqw; font: 400 3.8cqw/1.4 var(--sans); color: var(--ink); }
.ribbon { position: absolute; z-index: 1; right: 22%; top: -1%; width: 4cqw; height: 9cqw; background: #d8412f; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); opacity: 0; transition: opacity .2s; pointer-events: none; }
.ribbon.on { opacity: 1; }