.to-stage{place-items:center stretch;padding:clamp(16px,3vw,28px)}.to-screen{background:var(--surface-3);width:100%;max-width:460px;box-shadow:inset 0 0 0 1px var(--border);text-align:left;border-radius:20px;margin:0 auto;padding:clamp(16px,3vw,24px);font-size:14px;container-type:inline-size}.to-col{gap:12px;display:grid}.to-row{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.to-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.to-split,.to-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.to-end{justify-content:flex-end;display:flex}.to-center{justify-content:center;display:flex}.to-h{font-family:var(--font-display);font-size:24px;font-weight:300;line-height:1.1}.to-side-layout{grid-template-columns:minmax(96px,.8fr) 2fr;gap:16px;display:grid}.to-side{border-right:1px solid var(--border);align-content:start;gap:4px;padding-right:12px;display:grid}.to-t{min-height:36px;color:var(--text);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:12px;align-items:center;gap:8px;padding:8px 12px;transition:background-color .2s,box-shadow .2s,transform .2s;display:inline-flex;position:relative}.to-t:hover{box-shadow:inset 0 0 0 1.5px var(--accent-a)}.to-t:active{transform:scale(.98)}.to-t:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.to-t.is-set{box-shadow:inset 0 0 0 1.5px var(--accent-a)}.to-t.is-ok{box-shadow:inset 0 0 0 1.5px var(--pass)}.to-t.is-bad{box-shadow:inset 0 0 0 1.5px var(--fail)}.to-input{gap:6px;width:100%;padding:8px;display:grid}.to-label{color:var(--muted);font-size:12px}.to-box{background:var(--surface-2);height:36px;box-shadow:inset 0 0 0 1px var(--border);border-radius:10px;display:block}.to-button{background:var(--text);width:100%;min-height:44px;color:var(--bg);border-radius:999px;justify-content:center;font-weight:600}.to-end .to-button{width:auto;padding:8px 20px}.to-bar .to-button{width:auto;min-height:36px;padding:8px 16px}.to-link{text-underline-offset:3px;color:var(--muted);text-decoration:underline}.to-nav,.to-sidelink{font-weight:500}.to-side .to-t{width:100%}.to-skip{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600}.to-logo{font-family:var(--font-display);font-size:20px}.to-logo-mark{background:var(--accent-grad);border-radius:50%;width:20px;height:20px}.to-icon{justify-content:center;width:40px;padding:8px}.to-check,.to-toggle{width:100%}.to-toggle{justify-content:space-between}.to-tick{width:18px;height:18px;box-shadow:inset 0 0 0 1.5px var(--muted);border-radius:6px}.to-switch{background:var(--accent-a);border-radius:999px;width:36px;height:20px;position:relative}.to-switch:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;position:absolute;top:2px;right:2px}.to-product{gap:8px;width:100%;padding:8px;display:grid}.to-thumb{aspect-ratio:4/3;background:linear-gradient(140deg,#cd57ff38,#ffce1f29);border-radius:10px;display:block}.to-pname{font-weight:600}.to-add{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);border-radius:999px;justify-self:start;padding:4px 12px;font-size:12px;font-weight:600}.to-badge{z-index:1;background:var(--accent-grad);color:#111011;min-width:24px;height:24px;font:600 12px/1 var(--font-mono);border-radius:999px;place-items:center;padding:0 4px;display:grid;position:absolute;top:-8px;right:-8px}.to-t.is-ok .to-badge{background:var(--pass)}.to-t.is-bad .to-badge{background:var(--fail)}.to-right{z-index:1;background:var(--surface-2);min-width:24px;height:24px;color:var(--pass);font:600 12px/1 var(--font-mono);box-shadow:inset 0 0 0 1.5px var(--pass);border-radius:999px;place-items:center;padding:0 4px;display:grid;position:absolute;top:-8px;left:-8px}.to-actions{grid-template-columns:auto 1fr;gap:12px;display:grid}.to-actions>:only-child{grid-column:1/-1}.to-actions .hh-cta:disabled{opacity:.55;cursor:default}.to-demo{gap:12px;display:flex}.to-demo-item{background:var(--surface-2);width:56px;height:36px;box-shadow:inset 0 0 0 1px var(--border);border-radius:12px;position:relative}.to-demo-item .to-badge{animation:1.5s ease-in-out infinite to-pop;animation-delay:inherit}@keyframes to-pop{0%,60%,to{transform:scale(1)}30%{transform:scale(1.25)}}@container (width<=400px){.to-side-layout{grid-template-columns:1fr}.to-side{border-right:0;border-bottom:1px solid var(--border);grid-auto-flow:column;padding:0 0 12px}}@media (prefers-reduced-motion:reduce){.to-demo-item .to-badge{animation:none}.to-t{transition:none}}