.preview-tools{display:flex;align-items:center;gap:20px}.device-toggle{display:flex;align-items:center;gap:3px;padding:4px;border:1px solid #cfcec4;border-radius:9px;background:#e9e9e1}.device-toggle button{display:flex;align-items:center;gap:7px;border:0;border-radius:6px;background:none;color:#74776b;min-height:34px;padding:7px 10px;font-size:10px;font-weight:650;transition:background .18s,color .18s}.device-toggle button[aria-pressed=true]{background:#fffef8;color:#22251d;box-shadow:0 1px 3px #20221415}.device-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.preview-canvas{width:100%;min-width:0;position:relative;overflow:visible;align-self:start}.preview-canvas .stage-wrap{max-width:none;transform-origin:top left;container:preview / inline-size;will-change:auto}.preview-canvas .stage-wrap[data-device=phone]{border-radius:23px;border:4px solid #33362e;box-shadow:0 18px 45px #20221420}.preview-canvas .stage-wrap[data-device=tablet]{border-radius:16px;border:3px solid #33362e}.preview-canvas .app-screen{height:610px}.preview-canvas .app-nav{width:56px}.preview-canvas .app-content{padding:26px 30px}.preview-canvas .app-content h4{font-size:29px}.preview-canvas .app-top{font-size:10px}.preview-canvas .app-grid{grid-template-columns:1fr 1fr;gap:12px}.preview-canvas .app-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.preview-canvas .app-banner{height:152px}.preview-canvas .portrait-wrap img{height:205px}.preview-canvas .profile-cover>img{width:48%;margin-left:auto}.preview-canvas .profile-cover:after{background:linear-gradient(90deg,#20241c 30%,#20241c60 65%,transparent 100%)}.preview-canvas .discovery-search{grid-template-columns:minmax(0,1fr) 155px}.preview-canvas #help-results{grid-template-columns:1fr 1fr}.preview-canvas .stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.preview-canvas .stat-grid .app-card{display:block;padding:15px}.preview-canvas .stat-grid .metric{font-size:28px}.preview-canvas .stat-grid p{font-size:9px}.preview-canvas .stage-top{height:38px;padding:0 15px;font-size:10px}.preview-canvas .preview-label{font-size:8px}.preview-canvas .stage-caption{min-height:40px;padding:10px 15px;font-size:10px}.preview-canvas .dj-card{display:block}.preview-canvas .dj-card>div:last-child{padding:17px}.preview-canvas .dj-card strong{font-size:16px}.preview-canvas .dj-card p{font-size:11px}.preview-canvas .dj-price{font-size:14px}.preview-canvas #dj-results{grid-template-columns:1fr 1fr}.preview-canvas .app-nav .avatar{margin-top:auto}.preview-canvas .profile-cover{height:235px}.preview-canvas .app-row{font-size:12px}.preview-canvas .app-content .sub{font-size:13px}.preview-canvas .app-content .mini-note{font-size:11px;line-height:1.55}.preview-canvas .profile-bio{font-size:12px}
@container preview (max-width:800px){.preview-canvas .app-content{padding:25px}.preview-canvas .app-content h4{font-size:27px}.preview-canvas .app-banner{height:145px}.preview-canvas .portrait-wrap img{height:190px}.preview-canvas .app-screen{height:650px}}
@container preview (max-width:480px){.preview-canvas .app-screen{height:620px}.preview-canvas .app-nav{width:40px;padding:17px 4px;gap:20px}.preview-canvas .app-nav button{width:30px}.preview-canvas .app-nav img{width:23px}.preview-canvas .app-content{padding:21px 17px}.preview-canvas .app-content h4{font-size:27px;line-height:1.12}.preview-canvas .app-top{font-size:9px}.preview-canvas .app-content .sub{font-size:12px}.preview-canvas .app-content .mini-note{font-size:10px}.preview-canvas .discovery-search{grid-template-columns:1fr;gap:8px}.preview-canvas #dj-results{grid-template-columns:1fr;gap:12px}.preview-canvas .dj-card{display:grid;grid-template-columns:38% minmax(0,1fr);min-height:135px}.preview-canvas .dj-card .portrait-wrap img{height:100%;min-height:135px}.preview-canvas .dj-card>div:last-child{padding:16px 13px;align-self:center}.preview-canvas .dj-card strong{font-size:15px}.preview-canvas .dj-card p{font-size:10px;line-height:1.5;margin:7px 0 13px}.preview-canvas .dj-price{font-size:12px}.preview-canvas .dj-price small{font-size:9px}.preview-canvas .profile-cover{height:220px}.preview-canvas .profile-cover>img{width:100%}.preview-canvas .profile-cover:after{background:linear-gradient(0deg,#11190de8,transparent 85%)}.preview-canvas .profile-cover h4{font-size:31px}.preview-canvas .app-row{font-size:11px;gap:12px}.preview-canvas .app-card{padding:14px}.preview-canvas .app-grid{gap:8px}.preview-canvas #help-results{grid-template-columns:1fr}.preview-canvas .stat-grid{grid-template-columns:1fr;gap:7px}.preview-canvas .stat-grid .app-card{display:flex;align-items:center;justify-content:space-between;padding:11px 13px;gap:12px}.preview-canvas .stat-grid .metric{font-size:23px}.preview-canvas .stat-grid p{font-size:9px;margin:0}.preview-canvas .stage-top{height:35px;padding:0 11px;font-size:9px}.preview-canvas .preview-label{font-size:7px}.preview-canvas .stage-caption{font-size:9px}.preview-canvas .profile-bio{font-size:11px}}
@container preview (max-width:330px){.preview-canvas .app-content{padding:18px 12px}.preview-canvas .app-content h4{font-size:24px}.preview-canvas .preview-label{font-size:6px}}
@media(max-width:1200px){.tour-bar{gap:16px;flex-wrap:wrap}.preview-tools{gap:15px}.role-tabs button{padding-left:13px;padding-right:13px}.role-tabs button span{margin-left:10px}}
@media(max-width:680px){.tour-bar{display:flex;flex-direction:column;align-items:stretch}.preview-tools{justify-content:space-between;gap:12px}.preview-tools .text-button{margin:0;font-size:10px}.device-toggle button{padding:8px;font-size:9px;gap:5px}.device-toggle svg{width:13px;height:13px}.preview-canvas{align-self:stretch}.role-tabs button span{margin-left:0}}
.capture .preview-canvas .app-screen{height:672px}.capture .preview-canvas [data-device=desktop] .app-content{padding:27px 36px}.capture .preview-canvas [data-device=desktop] .app-content h4{font-size:32px}.capture .preview-canvas [data-device=desktop] .profile-cover{height:245px}.capture .preview-canvas [data-device=desktop] .portrait-wrap img{height:210px}
@media(prefers-reduced-motion:reduce){.device-toggle button{transition:none}}

/* Keep native select and time values fully readable in the phone workspace. */
@container preview (max-width:480px){.preview-canvas .app-grid:has(input,select){grid-template-columns:1fr}}