:root {
  --night:#0e1524;
  --surface:#131e31;
  --raised:#1b2940;
  --paper:#fff3df;
  --muted:#b4bed0;
  --peach:#eca88b;
  --sage:#a4c3b1;
  --line:#34435b;
  --ink:#172133;
  --error:#ffb8b8;
  color-scheme:dark;
  font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
  color:var(--paper);
  background:var(--night);
  font-synthesis:none;
  line-height:1.75;
  scroll-padding-top:104px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  min-width:0;
  background:radial-gradient(ellipse at 85% 10%,#22354d66,transparent 32%),var(--night)
}

[hidden] {
  display:none!important
}

a {
  color:inherit;
  text-decoration:none
}

button,input,textarea,select {
  font:inherit
}

button,a {
  touch-action:manipulation
}

button {
  cursor:pointer;
  color:var(--paper)
}

button:disabled {
  cursor:default;
  opacity:.5
}

::selection {
  background:var(--peach);
  color:var(--ink)
}

:focus-visible {
  outline:3px solid #f8c9a7;
  outline-offset:4px
}

p,h1,h2,h3 {
  margin:0
}

img {
  max-width:100%;
  height:auto
}

.container {
  width:min(1160px,calc(100% - 64px));
  margin-inline:auto
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  z-index:100;
  padding:10px 16px;
  background:var(--paper);
  color:var(--ink);
  transform:translateY(-180%)
}

.skip-link:focus {
  transform:translateY(0)
}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:#0e1524ed;
  border-bottom:1px solid #ffffff0c;
  backdrop-filter:blur(14px)
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:86px
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:21px;
  font-weight:700;
  letter-spacing:-.8px;
  flex:none
}

.brand img {
  width:46px;
  height:40px;
  object-fit:contain
}

.brand small {
  font-size:11px;
  letter-spacing:.3px;
  display:block;
  color:var(--muted);
  font-weight:400;
  line-height:1.3
}

.site-header nav {
  display:flex;
  align-items:center;
  gap:28px;
  font-size:14px;
  color:#d9dfeb
}

.site-header nav>a {
  padding-block:12px;
  white-space:nowrap
}

.site-header nav>a:hover {
  color:var(--peach)
}

.site-header .nav-cta {
  padding:10px 16px;
  border:1px solid #72554f;
  border-radius:8px;
  color:#ffd6ba
}

.menu-toggle {
  display:none;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  padding:8px 14px;
  min-height:44px
}

.hero {
  display:grid;
  grid-template-columns:.94fr 1.18fr;
  align-items:center;
  gap:48px;
  padding-block:86px 70px
}

.eyebrow {
  font-size:13px;
  font-weight:500;
  color:var(--peach);
  letter-spacing:.2px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:9px
}

.signal-dot {
  display:inline-block;
  background:var(--sage);
  width:6px;
  height:6px;
  border-radius:50%;
  flex:none
}

.hero h1 {
  font-size:clamp(38px,4.1vw,55px);
  font-weight:700;
  line-height:1.36;
  letter-spacing:-2.5px;
  word-break:keep-all
}

.hero h1 em,h2 em {
  color:var(--peach);
  font-style:normal
}

.hero-lede {
  font-size:17px;
  line-height:1.9;
  color:#c0c9d8;
  margin-top:27px;
  word-break:keep-all
}

.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:33px
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  font-size:14px;
  font-weight:600;
  border-radius:9px;
  padding:13px 20px;
  min-height:49px;
  line-height:1.5;
  border:1px solid transparent;
  transition:background .15s
}

.button.primary {
  background:var(--peach);
  color:var(--ink);
  border-color:var(--peach)
}

.button.primary:hover {
  background:#f6bfa1
}

.button.secondary {
  background:var(--raised);
  color:var(--paper);
  border-color:var(--line)
}

.button.secondary:hover {
  background:#283751
}

.button.ghost {
  background:transparent;
  border-color:var(--line)
}

.button.ghost:hover {
  background:var(--surface)
}

.hero-detail {
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:22px
}

.hero-detail span {
  border-left:1px solid var(--line);
  padding-left:16px
}

.hero-preview {
  min-width:0;
  scroll-margin-top:110px
}

.preview-chrome {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:16px 16px 0 0;
  background:#1a2435;
  padding:13px 17px;
  font-size:12px
}

.preview-chrome>span:first-child {
  display:flex;
  align-items:center;
  gap:7px
}

.preview-badge {
  font-size:11px;
  color:#c1cada;
  background:#ffffff08;
  border:1px solid #ffffff20;
  border-radius:5px;
  padding:2px 7px;
  white-space:nowrap
}

.hero-stage {
  height:345px;
  position:relative;
  border-inline:1px solid var(--line);
  overflow:clip;
  background:#273041 url("assets/midnight-room.png") center 55%/cover
}

.room-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#0b152126 0%,#0b152130 65%,#0b152109)
}

.desktop-note {
  position:absolute;
  right:19px;
  top:21px;
  background:#fff2dfe8;
  color:#544438;
  border-radius:3px 10px 10px 3px;
  padding:15px 17px;
  box-shadow:0 7px 24px #080d1833;
  transform:rotate(3deg);
  width:159px
}

.desktop-note>span {
  font-size:11px;
  font-weight:600;
  color:#936c53
}

.desktop-note p {
  font-size:13px;
  line-height:1.8;
  margin-block:8px
}

.desktop-note small {
  font-size:11px;
  color:#907c68
}

.hero-speech {
  position:absolute;
  top:84px;
  left:18px;
  max-width:240px;
  padding:9px 13px;
  color:#f6e6d4;
  background:#142033db;
  border:1px solid #ffffff26;
  border-radius:10px;
  font-size:12px;
  z-index:2
}

.hero-cat {
  position:absolute;
  left:28%;
  bottom:22px;
  width:206px;
  height:223.167px;
  background-image:url("assets/characters/website-spritesheet.webp");
  background-size:800% 1100%;
  background-position:0 0;
  transform-origin:50% 91%;
  z-index:1;
  will-change:transform
}

.cat-shadow {
  position:absolute;
  bottom:31px;
  left:calc(28% + 26px);
  width:148px;
  height:13px;
  border-radius:50%;
  background:#11121b66
}

.hero-groom {
  position:absolute;
  left:29%;
  bottom:20px;
  width:198px;
  height:215px;
  overflow:visible;
  z-index:1
}

.preview-bottom {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  background:#192335;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 16px 16px;
  padding:12px 17px;
  color:var(--muted);
  font-size:11px
}

.preview-bottom label {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:22px
}

.preview-bottom input {
  accent-color:var(--peach)
}

.play-controls {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:17px
}

.play-controls button {
  font-size:12px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--surface)
}

.play-controls button:hover {
  background:var(--raised)
}

.play-controls button[aria-pressed=true] {
  background:#322b30;
  color:#ffd2b7;
  border-color:#805b50
}

.preview-caption {
  font-size:11px;
  color:var(--muted);
  text-align:center;
  margin-top:10px;
  line-height:1.8
}

.quiet-label {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  background:#0e1524bc;
  color:var(--paper);
  z-index:5;
  backdrop-filter:blur(4px)
}

.quiet-label strong {
  font-size:16px
}

.quiet-label span {
  font-size:12px;
  color:var(--muted)
}

.promise-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:27px 0;
  border-block:1px solid var(--line);
  gap:25px
}

.promise-row p {
  font-size:13px;
  color:var(--muted);
  text-align:center
}

.promise-row p+p {
  border-left:1px solid var(--line)
}

.promise-row span {
  display:block;
  font-size:16px;
  color:var(--paper);
  font-weight:600;
  margin-bottom:3px
}

.section-block {
  padding-block:100px
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
  margin-bottom:38px
}

.section-block h2 {
  font-size:36px;
  line-height:1.45;
  letter-spacing:-1.3px;
  font-weight:600;
  word-break:keep-all
}

.section-intro {
  font-size:15px;
  line-height:1.9;
  color:var(--muted);
  margin-bottom:6px
}

.section-block .eyebrow {
  margin-bottom:14px
}

.experience-window {
  border:1px solid var(--line);
  border-radius:16px;
  overflow:clip;
  background:var(--surface)
}

.experience-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 23px;
  border-bottom:1px solid var(--line);
  background:#172236;
  gap:15px;
  font-size:14px;
  font-weight:600
}

.demo-tabs {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:18px 23px;
  border-bottom:1px solid var(--line)
}

.demo-tabs button {
  border:1px solid transparent;
  border-radius:8px;
  color:var(--muted);
  background:transparent;
  padding:10px 16px;
  min-height:43px;
  font-size:14px
}

.demo-tabs button:hover {
  background:var(--raised)
}

.demo-tabs button[aria-selected=true] {
  background:#352d32;
  border-color:#644c49;
  color:#ffd0b5
}

.demo-layout {
  display:grid;
  grid-template-columns:1.06fr 1fr;
  min-height:437px
}

.demo-visual {
  padding:28px 35px;
  background:#172238;
  min-width:0
}

.demo-editor {
  padding:31px 36px;
  min-width:0;
  border-left:1px solid var(--line)
}

.demo-kicker {
  font-size:12px;
  color:#bac5d8;
  display:block;
  margin-bottom:13px
}

.demo-editor h3,.demo-visual h3 {
  font-size:19px;
  line-height:1.6;
  letter-spacing:-.5px;
  margin-bottom:10px;
  font-weight:600;
  word-break:keep-all
}

.demo-editor>p {
  font-size:14px;
  color:var(--muted);
  line-height:1.9
}

.look-visual {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at 50% 75%,#2b3b5566,transparent 60%),#172238
}

.look-visual canvas {
  width:300px;
  height:auto;
  max-width:100%;
  margin:5px auto 12px;
  display:block
}

.look-visual p {
  font-size:13px;
  color:#d6bcb0
}

.palette-choices {
  display:grid;
  grid-template-columns:1fr;
  gap:9px;
  margin-block:20px
}

.palette-choices button {
  background:var(--night);
  border:1px solid var(--line);
  border-radius:9px;
  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
  padding:12px 16px;
  min-height:46px;
  font-size:14px
}

.palette-choices button[aria-pressed=true] {
  border-color:var(--peach);
  background:#2a2a34
}

.color-dot {
  width:18px;
  height:18px;
  display:block;
  border-radius:50%;
  flex:none
}

.color-dot.apricot {
  background:#e8aa70
}

.color-dot.mint {
  background:#a7cbb8
}

.color-dot.lavender {
  background:#b9a6d0
}

.color-field {
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:space-between;
  padding-block:12px;
  font-size:13px
}

.color-field small {
  display:block;
  color:var(--muted);
  font-size:11px
}

.color-field input {
  width:48px;
  height:41px;
  background:var(--night);
  border:1px solid var(--line);
  border-radius:7px;
  padding:4px
}

.demo-editor .demo-hint {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:17px
}

.field {
  display:grid;
  gap:7px;
  margin-block:17px
}

.field label {
  font-size:13px;
  color:var(--paper)
}

.field small {
  font-size:11px;
  color:var(--muted)
}

.field-top {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center
}

.field-top output {
  font-size:11px;
  color:var(--muted)
}

.field input,.field textarea,.field select {
  width:100%;
  min-width:0;
  background:var(--night);
  border:1px solid #4a5b75;
  color:var(--paper);
  border-radius:8px;
  padding:11px 12px;
  font-size:16px;
  line-height:1.5
}

.field textarea {
  resize:vertical
}

.field input::placeholder,.field textarea::placeholder {
  color:#95a3b8;
  opacity:1
}

.check-field {
  display:flex;
  gap:10px;
  align-items:center;
  margin:17px 0;
  font-size:13px;
  min-height:35px
}

.check-field input {
  accent-color:var(--peach);
  width:18px;
  height:18px
}

.demo-status {
  font-size:12px!important;
  line-height:1.7!important;
  min-height:24px;
  margin-top:12px;
  color:var(--muted)
}

.demo-status.is-error {
  color:var(--error)
}

.memo-visual img {
  display:block;
  width:185px;
  height:auto;
  margin:0 auto 5px
}

.memo-visual h3 {
  text-align:center;
  font-size:17px
}

.memo-paper {
  background:#fff2df;
  color:#574535;
  max-width:310px;
  border-radius:5px 12px 12px 5px;
  padding:18px 21px;
  margin:22px auto 0;
  min-height:125px;
  box-shadow:0 8px 25px #0002
}

.memo-paper span {
  color:#927056;
  font-size:11px
}

.memo-paper p {
  font-size:15px;
  line-height:1.8;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin-top:9px
}

.demo-list {
  display:grid;
  gap:12px;
  margin-top:20px
}

.demo-item {
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:11px;
  padding:14px;
  flex-wrap:wrap;
  min-width:0
}

.demo-item-copy {
  flex:1;
  min-width:90px;
  overflow-wrap:anywhere;
  font-size:14px
}

.demo-item-copy small {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:4px
}

.demo-item-actions {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}

.demo-icon {
  font-size:11px;
  min-height:36px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--raised)
}

.demo-icon:hover {
  background:#293a54
}

.demo-empty {
  padding:22px 16px;
  font-size:13px;
  color:var(--muted);
  text-align:center
}

.notification-preview {
  display:flex;
  gap:10px;
  align-items:center;
  background:#2b3750;
  border:1px solid #586880;
  border-radius:12px;
  padding:14px;
  margin-top:22px;
  min-width:0
}

.notification-preview img {
  width:47px;
  height:43px;
  flex:none
}

.notification-preview>div {
  flex:1;
  overflow-wrap:anywhere;
  min-width:0
}

.notification-preview small {
  font-size:11px;
  color:var(--muted);
  display:block
}

.notification-preview strong {
  font-size:13px;
  font-weight:500
}

.notification-preview button {
  border:0;
  background:transparent;
  font-size:11px;
  min-height:40px
}

.focus-visual {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center
}

.focus-visual>p {
  font-size:13px;
  color:var(--muted);
  margin-top:8px
}

.focus-time {
  font-size:68px;
  line-height:1.3;
  letter-spacing:-2.5px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  margin-top:18px
}

.focus-progress {
  height:5px;
  width:100%;
  max-width:300px;
  border-radius:3px;
  background:#29384f;
  overflow:clip;
  margin:25px 0 28px
}

.focus-progress>div {
  height:100%;
  width:0;
  background:var(--peach)
}

.focus-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center
}

.daily-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:90px;
  border-bottom:1px solid var(--line)
}

.daily-copy>p:not(.eyebrow) {
  margin-top:24px;
  font-size:15px;
  color:var(--muted);
  line-height:2
}

.daily-copy .button {
  margin-top:28px
}

.daily-copy>small {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:12px
}

.daily-settings {
  padding:28px;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--surface)
}

.daily-settings>div {
  padding-block:18px;
  border-top:1px solid var(--line)
}

.daily-settings>div:last-child {
  padding-bottom:0
}

.daily-settings strong {
  font-size:15px;
  font-weight:600
}

.daily-settings p {
  font-size:13px;
  color:var(--muted);
  margin-top:7px;
  line-height:1.8
}

.feature-catalog {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:37px;
  row-gap:36px
}

.feature-catalog article {
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  gap:16px
}

.feature-catalog article>span {
  color:#a09c9a;
  font-size:11px;
  font-variant-numeric:tabular-nums;
  line-height:27px
}

.feature-catalog h3 {
  font-size:17px;
  font-weight:600;
  letter-spacing:-.3px;
  margin-bottom:11px
}

.feature-catalog p {
  font-size:13px;
  color:var(--muted);
  line-height:1.9;
  word-break:keep-all
}

.connection-note {
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:24px;
  background:#1b2536;
  border-radius:12px;
  margin-top:44px;
  border:1px solid var(--line)
}

.connection-note>div {
  flex:1
}

.connection-note h3 {
  font-size:15px;
  font-weight:600
}

.connection-note p {
  font-size:12px;
  color:var(--muted);
  line-height:1.9;
  margin-top:6px
}

.connection-note a {
  font-size:12px;
  color:var(--peach);
  white-space:nowrap
}

.download-section {
  padding-top:15px
}

.download-panel {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:58px;
  align-items:center;
  background:#19243a;
  border:1px solid #536078;
  border-radius:16px;
  padding:43px 47px
}

.download-panel>div:first-child>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  line-height:1.9;
  margin-top:21px
}

.download-meta {
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  color:#c4cddd;
  font-size:11px;
  margin-top:20px
}

.download-meta>span+span {
  border-left:1px solid #536078;
  padding-left:18px
}

.download-action {
  display:grid;
  gap:13px;
  border-left:1px solid #48566f;
  padding-left:40px;
  min-width:0
}

.download-action>span {
  color:var(--muted);
  font-size:12px
}

.download-action>strong {
  font-size:25px;
  font-weight:600;
  letter-spacing:-.5px
}

.download-action>p {
  color:var(--muted);
  font-size:11px;
  line-height:1.9;
  overflow-wrap:anywhere
}

.button-disabled {
  background:#394355!important;
  border-color:#495467!important;
  color:#c4ccda!important;
  cursor:default;
  pointer-events:none
}

.install-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-top:32px
}

.install-row article {
  display:flex;
  gap:14px
}

.install-row article>span {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:27px;
  height:27px;
  font-size:12px;
  color:var(--peach);
  background:#382d32;
  border-radius:7px
}

.install-row h3 {
  font-size:14px;
  font-weight:500
}

.install-row p {
  color:var(--muted);
  font-size:12px;
  margin-top:4px
}

.privacy-section {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:84px;
  padding-top:0;
  border-bottom:1px solid var(--line)
}

.privacy-copy {
  display:grid;
  gap:23px
}

.privacy-copy h3 {
  font-size:16px;
  font-weight:600;
  margin-bottom:7px
}

.privacy-copy p {
  font-size:13px;
  color:var(--muted);
  line-height:1.9
}

.faq-section {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:72px
}

.faq-section .section-intro {
  margin-top:20px
}

.faq-list details {
  border-bottom:1px solid var(--line)
}

.faq-list details:first-child {
  border-top:1px solid var(--line)
}

.faq-list summary {
  padding:20px 3px;
  font-size:15px;
  cursor:pointer;
  line-height:1.65
}

.faq-list details p {
  padding:0 3px 22px;
  font-size:13px;
  color:var(--muted);
  line-height:1.9
}

.closing-note {
  display:flex;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  padding-block:45px 55px
}

.closing-note img {
  width:111px;
  flex:none
}

.closing-note>div {
  flex:1
}

.closing-note p {
  font-size:12px;
  color:var(--muted);
  margin-bottom:7px
}

.closing-note h2 {
  font-size:25px;
  font-weight:500;
  letter-spacing:-.7px
}

.site-footer {
  padding-block:27px 31px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap
}

.site-footer .brand {
  font-size:18px
}

.site-footer .brand img {
  width:34px;
  height:32px
}

.site-footer>div {
  display:flex;
  gap:20px;
  margin-left:auto;
  font-size:12px;
  color:var(--muted)
}

.site-footer>p {
  width:100%;
  font-size:11px;
  color:#96a4bb;
  margin-top:4px
}

@media(max-width:1040px) {
  .site-header nav {
    gap:19px
  }
  .hero {
    gap:30px;
    grid-template-columns:.9fr 1.1fr
  }
  .hero h1 {
    font-size:43px
  }
  .hero-stage {
    height:325px
  }
  .desktop-note {
    width:136px;
    padding:13px
  }
  .hero-cat {
    left:20%
  }
  .cat-shadow {
    left:calc(20% + 26px)
  }
  .hero-groom {
    left:21%
  }
  .hero-speech {
    top:113px;
    left:13px;
    font-size:11px
  }
  .demo-editor,.demo-visual {
    padding:27px
  }
  .daily-section {
    gap:50px
  }
  .feature-catalog {
    column-gap:25px
  }
  .download-panel {
    padding:36px;
    gap:30px
  }
  .download-action {
    padding-left:30px
  }
}

@media(max-width:800px) {
  .container {
    width:calc(100% - 40px)
  }
  .header-inner {
    min-height:75px
  }
  .brand small {
    display:none
  }
  .menu-toggle {
    display:block
  }
  .site-header nav {
    position:absolute;
    top:100%;
    right:20px;
    left:20px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    padding:12px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:0 0 12px 12px;
    gap:2px
  }
  .site-header nav.is-open {
    display:flex
  }
  .site-header nav>a {
    padding:10px 14px
  }
  .hero {
    grid-template-columns:1fr 1.15fr;
    gap:23px;
    padding-top:60px
  }
  .hero h1 {
    font-size:37px;
    letter-spacing:-1.7px
  }
  .hero-lede {
    font-size:15px
  }
  .hero-actions {
    gap:9px
  }
  .hero-actions .button {
    padding:11px 13px;
    font-size:13px
  }
  .hero-stage {
    height:310px
  }
  .desktop-note {
    width:120px;
    right:12px;
    top:15px;
    padding:11px
  }
  .desktop-note p {
    font-size:11px
  }
  .hero-cat {
    left:17%;
    width:182px;
    height:197.17px
  }
  .hero-groom {
    left:18%;
    width:175px;
    height:190px
  }
  .cat-shadow {
    left:calc(17% + 24px);
    width:132px
  }
  .hero-speech {
    top:112px;
    max-width:210px
  }
  .preview-bottom {
    flex-wrap:wrap;
    font-size:11px
  }
  .play-controls {
    gap:6px
  }
  .play-controls button {
    padding:8px 9px;
    font-size:11px
  }
  .section-block {
    padding-block:75px
  }
  .section-block h2 {
    font-size:30px
  }
  .section-intro {
    font-size:13px
  }
  .demo-editor,.demo-visual {
    padding:25px 22px
  }
  .demo-editor h3 {
    font-size:17px
  }
  .feature-catalog {
    grid-template-columns:repeat(2,1fr)
  }
  .daily-section {
    gap:35px
  }
  .privacy-section {
    gap:40px;
    padding-top:0
  }
  .faq-section {
    gap:40px;
    grid-template-columns:.85fr 1.2fr
  }
  .download-section {
    padding-top:0
  }
  .download-panel {
    padding:30px;
    grid-template-columns:1.3fr 1fr
  }
  .download-action {
    padding-left:25px
  }
  .download-panel h2 {
    font-size:28px
  }
  .install-row {
    gap:18px
  }
  .connection-note {
    flex-wrap:wrap
  }
}

@media(max-width:620px) {
  .container {
    width:calc(100% - 36px)
  }
  .hero {
    grid-template-columns:1fr;
    gap:36px;
    padding-block:45px 42px
  }
  .hero h1 {
    font-size:43px;
    letter-spacing:-2px
  }
  .hero-lede {
    font-size:16px;
    margin-top:22px
  }
  .hero .eyebrow {
    font-size:12px;
    margin-bottom:18px
  }
  .hero-actions {
    margin-top:25px
  }
  .hero-detail {
    font-size:11px;
    gap:12px;
    margin-top:18px
  }
  .hero-detail span {
    padding-left:12px
  }
  .hero-stage {
    height:330px
  }
  .hero-cat {
    left:28%;
    width:198px;
    height:214.5px
  }
  .hero-groom {
    left:29%;
    width:190px;
    height:206px
  }
  .cat-shadow {
    left:calc(28% + 26px)
  }
  .desktop-note {
    width:137px;
    top:20px
  }
  .hero-speech {
    top:82px;
    font-size:11px;
    max-width:210px
  }
  .preview-bottom {
    flex-wrap:nowrap
  }
  .play-controls button {
    font-size:12px;
    min-height:44px
  }
  .promise-row {
    grid-template-columns:1fr;
    gap:15px;
    padding-block:24px
  }
  .promise-row p {
    font-size:12px;
    text-align:left;
    display:flex;
    gap:12px;
    align-items:center;
    flex-wrap:wrap
  }
  .promise-row p+p {
    border:0
  }
  .promise-row span {
    font-size:14px;
    min-width:121px;
    margin:0
  }
  .section-block {
    padding-block:64px
  }
  .section-block h2 {
    font-size:31px;
    letter-spacing:-1px
  }
  .section-heading {
    display:block;
    margin-bottom:25px
  }
  .section-intro {
    margin-top:20px;
    line-height:1.9
  }
  .experience-top {
    padding:14px 17px
  }
  .demo-tabs {
    padding:12px 13px;
    gap:4px
  }
  .demo-tabs button {
    padding:10px 12px;
    font-size:12px;
    min-height:44px;
    flex:1;
    white-space:nowrap
  }
  .demo-layout {
    grid-template-columns:1fr
  }
  .demo-visual {
    padding:24px 22px
  }
  .demo-editor {
    padding:25px 22px;
    border-left:0;
    border-top:1px solid var(--line)
  }
  .look-visual canvas {
    width:245px
  }
  .look-visual {
    min-height:310px
  }
  .demo-editor h3 {
    font-size:18px
  }
  .palette-choices {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px
  }
  .palette-choices button {
    padding:11px 8px;
    flex-direction:column;
    text-align:center;
    font-size:11px;
    gap:9px
  }
  .demo-item-actions {
    margin-left:auto
  }
  .demo-icon {
    min-height:42px;
    font-size:12px
  }
  .memo-visual img {
    width:165px
  }
  .memo-paper {
    width:100%;
    max-width:320px
  }
  .focus-visual {
    min-height:340px
  }
  .focus-time {
    font-size:63px
  }
  .daily-section,.privacy-section,.faq-section {
    grid-template-columns:1fr;
    gap:30px
  }
  .daily-copy>p:not(.eyebrow) {
    font-size:14px
  }
  .daily-settings {
    padding:23px
  }
  .feature-catalog {
    column-gap:20px;
    row-gap:27px
  }
  .feature-catalog article {
    display:block;
    padding-top:16px
  }
  .feature-catalog article>span {
    display:block;
    margin-bottom:7px
  }
  .feature-catalog h3 {
    font-size:15px;
    line-height:1.7
  }
  .feature-catalog p {
    font-size:12px;
    word-break:normal
  }
  .connection-note {
    padding:19px;
    gap:12px;
    margin-top:30px
  }
  .connection-note>div {
    flex-basis:calc(100% - 80px)
  }
  .connection-note>a {
    margin-left:62px
  }
  .download-section {
    padding-top:0
  }
  .download-panel {
    grid-template-columns:1fr;
    padding:29px 24px;
    gap:27px
  }
  .download-action {
    border-left:0;
    border-top:1px solid #48566f;
    padding:24px 0 0
  }
  .download-action .button {
    max-width:320px
  }
  .download-panel h2 {
    font-size:31px
  }
  .install-row {
    grid-template-columns:1fr;
    gap:22px;
    margin-top:25px
  }
  .privacy-section {
    padding-top:0
  }
  .closing-note {
    flex-wrap:wrap;
    gap:13px;
    padding-block:31px 40px
  }
  .closing-note img {
    width:83px
  }
  .closing-note h2 {
    font-size:21px
  }
  .closing-note p {
    font-size:11px
  }
  .closing-note .button {
    margin-left:96px;
    font-size:12px;
    min-height:44px
  }
  .site-footer>div {
    font-size:11px;
    gap:15px
  }
  .site-footer>p {
    font-size:11px
  }
}

@media(max-width:380px) {
  .hero h1 {
    font-size:38px
  }
  .hero-detail {
    display:block
  }
  .hero-detail span {
    display:block;
    border:0;
    padding:4px 0 0
  }
  .hero-stage {
    height:310px
  }
  .hero-cat {
    left:23%;
    width:178px;
    height:192.83px
  }
  .hero-groom {
    left:24%;
    width:172px;
    height:186px
  }
  .cat-shadow {
    left:calc(23% + 22px);
    width:127px
  }
  .desktop-note {
    width:119px;
    padding:10px
  }
  .hero-speech {
    top:114px;
    font-size:11px;
    max-width:180px
  }
  .preview-chrome {
    padding:12px;
    font-size:11px
  }
  .preview-bottom {
    padding:11px;
    gap:10px;
    font-size:11px;
    flex-wrap:wrap
  }
  .play-controls button {
    padding:9px 10px;
    font-size:11px
  }
  .demo-tabs button {
    flex-basis:45%
  }
  .feature-catalog {
    grid-template-columns:1fr
  }
  .feature-catalog article {
    display:flex
  }
  .feature-catalog article>span {
    margin:0;
    line-height:27px
  }
  .demo-item-actions {
    flex-basis:100%
  }
  .site-footer>div {
    width:100%;
    margin:0
  }
  .closing-note .button {
    margin-left:0
  }
}

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

.memo-paper-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap
}

#web-memo-pin-state {
  font-size:11px;
  color:#775c45
}

/* Product story, live customization and motion. */
.hero { grid-template-columns: 1fr 1.12fr; gap: 44px; padding-block: 75px 55px; }
.hero h1 { font-size: clamp(35px, 3.45vw, 49px); letter-spacing: -2px; line-height: 1.42; }
.hero .eyebrow { font-size: 11px; letter-spacing: 1.6px; }
.hero-lede { font-size: 16px; margin-top: 23px; }
.hero-feature-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 23px; }
.hero-feature-chips a { border: 1px solid #425069; border-radius: 6px; padding: 5px 9px; font-size: 11px; color: #d1d9e7; background: #ffffff03; }
.hero-feature-chips a:hover { border-color: var(--peach); color: var(--peach); }
.hero-actions { margin-top: 25px; }
.hero-actions .primary { gap: 18px; }
.motion-toggle { display: flex; align-items: center; border: 0; background: transparent; font-size: 11px; color: #d8c5b7; padding: 5px 7px; min-height: 32px; border-radius: 5px; }
.motion-toggle:hover { background: #ffffff0a; }
.scene-tag { position: absolute; left: 17px; bottom: 15px; display: flex; align-items: center; gap: 7px; padding: 6px 10px; background: #142033c9; border: 1px solid #ffffff1a; border-radius: 7px; font-size: 11px; color: #d9dfdf; }
.scene-spark { position: absolute; color: #f9d6a3; font-size: 29px; pointer-events: none; opacity: .7; }
.spark-one { top: 40px; left: 35%; }
.spark-two { right: 36px; bottom: 90px; font-size: 23px; }
.hero-preview.is-in-view .scene-spark { animation: sparkle 4s ease-in-out infinite; }
.hero-preview.is-in-view .spark-two { animation-delay: -2s; }
.hero-preview.is-in-view .desktop-note { animation: note-float 7s ease-in-out infinite; }
.product-line { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px 25px; padding-block: 24px; border-block: 1px solid #ffffff17; color: #b9c6d6; font-size: 12px; }
.product-line > span::before { content: '✦'; color: var(--peach); margin-right: 9px; font-size: 11px; }
.product-line > a { color: var(--peach); }
.product-features { padding-top: 76px; }
.feature-showcases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.feature-showcase { min-width: 0; border: 1px solid #37465c; border-radius: 15px; overflow: hidden; background: #141f31; transition: transform .28s ease, border-color .28s ease; }
.feature-showcase:hover { transform: translateY(-7px); border-color: #a07965; }
.feature-art { height: 234px; position: relative; overflow: hidden; border-bottom: 1px solid #ffffff0e; }
.art-caption { position: absolute; top: 18px; left: 20px; font-size: 11px; letter-spacing: .8px; color: #d2c9c3; }
.reaction-art { background: radial-gradient(ellipse at 50% 70%, #384456, transparent 68%), #1d2a3b; }
.feature-pet { position: absolute; width: 158px; height: 171.167px; left: calc(50% - 79px); bottom: 30px; background: url('assets/characters/website-spritesheet.webp') 0 0 / 800% 1100%; transform-origin: 50% 90%; }
.mini-keyboard { position: absolute; bottom: 13px; left: 0; right: 0; display: flex; gap: 5px; justify-content: center; }
.key-cap { width: 30px; height: 26px; display: grid; place-items: center; background: #37465a; border: 1px solid #768398; box-shadow: 0 3px 0 #121c2a; border-radius: 5px; color: #e4e6e6; font: 11px system-ui; }
.reaction-heart { position: absolute; top: 77px; right: 60px; color: #f8c7ab; font-size: 23px; }
.feature-showcase.is-in-view .key-cap { animation: key-tap 3s ease-in-out infinite; }
.feature-showcase.is-in-view .key-cap:nth-child(2) { animation-delay: -.6s; }
.feature-showcase.is-in-view .key-cap:nth-child(3) { animation-delay: -1.2s; }
.feature-showcase.is-in-view .key-cap:nth-child(4) { animation-delay: -1.8s; }
.feature-showcase.is-in-view .key-cap:nth-child(5) { animation-delay: -2.4s; }
.feature-showcase.is-in-view .feature-pet { animation: pet-breathe 4s ease-in-out infinite; }
.feature-showcase.is-in-view .reaction-heart { animation: heart-rise 4s ease-in-out infinite; }
.custom-art { background: radial-gradient(ellipse at 50% 70%, #54425b66, transparent 68%), #292637; }
.custom-art img { position: absolute; left: calc(50% - 119px); bottom: 0; width: 238px; height: auto; }
.palette-orbit { position: absolute; width: 250px; height: 145px; top: 48px; left: calc(50% - 125px); }
.palette-orbit i { position: absolute; width: 24px; height: 24px; border: 3px solid #ffffff4d; border-radius: 50%; background: #f4b18b; box-shadow: 0 3px 12px #00000022; }
.palette-orbit i:nth-child(1) { top: 54px; left: 12px; }
.palette-orbit i:nth-child(2) { top: 10px; left: 46px; background: #a3d9bb; }
.palette-orbit i:nth-child(3) { top: 0; right: 54px; background: #c3a5e0; }
.palette-orbit i:nth-child(4) { top: 55px; right: 8px; background: #fff1c4; }
.palette-orbit i:nth-child(5) { bottom: -14px; right: 28px; background: #b8cee6; }
.feature-showcase.is-in-view .palette-orbit { animation: orbit-drift 6s ease-in-out infinite; }
.mini-pattern { position: absolute; left: 27px; bottom: 18px; display: grid; grid-template-columns: repeat(3, 8px); gap: 3px; padding: 8px; background: #131d2ec2; border: 1px solid #685d75; border-radius: 6px; transform: rotate(-8deg); }
.mini-pattern i { width: 8px; height: 8px; background: #3c3b53; border-radius: 1px; }
.mini-pattern i:nth-child(even) { background: #c3a5e0; }
.tools-art { background: radial-gradient(ellipse at 70% 70%, #43594a66, transparent 68%), #25342f; }
.mini-memo { position: absolute; left: 22px; top: 56px; width: 153px; padding: 13px 14px; background: #f8e8cf; color: #5c4939; border-radius: 4px 10px 10px 4px; transform: rotate(-5deg); box-shadow: 0 8px 20px #00000022; }
.mini-memo > span { font-size: 11px; color: #906b4d; }
.mini-memo p { font-size: 12px; margin-block: 9px; line-height: 1.8; }
.mini-memo i { font-size: 11px; font-style: normal; color: #937e65; }
.mini-focus { position: absolute; top: 96px; right: 19px; width: 136px; background: #142b26; border: 1px solid #6a8674; padding: 12px 14px; border-radius: 10px; box-shadow: 0 9px 16px #101c1933; }
.mini-focus span { font-size: 11px; color: #c0d6c4; }
.mini-focus strong { display: block; font-size: 29px; color: #f5ebd6; font-weight: 500; letter-spacing: -1px; line-height: 1.5; }
.mini-focus > div { height: 3px; border-radius: 3px; background: linear-gradient(90deg, #d5bd98 38%, #526357 38%); margin-top: 4px; }
.mini-reminder { position: absolute; bottom: 13px; left: 34px; font-size: 11px; color: #d6dbce; background: #334b3e; padding: 5px 9px; border-radius: 5px; }
.feature-showcase.is-in-view .mini-focus { animation: tool-float 5s ease-in-out infinite; }
.feature-showcase.is-in-view .mini-reminder { animation: reminder-appear 6s ease-in-out infinite; }
.showcase-copy { padding: 25px 24px 26px; }
.feature-number { font-size: 11px; color: var(--peach); letter-spacing: .6px; }
.showcase-copy h3 { font-size: 21px; line-height: 1.65; margin-block: 12px; letter-spacing: -.7px; font-weight: 600; }
.showcase-copy > p { color: #bdc8d9; font-size: 13px; line-height: 1.9; word-break: keep-all; min-height: 75px; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 17px; }
.feature-tags span { font-size: 11px; color: #c6d1df; background: #223047; border-radius: 4px; padding: 4px 6px; }
.showcase-copy > a { display: flex; justify-content: space-between; align-items: center; color: #f4cbb0; border-top: 1px solid #ffffff14; padding-top: 18px; margin-top: 22px; font-size: 13px; }
.actual-feature-list { margin-top: 35px; padding: 27px 30px; border: 1px solid #33435a; background: #131f30; border-radius: 12px; display: grid; grid-template-columns: .62fr 1.8fr; gap: 35px; }
.actual-feature-list .eyebrow { font-size: 11px; margin-bottom: 10px; }
.actual-feature-list h3 { font-size: 17px; font-weight: 500; line-height: 1.8; word-break: keep-all; }
.actual-feature-list ul { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 17px 25px; }
.actual-feature-list li { font-size: 12px; line-height: 1.8; }
.actual-feature-list strong { color: #f4ddc7; font-weight: 500; display: block; margin-bottom: 3px; }
.actual-feature-list li > span { color: #bcc8da; display: block; word-break: keep-all; }
.product-features .connection-note { margin-top: 25px; }
.experience { padding-top: 30px; }
.custom-layout { grid-template-columns: .94fr 1.14fr; }
.custom-preview { position: relative; justify-content: flex-start; padding: 27px 28px; background: radial-gradient(ellipse at 50% 48%, #4e416240 0, transparent 65%), #182239; }
.custom-preview-top { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; }
.custom-preview-top .demo-kicker { margin: 0; font-size: 11px; letter-spacing: 1.2px; }
.custom-cat-stage { position: relative; width: 100%; max-width: 430px; min-height: 342px; display: grid; place-items: center; margin-top: 50px; }
.custom-preview canvas { position: relative; z-index: 2; width: 415px; max-width: 100%; margin: 0; }
.custom-aura { position: absolute; width: 78%; aspect-ratio: 1; max-width: 310px; background: radial-gradient(circle, #8873a424 0, #ad8a8420 46%, transparent 68%); border-radius: 50%; z-index: 0; }
.custom-floor { position: absolute; width: 58%; height: 16px; border-radius: 50%; background: #080f1b55; bottom: 13%; }
.custom-preview.is-in-view canvas { animation: studio-breathe 4.8s ease-in-out infinite; }
.custom-preview #theme-caption { font-size: 19px; font-weight: 600; color: #f5e0ce; margin-top: 20px; }
.custom-preview .theme-summary { font-size: 12px; color: #bfc9da; margin-top: 7px; }
.compare-button { background: #ffffff07; border: 1px solid #5d5b72; color: #e0d0c6; padding: 9px 18px; border-radius: 7px; font-size: 12px; min-height: 42px; margin-top: 22px; }
.compare-button[aria-pressed=true] { background: #403348; border-color: #a48da4; color: #ffe0c0; }
.custom-preview .custom-preview-note { margin-top: auto; padding-top: 50px; font-size: 11px; color: #a0aec4; }
.custom-editor { padding: 28px 30px; }
.studio-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.studio-heading .demo-kicker, .pattern-heading .demo-kicker { font-size: 11px; letter-spacing: 1px; color: var(--peach); margin-bottom: 4px; }
.custom-editor h3 { font-size: 17px; margin-bottom: 0; }
.studio-random { padding: 8px 11px; border: 1px solid #6d585c; border-radius: 6px; background: #302a35; color: #f5cbb1; font-size: 11px; min-height: 40px; white-space: nowrap; }
.custom-editor .palette-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 19px; gap: 8px; }
.custom-editor .palette-choices button { display: flex; flex-direction: column; gap: 9px; padding: 12px 7px; font-size: 11px; text-align: center; border-radius: 8px; }
.palette-swatches { display: flex; padding-left: 4px; }
.palette-swatches i { width: 22px; height: 22px; border: 2px solid #202a39; border-radius: 50%; margin-left: -4px; background: #ffeec9; }
.palette-swatches i:nth-child(2) { background: #f4b18b; }
.palette-swatches i:nth-child(3) { background: #dab59b; }
[data-theme-choice=mint] .palette-swatches i:nth-child(1) { background: #ddf2de; }
[data-theme-choice=mint] .palette-swatches i:nth-child(2) { background: #a3d9bb; }
[data-theme-choice=mint] .palette-swatches i:nth-child(3) { background: #96c8aa; }
[data-theme-choice=lavender] .palette-swatches i:nth-child(1) { background: #ebddfa; }
[data-theme-choice=lavender] .palette-swatches i:nth-child(2) { background: #c3a5e0; }
[data-theme-choice=lavender] .palette-swatches i:nth-child(3) { background: #83688f; }
.part-colors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.part-colors label { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px solid #34435b; border-radius: 7px; padding: 10px 4px; background: #172236; }
.part-colors label > span { font-size: 11px; color: #c4d0de; white-space: nowrap; }
.part-colors input { padding: 0; border: 0; border-radius: 50%; width: 34px; height: 34px; overflow: hidden; background: transparent; cursor: pointer; }
.part-colors input::-webkit-color-swatch-wrapper { padding: 0; }
.part-colors input::-webkit-color-swatch { border: 1px solid #ffffff40; border-radius: 50%; }
.part-colors input::-moz-color-swatch { border: 1px solid #ffffff40; border-radius: 50%; }
.pattern-workspace { margin-top: 25px; border-top: 1px solid #34435b; padding-top: 22px; }
.pattern-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pattern-heading > label { display: flex; gap: 6px; align-items: center; font-size: 11px; color: #b4c1d2; white-space: nowrap; }
.pattern-heading select { background: #101b2c; border: 1px solid #4b5a72; border-radius: 6px; color: var(--paper); padding: 6px 8px; font-size: 11px; min-height: 38px; }
.pattern-preset-choices { display: flex; gap: 6px; margin-block: 15px; }
.pattern-preset-choices button { flex: 1; border: 1px solid #43516a; background: #172236; border-radius: 5px; padding: 6px 7px; font-size: 11px; min-height: 36px; }
.pattern-preset-choices button[aria-pressed=true] { color: #fbd5b9; border-color: #b18b7b; background: #352d36; }
.pattern-drawing { display: grid; grid-template-columns: minmax(196px, 246px) 1fr; align-items: center; gap: 23px; }
.pattern-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; padding: 8px; background: #0e1829; border: 1px solid #40516b; border-radius: 8px; touch-action: none; }
.pattern-cell { aspect-ratio: 1; width: 100%; min-width: 0; padding: 0; border: 1px solid #40516b; background: #1f2e45; border-radius: 3px; cursor: crosshair; }
.pattern-cell[aria-pressed=true] { background: var(--pattern-ink, #dab59b); border-color: #ffffff45; box-shadow: inset 0 0 0 1px #ffffff15; }
.pattern-cell:hover { outline: 2px solid #f4cdb0; outline-offset: -2px; }
.pattern-instructions strong { font-size: 12px; font-weight: 500; color: #edd9c7; }
.pattern-instructions p { font-size: 11px; line-height: 1.9; color: #acbbd0; margin-block: 10px; }
.pattern-instructions output { display: block; font-size: 12px; color: var(--peach); }
.studio-reset { background: transparent; border: 0; border-bottom: 1px solid #77889f; color: #c5cedb; font-size: 11px; padding: 4px 0; margin-top: 16px; min-height: 32px; }
.custom-editor .demo-status { font-size: 11px; margin-top: 18px; }
.button, .play-controls button, .palette-choices button, .demo-tabs button, .studio-random, .compare-button { transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 5px 16px #080f1b44; }
.play-controls button:hover, .studio-random:hover { transform: translateY(-2px); }
.play-controls button:active, .button:active { transform: translateY(1px) scale(.98); }
html.has-reveal [data-reveal] { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
html.has-reveal [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(25px); }
html.has-reveal .feature-showcase:nth-child(2) { transition-delay: .08s; }
html.has-reveal .feature-showcase:nth-child(3) { transition-delay: .16s; }
html.motion-paused *, html.page-hidden * { animation-play-state: paused !important; }
html.motion-paused { scroll-behavior: auto; }
html.motion-paused [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
@keyframes sparkle { 0%, 100% { transform: scale(.8) rotate(-8deg); opacity: .35; } 50% { transform: scale(1.05) rotate(8deg); opacity: .85; } }
@keyframes note-float { 0%, 100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes pet-breathe { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(1.015); } }
@keyframes key-tap { 0%, 18%, 42%, 100% { transform: translateY(0); background: #37465a; } 25%, 35% { transform: translateY(3px); background: #795c51; box-shadow: 0 0 0 #121c2a; } }
@keyframes heart-rise { 0%, 100% { transform: translateY(0) scale(.8); opacity: .3; } 50% { transform: translateY(-10px) scale(1); opacity: .9; } }
@keyframes orbit-drift { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-4px); } }
@keyframes tool-float { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-6px) rotate(-1deg); } }
@keyframes reminder-appear { 0%, 12%, 100% { opacity: .45; transform: translateY(3px); } 25%, 80% { opacity: 1; transform: translateY(0); } }
@keyframes studio-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 1040px) {
  .hero { gap: 28px; }
  .hero h1 { font-size: 39px; }
  .hero-lede { font-size: 14px; }
  .hero-actions .button { font-size: 12px; }
  .feature-showcases { gap: 15px; }
  .showcase-copy { padding: 22px 19px; }
  .showcase-copy h3 { font-size: 18px; }
  .showcase-copy > p { font-size: 12px; min-height: 92px; }
  .custom-editor { padding: 25px 22px; }
  .pattern-drawing { gap: 15px; grid-template-columns: minmax(176px, 220px) 1fr; }
}
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr 1.1fr; padding-top: 52px; }
  .hero h1 { font-size: 32px; letter-spacing: -1.2px; }
  .hero-lede br { display: none; }
  .hero-actions { flex-wrap: wrap; }
  .hero-feature-chips a { font-size: 11px; }
  .product-line { justify-content: flex-start; font-size: 11px; gap: 10px 20px; }
  .feature-showcases { grid-template-columns: 1fr; }
  .feature-showcase { display: grid; grid-template-columns: .9fr 1.2fr; }
  .feature-art { height: 100%; min-height: 280px; border-bottom: 0; border-right: 1px solid #ffffff12; }
  .feature-pet { bottom: 56px; width: 182px; height: 197.167px; left: calc(50% - 91px); }
  .mini-keyboard { bottom: 37px; }
  .custom-art img { bottom: 10px; }
  .palette-orbit { top: 70px; }
  .mini-memo { top: 70px; }
  .mini-focus { top: 130px; }
  .mini-reminder { bottom: 25px; }
  .showcase-copy > p { min-height: 0; }
  .actual-feature-list { grid-template-columns: 1fr; gap: 20px; }
  .actual-feature-list h3 { font-size: 18px; }
  .custom-layout { grid-template-columns: 1fr; }
  .custom-preview { min-height: 390px; }
  .custom-cat-stage { min-height: 275px; max-width: 360px; margin-top: 10px; }
  .custom-preview canvas { width: 345px; }
  .custom-preview #theme-caption { margin-top: 0; }
  .custom-preview .custom-preview-note { padding-top: 20px; }
  .custom-editor { border-left: 0; border-top: 1px solid var(--line); padding: 28px; }
  .pattern-drawing { grid-template-columns: minmax(220px, 265px) 1fr; gap: 25px; }
}
@media (max-width: 620px) {
  .hero { grid-template-columns: 1fr; gap: 34px; padding-block: 42px 32px; }
  .hero h1 { font-size: clamp(31px, 7.5vw, 43px); letter-spacing: -1.5px; }
  .hero-lede { font-size: 15px; }
  .hero-lede br { display: initial; }
  .hero-actions .button { font-size: 13px; min-height: 46px; }
  .hero-feature-chips { gap: 6px; }
  .hero-feature-chips a { font-size: 11px; }
  .product-line { gap: 11px 22px; padding-block: 22px; }
  .product-line > a { width: 100%; margin-top: 5px; }
  .product-features { padding-top: 55px; }
  .feature-showcase { display: block; }
  .feature-art { height: 220px; min-height: 0; border-right: 0; border-bottom: 1px solid #ffffff12; }
  .feature-pet { width: 156px; height: 169px; left: calc(50% - 78px); bottom: 29px; }
  .mini-keyboard { bottom: 13px; }
  .reaction-heart { right: 24%; top: 62px; }
  .palette-orbit { top: 36px; }
  .custom-art img { bottom: -10px; }
  .mini-memo { left: calc(50% - 134px); top: 51px; }
  .mini-focus { right: calc(50% - 133px); top: 80px; }
  .mini-reminder { bottom: 16px; left: calc(50% - 120px); }
  .showcase-copy { padding: 24px; }
  .showcase-copy h3 { font-size: 22px; }
  .showcase-copy > p { font-size: 14px; }
  .actual-feature-list { padding: 23px; }
  .actual-feature-list ul { grid-template-columns: 1fr; gap: 17px; }
  .actual-feature-list li { font-size: 13px; }
  .experience { padding-top: 5px; }
  .demo-tabs button { flex-basis: 44%; font-size: 12px; }
  .custom-editor { padding: 25px 21px; }
  .custom-editor h3 { font-size: 16px; }
  .studio-heading { align-items: flex-start; }
  .studio-random { font-size: 11px; padding: 7px 9px; }
  .custom-editor .palette-choices button { font-size: 11px; padding: 13px 5px; }
  .part-colors { gap: 5px; }
  .part-colors label > span { font-size: 11px; }
  .part-colors input { width: 30px; height: 30px; }
  .pattern-heading { flex-wrap: wrap; }
  .pattern-heading > label { font-size: 11px; }
  .pattern-drawing { grid-template-columns: minmax(190px, 1fr) .66fr; gap: 13px; }
  .pattern-grid { gap: 2px; padding: 6px; }
  .pattern-instructions strong { font-size: 11px; }
  .pattern-instructions p { font-size: 11px; }
  .custom-preview { padding: 22px; min-height: 400px; }
}
@media (max-width: 380px) {
  .pattern-drawing { grid-template-columns: 1fr; }
  .pattern-grid { width: 100%; max-width: 270px; margin-inline: auto; }
  .pattern-instructions { display: flex; flex-wrap: wrap; gap: 8px 15px; align-items: center; }
  .pattern-instructions p { width: 100%; margin: 0; }
  .pattern-instructions p br { display: none; }
  .studio-reset { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.has-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
}
.typing-try { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 8px 12px; border: 1px solid #34435b; border-radius: 7px; background: #131e31; }
.typing-try > span { font-size: 11px; color: #edc8b0; white-space: nowrap; }
.typing-try input { width: 100%; min-width: 0; border: 0; background: transparent; color: #fff3df; padding: 6px; font-size: 12px; }
.typing-try input::placeholder { color: #94a3b9; }
.hero-cat { cursor: pointer; }
.hero-speech { top: 25px; max-width: min(230px, calc(100% - 160px)); word-break: keep-all; }
.desktop-note p { word-break: keep-all; }

/* Keep the live character visible while the mobile drawing controls scroll. */
@media (max-width: 620px) {
  .hero { padding-top: 32px; gap: 25px; }
  .hero .eyebrow { margin-bottom: 15px; }
  .hero-lede { margin-top: 18px; font-size: 14px; line-height: 1.85; }
  .hero-feature-chips { margin-top: 18px; }
  .hero-actions { gap: 8px; margin-top: 20px; }
  .hero-actions .button { padding-inline: 12px; font-size: 12px; }
  .hero-detail { margin-top: 15px; font-size: 11px; gap: 10px; }
  .hero-detail span { padding-left: 10px; }
  .hero-stage { height: 280px; }
  .desktop-note { width: 112px; padding: 10px; top: 16px; right: 10px; }
  .desktop-note p { font-size: 11px; }
  .desktop-note small { font-size: 11px; }
  .hero-speech { max-width: min(175px, calc(100% - 137px)); top: 20px; }
  .play-controls { justify-content: flex-start; gap: 7px; }
  .play-controls button { flex: 1 0 28%; font-size: 12px; min-height: 44px; }
  .typing-try { flex-wrap: wrap; gap: 2px; padding: 10px 12px; }
  .typing-try input { padding: 7px 0; font-size: 14px; }
  .experience-window { overflow: clip; }
  .custom-preview { position: sticky; top: 75px; z-index: 3; align-self: start; min-height: 0; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .custom-cat-stage { height: 160px; min-height: 0; margin-top: 5px; }
  .custom-preview canvas { position: absolute; width: 250px; }
  .custom-floor { bottom: 2%; }
  .custom-preview #theme-caption { font-size: 16px; margin-top: 3px; }
  .custom-preview .theme-summary { font-size: 12px; margin-top: 3px; }
  .compare-button { margin-top: 10px; min-height: 38px; padding: 7px 14px; }
  .custom-preview .custom-preview-note { display: none; }
  .custom-editor { padding: 24px 18px; }
  .custom-editor .palette-choices button { font-size: 12px; min-height: 78px; }
  .studio-random { font-size: 12px; min-height: 44px; }
  .part-colors { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
  .part-colors label { grid-column: span 2; flex-direction: column; justify-content: center; gap: 6px; min-height: 78px; padding: 10px 5px; }
  .part-colors label:nth-last-child(-n+2) { grid-column: span 3; flex-direction: row; }
  .part-colors label > span { font-size: 12px; white-space: nowrap; line-height: 1.5; }
  .part-colors input { flex: 0 0 30px; }
  .pattern-heading select { font-size: 12px; min-height: 44px; }
  .pattern-preset-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .pattern-preset-choices button { font-size: 12px; min-height: 44px; }
  .pattern-drawing { grid-template-columns: 1fr; gap: 16px; }
  .pattern-grid { width: 100%; max-width: 360px; margin-inline: auto; padding: 7px; gap: 3px; }
  .pattern-instructions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
  .pattern-instructions strong, .pattern-instructions p { font-size: 12px; }
  .pattern-instructions p { width: 100%; margin: 0; }
  .pattern-instructions p br { display: none; }
  .studio-reset { margin-top: 0; min-height: 44px; font-size: 12px; }
  .custom-editor .demo-status { font-size: 12px; }
  .field input, .field textarea, .field select { font-size: 16px; }
  .demo-icon, .notification-preview button { min-height: 44px; }
}
@media (max-width: 380px) {
  .part-colors label { flex-direction: column; gap: 6px; }
  .hero-actions .button { flex: 1 1 0; gap: 6px; padding-inline: 6px; white-space: nowrap; }
  .play-controls button { flex-basis: 44%; white-space: nowrap; }
}