/* The October sketchbook direction. Drawn app artwork; quiet, dark website. */
:root { --brand: #efb46f; --brand-dim: rgba(239,180,111,.1); }
.sketch-wrap { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.sketch-home { --text-secondary: #b0aaa3; background: #0c0c0b; }
.sketch-home h1, .sketch-home h2 { color: #f2efe8; font-weight: 700; letter-spacing: -.045em; }
.sketch-home p { color: var(--text-secondary); }
.sketch-home .btn-primary { background: #eee9df; color: #191713; gap: 20px; min-height: 52px; }
.sketch-home .btn-primary:hover { background: #efb46f; transform: translateY(-2px); }
.sketch-hero { padding: 160px 0 58px; }
.hero-layout { display: grid; grid-template-columns: .9fr 1.25fr; align-items: center; gap: 36px; }
.hero-copy h1 { font-size: clamp(52px, 5.7vw, 84px); line-height: 1.06; max-width: 510px; margin: 0 0 28px; }
.hero-copy .hero-sub { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; margin: 0 0 30px; max-width: 420px; }
.hero-copy .hero-actions { margin: 0; }
.hero-copy .preview-note { font-size: 14px; line-height: 1.5; margin-top: 20px; max-width: 340px; color: #a6a19a; }
.device-pair { margin: 0; width: 100%; aspect-ratio: 1.12; position: relative; isolation: isolate; }
.device-frame { background: #161616; border: 2px solid #686461; box-shadow: 0 25px 50px #0008, inset 0 0 0 2px #202020; padding: 8px; overflow: hidden; }
.device-frame img { display: block; width: 100%; height: auto; object-fit: contain; }
.tablet-frame { position: absolute; width: 90%; left: 0; bottom: 11%; border-radius: 26px; padding: 11px; transform: rotate(-5deg); }
.tablet-frame img { border-radius: 15px; }
.phone-frame { border-radius: 37px; }
.phone-frame img { border-radius: 27px; }
.hero-handset { position: absolute; width: 35.5%; right: -1%; top: 0; transform: rotate(7deg); }
.device-pair figcaption { position: absolute; bottom: 0; width: 100%; text-align: center; font-size: 15px; color: #b0aaa3; }
.simple-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding: 32px 0 48px; border-bottom: 1px solid #ffffff17; }
.step-number { display: inline-block; color: #e7ad6c; font-size: 15px; margin-bottom: 12px; }
.simple-steps h2 { font-size: 23px; letter-spacing: -.025em; margin: 0 0 8px; }
.simple-steps p { font-size: 16px; line-height: 1.5; margin: 0; }
.cat-collection { padding-block: 100px 90px; }
.collection-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 36px; }
.collection-heading h2, .methods-copy h2, .sketch-home .section-header h2 { font-size: clamp(34px, 3.7vw, 54px); line-height: 1.08; margin-bottom: 18px; }
.collection-heading p { font-size: 18px; line-height: 1.6; margin: 0; }
.companion-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.companion-grid figure { min-width: 0; margin: 0; }
.sketch-paper { border-radius: 8px 12px 7px 13px; overflow: hidden; background: #efe7d7; transform: rotate(-1.5deg); }
.companion-grid figure:nth-child(even) .sketch-paper { transform: rotate(1.5deg); }
.sketch-paper img { width: 100%; height: auto; display: block; }
.companion-grid figcaption { font-size: 22px; font-weight: 600; text-align: center; padding-top: 20px; color: #eee9df; }
.methods-section { background: #12110f; border-block: 1px solid #ffffff0c; padding-block: 76px; }
.methods-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1050px; }
.method-art { margin: 0; text-align: center; }
.method-handset { width: 258px; max-width: 100%; margin-inline: auto; transform: rotate(-4deg); }
.method-art figcaption { margin: 24px 0 0; color: #aaa49b; font-size: 14px; }
.methods-copy > p { font-size: 18px; line-height: 1.6; margin: 0 0 24px; max-width: 450px; }
.method-controls { display: grid; gap: 10px; }
.method-controls button { display: flex; align-items: center; gap: 14px; text-align: left; padding: 17px 18px; width: 100%; border: 1px solid #ffffff18; border-radius: 14px; background: transparent; color: #eee9df; cursor: pointer; }
.method-controls button > span:nth-child(2) { flex: 1; }
.method-controls strong, .method-controls button span span { display: block; }
.method-controls strong { font-size: 19px; font-weight: 650; line-height: 1.4; }
.method-controls button span span { font-size: 14px; line-height: 1.5; color: #b6afa6; margin-top: 2px; }
.method-controls button[aria-pressed=true] { background: #251e15; border-color: #b78a50; }
.method-dot { width: 8px; height: 8px; flex-shrink: 0; border: 1px solid #8c8376; border-radius: 50%; }
[aria-pressed=true] > .method-dot { background: #efb46f; border-color: #efb46f; }
.methods-copy .method-extra { margin: 20px 0 0; font-size: 15px; }
.method-fallback { color: #b6afa6; line-height: 1.7; padding-left: 20px; }
.sketch-home .faq-section { padding: 86px 0 70px; }
.sketch-home .faq-list { max-width: 760px; }
.sketch-home .section-header { text-align: left; margin-bottom: 35px; }
.sketch-home .faq-section > .sketch-wrap { max-width: 900px; }
.sketch-home .faq-item { background: transparent; }
.sketch-home .blog-section { border-top: 1px solid #ffffff14; padding: 70px 0 64px; }
.sketch-home .section-header p { font-size: 18px; }
.sketch-home .blog-card { background: #151412; border-color: #ffffff16; }
.sketch-home .blog-card h3 { font-size: 20px; }
.closing-note { text-align: center; padding: 50px 0 72px; }
.closing-note h2 { font-size: clamp(32px,4vw,48px); margin-bottom: 26px; }
.closing-note p { margin: 22px 0 0; font-size: 14px; line-height: 1.7; }
@media (min-width: 1600px) { .sketch-hero { padding-top: 180px; } }
@media (max-width: 1000px) {
  .sketch-wrap { width: calc(100% - 56px); }
  .hero-layout { gap: 24px; grid-template-columns: .95fr 1fr; }
  .hero-copy h1 { font-size: 60px; }
  .phone-frame { border-radius: 29px; padding: 6px; }.phone-frame img { border-radius: 21px; }
  .tablet-frame { border-radius: 20px; padding: 8px; }.tablet-frame img { border-radius: 12px; }
  .device-pair { aspect-ratio: .9; }.hero-handset { width: 42%; }.tablet-frame { bottom: 15%; }
  .collection-heading { display: block; }
  .companion-grid { gap: 18px; }.methods-layout { gap: 36px; }
}
@media (max-width: 700px) {
  .sketch-wrap { width: calc(100% - 40px); }
  .sketch-hero { padding: 120px 0 35px; }.hero-layout { grid-template-columns: 1fr; gap: 38px; }
  .hero-copy h1 { font-size: clamp(48px,12.3vw,68px); max-width: 500px; margin-bottom: 22px; }
  .hero-copy .hero-sub { font-size: 20px; margin-bottom: 24px; }.hero-copy .preview-note { font-size: 13px; }
  .device-pair { aspect-ratio: 1.12; max-width: 520px; margin-inline: auto; }.hero-handset { width: 35%; right: 1%; }.tablet-frame { bottom: 13%; width: 87%; }
  .device-pair figcaption { font-size: 13px; }.device-frame { border-width: 1.5px; }
  .phone-frame { border-radius: 24px; padding: 5px; }.phone-frame img { border-radius: 18px; }
  .tablet-frame { border-radius: 17px; padding: 6px; }.tablet-frame img { border-radius: 10px; }
  .simple-steps { grid-template-columns: 1fr; gap: 25px; padding: 24px 0 36px; }
  .simple-steps > div { display: grid; grid-template-columns: 30px 1fr; gap: 5px 10px; }
  .step-number { grid-row: span 2; margin: 1px 0 0; }.simple-steps h2 { font-size: 21px; margin: 0; }.simple-steps p { grid-column: 2; font-size: 15px; }
  .cat-collection { padding-block: 60px 50px; }.collection-heading h2 { font-size: 36px; }.collection-heading p { font-size: 17px; }.collection-heading p br { display: none; }
  .companion-grid { grid-template-columns: repeat(2,1fr); gap: 24px 18px; }.companion-grid figcaption { font-size: 20px; padding-top: 13px; }
  .methods-section { padding-block: 55px; }.methods-layout { grid-template-columns: 1fr; gap: 32px; }.methods-copy { grid-row: 1; }.methods-copy h2 br { display: none; }.methods-copy h2 { font-size: 38px; }
  .method-handset { width: 235px; border-radius: 33px; padding: 7px; }.method-handset img { border-radius: 24px; }
  .method-controls button { padding: 14px; }.method-controls button span span { font-size: 14px; }
  .sketch-home .faq-section, .sketch-home .blog-section { padding-block: 55px; }.sketch-home .section-header h2 { font-size: 36px; }
  .closing-note { padding: 25px 0 55px; }
}
@media (max-width: 700px) {
  .sketch-home .blog-grid { gap: 14px; }
  .sketch-home .blog-card { display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: center; }
  .sketch-home .blog-card .lesson-cover { width: 110px; height: 100%; min-height: 145px; aspect-ratio: auto; object-fit: cover; }
  .sketch-home .blog-card .lesson-card-content { padding: 18px; }
  .sketch-home .blog-card h3 { font-size: 17px; line-height: 1.4; }
  .sketch-home .blog-card-link { font-size: 14px; }
}

/* Each screen keeps the original drawing's aspect ratio, including under file://. */
.live-scene { position: relative; overflow: hidden; isolation: isolate; }
.phone-screen { aspect-ratio: 390 / 844; border-radius: inherit; }
.tablet-screen { aspect-ratio: 884 / 614; border-radius: 15px; }
.phone-frame .phone-screen { border-radius: 27px; }
.live-scene > img, .scene-live { position: absolute; inset: 0; width: 100%; height: 100%; }
.live-scene > img { display: block; object-fit: cover; border-radius: 0; }
.scene-live { pointer-events: none; }
.scene-live > svg, .scene-live .ec-cat { display: block; width: 100%; height: 100%; }
.live-scene[data-live=true] > img { visibility: hidden; }
.scene-live[hidden] { display: none; }
.device-pair figcaption { display: flex; justify-content: center; }
.motion-toggle { position: fixed; right: 20px; bottom: 18px; z-index: 40; padding: 10px 16px; min-height: 44px; border-radius: 30px; border: 1px solid #ffffff30; background: #171613ee; color: #eee9df; font-size: 13px; cursor: pointer; box-shadow: 0 4px 20px #0005; }
.motion-toggle:hover { border-color: #efb46f; }
.companion-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px 18px; }
.sketch-paper { aspect-ratio: 1; }
.companion-grid figcaption { font-size: 18px; padding-top: 13px; }
.next-levels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin-top: 45px; }
.mystery-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 18px 14px; background: #191715; border: 1px dashed #615547; border-radius: 16px; }
.mystery-cat { width: 100px; height: 100px; flex-shrink: 0; position: relative; }
.mystery-cat img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(.18); }
.mystery-cat > span { position: absolute; inset: 0; display: grid; place-content: center; font-size: 38px; color: #e3bc88; }
.mystery-card h3 { font-size: 20px; margin: 0 0 6px; font-weight: 600; }
.mystery-card p, .mystery-card > div:last-child > span { font-size: 14px; line-height: 1.5; margin: 0; color: #b8afa3; }
.future-level { background: #121212; border-color: #3f3c37; }
.future-level .mystery-cat { opacity: .6; }
.schedules-section { padding: 10px 0 90px; }
.schedule-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.schedule-card { display: block; background: var(--schedule-tint); border: 1px solid #ffffff14; border-radius: 22px; overflow: hidden; color: #f2efe8; text-decoration: none; transition: border-color .2s; }
.schedule-card:hover { border-color: #e7be8b; }
.schedule-art { aspect-ratio: 3 / 2; }
.schedule-caption { padding: 21px 24px 25px; }
.schedule-caption h3 { display: flex; justify-content: space-between; font-size: 24px; line-height: 1.3; margin: 0 0 7px; }
.schedule-caption h3 span { color: #eee0c7; font-size: 20px; opacity: .65; }
.sketch-home .schedule-caption p { font-size: 16px; line-height: 1.5; color: #c3bcb4; margin: 0 0 8px; }
.schedule-time { font-size: 15px; color: #c3bcb4; font-variant-numeric: tabular-nums; }
.rooms-section { padding: 70px 0 80px; background: #14110e; border-top: 1px solid #ffffff10; }
.rooms-section .collection-heading { align-items: center; }
.room-controls { display: flex; gap: 10px; }
.room-controls button { min-width: 48px; height: 48px; border: 1px solid #ffffff30; border-radius: 50%; background: transparent; color: #eee9df; font-size: 24px; cursor: pointer; }
.room-controls button:disabled { opacity: .3; cursor: default; }
.room-strip { display: flex; gap: 28px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 5px max(48px,calc((100vw - 1240px)/2)) 25px; scroll-padding-inline: max(48px,calc((100vw - 1240px)/2)); scrollbar-width: thin; scrollbar-color: #76624d #24201a; }
.room-preview { flex: 0 0 255px; margin: 0; scroll-snap-align: start; scroll-margin-block: 110px; }
.room-preview:focus-visible { outline: 2px solid #efb46f; outline-offset: 5px; border-radius: 32px; }
.room-preview figcaption { font-size: 22px; font-weight: 600; margin-top: 20px; }
.room-preview .device-frame { padding: 7px; box-shadow: 0 10px 25px #0005; }
.method-live { color: #fff; line-height: 1.35; }
.method-live .bscreen h2 { color: #fff; letter-spacing: -.02em; }
.method-live .bscreen p { font-size: 15px; line-height: 1.35; }
.method-live .as-time { font-size: 18px; font-weight: 600; }
.method-live .as-sys { display: flex; align-items: center; }
.previews-paused .scene-live *, .previews-paused .scene-live *::before { transition: none !important; animation-play-state: paused !important; }
@media (max-width: 1100px) {
  .companion-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .next-levels { gap: 12px; }.mystery-card { flex-direction: column; text-align: center; }
  .schedule-caption { padding: 18px; }.schedule-caption h3 { font-size: 22px; }
}
@media (max-width: 700px) {
  .tablet-screen { border-radius: 10px; }.phone-frame .phone-screen { border-radius: 17px; }
  .companion-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 18px; }
  .next-levels { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; }
  .mystery-card { flex-direction: row; text-align: left; padding: 12px 20px; gap: 20px; }
  .mystery-cat { width: 80px; height: 80px; }
  .schedules-section { padding: 10px 0 50px; }.schedule-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .schedule-card { border-radius: 14px; }.schedule-art { aspect-ratio: 1.1; }
  .schedule-caption { padding: 13px 12px 16px; }.schedule-caption h3 { font-size: 19px; }.schedule-caption h3 span { display: none; }
  .sketch-home .schedule-caption p { font-size: 14px; line-height: 1.4; }.schedule-time { display: block; font-size: 12px; }
  .rooms-section { padding: 45px 0; }.rooms-section .collection-heading { display: flex; align-items: flex-end; gap: 15px; }.rooms-section .collection-heading h2 { font-size: 34px; }
  .room-controls { gap: 6px; }.room-controls button { min-width: 40px; height: 44px; font-size: 22px; }
  .room-strip { gap: 22px; padding-inline: 20px; scroll-padding-inline: 20px; }.room-preview { flex-basis: 240px; }.room-preview figcaption { font-size: 20px; }
  .room-preview .phone-screen, .method-handset .phone-screen { border-radius: 24px; }.room-preview .phone-frame { border-radius: 32px; }
  .motion-toggle { right: 12px; bottom: 12px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .schedule-card, .scene-live * { transition: none !important; }
}
@media (max-width: 700px) {
  .motion-toggle { width: 44px; padding: 0; font-size: 0; }
  .motion-toggle::before { content: 'Ⅱ'; font-size: 18px; font-weight: 700; }
  .motion-toggle[aria-pressed=true]::before { content: '▷'; font-size: 23px; }
  .schedule-time { font-size: 13px; }
}

/* A small cast first; the full collection is available on demand, even without JS. */
.sketch-hero .simple-steps { margin-top: 65px; }
.more-cats { margin-top: 30px; }
.more-cats > summary { display: flex; align-items: center; justify-content: center; gap: 15px; width: fit-content; margin-inline: auto; padding: 12px 24px; min-height: 48px; border: 1px solid #ffffff30; border-radius: 100px; color: #eee9df; font-size: 16px; cursor: pointer; list-style: none; }
.more-cats > summary::-webkit-details-marker { display: none; }
.more-cats > summary:hover { border-color: #efb46f; }
.more-cats .when-open, .more-cats[open] .when-closed { display: none; }
.more-cats[open] .when-open { display: inline; }
.more-cats[open] .reveal-chevron { transform: rotate(180deg); }
.extra-companions { margin-top: 35px; grid-template-columns: repeat(5,minmax(0,1fr)); }
.level-two-preview { width: 110px; height: 110px; flex-shrink: 0; filter: brightness(.46) saturate(.65); }
@media (max-width: 700px) {
  .sketch-hero .simple-steps { margin-top: 38px; }
  .extra-companions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .level-two-preview { width: 80px; height: 80px; }
}