/* The /try/ page. Same tokens as ../site.css. */
.oseg{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:var(--bg2);border:1px solid var(--line);max-width:100%}
.oseg button{min-height:44px;padding:0 22px;border:0;border-radius:99px;background:transparent;color:var(--dim);font:600 15px var(--font);cursor:pointer;white-space:nowrap}
.oseg button:hover{color:var(--text)}
.oseg button[aria-checked="true"]{background:var(--bg);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.oseg button:focus-visible{outline:none;box-shadow:var(--focus)}
.pic img{display:block;width:100%;height:auto}
.try-strip{display:block;max-width:1100px;margin:36px auto 0}
.os-panel{max-width:980px;margin:32px auto 0}.os-panel h3{margin:0 0 6px}
.os-panel[hidden]{display:none!important}
.note{border-radius:12px;padding:12px 16px;margin:12px 0}.note.warn{background:var(--warn-bg);color:var(--warn)}
.cmdrow{position:relative;margin:16px 0 0}.cmdrow .cmd{margin:0;max-width:none;padding-right:104px}
.copy{position:absolute;right:10px;top:50%;transform:translateY(-50%);min-height:38px;padding:0 16px;border:0;border-radius:99px;background:var(--accent);color:var(--on-accent);font:600 14px var(--font);cursor:pointer}
.copy:hover{background:var(--accent-h)}.copy:focus-visible{outline:none;box-shadow:var(--focus)}
.copy.done{background:var(--green)}
.step{display:grid;grid-template-columns:1fr 1.3fr;gap:44px;align-items:center;max-width:1100px;margin:64px auto 0}
.step.flip{grid-template-columns:1.3fr 1fr}.step.flip>div{order:2}
.step h3{display:flex;gap:12px;align-items:center;font-size:24px;margin:0 0 10px}
.step p{color:var(--dim);margin:0}
.n{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:16px;font-weight:700}
.step .clip{margin:0}
.shot img{border:1px solid var(--line);border-radius:14px}
.progress{margin:10px 0 0;font-size:15px;color:var(--dim)}.progress #drive-count{font-weight:700;color:var(--text)}
.drive{list-style:none;padding:0;margin:32px auto 0;max-width:900px;display:grid;gap:14px}
.drive li{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:18px 22px}
.tick label{display:flex;gap:14px;align-items:center;font-size:19px;cursor:pointer;letter-spacing:-.01em}
.tick input{width:24px;height:24px;flex:none;accent-color:var(--accent);cursor:pointer}
.tick input:focus-visible{outline:none;box-shadow:var(--focus)}
.tick:has(input:checked){border-color:var(--green)}.tick:has(input:checked) b{text-decoration:line-through;text-decoration-color:var(--dim)}
.drive p{margin:10px 0 0 38px;color:var(--dim);font-size:16px}
.see span{font-weight:600;color:var(--ok);margin-right:6px}
.thumb{margin:14px 0 0 38px}.thumb img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
kbd{font:600 13px var(--mono);padding:2px 7px;border-radius:6px;border:1px solid var(--line);background:var(--bg2)}
.faqs{max-width:820px;margin:28px auto 0}.faqs code,.card code,.os-panel code,.drive code{font-size:.92em;background:var(--bg2);border-radius:6px;padding:1px 6px}
.feedback{margin-top:44px}.feedback p{max-width:60ch;margin:8px auto 18px;color:var(--dim)}
.nav-try{color:var(--accent)!important;font-weight:700}
@media (max-width:860px){.step,.step.flip{grid-template-columns:1fr;gap:20px}.step.flip>div{order:0}.thumb,.drive p{margin-left:0}.cmdrow .cmd{padding-right:16px;padding-bottom:62px}.copy{top:auto;bottom:10px;transform:none;right:10px}}
@media (prefers-reduced-motion:reduce){.tick,.copy{transition:none}}

.cmdrow .cmd{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all}
.words{margin:14px 0 0;padding-left:20px;color:var(--dim);font-size:15px}.words li{margin:4px 0}.words b{color:var(--text)}
@media (max-width:640px){.pic.where{display:none}}