.fg-tutorial-entry{position:fixed;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:1000;min-height:48px;padding:8px 14px;border:2px solid #dbc999;border-radius:14px;background:#162b39;color:#fff3cd;font:inherit;box-shadow:0 4px 14px #0006}
.topbar > .fg-tutorial-entry { position:static; flex:0 0 auto; align-self:flex-end; margin-left:auto; min-height:44px; padding:6px 12px; border:1px solid #79b8cb66; background:#1b385466; color:#d7edf8; box-shadow:none; }
.fg-tutorial-entry-icon { display:inline-grid; place-items:center; width:20px; height:20px; margin-right:6px; border:1px solid currentColor; border-radius:50%; font-family:Arial,sans-serif; font-weight:700; }
.brand-heading > .fg-tutorial-entry { position:absolute; top:0; right:0; bottom:auto; width:44px; height:44px; min-height:44px; padding:0; display:grid; place-items:center; border:1px solid #79b8cb66; border-radius:50%; background:#1b385466; color:#d7edf8; box-shadow:none; }
.brand-heading > .fg-tutorial-entry .fg-tutorial-entry-icon { width:auto; height:auto; margin:0; border:0; font-size:24px; }
.brand-heading > .fg-tutorial-entry .fg-tutorial-entry-label { display:none; }
.fg-tutorial-entry:focus-visible { outline:3px solid #ffe396; outline-offset:3px; }
@media(max-width:767px), (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
 .topbar > .brand-heading:first-child { padding-right:56px; }
 .brand-heading > div { min-width:0; }
 .brand-heading .header-racer { display:none; }
}
.fg-tutorial-root{position:fixed;inset:0;z-index:2147483100;color:#fff3cd;font-family:inherit;isolation:isolate}
/* 短页面也能把真实目标滚出讲解卡；仅播放步骤时保留空间，目录与退出时自动移除。 */
body.fg-tutorial-active:has(.fg-tutorial-root:not(.fg-tutorial-directory))::after{content:"";display:block;height:min(70dvh,600px);pointer-events:none}
body.fg-tutorial-active #today-pending-section.is-empty{display:block}
.fg-tutorial-empty-state{display:none}
body.fg-tutorial-active #today-pending-empty{display:block;margin:8px 12px;padding:10px 12px;border:1px dashed #91c4cf;border-radius:10px;background:#153445;color:#e9faf5;font-size:15px}
body.fg-tutorial-active .family-rpg .rpg-chest-card > .rpg-button[data-action="round-open"]{display:inline-flex;width:fit-content;min-width:82px;max-width:100%}
.fg-tutorial-example { display:grid; grid-template-columns:24px minmax(0,1fr); gap:4px 8px; margin:10px 0; padding:10px; border:1px solid #74aeba66; border-radius:10px; background:#24475b; }
.fg-tutorial-example p { margin:0; color:#e9faf5; font-size:18px; }
.fg-tutorial-example small { grid-column:2; color:#b9d0da; font-size:12px; }
.fg-tutorial-delivery-demo{margin:8px 0;padding:10px;border:1px solid #d9c78c;border-radius:10px;background:#1c3b49}.fg-tutorial-delivery-demo label{display:flex;align-items:center;gap:9px;font-size:14px}.fg-tutorial-delivery-demo input{width:20px;height:20px;accent-color:#ffe396}.fg-tutorial-delivery-demo small{display:block;margin-top:6px;color:#b9d0da;font-size:12px}
.fg-tutorial-shade{position:absolute;inset:0;background:#08101a99;pointer-events:auto}
.fg-tutorial-highlight{position:fixed;box-sizing:border-box;outline:3px solid #ffe396;outline-offset:2px;border:0;border-radius:10px;box-shadow:0 0 0 5px #ffe39633;pointer-events:none;background:#ffe39612}
.fg-tutorial-card{position:fixed;box-sizing:border-box;background:#173040;border:2px solid #dec98f;border-radius:18px;padding:16px;color:#fff3cd;display:flex;flex-direction:column;gap:10px;overflow:hidden;box-shadow:0 10px 40px #0008;max-width:calc(100vw - 24px)}
.fg-tutorial-card header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-shrink:0}.fg-tutorial-card header>button{flex-shrink:0;white-space:nowrap}.fg-tutorial-card h2{font-size:22px;margin:0;min-width:0;text-wrap:pretty}.fg-tutorial-card h3{font-size:19px;margin:0}.fg-tutorial-card p{margin:6px 0;font-size:17px;line-height:1.5}.fg-tutorial-child .fg-tutorial-copy>p:first-of-type{font-size:21px}
.fg-tutorial-card button{font:inherit;color:#fff3cd;background:#24495a;border:1px solid #aa9b74;border-radius:10px;min-height:48px;min-width:48px;padding:8px 12px;cursor:pointer;touch-action:manipulation}.fg-tutorial-card button:disabled{opacity:.45;cursor:default}.fg-tutorial-card button:focus-visible{outline:3px solid #ffe396;outline-offset:2px}.fg-tutorial-actions{display:flex;gap:8px;flex-shrink:0}.fg-tutorial-actions button:last-child{flex:1;background:#f1d795;color:#182b39;min-height:52px}.fg-tutorial-audio{display:flex;gap:8px;flex-shrink:0}.fg-tutorial-copy{overflow:auto;min-height:0}.fg-tutorial-card .fg-tutorial-note,.fg-tutorial-card .fg-tutorial-audio-status{font-size:14px;color:#d8e2db}.fg-tutorial-progress{font-size:14px;color:#cbdcd9}.fg-tutorial-directory .fg-tutorial-card{left:50%;top:50%;transform:translate(-50%,-50%);width:560px;max-height:calc(100dvh - 24px)}.fg-tutorial-topics{display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:auto;min-height:0}.fg-tutorial-topics article{padding:12px;border:1px solid #7b8f91;border-radius:12px}.fg-tutorial-topics article button{margin:4px 4px 0 0}.fg-tutorial-preferred{outline:2px solid #ffe396}.fg-tutorial-landscape .fg-tutorial-card{padding:10px;gap:6px}.fg-tutorial-landscape .fg-tutorial-card h2{font-size:19px}.fg-tutorial-landscape .fg-tutorial-card p{margin:2px 0}.fg-tutorial-landscape .fg-tutorial-card .fg-tutorial-audio button{font-size:14px;padding:5px 8px}
@media(max-width:480px){.fg-tutorial-topics{grid-template-columns:1fr}.fg-tutorial-card{padding:12px}.fg-tutorial-entry{font-size:14px}}
@media(min-width:900px){.fg-tutorial-entry{bottom:20px}}
@media (min-width:768px) and (orientation:landscape), (min-width:1025px) {
 #header-tutorial-slot .fg-tutorial-entry { position:static; min-height:44px; padding:8px 12px; border:1px solid #79b8cb66; border-radius:12px; background:#1b385466; color:#d7edf8; font-size:15px; white-space:nowrap; box-shadow:none; }
 #header-tutorial-slot .fg-tutorial-entry:hover { background:#244a68; border-color:#8cddd5; }
}
@media(prefers-reduced-motion:reduce){.fg-tutorial-root *{animation:none!important;transition:none!important}}
.fg-tutorial-card .fg-tutorial-audio-status{min-height:42px;line-height:21px;margin:2px 0;flex-shrink:0}
.fg-tutorial-root { color:#EDF3FA; }
.fg-tutorial-card { background:#21334A;color:#EDF3FA;border:1px solid #b5c3d666; }
.fg-tutorial-card button { background:transparent;color:#EDF3FA;border-color:#b5c3d666; }
.fg-tutorial-actions button:last-child { background:#86D7CD;color:#102B31; }
.fg-tutorial-topics article { border:0;border-bottom:1px solid #b5c3d633;border-radius:0; }
/* 目录条目不是选中状态，不使用教学步骤的金色高亮框。 */
.fg-tutorial-topics .fg-tutorial-preferred { outline:none; }
.fg-tutorial-topics h3 { display:flex;align-items:center;flex-wrap:wrap;gap:8px; }
.fg-tutorial-context-tag { display:inline-block;flex:none;padding:3px 8px;border-radius:6px;background:#86d7cd18;color:#a4e4da;font:500 12px/1.5 system-ui,sans-serif;white-space:nowrap; }
.fg-tutorial-example,.fg-tutorial-delivery-demo { background:#17253B;border:0; }
.fg-tutorial-highlight { outline-color:#E7C780;box-shadow:none;background:#e7c7800a; }
.fg-tutorial-card .fg-tutorial-note,.fg-tutorial-progress { color:#B5C3D6; }
.fg-tutorial-card .fg-tutorial-copy { min-height:120px; }

body.hd2d-preview .fg-tutorial-card {border-radius:12px;background:var(--fg-panel);border-color:var(--fg-border);color:var(--fg-text);box-shadow:0 10px 40px #102030a6}
body.hd2d-preview .fg-tutorial-card button {border-radius:8px}
body.hd2d-preview .fg-tutorial-card :is(p,small,.fg-tutorial-progress,.fg-tutorial-note,.fg-tutorial-audio-status) {font-family:system-ui,"Microsoft YaHei UI",sans-serif;font-variant-numeric:tabular-nums}
body.hd2d-preview .fg-tutorial-card :is(.fg-tutorial-progress,.fg-tutorial-note,.fg-tutorial-audio-status) {color:var(--fg-text)}
body.hd2d-preview :is(.fg-tutorial-example,.fg-tutorial-delivery-demo) {border-radius:8px;background:var(--fg-raised)}
body.hd2d-preview .fg-tutorial-context-tag {border-radius:4px;background:var(--fg-input);color:var(--fg-text)}
body.hd2d-preview .fg-tutorial-entry:not(.brand-heading > .fg-tutorial-entry) {border-radius:8px}