.tutorial-dialog,.tutorial-card{--tutorial-bg:#131313;--tutorial-panel:#1d1d1d;--tutorial-line:#353535;--tutorial-ink:#f2f2f2;--tutorial-muted:#a5a5a5;--tutorial-action:#f2f2f2;--tutorial-action-ink:#131313}.tutorial-dialog{width:min(560px,100vw - 28px);max-width:560px;max-height:calc(100dvh - 28px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));border:1px solid var(--tutorial-line);color:var(--tutorial-ink);background:var(--tutorial-bg);border-radius:24px;margin:auto;padding:0;overflow:hidden;box-shadow:0 24px 90px #0005}.tutorial-dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#000b}.tutorial-card{width:100%;min-width:0;max-width:560px;max-height:calc(100dvh - 28px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));background:var(--tutorial-bg);color:var(--tutorial-ink);border-radius:24px;flex-direction:column;display:flex;overflow:hidden}.tutorial-top{font-size:calc(12px * var(--text-scale,1));color:var(--tutorial-muted);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px 10px;display:flex}.tutorial-top>span,.tutorial-skip{align-items:center;gap:7px;display:inline-flex}.tutorial-skip{min-height:40px;color:var(--tutorial-muted);font-size:calc(12px * var(--text-scale,1))}.tutorial-skip:hover{color:var(--tutorial-ink)}.tutorial-progress{flex-shrink:0;gap:6px;padding:0 24px;display:flex}.tutorial-progress button{flex:1;align-items:center;min-width:0;height:24px;display:flex}.tutorial-progress span{background:var(--tutorial-line);border-radius:8px;width:100%;height:3px}.tutorial-progress [aria-current=step] span{background:var(--tutorial-ink)}.tutorial-progress button:disabled{cursor:default;opacity:.4}.tutorial-scroll{overscroll-behavior:contain;scrollbar-width:thin;min-height:0;padding:18px 24px 12px;overflow-y:auto}.tutorial-eyebrow{font-size:calc(11px * var(--text-scale,1));letter-spacing:.07em;color:var(--tutorial-muted);text-transform:uppercase;margin:0 0 10px}.tutorial-scroll :is(h1,h2){font-size:calc(28px * var(--text-scale,1));letter-spacing:-.045em;outline:none;margin:0 0 15px;font-weight:550;line-height:1.18}.tutorial-description{font-size:calc(14px * var(--text-scale,1));color:var(--tutorial-muted);margin:0 0 24px;line-height:1.7}.tutorial-example{border:1px solid var(--tutorial-line);background:var(--tutorial-panel);border-radius:16px;padding:18px}.tutorial-demo-heading{font-size:calc(13px * var(--text-scale,1));align-items:center;gap:8px;margin:0 0 18px;font-weight:500;display:flex}.tutorial-demo-heading>span{color:var(--tutorial-muted);font-size:calc(10px * var(--text-scale,1));margin-left:auto;font-weight:400}.tutorial-demo-totals{justify-content:space-between;gap:16px;margin-bottom:18px;display:flex}.tutorial-demo-totals>span{gap:4px;display:grid}.tutorial-demo-totals>span:last-child{text-align:right}.tutorial-demo-totals small{font-size:calc(11px * var(--text-scale,1));color:var(--tutorial-muted)}.tutorial-demo-totals strong{font-size:calc(27px * var(--text-scale,1));letter-spacing:-.05em;font-weight:500}.tutorial-demo-row{border-top:1px solid var(--tutorial-line);font-size:calc(12px * var(--text-scale,1));justify-content:space-between;align-items:center;gap:12px;padding:14px 0;line-height:1.5;display:flex}.tutorial-demo-row>span{min-width:0}.tutorial-demo-row>span>svg{vertical-align:middle;margin-right:6px}.tutorial-demo-row strong{white-space:nowrap;font-weight:500}.tutorial-demo-row small{color:var(--tutorial-muted);font-size:calc(10px * var(--text-scale,1));margin-top:3px;display:block}.tutorial-demo-add{background:var(--tutorial-action);color:var(--tutorial-action-ink);font-size:calc(12px * var(--text-scale,1));border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:13px 8px;font-weight:500;display:flex}.tutorial-phone{aspect-ratio:9/16;background:#292929;border:1px solid #666;border-radius:29px;max-width:100%;height:clamp(290px,44dvh,390px);margin:0 auto;padding:5px;line-height:1.3;box-shadow:0 12px 30px #0003}.tutorial-phone-screen{background:var(--tutorial-bg);height:100%;color:var(--tutorial-ink);border-radius:23px;flex-direction:column;display:flex;overflow:hidden;container-type:size}.tutorial-phone-header{border-bottom:.278cqh solid var(--tutorial-line);flex-shrink:0;justify-content:space-between;align-items:center;gap:1.111cqh;min-height:11.111cqh;padding:0 2.778cqh;display:flex}.tutorial-phone-header>strong{letter-spacing:-.04em;font-size:2.778cqh;font-weight:550}.tutorial-phone-header>span{color:var(--tutorial-muted);gap:2.222cqh;display:flex}.tutorial-phone-header svg{stroke-width:1.6px;width:3.056cqh;height:3.056cqh}.tutorial-phone-content{flex-direction:column;flex:1;min-height:0;padding:3.333cqh 3.056cqh 0;display:flex}.tutorial-phone-month{justify-content:space-between;align-items:center;gap:1.111cqh;margin-bottom:2.778cqh;display:flex}.tutorial-phone-month>svg{border:.278cqh solid var(--tutorial-line);box-sizing:content-box;border-radius:50%;width:5.278cqh;height:5.278cqh;padding:1.111cqh}.tutorial-phone-month>strong{letter-spacing:-.05em;font-size:5.278cqh;font-weight:550}.tutorial-phone-month small{color:var(--tutorial-muted);letter-spacing:0;font-size:2.778cqh;font-weight:400}.tutorial-phone-summary{background:var(--tutorial-panel);border:.278cqh solid var(--tutorial-line);border-radius:3.056cqh;grid-template-columns:1fr 1fr;gap:2.5cqh 1.111cqh;margin-bottom:3.333cqh;padding:3.333cqh 2.778cqh;display:grid}.tutorial-phone-summary>div{gap:1.944cqh;display:grid}.tutorial-phone-summary>div:nth-child(2){text-align:right}.tutorial-phone-summary span{color:var(--tutorial-muted);font-size:2.222cqh}.tutorial-phone-summary strong{letter-spacing:-.055em;white-space:nowrap;font-size:6.389cqh;font-weight:500}.tutorial-phone-summary small{color:var(--tutorial-muted);white-space:nowrap;font-size:1.944cqh}.tutorial-phone-summary p{color:var(--tutorial-muted);grid-column:1/-1;margin:0;font-size:2.222cqh}.tutorial-phone-entry{border-bottom:.278cqh solid var(--tutorial-line);align-items:center;gap:1.389cqh;padding:3.333cqh 0;font-size:2.778cqh;display:flex}.tutorial-phone-entry>span:first-child{flex:1}.tutorial-phone-entry>span:nth-child(2){text-align:right}.tutorial-phone-entry strong{letter-spacing:-.025em;white-space:nowrap;font-weight:500}.tutorial-phone-entry small{color:var(--tutorial-muted);margin-top:.833cqh;font-size:2.222cqh;display:block}.tutorial-phone-entry svg{width:2.5cqh;height:2.5cqh;color:var(--tutorial-muted)}.tutorial-phone-note{color:var(--tutorial-muted);text-align:center;justify-content:center;gap:1.4cqh;margin:auto 0 3.333cqh;padding-top:3.333cqh;font-size:1.5cqh;line-height:1.7;display:flex}.tutorial-phone-note span{white-space:nowrap}.tutorial-phone-bottom{background:var(--tutorial-action);color:var(--tutorial-action-ink);border-radius:2.5cqh;flex-shrink:0;justify-content:center;align-items:center;gap:1.667cqh;margin:0 3.056cqh 3.611cqh;padding:3.333cqh 1.111cqh;font-size:2.778cqh;font-weight:500;display:flex}.tutorial-phone-bottom svg{width:3.611cqh;height:3.611cqh}.tutorial-duration{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:15px;display:grid}.tutorial-duration button{border:1px solid var(--tutorial-line);border-radius:11px;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:72px;padding:10px 2px;display:flex}.tutorial-duration strong{font-size:calc(23px * var(--text-scale,1));font-weight:500}.tutorial-duration small{font-size:calc(10px * var(--text-scale,1));color:var(--tutorial-muted)}.tutorial-duration button[aria-pressed=true]{background:var(--tutorial-action);color:var(--tutorial-action-ink);border-color:var(--tutorial-action)}.tutorial-duration button[aria-pressed=true] small{color:inherit;opacity:.7}.tutorial-hint{font-size:calc(12px * var(--text-scale,1));color:var(--tutorial-muted);margin:12px 0 0;line-height:1.65}.tutorial-star{border:1px solid var(--tutorial-line);width:44px;height:44px;color:var(--tutorial-muted);border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;display:flex}.tutorial-star[aria-pressed=true]{color:var(--tutorial-ink)}.tutorial-export-options{grid-template-columns:1fr 1fr;gap:8px;display:grid}.tutorial-export-options button{border:1px solid var(--tutorial-line);min-height:60px;font-size:calc(11px * var(--text-scale,1));border-radius:11px;justify-content:center;align-items:center;gap:7px;padding:10px 6px;display:flex}.tutorial-export-options [aria-pressed=true]{border-color:var(--tutorial-ink);background:var(--tutorial-bg)}.tutorial-finish-list{gap:20px;padding:6px 0 8px;display:grid}.tutorial-finish-list>div{align-items:center;gap:14px;display:flex}.tutorial-finish-list svg{flex-shrink:0}.tutorial-finish-list strong{font-size:calc(14px * var(--text-scale,1));font-weight:500}.tutorial-finish-list small{font-size:calc(12px * var(--text-scale,1));color:var(--tutorial-muted);margin-top:4px;line-height:1.6;display:block}.tutorial-actions{flex-shrink:0;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px 24px;display:flex}.tutorial-actions button{min-height:48px;font-size:calc(14px * var(--text-scale,1));border-radius:12px;justify-content:center;align-items:center;gap:8px;display:flex}.tutorial-back{color:var(--tutorial-muted);padding:8px 0}.tutorial-back:disabled{visibility:hidden}.tutorial-next{background:var(--tutorial-action);color:var(--tutorial-action-ink);min-width:130px;padding:12px 22px;font-weight:500}.tutorial-next:disabled{opacity:.3;cursor:not-allowed}.tutorial-choices{gap:12px;padding:0 0 8px;display:grid}.tutorial-choice{text-align:left;border:1px solid var(--tutorial-line);background:var(--tutorial-panel);border-radius:16px;align-items:center;gap:15px;width:100%;min-height:100px;padding:20px 17px;display:flex}.tutorial-choice:hover{border-color:var(--tutorial-muted)}.tutorial-choice>span{flex:1;min-width:0}.tutorial-choice strong{font-size:calc(16px * var(--text-scale,1));font-weight:500;display:block}.tutorial-choice small{font-size:calc(12px * var(--text-scale,1));color:var(--tutorial-muted);margin-top:5px;line-height:1.6;display:block}.tutorial-actions>a{min-height:48px;font-size:calc(14px * var(--text-scale,1));align-items:center;gap:8px;display:inline-flex}.install-example{border:1px solid var(--tutorial-line);background:var(--tutorial-panel);border-radius:20px;max-width:330px;margin:0 auto;padding:12px}.install-browser{border:1px solid var(--tutorial-line);font-size:calc(11px * var(--text-scale,1));color:var(--tutorial-muted);border-radius:10px;align-items:center;gap:9px;padding:10px;display:flex}.install-browser span{flex:1;min-width:0}.install-brand{font-size:calc(16px * var(--text-scale,1));flex-direction:column;align-items:center;gap:10px;padding:30px 8px;display:flex}.install-brand strong{font-weight:500}.install-brand img{border-radius:12px}.install-action{border:1px solid var(--tutorial-line);background:var(--tutorial-bg);font-size:calc(12px * var(--text-scale,1));border-radius:11px;align-items:center;gap:10px;padding:14px 12px;line-height:1.5;display:flex}.install-action>span:first-of-type{flex:1;min-width:0}.install-switch{background:var(--tutorial-action);width:36px;height:22px;color:var(--tutorial-action-ink);border-radius:20px;flex-shrink:0;justify-content:flex-end;align-items:center;padding:3px;display:flex}.install-confirm{text-align:center;font-size:calc(12px * var(--text-scale,1));background:var(--tutorial-action);color:var(--tutorial-action-ink);border-radius:10px;margin-top:10px;padding:12px}.tutorial-source{font-size:calc(12px * var(--text-scale,1));color:var(--tutorial-muted);text-underline-offset:3px;margin-top:16px;padding:4px 0;text-decoration:underline;display:inline-block}.safari-example{text-align:center;margin:0}.safari-real-image{object-fit:contain;border-radius:14px;width:auto;max-width:100%;height:clamp(240px,40dvh,380px);margin:0 auto;display:block}.safari-webapp-image{object-fit:cover;object-position:center;background:#fff;width:calc(clamp(240px,40dvh,380px)/1.96078)}.safari-example figcaption{font-size:calc(11px * var(--text-scale,1));color:var(--tutorial-muted);max-width:330px;margin:14px auto 0;line-height:1.6}.safari-example a{text-underline-offset:3px;text-decoration:underline}.tutorial-page{height:100dvh;padding:calc(14px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px));background:var(--background);display:flex;overflow-y:auto}.tutorial-page>.tutorial-card{border:1px solid var(--tutorial-line);margin:auto}html[data-theme=light] :is(.tutorial-dialog,.tutorial-card){--tutorial-bg:#fff;--tutorial-panel:#f5f5f2;--tutorial-line:#d7d7d2;--tutorial-ink:#20201e;--tutorial-muted:#656560;--tutorial-action:#20201e;--tutorial-action-ink:#fff}@media (max-width:400px){.tutorial-top{padding:12px 18px 6px}.tutorial-progress{padding:0 18px}.tutorial-scroll{padding:14px 18px 8px}.tutorial-scroll :is(h1,h2){font-size:calc(25px * var(--text-scale,1))}.tutorial-description{font-size:calc(13px * var(--text-scale,1));margin-bottom:18px}.tutorial-example{padding:14px}.tutorial-actions{padding:16px 18px 18px}.tutorial-demo-totals strong{font-size:calc(25px * var(--text-scale,1))}.tutorial-demo-heading{font-size:calc(12px * var(--text-scale,1))}.tutorial-demo-heading>span{font-size:calc(9px * var(--text-scale,1))}}