/* Ritual Learn · hands-on app tutorials (phone and watch simulators built from the app's layouts) */
.ls{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:clamp(24px,4vw,56px);align-items:center;margin:26px 0;padding:clamp(20px,3vw,32px);border-radius:var(--r-lg);background:#070707;border:1px solid var(--line)}
.ls-phone{position:relative;width:100%;max-width:330px;margin:0 auto}
.ls-phone .dev{width:100%;height:auto;aspect-ratio:390/844;border-radius:16%/7.4%;background:linear-gradient(150deg,#55555a,#1e1e21 28%,#121214 62%,#3c3c40);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.25),0 0 0 1px #000,0 50px 90px -40px #000}
.ls-phone .glass{position:absolute;inset:1.45% 3.1%;border-radius:13.4%/6.2%;overflow:hidden;background:#000;isolation:isolate}
.ls-phone .island{position:absolute;z-index:30;top:2.7%;left:50%;width:30%;height:3.5%;transform:translateX(-50%);background:#000;border-radius:20px}
.ls-phone .ui{transform-origin:0 0;cursor:default;-webkit-user-select:none;user-select:none}
.ls-phone .ui [data-tap]{cursor:pointer}
.ls-side .k{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ls-side h4{font-size:clamp(22px,2.4vw,28px);font-weight:300;letter-spacing:-.025em;line-height:1.15;margin:10px 0 8px}
.ls-side>p{font-size:15px;color:var(--ink2);margin:0 0 16px}
.ls-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:t}
.ls-steps li{counter-increment:t;position:relative;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:11px 14px;border-radius:16px;border:1px solid transparent;color:var(--ink3);font-size:14.5px;line-height:1.45;transition:background .35s,border-color .35s,color .35s}
.ls-steps li::before{content:counter(t);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;border:1px solid var(--line2);color:var(--ink3);transition:all .35s}
.ls-steps li.on{background:rgba(230,191,89,.07);border-color:rgba(230,191,89,.3);color:var(--ink)}
.ls-steps li.on::before{border-color:var(--gold);color:var(--gold)}
.ls-steps li.ok{color:var(--ink2)}
.ls-steps li.ok::before{content:"";background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--gold)}
.ls-steps b{color:var(--ink);font-weight:500}
.ls-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.ls-reset{font:inherit;font-size:13px;color:var(--ink2);background:none;border:1px solid var(--line2);border-radius:99px;padding:8px 14px;cursor:pointer}
.ls-reset:hover{color:var(--ink);border-color:rgba(255,255,255,.3)}
.ls-done{font-size:13px;color:var(--gold);opacity:0;transition:opacity .4s}
.ls.complete .ls-done{opacity:1}
.ls-live{margin-top:14px;padding:12px 14px;border-radius:14px;background:#000;border:1px solid var(--line);font-size:13px;color:var(--ink2);min-height:44px}
.ls-live b{color:var(--gold);font-weight:500}
/* hint ring on the next thing to tap */
.ui .ls-hint{position:relative;z-index:6}
.ui .ls-hint::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(230,191,89,.9);animation:lshint 1.6s ease-out infinite;pointer-events:none}
@keyframes lshint{0%{opacity:.9;transform:scale(.96)}70%{opacity:0;transform:scale(1.08)}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ui .ls-hint::after{animation:none;opacity:.8}}

/* ---------- workout keyboard (RitualWorkoutKeyboard: 3×4 pad + right column) ---------- */
.ui .kb{position:absolute;left:0;right:0;bottom:0;height:296px;padding:8px 8px 34px;background:#000;border-top:.5px solid rgba(230,191,89,.22);display:grid;grid-template-columns:1fr 26%;gap:6px;transform:translateY(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1);z-index:20}
.ui .kb.on{transform:none}
.ui .kb .pad3{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:6px}
.ui .kb .col{display:grid;grid-template-rows:repeat(4,1fr);gap:6px}
.ui .kb button{font:inherit;border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.075);color:#fff;border-radius:12px;display:grid;place-items:center;cursor:pointer;transition:background .12s,transform .12s;-webkit-tap-highlight-color:transparent}
.ui .kb button:active{background:rgba(255,255,255,.16);transform:scale(.97)}
.ui .kb .dg{font-family:var(--round);font-size:26px;font-weight:300}
.ui .kb .ac{color:#e6bf59}
.ui .kb .ghost{background:transparent;border-color:rgba(255,255,255,.22)}
.ui .kb .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ui .kb .next{background:#e6bf59;color:#000;border-color:rgba(230,191,89,.6);font-size:15px;font-weight:600}
.ui .kb .blank{visibility:hidden}
.ui .kb svg{width:20px;height:20px}
.ui .fld{cursor:pointer;position:relative}
.ui .fld.focus{border-color:#e6bf59!important;border-width:1.8px;box-shadow:0 1px 8px rgba(230,191,89,.18)}
.ui .fld .ph{color:rgba(255,255,255,.3)}
.ui .fld .caret{display:none;width:2px;height:18px;background:#e6bf59;margin-left:1px;animation:caret 1s steps(2) infinite}
.ui .fld.focus .caret{display:inline-block}
@keyframes caret{50%{opacity:0}}
.ui .fld .tr.dn{color:#ff6b6b}
.ui .resttag{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:10px;font-weight:700;letter-spacing:.12em;color:rgba(255,255,255,.62)}
.ui .resttag.run{background:rgba(230,191,89,.16);border-color:rgba(230,191,89,.45);color:#e6bf59}

/* ---------- small sheets, toasts, chips used across sims ---------- */
.ui .toast{position:absolute;left:50%;top:70px;transform:translate(-50%,-10px);padding:10px 16px;border-radius:20px;background:rgba(30,30,30,.92);border:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1);z-index:25;pointer-events:none}
.ui .toast.on{opacity:1;transform:translate(-50%,0)}
.ui .chip{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.ui .chip.on{background:rgba(230,191,89,.18);border-color:rgba(230,191,89,.6);color:#e6bf59}
.ui .btnp{display:flex;align-items:center;justify-content:center;height:54px;border-radius:18px;background:#e6bf59;color:#000;font-size:16px;font-weight:600;cursor:pointer;transition:transform .15s}
.ui .btnp:active{transform:scale(.97)}
.ui .btns{display:flex;align-items:center;justify-content:center;height:46px;border-radius:15px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);font-size:14px;font-weight:600;cursor:pointer}
.ui .tile{position:relative;border-radius:22px;padding:16px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);cursor:pointer;transition:border-color .3s,background .3s}
.ui .tile.done{border-color:rgba(230,191,89,.55);background:linear-gradient(160deg,rgba(230,191,89,.18),rgba(230,191,89,.04))}
.ui .tile .tick{position:absolute;right:12px;top:12px;width:24px;height:24px;border-radius:50%;background:#e6bf59;color:#000;display:grid;place-items:center;font-size:13px;font-weight:800;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.ui .tile.done .tick{transform:none}
.ui .float{position:absolute;font-family:var(--round);font-size:20px;font-weight:600;color:#4dd980;pointer-events:none;animation:floatup 1.2s ease-out forwards;z-index:9}
@keyframes floatup{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-46px)}}

/* ---------- watch simulator ---------- */
.ls-watch{position:relative;width:min(260px,100%);margin:0 auto;aspect-ratio:208/248;border-radius:26%/22%;padding:6.5%;background:linear-gradient(150deg,#55555a,#1e1e21 40%,#3c3c40);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px #000}
.ls-watch::after{content:"";position:absolute;right:-3.5%;top:26%;width:4%;height:16%;border-radius:4px;background:linear-gradient(90deg,#3c3c40,#6a6a70)}
.ls-watch .wsc{position:relative;width:100%;height:100%;border-radius:21%/18%;overflow:hidden;background:#000}
.ls-watch .wui{position:absolute;left:0;top:0;width:208px;height:248px;transform-origin:0 0;font-family:Inter,sans-serif;color:#fff;-webkit-user-select:none;user-select:none}
.wui .top{position:absolute;left:0;right:0;top:6px;height:26px;display:flex;align-items:center;padding:0 14px 0 16px}
.wui .num{font-family:Inter,sans-serif;font-variant-numeric:tabular-nums}
.wui .wt{position:relative;flex:1;min-height:62px;padding:8px;border-radius:18px;background:linear-gradient(135deg,rgba(230,191,89,.24),rgba(255,255,255,.08));border:1px solid rgba(230,191,89,.32);display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;transition:transform .15s}
.wui .wt:active{transform:scale(.95)}
.wui .wt i{width:28px;height:28px;border-radius:50%;background:#e6bf59;display:grid;place-items:center;color:#000;font-style:normal;font-size:13px}
.wui .wt b{font-size:14px;font-weight:600}
.wui .hl{height:1px;background:rgba(255,255,255,.1)}
.wui .pg{position:absolute;inset:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.wui .dots{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:grid;gap:4px;z-index:5}
.wui .dots i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3)}
.wui .dots i.on{background:#fff;height:9px;border-radius:2px}
.wui .cb{border-radius:20px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600;cursor:pointer;background:rgba(255,255,255,.08)}

@media (max-width:760px){
  .ls{grid-template-columns:1fr;padding:18px 14px 20px;border-radius:26px;margin:24px -6px}
  .ls-phone{max-width:280px}
  .ls-steps li{padding:9px 12px;font-size:14px}
}