@font-face{font-family:DaykeyIntro;src:url('assets/assets/fonts/BarlowCondensed-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:DaykeyIntro;src:url('assets/assets/fonts/BarlowCondensed-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
#daykey-tutorial{--intro-accent:#ffda00;box-sizing:border-box;width:min(100%,560px);max-width:100%;height:100%;height:100dvh;max-height:100dvh;margin:auto;border:0;padding:max(12px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom));background:#090b0d;color:#f4ebdd;font:20px/1.25 DaykeyIntro,system-ui,sans-serif;overscroll-behavior:contain}
#daykey-tutorial[open]{display:flex;flex-direction:column}
#daykey-tutorial::backdrop{background:#090b0d}
#daykey-tutorial [hidden]{display:none!important}
#daykey-tutorial header,#daykey-tutorial footer{display:flex;align-items:center;gap:16px;flex-shrink:0}
#daykey-tutorial header{justify-content:space-between}
#daykey-tutorial .intro-wordmark{font:600 26px system-ui,sans-serif;letter-spacing:-1.5px}
#daykey-tutorial .intro-wordmark span{color:#ffa800}
#daykey-tutorial button{touch-action:manipulation;cursor:pointer;min-width:64px;min-height:48px;border:0;border-radius:7px;background:transparent;color:#bdb4a7;font:600 18px DaykeyIntro,system-ui,sans-serif;padding:12px 16px}
#daykey-tutorial button:focus-visible{outline:2px solid #f4ebdd;outline-offset:3px}
#daykey-tutorial [data-tutorial-next]{margin-left:auto;min-width:112px;background:var(--intro-accent);color:#090b0d}
#daykey-tutorial [data-tutorial-progress]{font-size:16px;color:#bdb4a7;white-space:nowrap}
#daykey-tutorial .intro-content{flex:1;min-height:0;overflow:auto;padding:24px 0;overscroll-behavior:contain}
#daykey-tutorial h1{font-size:34px;font-weight:600;line-height:1.08;margin:0 0 16px}
#daykey-tutorial p{color:#bdb4a7;margin:0 0 28px}
#daykey-tutorial .intro-date{display:flex;gap:6px;margin-bottom:20px}
#daykey-tutorial .intro-date span{flex:1;text-align:center;border:1px solid #3a3b3b;border-radius:7px;background:#17191a;padding:14px 4px;font-size:42px;font-weight:600}
#daykey-tutorial .intro-day{border-left:4px solid var(--part);padding:10px 12px;background:#17191a;margin:0 0 3px}
#daykey-tutorial .intro-day small{display:block;color:var(--part);font-size:13px;letter-spacing:1px;margin-bottom:6px}
#daykey-tutorial .intro-example{padding:20px 0;border-bottom:1px solid #3a3b3b;font-size:25px}
#daykey-tutorial .intro-example strong{font-weight:400;color:#7fe09b}
#daykey-tutorial .intro-example small{display:block;margin-top:8px;font-size:17px;color:#bdb4a7}
#daykey-tutorial .intro-more{background:#17191a;border:1px solid #3a3b3b;border-radius:18px;padding:20px}
#daykey-tutorial .intro-more h2{font-size:23px;margin:0 0 12px;font-weight:600}
#daykey-tutorial .intro-task{border-bottom:1px solid #2b2d2e;padding:8px 0;min-height:25px}
#daykey-tutorial .intro-task::before{content:'□';margin-right:14px;color:#bdb4a7}
#daykey-tutorial .intro-more h2:last-of-type{margin-top:24px}
@media(max-height:600px){#daykey-tutorial .intro-content{padding:12px 0}#daykey-tutorial h1{font-size:29px}}