[hidden] { display:none !important; }
.tutorial-shell { width:min(100%,1040px); margin:0 auto; color:#15376e; background:#fff5d4; }
.tutorial-hud { height:100px; padding:10px 16px 6px; background:#fff9e8; border-bottom:2px solid #d9be6b; box-sizing:border-box; }
.tutorial-hud-top { display:flex; align-items:center; justify-content:space-between; gap:8px; font:700 12px/1.3 'Plus Jakarta Sans',sans-serif; }
.tutorial-hud-top strong { color:#a42b34; }
.tutorial-hud-top span { font-size:10px; white-space:nowrap; }
.tutorial-phases { display:flex; list-style:none; padding:0; margin:7px 0; gap:6px; counter-reset:phase; }
.tutorial-phases li { counter-increment:phase; flex:1; padding:5px 0; font:800 11px/1.3 'Plus Jakarta Sans',sans-serif; border-bottom:3px solid #d8ccb1; text-align:center; color:#756d59; }
.tutorial-phases li::before { content:counter(phase) '. '; }
.tutorial-phases .current { border-color:#b82e36; color:#9e2730; }.tutorial-phases .finished { border-color:#357448; color:#357448; }
.tutorial-checklist { display:flex; gap:6px; margin:0; padding:0; list-style:none; justify-content:space-between; }
.tutorial-checklist li { font:700 10px/1.4 'Plus Jakarta Sans',sans-serif; color:#7e7665; white-space:nowrap; }
.tutorial-checklist .current { color:#a32933; }.tutorial-checklist .done { color:#28633e; }
.tutorial-workspace { position:relative; min-height:470px; height:calc(100dvh - 130px); overflow:hidden; background:#f4df95; isolation:isolate; }
.from-faciloom .tutorial-workspace { height:calc(100dvh - 188px); }
.tutorial-game.ticket-shell,.tutorial-game-dialog { transform-origin:top center; }
.tutorial-game.ticket-shell { position:absolute; top:8px; left:25%; transform:translateX(-50%); width:380px; padding-bottom:20px; box-shadow:none; }
.tutorial-game .ticket-hero { height:100px; aspect-ratio:auto; background-size:220px auto; }
.tutorial-game .ticket-meta { margin:8px 8% 0; }
.tutorial-game .ticket-room,.tutorial-game .ticket-points { min-height:44px; padding:4px 6px; border-width:2px; }
.tutorial-game .ticket-point-stack strong { font-size:18px; }.tutorial-game .ticket-room-stack strong { font-size:12px; }
.tutorial-game .ticket-hint { margin:12px 6% 8px; font-size:11px; }
.tutorial-game .ticket-progress { min-height:34px; margin:16px 10% 0; padding:5px 10px; }
.tutorial-game .ticket-progress>span { font-size:15px; }.tutorial-game .ticket-progress small { font-size:10px; }
.tutorial-game .ticket-footer { margin:16px 9% 0; }.tutorial-game .ticket-footer button { min-height:40px; padding:7px; }
.tutorial-shell .tutorial-game button:disabled { opacity:1; filter:none; box-shadow:inherit; }
.tutorial-game .card:active { transform:none; }
.tutorial-game .card .done-check { font-family:system-ui,sans-serif; }
.tutorial-game .card .done-selfie { opacity:.65; }
.tutorial-game .grid { z-index:0; }
.tutorial-game-dialog { position:absolute; z-index:2; top:18px; left:25%; transform:translateX(-50%); width:350px; padding:18px; background:#fff4d1; border:3px solid #174384; border-radius:16px; box-shadow:5px 6px 0 #b62830; box-sizing:border-box; }
.tutorial-game-dialog h2 { font:900 20px/1.3 'Unbounded',sans-serif; color:#104c9f; margin:0 0 12px; text-transform:none; }
.tutorial-game-dialog [data-focus=criterion] { padding:18px 12px; background:#ffe37e; border:2px solid #15376e; border-radius:9px; font-size:18px; }
.tutorial-eyebrow { margin:0 0 6px; font:900 10px/1.4 'Plus Jakarta Sans',sans-serif; letter-spacing:1px; text-transform:uppercase; color:#a12d35; }
.tutorial-card-actions { display:flex; gap:9px; margin-top:14px; }
.tutorial-shell button { font:800 13px/1.3 'Plus Jakarta Sans',sans-serif; text-transform:none; border:2px solid #17366c!important; border-radius:10px!important; padding:10px; min-height:44px; background:#fff9e8; color:#15376e; box-shadow:0 3px 0 #17366c; cursor:pointer; }
.tutorial-card-actions button { flex:1; min-width:0; font-size:12px; padding:8px; }
.tutorial-shell .btn-buy,.tutorial-shell .tutorial-primary { background:#b92e36; color:#fff6d5; }
.tutorial-shell .btn-green { background:#c8edcf; color:#174c31; }
.tutorial-shell button:focus-visible,.tutorial-shell input:focus-visible { outline:3px solid #1466d5; outline-offset:3px; }
.tutorial-shell .tutorial-game-dialog button:disabled { opacity:1; filter:none; cursor:default; }
.tutorial-criterion-line { font:600 12px/1.4 'Plus Jakarta Sans',sans-serif; margin:0 0 10px; }
.tutorial-photo-row { display:flex; gap:8px; height:46px; align-items:center; margin-bottom:8px; }.tutorial-photo-row button { flex:1; }
.tutorial-photo-preview { width:44px; height:44px; border-radius:7px; object-fit:cover; border:2px solid #15376e; }
.tutorial-shell label { display:block; font:800 12px/1.4 'Plus Jakarta Sans',sans-serif; margin:7px 0 4px; }
.tutorial-shell input:not([type=file]) { display:block; width:100%; height:42px; box-sizing:border-box; border:2px solid #aa996e!important; border-radius:8px!important; background:white; color:#15376e; padding:8px 10px; font:500 16px 'Plus Jakarta Sans',sans-serif; }
.tutorial-shell input:disabled { opacity:1; color:#15376e; -webkit-text-fill-color:#15376e; }
.tutorial-trade-dialog { padding:14px 16px; }
.tutorial-trade-dialog h2 { font-size:18px; margin-bottom:6px; }.tutorial-trade-dialog .tutorial-card-actions { margin-top:10px; }
.tutorial-score-panel { padding:12px; background:#104b9c; color:#fff3ce; border-radius:10px; font-size:12px; }
.tutorial-score-panel>div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0; }.tutorial-score-panel>div:last-child { border-top:1px solid #8ba2be; }
.tutorial-score-panel strong { font-weight:900; }.tutorial-score-panel>div:last-child strong { padding:4px 8px; background:#ffe27e; color:#15376e; border-radius:5px; }
.tutorial-log { margin:14px 0; padding:10px; border:1px solid #c9b57e; background:#fff9e8; border-radius:8px; }
.tutorial-log h3 { font-size:13px; margin:0 0 8px; }.tutorial-log>div { display:flex; gap:10px; justify-content:space-between; padding:8px 0; font-size:12px; }.tutorial-log small { display:block; font-size:11px; line-height:1.4; }
.tutorial-shade,.tutorial-arrow,.tutorial-confetti { position:absolute; z-index:10; inset:0; width:100%; height:100%; pointer-events:none; }
.tutorial-focus-ring { position:absolute; z-index:15; pointer-events:none; border:5px solid #ffe260; border-radius:14px; box-shadow:0 0 0 2px #15376e,0 0 22px #ffe26070; box-sizing:border-box; }
.tutorial-arrow { z-index:22; overflow:visible; }.tutorial-arrow path[class] { fill:none; stroke-linecap:round; }.tutorial-arrow-outline { stroke:#15376e; stroke-width:7; }.tutorial-arrow-line { stroke:#ffdc57; stroke-width:3; }
.tutorial-coach { position:absolute; z-index:25; width:300px; height:204px; display:flex; flex-direction:column; box-sizing:border-box; padding:8px; border:2px solid #17366c; border-radius:14px; background:#fffcef; box-shadow:3px 4px 0 #b72f36; }
.tutorial-coach-header { display:flex; gap:6px; align-items:center; min-height:44px; flex-shrink:0; }
.wonglet { flex:0 0 40px; width:40px; height:43.333px; background-image:url('wonglet.webp'); background-size:800% 1100%; background-repeat:no-repeat; }
.tutorial-coach h1 { font:900 13px/1.3 'Unbounded',sans-serif; text-transform:none; margin:0; color:#15376e; }
.tutorial-coach h1:focus { outline:none; }
.tutorial-coach-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:5px 3px 5px 0; scrollbar-width:thin; }
.tutorial-coach-body p { font:600 12px/1.45 'Plus Jakarta Sans',sans-serif; color:#263954; margin:0 0 5px; }
.tutorial-coach footer { flex-shrink:0; display:flex; align-items:center; gap:6px; min-height:36px; padding-top:4px; }
.tutorial-coach footer button { min-height:36px; padding:7px; font-size:12px; }
.tutorial-coach .tutorial-eyebrow { font-size:9px; margin-bottom:3px; }
.tutorial-coach .tutorial-primary { flex:1; }.tutorial-coach footer span { font:700 12px/1.4 'Plus Jakarta Sans',sans-serif; color:#a02a33; }
.tutorial-coach .tutorial-exit { font-size:10px; min-height:38px; padding:5px; border:none!important; box-shadow:none; background:transparent; text-decoration:underline; }
.tutorial-quiz { display:grid; gap:6px; }.tutorial-quiz:empty { display:none; }.tutorial-quiz button { text-align:left; padding:6px 8px; font-size:11px; min-height:34px; }
.tutorial-coach #tutorialError { color:#a22530; font-weight:800; margin:6px 0; padding:6px; background:#ffe4df; border-radius:6px; }.tutorial-coach #tutorialError:empty { display:none; }
.tutorial-foil { position:absolute; z-index:4; inset:0; width:100%; height:100%; pointer-events:none; }
.tutorial-coin { position:absolute; z-index:5; left:0; top:0; width:28px; height:28px; background:#f8d45a; border:3px solid #987229; border-radius:50%; color:#785616; display:grid; place-items:center; pointer-events:none; }
.tutorial-confetti { z-index:29; overflow:hidden; }.tutorial-confetti i { position:absolute; top:-10px; left:var(--x); width:9px; height:16px; border-radius:2px; animation:tutorial-confetti-fall 1.7s var(--delay) both ease-in; }
@keyframes tutorial-confetti-fall { 0% { transform:translateY(-20px) rotate(0); opacity:1; } 85%{opacity:1;} 100% { transform:translateY(720px) rotate(var(--spin)); opacity:0; } }
.tutorial-safety { margin:0; padding:8px; text-align:center; background:#fff9e8; font:600 10px/1.4 'Plus Jakarta Sans',sans-serif; }
.tutorial-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:759px) {
  .tutorial-hud { padding-inline:10px; }.tutorial-checklist { gap:3px; }.tutorial-checklist li { font-size:9px; }
  .tutorial-game.ticket-shell { left:50%; width:min(94%,320px); }
  .tutorial-game .ticket-hero { height:48px; background-size:110px auto; }
  .tutorial-game .ticket-meta { margin-top:6px; }.tutorial-game .ticket-room,.tutorial-game .ticket-points { min-height:38px; }
  .tutorial-game .ticket-room>i,.tutorial-game .ticket-points>i { font-size:17px; }
  .tutorial-game .ticket-hint { margin:10px 6% 7px; font-size:10px; }
  .tutorial-game .ticket-board-wrap { width:210px; margin:auto; }
  .tutorial-game .ticket-progress { margin-top:14px; }.tutorial-game .ticket-footer { margin-top:14px; }
  .tutorial-game-dialog { left:50%; width:min(92%,340px); }
  .tutorial-coach { height:190px; }
  .tutorial-coach h1 { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .tutorial-shell * { animation:none!important; transition:none!important; } }