:root{font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif;color:#171d2b;background:#f8fafc;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible{outline:3px solid #fbbf24;outline-offset:3px}.player{width:100%;max-width:1600px;margin:auto;border:1px solid #e2e8f0;overflow:hidden;border-radius:12px;background:#fff}.stage{position:relative;width:100%;aspect-ratio:var(--aspect,2880/1418);overflow:hidden;background:#fff;container-type:inline-size}.image-viewport{position:absolute;inset:0;overflow:hidden}.image-layer{position:absolute;inset:0;transform-origin:0 0;transition:transform .7s ease}.image-layer img{width:100%;height:100%;object-fit:fill;display:block}.chapter{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px;background:linear-gradient(135deg,#25283c,#475569);color:#fff}.chapter h1{font-size:clamp(20px,3.4cqw,48px);font-weight:650;max-width:80%;margin:0 0 20px;line-height:1.5}.chapter p{font-size:clamp(12px,1.5cqw,20px);margin:0 0 26px;opacity:.9}.primary{border:0;border-radius:8px;background:#4f46e5;color:#fff;padding:12px 28px;font-weight:650}.callout{position:absolute;background:#4f46e5;color:#fff;border-radius:10px;padding:14px 16px;box-shadow:0 6px 18px #1e293b30;width:288px;max-width:calc(100% - 24px);font-size:14px;line-height:1.6;z-index:3;white-space:pre-line}.callout p{margin:0 0 12px}.callout .buttons{display:flex;gap:8px;justify-content:flex-end}.callout button{border:0;background:#ffffff26;color:#fff;border-radius:5px;min-height:32px;min-width:36px;padding:4px 10px}.hotspot{position:absolute;z-index:2;border:3px solid #4f46e5;border-radius:7px;background:#4f46e514;min-width:24px;min-height:24px;box-shadow:0 0 0 5px #4f46e526;animation:pulse 1.5s infinite}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid #e2e8f0;font-size:13px;min-height:54px}.controls{display:flex;align-items:center;gap:8px;white-space:nowrap}.controls button{background:#f1f5f9;color:#334155;border:0;border-radius:6px;width:32px;height:32px;font-size:18px}.error{padding:24px;line-height:1.7}.player:fullscreen{max-width:none;width:100vw;height:100vh;display:flex;flex-direction:column;justify-content:center;background:#0f172a;border:0;border-radius:0}.player:fullscreen .stage{max-height:calc(100vh - 54px);width:min(100vw,calc((100vh - 54px)*2880/1418));flex-shrink:0;margin:auto}.player:fullscreen .toolbar{color:white;background:#0f172a}@keyframes pulse{50%{box-shadow:0 0 0 9px #4f46e500}}@media(max-width:640px){.stage.has-image{aspect-ratio:auto;padding-top:0;overflow:visible}.stage.has-image .image-viewport{position:relative;aspect-ratio:var(--aspect,2880/1418)}.stage.has-image .callout{position:relative;left:auto!important;top:auto!important;width:auto;max-width:none;margin:0;border-radius:0;box-shadow:none}.toolbar{flex-wrap:wrap}.toolbar #title{width:100%;font-size:12px}.controls{margin-left:auto}.chapter h1{max-width:100%;font-size:20px}.chapter p{font-size:12px}.chapter .primary{padding:8px 20px}.stage .hotspot{min-width:16px;min-height:16px}}@media(prefers-reduced-motion:reduce){.image-layer{transition:none}.hotspot{animation:none}}

.chapter{background-size:cover;background-position:center}.hotspot.circle{border-radius:50%;background:#4f46e5}.step-text{margin:0 0 12px;white-space:normal}.step-text p{margin:0 0 8px}.step-text p:last-child{margin-bottom:0}.step-text ul,.step-text ol{padding-left:20px;margin:8px 0}.step-text a{color:inherit;text-decoration:underline}.step-text pre{white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto}.callout{max-height:calc(100% - 24px);overflow-y:auto}@media(max-width:640px){.stage.has-image .callout{max-height:none}}
.embedded,.embedded body{height:100%;overflow:hidden}.embedded .player{height:100%;display:flex;flex-direction:column;max-width:none}.embedded .stage{flex:1;aspect-ratio:auto!important;min-height:0}.embedded .toolbar{flex-shrink:0}.embedded .stage.has-image .image-viewport{position:absolute;inset:auto;aspect-ratio:auto}.embedded .stage.has-image .callout{position:absolute;margin:0;border-radius:10px;max-height:calc(100% - 24px);width:288px;max-width:calc(100% - 24px)}@media(max-width:640px){.stage:not(.has-image){aspect-ratio:auto}.chapter{position:relative;min-height:260px}.embedded .chapter{position:absolute;min-height:0;padding:12px}.embedded .chapter h1{font-size:clamp(12px,3.5cqw,20px);margin-bottom:10px}.embedded .chapter p{font-size:10px;margin-bottom:12px}.embedded .chapter .primary{padding:6px 16px}}

.embedded .callout.compact{padding:6px 10px;font-size:12px}.embedded .callout.compact .step-text{margin:0}.embedded .callout.compact .buttons{display:none}

/* Area outlines follow the image coordinates; hit targets can grow independently. */
.hotspot{padding:0}
.hotspot:not(.circle){min-width:0;min-height:0;border:0;outline:3px solid #4f46e5;outline-offset:-3px}
.hotspot:not(.circle):focus-visible{outline-color:#fbbf24}
.hotspot::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;min-width:24px;min-height:24px}