.scene-article{padding:5% 6%;background:radial-gradient(circle at 88% 7%,#d9f1f1,transparent 31%),linear-gradient(135deg,#fbfdfd,#e9f6f6)}
.scene-article:nth-of-type(even){background:radial-gradient(circle at 10% 95%,#d8eeee,transparent 31%),#f7fbfb}
.article-scene-head{position:relative;z-index:2}
.article-scene-head h2{margin:23px 0 0;font-size:clamp(42px,5.2cqw,70px)}
.article-scene-note{position:absolute;left:6%;bottom:7%;margin:0;color:#3f818b;font-size:clamp(17px,2cqw,27px);font-weight:900;letter-spacing:-.04em}
.focus-cards,.unknown-flow,.risk-grid,.type-grid,.example-track,.buffer-grid,.teach-flow,.longterm-path{position:relative;z-index:2;margin-top:42px}
.focus-cards{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:78%}
.focus-card{display:flex;flex-direction:column;min-height:202px;padding:24px 28px;border:1px solid #c4e2e5;border-radius:19px;background:#fff;box-shadow:0 16px 30px rgba(41,112,120,.1)}
.focus-card>span{color:#6b9ca3;font-size:20px;font-weight:900}
.focus-card strong{margin-top:13px;color:#236e78;font-size:36px;line-height:1.2}
.focus-meter{height:10px;margin-top:auto;border-radius:20px;background:#e7f1f2}
.focus-meter i{display:block;width:86%;height:100%;border-radius:inherit;background:#55b7bf}
.focus-card:nth-child(2) .focus-meter i{width:57%}
.unknown-flow{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;width:88%}
.unknown-flow>div{display:flex;flex-direction:column;justify-content:center;min-height:180px;padding:23px 30px;border:1px solid #c3e0e4;border-radius:18px;background:#fff;box-shadow:0 13px 25px rgba(45,112,121,.1)}
.unknown-flow b,.risk-grid b{color:#80b7be;font-size:19px}
.unknown-flow strong{margin:9px 0;color:#276e78;font-size:35px}
.unknown-flow div span{color:#5b8790;font-size:20px;font-weight:800}
.unknown-arrow{color:#4ca5ad;font-size:47px;text-align:center;font-weight:900}
.risk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:95%}
.risk-grid>div{min-height:160px;padding:22px 24px;border:1px solid #e7d2c8;border-radius:16px;background:#fffafa;box-shadow:0 12px 22px rgba(112,68,52,.07)}
.risk-grid b{color:#c2927b}
.risk-grid strong{display:block;margin-top:14px;color:#6d4d49;font-size:32px;line-height:1.2}
.risk-resolution{position:relative;z-index:2;width:max-content;max-width:95%;margin-top:22px;padding:14px 20px;border-radius:10px;background:#3f818b;color:#fff;font-size:23px;font-weight:900}
.scene-sleep{background:radial-gradient(circle at 85% 5%,#d9e9f3,transparent 36%),#f8fbfc}
.sleep-visual{position:relative;z-index:2;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;width:90%;margin-top:42px}
.sleep-visual>div{display:flex;flex-direction:column;justify-content:center;min-height:185px;padding:25px 29px;border:1px solid #c4e0e5;border-radius:18px;background:#fff;box-shadow:0 14px 25px rgba(35,102,112,.09)}
.sleep-visual>div>span{color:#6b969e;font-size:19px;font-weight:800}
.sleep-visual strong{margin-top:13px;color:#286e78;font-size:30px;line-height:1.25}
.sleep-visual>b{color:#4ca5ad;font-size:45px;text-align:center}
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:96%}
.type-grid>div{display:flex;flex-direction:column;min-height:185px;padding:24px 21px;border:1px solid #bfdee2;border-radius:18px;background:#fff;box-shadow:0 13px 23px rgba(35,102,112,.09)}
.type-grid b{align-self:flex-start;padding:5px 12px;border-radius:99px;background:#e5f4f4;color:#357f88;font-size:18px}
.type-grid strong{margin-top:18px;color:#296e78;font-size:29px;white-space:nowrap}
.type-grid span{margin-top:auto;color:#668f95;font-size:18px;font-weight:800}
.example-track{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;width:97%}
.example-track>div{display:flex;flex-direction:column;min-height:188px;padding:22px;border:1px solid #bfdee2;border-radius:17px;background:#fff;box-shadow:0 13px 23px rgba(35,102,112,.09)}
.example-track b{color:#4c9da6;font-size:18px}
.example-track strong{margin-top:19px;color:#286e78;font-size:30px;line-height:1.2}
.example-track span{margin-top:auto;color:#617f86;font-size:17px;font-weight:800}
.scene-history-example{background:radial-gradient(circle at 80% 15%,#eef3d8,transparent 33%),#f9fbf7}
.scene-english-example{background:radial-gradient(circle at 80% 15%,#dfeafa,transparent 33%),#f9fcff}
.buffer-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:84%}
.buffer-grid>div{min-height:210px;padding:24px 30px;border:1px solid #c3e0e4;border-radius:18px;background:#fff;box-shadow:0 14px 25px rgba(35,102,112,.1)}
.buffer-grid>div>span{color:#65949b;font-size:20px;font-weight:800}
.buffer-day strong{display:block;color:#278893;font-size:92px;line-height:1.05}
.buffer-day strong span{font-size:.34em}
.buffer-day>b{color:#327780;font-size:28px}
.buffer-simple strong{display:block;margin:14px 0 0;color:#278893;font-size:62px}
.buffer-simple p{margin:0;color:#4e777e;font-size:22px;font-weight:800;line-height:1.5}
.teach-flow{display:grid;grid-template-columns:1fr 48px 1fr 48px 1fr;align-items:center;width:97%}
.teach-flow div{display:grid;place-items:center;min-height:170px;border:1px solid #bee0e3;border-radius:18px;background:#fff;color:#286f79;font-size:30px;font-weight:900;line-height:1.35;text-align:center;box-shadow:0 14px 24px rgba(35,102,112,.09)}
.teach-flow>span{color:#4ca5ad;font-size:38px;text-align:center;font-weight:900}
.longterm-path{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;width:90%}
.longterm-path div{display:flex;flex-direction:column;justify-content:center;min-height:180px;padding:26px;border:1px solid #bfdfe2;border-radius:18px;background:#fff;box-shadow:0 14px 24px rgba(35,102,112,.09)}
.longterm-path div span{color:#6e9ba2;font-size:20px;font-weight:800}
.longterm-path div strong{margin-top:15px;color:#286e78;font-size:31px}
.longterm-path>b{color:#4ca5ad;font-size:46px;text-align:center}
.stage[data-scene="goal-focus"] .character-wrap,.stage[data-scene="pattern-unknown"] .character-wrap,.stage[data-scene="schedule-risks"] .character-wrap,.stage[data-scene="sleep"] .character-wrap,.stage[data-scene="study-types"] .character-wrap,.stage[data-scene="math-example"] .character-wrap,.stage[data-scene="history-example"] .character-wrap,.stage[data-scene="english-example"] .character-wrap,.stage[data-scene="plan-buffer"] .character-wrap,.stage[data-scene="teachback"] .character-wrap,.stage[data-scene="longterm"] .character-wrap{opacity:0}
.scene-article.is-active .focus-card,.scene-article.is-active .unknown-flow>div,.scene-article.is-active .risk-grid>div,.scene-article.is-active .type-grid>div,.scene-article.is-active .example-track>div,.scene-article.is-active .buffer-grid>div,.scene-article.is-active .teach-flow>div,.scene-article.is-active .longterm-path>div{animation:rise-in .55s both}
.scene-article.is-active .focus-card:nth-child(2),.scene-article.is-active .risk-grid>div:nth-child(2),.scene-article.is-active .type-grid>div:nth-child(2),.scene-article.is-active .example-track>div:nth-child(2){animation-delay:.18s}
.scene-article.is-active .risk-grid>div:nth-child(3),.scene-article.is-active .type-grid>div:nth-child(3),.scene-article.is-active .example-track>div:nth-child(3){animation-delay:.36s}
.scene-sleep.is-active .sleep-visual>div{animation:rise-in .55s both}
.scene-sleep.is-active .sleep-visual>div:last-child{animation-delay:.2s}

@media(max-width:520px){
  .scene-article{padding:8% 6%}
  .article-scene-head h2{margin-top:19px;font-size:34px;line-height:1.19}
  .article-scene-note{bottom:5%;font-size:13px;line-height:1.35;max-width:88%}
  .focus-cards,.unknown-flow,.risk-grid,.type-grid,.example-track,.buffer-grid,.teach-flow,.longterm-path{margin-top:25px;width:100%}
  .focus-cards{grid-template-columns:1fr;gap:9px;margin-top:22px}
  .focus-card{min-height:88px;padding:11px 15px;border-radius:11px}
  .focus-card>span{font-size:13px}
  .focus-card strong{margin-top:3px;font-size:21px}
  .focus-card strong br{display:none}
  .focus-meter{height:6px;margin-top:8px}
  .unknown-flow{grid-template-columns:1fr;gap:5px;margin-top:22px}
  .unknown-flow>div{min-height:78px;padding:9px 15px;border-radius:11px}
  .unknown-flow b{font-size:11px}
  .unknown-flow strong{margin:3px 0;font-size:21px}
  .unknown-flow div span{font-size:12px;line-height:1.3}
  .unknown-arrow{font-size:18px;line-height:1;transform:rotate(90deg)}
  .risk-grid{grid-template-columns:1fr;gap:7px;margin-top:22px}
  .risk-grid>div{display:grid;grid-template-columns:38px 1fr;align-items:center;min-height:57px;padding:9px 14px;border-radius:10px}
  .risk-grid b{font-size:13px}
  .risk-grid strong{margin:0;font-size:20px;line-height:1.2}
  .risk-grid strong br{display:none}
  .risk-resolution{max-width:100%;margin-top:12px;padding:10px 12px;font-size:14px;line-height:1.3}
  .sleep-visual{grid-template-columns:1fr;gap:5px;width:100%;margin-top:22px}
  .sleep-visual>div{min-height:82px;padding:10px 15px;border-radius:11px}
  .sleep-visual>div>span{font-size:13px}
  .sleep-visual strong{margin-top:4px;font-size:19px;line-height:1.3}
  .sleep-visual strong br{display:none}
  .sleep-visual>b{font-size:19px;line-height:1;transform:rotate(90deg)}
  .type-grid{grid-template-columns:1fr;gap:6px}
  .type-grid>div{display:grid;grid-template-columns:83px 1fr;grid-template-rows:auto auto;align-items:center;min-height:67px;padding:8px 10px;border-radius:10px}
  .type-grid b{grid-row:1/3;font-size:11px;padding:6px 7px}
  .type-grid strong{margin:0;font-size:17px;white-space:normal}
  .type-grid span{margin:0;font-size:10px}
  .example-track{grid-template-columns:1fr;gap:6px}
  .example-track>div{display:grid;grid-template-columns:79px 1fr;grid-template-rows:auto auto;align-items:center;min-height:68px;padding:9px 11px;border-radius:10px}
  .example-track b{grid-row:1/3;font-size:13px}
  .example-track strong{margin:0;font-size:17px}
  .example-track span{margin:0;font-size:10px}
  .buffer-grid{grid-template-columns:1fr;gap:8px;margin-top:20px}
  .buffer-grid>div{min-height:0;padding:11px 15px;border-radius:11px}
  .buffer-grid>div>span{font-size:12px}
  .buffer-day{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;min-height:90px!important}
  .buffer-day strong{grid-column:2;grid-row:1/3;font-size:47px;margin:0}
  .buffer-day>b{grid-column:1;grid-row:2;font-size:20px}
  .buffer-simple strong{font-size:27px;margin:4px 0}
  .buffer-simple p{font-size:13px;line-height:1.3}
  .teach-flow{grid-template-columns:1fr;gap:4px;margin-top:20px}
  .teach-flow div{min-height:56px;border-radius:10px;font-size:20px}
  .teach-flow div br{display:none}
  .teach-flow>span{font-size:18px;line-height:1;transform:rotate(90deg)}
  .longterm-path{grid-template-columns:1fr;gap:5px;margin-top:22px}
  .longterm-path div{min-height:86px;padding:11px 15px;border-radius:11px}
  .longterm-path div span{font-size:13px}
  .longterm-path div strong{margin-top:4px;font-size:21px;line-height:1.3}
  .longterm-path>b{font-size:19px;line-height:1;transform:rotate(90deg)}
  .scene-history-example .article-scene-head h2{font-size:31px}
}
@media(prefers-reduced-motion:reduce){.scene.is-active *{animation-delay:0ms!important}}