#tutorial{width:min(660px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:2px solid #a8b9bf;border-radius:0;background:#192630;color:#edf4ec;overflow:auto;font-family:BedwarsPixel,monospace}
#tutorial::backdrop{background:#08131de0}
#tutorial .tutorial-top{padding:14px 20px 10px;background:#293d49;border-bottom:2px solid #0e1a24}
#tutorial-step{font-size:19px;color:#c0d5d9;letter-spacing:1px}
#tutorial-meter{display:block;width:100%;height:7px;margin-top:8px;accent-color:#e6bd56}
#tutorial-reading{padding:18px 24px;overflow:auto}
#tutorial .tutorial-mark{display:flex;align-items:center;gap:14px;color:#f3ce72;font-size:20px}
#tutorial svg{width:42px;height:42px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:miter}
#tutorial h2{font-size:34px;line-height:1.05;margin:14px 0 16px;color:#fff2c9;letter-spacing:0}
#tutorial h2:focus{outline:none}
#tutorial p{font-size:21px;line-height:1.2;margin:12px 0;color:#d4e2e5}
#tutorial-navigation{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 20px;border-top:2px solid #3c505b;background:#14202a;position:sticky;bottom:0}
#tutorial button{font-family:inherit;font-size:21px;min-height:46px;padding:9px 16px;border-radius:0;touch-action:manipulation}
#tutorial-skip{margin-right:auto;background:transparent;border:1px solid #70868f;color:#c6d4d9}
#tutorial-next,#tutorial-keep{background:#e4b94d;color:#15232c;border:2px solid #ffe09b}
#tutorial-back,#tutorial-confirm-skip{background:#2b414f;color:#fff;border:2px solid #8096a0}
#tutorial button:focus-visible{outline:3px solid #fff;outline-offset:3px}
#tutorial button:disabled{opacity:.4}
#tutorial-confirmation{padding:26px}
#tutorial-confirmation .tutorial-choice{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
#tutorial [hidden]{display:none!important}
#tutorial-button{width:100%;margin:12px 0;min-height:48px}
@media(max-height:500px){#tutorial-reading{padding:12px 20px}#tutorial h2{font-size:29px;margin:8px 0}#tutorial p{font-size:19px;margin:10px 0}#tutorial .tutorial-mark svg{width:26px;height:26px}#tutorial-navigation{padding:8px 14px}#tutorial .tutorial-top{padding:8px 14px}}
@media(max-width:440px){#tutorial h2{font-size:30px}#tutorial p{font-size:20px}#tutorial-reading{padding:16px}#tutorial-navigation{gap:7px;padding:10px}#tutorial button{font-size:19px;padding:9px 12px}}