.touch-guide{margin-top:24px}.touch-guide-heading h3{margin:8px 0;font-size:23px;font-weight:650}.touch-guide-heading p:not(.eyebrow){color:var(--muted-foreground);max-width:720px;font-size:14px;line-height:1.7}.touch-demo-options{flex-wrap:wrap;align-items:end;gap:12px;margin:20px 0;display:flex}.touch-demo-options>div{flex-wrap:wrap;gap:4px;display:flex}.touch-demo-options .wc-button{min-height:44px}.touch-demo-options [aria-pressed=true]{border-color:var(--primary);color:var(--primary);background:#27341d}.touch-demo-options label{color:var(--muted-foreground);font-size:12px}.touch-demo-options select{background:var(--background);border:1px solid var(--border);min-height:44px;color:var(--foreground);border-radius:6px;padding:6px;font-size:14px;display:block}.touch-device-frame{border:5px solid #343e31;border-radius:22px;width:100%;height:660px;margin:0 auto 18px;overflow:hidden;box-shadow:0 12px 40px #0003}.touch-device-phone{max-width:390px}.touch-device-tablet{max-width:1100px;height:780px;overflow:auto}.touch-device-tablet .tablet-console{min-width:600px}.touch-demo-audio{color:var(--muted-foreground);font-size:10px}.phone-preview-stage{background:var(--background);place-items:center;height:100dvh;padding:12px;display:grid;overflow:hidden}:is(html:has(.phone-preview-stage),body:has(.phone-preview-stage)){overflow:hidden}.phone-preview-stage>:is(.phone-console,.phone-settings-preview){border:1px solid var(--border);border-radius:18px;width:min(100%,390px);height:min(844px,100dvh - 24px)}.phone-settings-preview{padding:16px;overflow-y:auto}.phone-settings-preview .lobby-grid{grid-template-columns:minmax(0,1fr)}@media (max-width:600px),(max-height:500px){.phone-preview-stage{padding:0}.phone-preview-stage>:is(.phone-console,.phone-settings-preview){border:0;border-radius:0;width:100%;height:100dvh}}@media (min-width:760px){.touch-device-tablet .touch-body{flex-direction:row;gap:18px}.touch-device-tablet .touch-squad-picker{flex-direction:column;width:130px;display:flex}.touch-device-tablet .touch-squad-picker button,.touch-device-tablet .touch-members{flex:1}.touch-device-tablet .touch-tabs button{flex-direction:row;font-size:13px}}@media (max-width:430px){.touch-guide{padding:12px}.touch-guide .touch-console{padding-left:8px;padding-right:8px}.touch-guide .touch-header h1{font-size:16px}}
