:root {
  --ink: #17383d;
  --ink-soft: #3f5a5d;
  --paper: #f8efd9;
  --paper-light: #fff9ec;
  --sky: #a9d7e1;
  --coral: #bd604f;
  --amber: #e5aa55;
  --violet: #6f6689;
  --blue: #668e9d;
  --forest: #1d4444;
  --cave: #101d28;
  --line: rgba(23, 56, 61, .22);
  --shadow: 0 24px 65px rgba(15, 40, 43, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cave); }
body { position: relative; isolation: isolate; margin: 0; min-width: 320px; color: var(--ink); font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--cave); }
body::after { content: ""; position: fixed; z-index: 100; inset: 0; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
a { color: inherit; text-decoration: none; }
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #fff2ad; outline-offset: 5px; }

.world { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; pointer-events: none; filter: saturate(1.16) brightness(1.04) contrast(1.07); }
main { position: relative; z-index: 1; overflow: clip; background: linear-gradient(180deg, transparent 0 54%, rgba(7,16,24,.08) 74%, rgba(6,13,21,.42) 100%); }
.section { position: relative; width: min(1220px, calc(100% - 36px)); margin: 0 auto; }
.paper-card { background: rgba(255, 249, 235, .92); border: 1px solid rgba(255, 255, 255, .75); border-radius: 9px 42px 42px 42px; box-shadow: var(--shadow); backdrop-filter: blur(8px); }
.eyebrow { margin: 0 0 14px; color: #58716b; font-size: .75rem; line-height: 1.2; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; }

.topbar { position: fixed; z-index: 50; top: 14px; left: 50%; width: min(1180px, calc(100% - 28px)); min-height: 62px; padding: 10px 12px 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; transform: translateX(-50%); color: var(--ink); background: rgba(255, 250, 238, .88); border: 1px solid rgba(255, 255, 255, .75); border-radius: 25px 25px 25px 9px; box-shadow: 0 12px 32px rgba(12, 42, 47, .15); backdrop-filter: blur(16px); }
.logo { font: 700 1.4rem/1 Georgia, serif; letter-spacing: -.06em; }
.logo span { color: var(--coral); font-style: italic; }
.topbar nav { display: flex; gap: 27px; font-size: .88rem; font-weight: 650; }
.topbar nav a { border-bottom: 1px solid transparent; }
.topbar nav a:hover { border-color: var(--coral); }
.small-cta { padding: 10px 16px; color: white; background: var(--ink); border-radius: 17px 17px 17px 6px; font-size: .84rem; font-weight: 700; }

.hero { min-height: 1120px; padding: 145px 0 100px; display: grid; grid-template-columns: .92fr 1.08fr; align-items: start; gap: 24px; }
.hero-copy { position: relative; z-index: 4; margin-top: 72px; padding: clamp(30px, 5vw, 58px); }
.hero-copy::before { content: "ваша история — ваши решения"; position: absolute; top: -27px; left: 32px; color: rgba(23, 56, 61, .72); font: italic 1.05rem/1 Georgia, serif; transform: rotate(-3deg); }
.hero h1 { margin: 0; font-size: clamp(3.3rem, 6vw, 6.25rem); line-height: .97; }
.hero h1 em { display: block; margin-top: 9px; color: var(--coral); font-weight: 400; }
.hero-copy > p:not(.eyebrow) { max-width: 570px; margin: 26px 0; color: var(--ink-soft); font-size: 1.18rem; }
.primary-cta { display: inline-flex; align-items: center; gap: 13px; padding: 16px 22px; color: white; background: var(--coral); border: 1px solid rgba(255, 255, 255, .45); border-radius: 17px 17px 17px 6px; box-shadow: 0 12px 28px rgba(103, 50, 42, .22); font-weight: 750; transition: transform .2s ease, box-shadow .2s ease; }
.primary-cta:hover { transform: translateY(-3px) rotate(-.35deg); box-shadow: 0 17px 34px rgba(103, 50, 42, .26); }
.hero-copy small { display: block; margin-top: 14px; color: #607476; font-size: .78rem; }

/* На широком экране клякса занимает свободное место между заголовком и героем. */
.comic-splash {
  position: absolute;
  z-index: 7;
  top: 210px;
  right: -76px;
  width: 190px;
  aspect-ratio: 1.08;
  padding: 36px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--paper-light);
  text-align: center;
  text-transform: uppercase;
  background: var(--ink);
  clip-path: polygon(50% 0, 59% 17%, 75% 3%, 77% 24%, 98% 16%, 85% 39%, 100% 50%, 84% 59%, 96% 81%, 74% 75%, 68% 100%, 54% 82%, 41% 99%, 35% 79%, 13% 94%, 19% 68%, 0 62%, 16% 49%, 2% 32%, 23% 30%, 17% 7%, 40% 20%);
  filter: drop-shadow(0 15px 16px rgba(16, 29, 40, .34));
  transform: rotate(7deg);
  transition: transform .2s ease, filter .2s ease;
}

/* Внутренняя клякса оставляет вокруг кораллового пятна живую чернильную рамку. */
.comic-splash::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7px;
  background: var(--coral);
  clip-path: inherit;
}

.comic-splash strong {
  position: relative;
  z-index: 1;
  max-width: 132px;
  font: 900 .94rem/1.04 "Arial Black", "Segoe UI", sans-serif;
  letter-spacing: .015em;
}

.comic-splash span {
  position: relative;
  z-index: 1;
  max-width: 130px;
  margin-top: 7px;
  color: #fff2ad;
  font: 800 .72rem/1.12 "Segoe UI", sans-serif;
  letter-spacing: .055em;
}

.comic-splash:hover {
  filter: drop-shadow(0 20px 19px rgba(16, 29, 40, .42));
  transform: rotate(4deg) scale(1.06);
}

.emotion-orbit { position: relative; min-height: 720px; margin-top: 9px; }
.orbit-ring { position: absolute; left: 50%; top: 50%; width: 470px; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: hidden; background: rgba(132, 190, 207, .72); border: 4px solid rgba(255, 248, 218, .85); border-radius: 48% 52% 46% 54%; box-shadow: inset 0 0 70px rgba(224, 241, 236, .42), 0 0 80px rgba(255, 244, 191, .28); backdrop-filter: blur(22px) saturate(.8); }
.orbit-ring::after { content: ""; position: absolute; inset: 17px; border: 1px dashed rgba(32, 84, 90, .36); border-radius: 52% 48% 55% 45%; transform: rotate(7deg); }
.hero-state { position: absolute; z-index: 2; left: 50%; top: 50%; width: 380px; height: 510px; margin: 0; transform: translate(-50%, -51%); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-state img { width: 360px; height: 410px; object-fit: contain; filter: drop-shadow(0 22px 25px rgba(24, 54, 56, .24)); opacity: 1; transform: scale(1); transition: opacity .13s ease, transform .2s ease; }
.hero-state img.changing { opacity: 0; transform: scale(.975); }
.hero-state figcaption { position: absolute; bottom: -12px; width: max-content; max-width: 390px; padding: 12px 18px; color: var(--ink); background: rgba(255, 249, 233, .91); border: 1px solid white; border-radius: 19px 19px 19px 5px; box-shadow: 0 12px 30px rgba(22, 61, 63, .16); font: italic 1rem/1.3 Georgia, serif; text-align: center; }
.cloud { position: absolute; z-index: 4; width: 142px; height: 112px; padding: 5px; display: grid; place-content: center; gap: 0; overflow: hidden; border: 2px solid rgba(255, 255, 255, .75); border-radius: 54% 46% 52% 44%; background: rgba(255, 249, 235, .83); box-shadow: 0 14px 30px rgba(29, 65, 68, .17); cursor: pointer; transform: rotate(var(--r, 0deg)); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; backdrop-filter: blur(8px); }
.cloud::before, .cloud::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; background: inherit; border-top: 2px solid rgba(255, 255, 255, .5); }
.cloud::before { width: 58px; height: 58px; left: 15px; top: -14px; }.cloud::after { width: 67px; height: 67px; right: 12px; top: -18px; }
.cloud img { width: 78px; height: 70px; margin: -7px auto -4px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(21,42,45,.18)); }.cloud span { font-weight: 800; font-size: .78rem; text-transform: lowercase; }
.cloud:hover, .cloud.active { transform: rotate(var(--r, 0deg)) translateY(-5px) scale(1.06); box-shadow: 0 19px 35px rgba(29, 65, 68, .23); }
.cloud-fear { --r: -5deg; left: 2%; top: 18%; color: #4e466c; background: rgba(219, 211, 233, .93); }
.cloud-anger { --r: 5deg; right: 0; top: 21%; color: #74372f; background: rgba(235, 172, 153, .94); }
.cloud-joy { --r: 4deg; right: 5%; bottom: 16%; color: #70521e; background: rgba(248, 218, 139, .95); }
.cloud-sadness { --r: -5deg; left: 1%; bottom: 18%; color: #345c70; background: rgba(179, 209, 220, .94); }
.down-note { position: absolute; z-index: 5; left: 50%; bottom: 56px; display: flex; flex-direction: column; align-items: center; color: white; text-shadow: 0 2px 9px #244d50; font: italic .96rem/1.3 Georgia, serif; transform: translateX(-50%) rotate(-1deg); }
.down-note span { margin-top: 5px; font-size: 1.65rem; animation: bob 2.2s ease-in-out infinite; }

.scene-section { padding: 100px 0 160px; }
.section-intro { max-width: 760px; margin: 0 auto 48px; padding: 30px 42px; text-align: center; }
.section-intro h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 4.7rem); line-height: 1.03; }
.section-intro > p:last-child { margin: 17px auto 0; max-width: 600px; color: var(--ink-soft); }
.game-shell { position: relative; padding: 20px; background: rgba(13, 39, 38, .86); border: 1px solid rgba(255, 255, 255, .28); border-radius: 42px 42px 42px 11px; box-shadow: 0 35px 90px rgba(5, 24, 25, .44); }
.scene-image-wrap { position: relative; overflow: hidden; aspect-ratio: 1672/941; border: 7px solid rgba(255, 248, 230, .9); border-radius: 28px 28px 28px 8px; background: #423327; }
.scene-image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; }
.speech { position: absolute; z-index: 4; left: 4.4%; top: 5%; width: 33%; margin: 0; padding: clamp(9px, 1.25vw, 18px); color: #3c2c21; font: 400 clamp(.94rem, 1.35vw, 1.34rem)/1.26 Georgia, serif; }
.scene-status { position: absolute; right: 3%; bottom: 3%; padding: 8px 12px; color: #3e3428; background: rgba(255, 245, 219, .9); border-radius: 12px 12px 12px 4px; font-size: .75rem; font-weight: 700; }
.game-panel { padding: 34px 25px 18px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 20px; color: var(--paper); }
.game-step { position: relative; min-width: 0; padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 25px 25px 25px 8px; background: rgba(8, 26, 28, .58); transition: opacity .25s ease, filter .25s ease; }
.game-step.is-locked { opacity: .37; filter: saturate(.4); pointer-events: none; }
.step-number { position: absolute; right: 18px; top: 15px; color: rgba(255,255,255,.18); font: 2.3rem/1 Georgia, serif; }
.game-step .eyebrow { color: #a9ceca; }.game-step h3 { margin: 0 0 20px; font-size: 1.7rem; }
.emotion-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.emotion-options button { min-height: 58px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; color: var(--paper); background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.17); border-radius: 16px 16px 16px 5px; cursor: pointer; font-weight: 700; }
.emotion-options button:hover, .emotion-options button.selected { color: var(--ink); background: var(--paper); transform: translateY(-2px); }
.emotion-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; }.fear-mark { background: var(--violet); }.anger-mark { background: var(--coral); }.joy-mark { background: var(--amber); }.sadness-mark { background: var(--blue); }
.action-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.action-options button { min-height: 86px; padding: 13px 15px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--ink); text-align: left; background: var(--paper); border: 2px solid transparent; border-radius: 17px 17px 17px 5px; cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.action-options button:hover, .action-options button.selected { border-color: var(--amber); transform: translateY(-3px) rotate(-.2deg); }.action-options strong { font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; }.action-options span { color: #4f5d5d; font: .92rem/1.32 Georgia, serif; }
.emotion-rail { position: absolute; z-index: 6; top: 4%; right: 1.5%; width: 112px; padding: 12px 9px; color: var(--paper); text-align: center; background: rgba(32, 23, 20, .82); border: 1px solid rgba(255, 239, 198, .28); border-radius: 22px 22px 22px 7px; box-shadow: 0 16px 38px rgba(0,0,0,.32); backdrop-filter: blur(7px); }
.emotion-rail > p, .scene-actions > p { margin: 0 0 8px; color: #f2dcaa; font: italic .75rem/1.2 Georgia, serif; }
.emotion-rail .emotion-options { display: grid; grid-template-columns: 1fr; gap: 5px; }
.emotion-rail .emotion-options button { min-height: 0; padding: 4px 5px 6px; display: grid; justify-items: center; gap: 0; color: var(--paper); background: transparent; border: 1px solid transparent; border-radius: 13px; font-size: .69rem; }
.emotion-rail .emotion-options button:hover, .emotion-rail .emotion-options button.selected { color: #32251d; background: var(--paper); border-color: #f3d99a; transform: translateX(-3px) rotate(-1deg); }
.emotion-rail img { width: 59px; height: 50px; object-fit: contain; }
.scene-actions { position: absolute; z-index: 5; left: 1.8%; right: 1.8%; bottom: 2.2%; padding: 10px 12px 12px; color: var(--paper); background: rgba(32, 23, 20, .87); border: 1px solid rgba(255, 239, 198, .28); border-radius: 21px 21px 21px 7px; box-shadow: 0 14px 35px rgba(0,0,0,.32); backdrop-filter: blur(7px); transition: opacity .25s ease, filter .25s ease; }
.scene-actions.is-locked { opacity: .48; filter: saturate(.35); pointer-events: none; }
.scene-actions .action-options { grid-template-columns: repeat(4, 1fr); gap: 7px; }
.scene-actions .action-options button { min-height: 76px; padding: 9px 11px; background: rgba(255, 248, 230, .94); }
.scene-actions .action-options strong { font-size: .68rem; }.scene-actions .action-options span { font-size: clamp(.68rem, .82vw, .82rem); line-height: 1.2; }
.result-card { width: min(800px, calc(100% - 40px)); margin: 28px auto 10px; padding: clamp(25px, 5vw, 48px); color: var(--ink); background: var(--paper-light); border: 1px solid rgba(255,255,255,.85); border-radius: 8px 35px 35px 35px; box-shadow: 0 22px 55px rgba(0,0,0,.32); }
.result-heading { display: flex; align-items: center; gap: 17px; }.result-seal { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; color: white; background: var(--coral); border-radius: 47% 53% 42% 58%; font-size: 1.45rem; }.result-heading .eyebrow { margin-bottom: 4px; }.result-heading h3 { margin: 0; font-size: clamp(2rem, 4vw, 3.4rem); }.result-text { margin: 25px 0; font: 1.13rem/1.62 Georgia, serif; }.growth { padding: 18px 21px; background: #e4ead9; border-left: 3px solid #7d9669; border-radius: 4px 18px 18px 4px; }.growth span { color: #56704c; font-size: .72rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }.growth p { margin: 6px 0 0; }.disclaimer { color: #718081; font-size: .77rem; }.again { padding: 0; color: #8b463a; background: none; border: 0; border-bottom: 1px dashed currentColor; cursor: pointer; font-weight: 750; }

.ways { padding: 130px 0 170px; color: var(--paper); }
.cave-heading { max-width: 790px; margin: 0 auto 55px; padding: clamp(28px, 5vw, 52px); color: var(--ink); text-align: center; background: rgba(255, 249, 235, .62); border: 1px solid rgba(255, 255, 255, .62); border-radius: 10px 38px 38px 38px; box-shadow: 0 22px 58px rgba(8, 28, 31, .24); backdrop-filter: blur(10px) saturate(.82); }.cave-heading .eyebrow { color: #49645f; }.cave-heading h2 { margin: 0; font-size: clamp(2.7rem, 5.7vw, 5.5rem); line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.way-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.way-card { position: relative; min-height: 390px; padding: 40px; overflow: hidden; color: var(--ink); background: rgba(255, 247, 224, .94); border: 1px solid white; border-radius: 38px 38px 38px 9px; box-shadow: 0 28px 65px rgba(0,0,0,.34); }
.way-card:nth-child(2) { transform: translateY(35px) rotate(.4deg); }.hand-label { position: absolute; top: 24px; right: 28px; color: #8d6650; font: italic .9rem/1 Georgia, serif; transform: rotate(4deg); }.way-icon { width: 110px; height: 84px; margin-bottom: 30px; color: var(--paper); background: var(--forest); border-radius: 22px 22px 22px 7px; transform: rotate(-2deg); }
.browser-icon { padding: 15px; display: flex; align-items: flex-start; gap: 5px; border: 5px solid #6e8e83; box-shadow: inset 0 17px 0 rgba(255,255,255,.12); }.browser-icon i { width: 6px; height: 6px; background: var(--amber); border-radius: 50%; }.message-icon { display: grid; place-items: center; font-size: 1.7rem; letter-spacing: .12em; }.way-card h3 { margin: 0; font-size: 2.2rem; }.way-card p { max-width: 460px; color: var(--ink-soft); }.availability { position: absolute; left: 40px; bottom: 35px; padding: 7px 11px; color: #556b63; background: #e4ead9; border-radius: 12px; font-size: .76rem; font-weight: 750; }

.why { padding: 120px 0 180px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; color: var(--paper); }
.why-copy { position: sticky; top: 110px; align-self: start; padding: clamp(30px, 4vw, 48px); color: var(--ink); background: rgba(255, 249, 235, .88); border: 1px solid rgba(255, 255, 255, .78); border-radius: 9px 36px 36px 36px; box-shadow: 0 22px 58px rgba(5, 19, 27, .3); backdrop-filter: blur(14px); }.why-copy .eyebrow { color: #58716b; }.why-copy h2 { margin: 0; font-size: clamp(2.65rem, 4.4vw, 4.5rem); line-height: 1.03; }
.benefit-list { display: grid; gap: 14px; }.benefit-list article { padding: 25px; display: grid; grid-template-columns: 52px 1fr; gap: 17px; color: var(--ink); background: rgba(255, 249, 234, .92); border: 1px solid rgba(255,255,255,.7); border-radius: 26px 26px 26px 7px; box-shadow: 0 16px 40px rgba(0,0,0,.18); }.benefit-list article:nth-child(even) { transform: translateX(16px); }.benefit-list article > span { width: 45px; height: 45px; display: grid; place-items: center; color: white; background: var(--coral); border-radius: 50% 44% 52% 47%; font: .84rem/1 Georgia, serif; }.benefit-list h3 { margin: 0 0 6px; font-size: 1.45rem; }.benefit-list p { margin: 0; color: var(--ink-soft); }

.final { min-height: 740px; padding: 130px 0 110px; display: grid; place-items: center; }
.final-card { max-width: 920px; padding: clamp(35px, 6vw, 72px); color: var(--paper); text-align: center; background: rgba(8, 19, 28, .84); border: 1px solid rgba(255, 233, 170, .25); border-radius: 44px 44px 44px 10px; box-shadow: 0 30px 85px rgba(0,0,0,.52); }.final-card .eyebrow { color: #a8c7c1; }.final-card h2 { margin: 0 0 34px; font-size: clamp(2.8rem, 5.3vw, 5.5rem); line-height: 1.02; }.final-card h2 em { color: #f4d995; font-weight: 400; }.primary-cta.warm { color: var(--ink); background: #f0c56f; }.final-card > p:last-child { color: rgba(255,255,255,.57); font-size: .82rem; }
footer { position: relative; z-index: 4; padding: 35px clamp(18px, 5vw, 70px); display: flex; justify-content: space-between; align-items: center; gap: 24px; color: rgba(255,255,255,.62); background: #09141e; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; }.logo.inverse { color: white; }.logo.inverse span { color: #e4ac62; }

[hidden] { display: none !important; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }

@media (max-width: 960px) {
  .world { width: 100%; left: 0; }
  .topbar nav { display: none; }
  .hero { min-height: 1260px; grid-template-columns: 1fr; padding-top: 115px; }
  .hero-copy { width: min(700px, 94%); margin: 20px auto 0; }
  /* На планшете клякса остаётся рядом с карточкой, но не выходит за край экрана. */
  .comic-splash { top: auto; right: auto; bottom: -118px; left: 25px; width: 205px; }
  .emotion-orbit { width: min(700px, 100%); min-height: 680px; margin: -15px auto 0; }
  .game-panel, .why { grid-template-columns: 1fr; }.why-copy { position: static; text-align: center; }.why { gap: 45px; }.action-options { grid-template-columns: 1fr; }.game-panel { padding-inline: 12px; }
}

@media (max-width: 650px) {
  body { font-size: 16px; }.section { width: min(100% - 18px, 1220px); }.topbar { top: 8px; width: calc(100% - 16px); min-height: 55px; border-radius: 18px 18px 18px 6px; }.small-cta { padding: 8px 10px; font-size: .72rem; }
  .world { width: 100%; left: 0; object-position: 52% top; }
  .hero { min-height: 1100px; padding-top: 92px; }.hero-copy { padding: 28px 22px; border-radius: 7px 27px 27px 27px; }.hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }.hero-copy > p:not(.eyebrow) { font-size: 1.03rem; }
  /* На телефоне клякса входит в поток карточки и поэтому ничего не перекрывает. */
  .comic-splash { position: relative; inset: auto; width: 190px; margin: 24px auto -10px; padding: 36px 27px; }
  .emotion-orbit { min-height: 560px; }.orbit-ring { width: min(84vw, 360px); }.hero-state { width: 280px; height: 410px; }.hero-state img { width: 270px; height: 330px; }.hero-state figcaption { bottom: -2px; max-width: 290px; font-size: .82rem; }.cloud { width: 98px; height: 78px; }.cloud-fear { left: 0; top: 12%; }.cloud-anger { right: 0; top: 14%; }.cloud-joy { right: 1%; bottom: 12%; }.cloud-sadness { left: 0; bottom: 14%; }.cloud img { width: 54px; height: 47px; margin: -4px auto -3px; }.cloud span { font-size: .68rem; }
  .down-note { bottom: 25px; }
  .scene-section { padding: 75px 0 120px; }.section-intro { padding: 27px 20px; }.scene-image-wrap { aspect-ratio: 4/5; margin-bottom: 458px; overflow: visible; border-width: 4px; }.scene-image-wrap > img { border-radius: 22px 22px 22px 6px; object-position: 28% center; }.speech { left: 4%; top: 3%; width: 65%; padding: 12px; font-size: 1rem; }.game-shell { padding: 9px; border-radius: 26px 26px 26px 7px; }.emotion-rail { top: 26%; right: 2%; width: 83px; padding: 8px 5px; }.emotion-rail > p { font-size: .65rem; }.emotion-rail img { width: 46px; height: 39px; }.emotion-rail .emotion-options button { padding: 2px; font-size: .61rem; }.scene-actions { top: calc(100% + 10px); right: 0; bottom: auto; left: 0; padding: 12px; background: rgba(18, 37, 38, .97); }.scene-actions .action-options { grid-template-columns: 1fr; }.scene-actions .action-options button { min-height: 83px; }.scene-actions .action-options strong { font-size: .72rem; }.scene-actions .action-options span { font-size: .84rem; }.result-card { width: calc(100% - 12px); padding: 24px 20px; }.result-heading { align-items: flex-start; }.result-seal { width: 42px; height: 42px; }.result-heading h3 { font-size: 1.85rem; }
  .ways { padding: 100px 0 130px; }.way-grid { grid-template-columns: 1fr; }.way-card { min-height: 340px; padding: 30px; }.way-card:nth-child(2) { transform: none; }.availability { left: 30px; bottom: 28px; }
  .why { padding: 90px 0 120px; }.benefit-list article { padding: 20px 16px; grid-template-columns: 42px 1fr; }.benefit-list article:nth-child(even) { transform: none; }.benefit-list article > span { width: 38px; height: 38px; }.final { min-height: 620px; padding: 100px 0; }.final-card { padding: 38px 20px; }.final-card h2 { font-size: 2.65rem; } footer { flex-direction: column; text-align: center; }
}