/* The videos' night sky, teal ghost and warm lined diary paper. */
.article-main {padding:0; max-width:none;}
.voice-guide {--night:#17203b; --cream:#fff8e9; --lavender:#e8dced; font-size:1.05rem;}
.guide-width {width:min(1120px, calc(100% - 48px)); margin-inline:auto;}
.guide-hero {color:#fff8e9; background:linear-gradient(145deg,#111932,#373456); overflow:hidden;}
.guide-hero-inner {width:min(1200px,calc(100% - 64px)); margin:auto; display:grid; grid-template-columns:1fr 1.04fr; align-items:center; gap:16px; padding-block:56px 44px;}
.guide-title {position:relative; z-index:1;}
.guide-hero .eyebrow {color:#e9cb89; font-size:.85rem; letter-spacing:.06em; margin-block:0 20px;}
.guide-hero h1 {color:inherit; font-size:clamp(2rem,3.5vw,3.15rem); line-height:1.25; letter-spacing:-.025em; margin-block:0 26px; max-width:20ch;}
.guide-meta {font-size:.8rem; color:#c9c6dc; line-height:1.7; display:flex; flex-wrap:wrap; align-items:baseline; gap:.35em;}
.guide-art {width:100%; height:auto; display:block; border-radius:24px;}
.guide-hero .guide-art {border-radius:0; transform:rotate(2deg);}
.guide-intro {display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; padding-block:44px 38px; border-bottom:1px solid var(--line);}
.guide-answer {font-size:1.14rem; line-height:1.85; margin:0;}
.yoru-hello {position:relative; padding-inline-start:90px;}
.yoru-hello::before {content:""; position:absolute; inset-inline-start:0; top:18px; width:75px; height:75px; background:url('/guides/yoru-talk.svg') 13% 48% / 245% auto; border-radius:50%;}
.guide-layout {display:grid; grid-template-columns:205px minmax(0,1fr); gap:52px; padding-block:44px 72px; align-items:start;}
.guide-toc {position:sticky; top:28px; font-size:.85rem; line-height:1.6;}
.guide-toc p {font-weight:700; margin-block:0 14px;}
.guide-toc ol {padding-inline-start:20px; margin:0;}
.guide-toc li {margin-block-end:13px; padding-inline-start:3px;}
.guide-toc a {color:var(--muted); text-decoration-thickness:1px; text-underline-offset:4px;}
.guide-body {min-width:0;}
.guide-body section {margin-block:0 68px; scroll-margin-block-start:26px;}
.guide-body h2 {font-size:clamp(1.45rem,2.5vw,1.9rem); line-height:1.4; letter-spacing:-.025em; margin-block:0 19px;}
.guide-body h3 {font-size:1.12rem; line-height:1.5; margin-block:0 12px;}
.guide-body p {line-height:1.85; margin-block:0 18px;}
.guide-methods {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-block:28px;}
.guide-method {padding-block:0 8px; border-top:3px solid #86aaa8;}
.guide-method:nth-child(2) {border-color:#bea2c5;}
.guide-method:nth-child(3) {border-color:#d8b15b;}
.guide-method svg {width:48px; height:48px; color:var(--accent); margin-block:19px 12px;}
.guide-method p {font-size:.94rem; line-height:1.8;}
.guide-method .method-fit {font-size:.85rem; color:var(--muted);}
.guide-note {border-inline-start:3px solid #d8b15b; padding:15px 20px; background:var(--accent-soft); font-size:.94rem; border-radius:0 12px 12px 0;}
.guide-steps {list-style:none; padding:0; margin-block:34px 0;}
.guide-step {display:grid; grid-template-columns:.94fr 1fr; gap:27px; align-items:center; margin-block-end:36px;}
.guide-step:nth-child(2) .step-picture {order:2;}
.step-picture {position:relative;}
.step-number {position:absolute; top:10px; inset-inline-start:10px; display:grid; place-items:center; width:35px; height:35px; border-radius:50%; background:#fff8e9; color:#3f6e7a; font-size:1rem; font-weight:800; box-shadow:0 2px 8px #17203b15;}
.guide-step p {font-size:.97rem; margin:0;}
.guide-conversation {background:var(--accent-soft); padding:28px; border-radius:28px; margin-block:24px;}
.guide-line {max-width:88%; margin-block:0 18px;}
.guide-line:last-child {margin-block-end:0;}
.guide-line .speaker {display:block; font-size:.76rem; color:var(--muted); margin-block-end:5px; padding-inline:4px;}
.guide-line p {background:var(--bubble); border-radius:21px 21px 21px 5px; margin:0; padding:14px 20px; line-height:1.7; font-size:1rem;}
.guide-line.you {margin-inline-start:auto;}
.guide-line.you p {background:var(--accent); color:var(--on-accent); border-radius:21px 21px 5px 21px;}
.guide-line.you .speaker {text-align:end;}
.guide-diary {background:repeating-linear-gradient(#fffdf6 0,#fffdf6 35px,#e4dfd0 35px,#fffdf6 36px); color:#26383d; padding:27px 32px 30px; border:1px solid #e9dfca; border-radius:9px; box-shadow:5px 7px 0 #d8c8a526; transform:rotate(-.6deg);}
.guide-diary .diary-label {font-size:.82rem; color:#655d4e; margin-block-end:13px; line-height:1.5; font-weight:600;}
.guide-diary p {font-size:1.1rem; line-height:36px; margin:0;}
.guide-body .guide-caption {font-size:.84rem; color:var(--muted); line-height:1.75; margin-block:18px 0;}
.guide-prompts {padding:0; margin-block:28px; list-style:none; display:grid; gap:14px;}
.guide-prompts li {position:relative; padding-inline-start:32px;}
.guide-prompts li::before {content:"✦"; position:absolute; inset-inline-start:0; top:12px; color:var(--glow-text);}
.guide-prompts p {display:inline-block; margin:0; background:var(--bubble); padding:13px 20px; border-radius:18px 18px 18px 4px;}
.guide-checks {padding-inline-start:24px;}
.guide-checks li {padding-inline-start:7px; margin-block-end:15px;}
.guide-checks li::marker {color:var(--accent);}
.guide-faq details {border-bottom:1px solid var(--line); padding-block:17px;}
.guide-faq summary {font-weight:600; cursor:pointer; line-height:1.6; padding-inline-end:12px;}
.guide-faq details p {margin-block:15px 0; font-size:.97rem;}
.guide-ending .guide-art {margin-block-end:28px;}
.guide-cta {display:inline-block; background:var(--accent); color:var(--on-accent); padding:13px 22px; border-radius:999px; font-size:.95rem; font-weight:600; text-decoration:none; line-height:1.6;}
.guide-cta:hover {filter:brightness(1.12);}
.guide-cta span {display:inline-block; margin-inline-start:7px;}
:dir(rtl) .guide-line p, :dir(rtl) .guide-prompts p {border-radius:21px 21px 5px 21px;}
:dir(rtl) .guide-line.you p {border-radius:21px 21px 21px 5px;}
:dir(rtl) .guide-cta span {transform:scaleX(-1);}
:dir(rtl) .guide-hero h1 {letter-spacing:normal;}
.voice-guide a:focus-visible, .voice-guide summary:focus-visible {outline:3px solid var(--glow); outline-offset:5px; border-radius:4px;}
@media (max-width:1000px) {
  .guide-layout {grid-template-columns:1fr; gap:30px; max-width:800px;}
  .guide-toc {position:static; border-bottom:1px solid var(--line); padding-block-end:24px;}
  .guide-toc ol {columns:2; column-gap:35px;}
  .guide-toc li {break-inside:avoid;}
  .guide-hero-inner {width:calc(100% - 48px);}
  .guide-intro {gap:24px;}
}
@media (max-width:680px) {
  .guide-width {width:calc(100% - 36px);}
  .guide-hero-inner {width:calc(100% - 36px); grid-template-columns:1fr; gap:8px; padding-block:33px 10px;}
  .guide-hero h1 {font-size:2rem; max-width:none; margin-block-end:16px;}
  .guide-hero .eyebrow {margin-block-end:15px;}
  .guide-hero .guide-art {max-width:580px; margin:auto;}
  .guide-intro {grid-template-columns:1fr; gap:25px; padding-block:29px;}
  .guide-answer {font-size:1.04rem;}
  .guide-layout {padding-block:28px 44px;}
  .guide-toc ol {columns:1;}
  .guide-body section {margin-block-end:48px;}
  .guide-methods {grid-template-columns:1fr; gap:18px;}
  .guide-method {display:grid; grid-template-columns:45px 1fr; column-gap:14px; padding-block-start:14px;}
  .guide-method svg {grid-row:1/4; width:38px; margin-block:0;}
  .guide-method h3 {margin-block-end:8px;}
  .guide-method p {grid-column:2; margin-block-end:9px;}
  .guide-step {grid-template-columns:1fr; gap:17px; margin-block-end:29px;}
  .guide-step:nth-child(2) .step-picture {order:0;}
  .guide-art {border-radius:18px;}
  .guide-line {max-width:94%;}
  .guide-conversation {padding:20px 14px; border-radius:20px;}
  .guide-line p {padding:12px 15px; font-size:.98rem;}
  .guide-diary {padding:24px 21px;}
  .yoru-hello {padding-inline-start:90px;}
  .guide-cta {border-radius:22px;}
}
@media (max-width:560px) {
  .site-header {grid-template-columns:minmax(0,1fr) auto;}
  .site-header .brand {min-width:0; white-space:normal;}
  .site-header .brand img {flex:none;}
}
@media (prefers-reduced-motion:reduce) {html {scroll-behavior:auto;}}
@media print {
  .guide-toc,.guide-cta {display:none;}
  .guide-layout,.guide-intro {display:block; width:100%;}
  .guide-body section {break-inside:avoid;}
  .guide-hero {print-color-adjust:exact;}
  .guide-faq details p {display:block;}
}