/* Phone-only corrections. No declarations apply above 600 CSS pixels. */
@media (max-width:600px){
 html body{ -webkit-text-size-adjust:100%;text-size-adjust:100% }
 html body :is(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea){font-size:16px!important;max-width:100%;box-sizing:border-box}
 html body :is(button,.button,summary){touch-action:manipulation}
 html body :is(.pixel-main,.banner-main,.gradient-main,.ency-main,.coordinate-main){padding-left:12px;padding-right:12px;min-width:0}
 html body :is(.pixel-workspace,.bridge-layout,.shape-layout,.gradient-workspace,.banner-layout,.workspace,.ency-workspace)>*{min-width:0}
 /* Navigation wraps as a deliberate second row; long brand names stay readable. */
 html body .tool-topbar,html body #dashboard .tool-topbar{padding:12px;gap:8px;min-height:0;box-sizing:border-box}
 html body .tool-topbar .pixel-brand,html body #dashboard .tool-topbar .pixel-brand{font-size:clamp(19px,5.5vw,25px);gap:6px;min-width:0}
 html body .tool-topbar .preferences-button{margin-left:auto;flex:none;width:44px;height:44px}
 html body .tool-topbar nav,html body #dashboard .tool-topbar nav{order:4;flex:1 0 100%;flex-wrap:wrap;gap:8px 16px;justify-content:flex-start;margin:0}
 html body .tool-topbar nav>a{font-size:15px;min-height:40px;display:flex;align-items:center}
 html body :is(.home-tools-panel,.pixel-tools-panel,.settings-menu .nav-menu){position:fixed!important;inset:116px 12px auto!important;min-width:0!important;width:auto!important;max-width:none!important;max-height:calc(100dvh - 140px)!important;margin:0!important;translate:none!important;overflow:auto;z-index:100}
 html body :is(.home-tools-panel,.pixel-tools-panel) a{min-height:44px;font-size:15px}
 html body #dashboard :is(.tools-main-link,.tools-palette-link) b{font-size:16px;line-height:1.3}
 html body #dashboard :is(.tools-main-link,.tools-palette-link) small{font-size:12px;line-height:1.5}
 /* Homepage: readable copy and a reserved seat above the featured card. */
 .platform-page #dashboard :is(.home-topbar,.hero,.home-content){width:calc(100% - 24px)}
 .platform-page #dashboard .home-topbar{gap:6px;padding:10px 0;min-height:0}
 .platform-page #dashboard .home-topbar .logo{font-size:clamp(18px,5.2vw,24px);gap:5px;min-width:0;margin-right:auto}
 .platform-page #dashboard .home-topbar :is(.header-feedback,.preferences-button){width:44px;height:44px;min-width:44px;min-height:44px;margin:0;flex:none}
 .platform-page #dashboard .home-topbar nav{gap:12px;flex-wrap:wrap}
 .platform-page #dashboard .home-topbar summary{min-height:44px;box-sizing:border-box;display:flex;align-items:center;font-size:15px}
 .platform-page #dashboard .hero{min-height:0;padding:26px 0 34px}
 .platform-page #dashboard .hero h1{font-size:clamp(29px,8vw,39px);line-height:1.13;letter-spacing:-.6px;overflow-wrap:normal}
 .platform-page #dashboard .hero p{font-size:14px;line-height:1.7;max-width:34em}
 .platform-page #dashboard .hero .eyebrow{font-size:10px;line-height:1.5}
 .platform-page #dashboard .hero .hero-viewer-actions{flex-wrap:wrap;gap:14px;align-items:flex-start}
 .platform-page #dashboard .hero .primary{font-size:15px;min-height:44px;height:auto;padding:12px 14px}
 .platform-page #dashboard .hero-all-tools{font-size:15px;min-height:44px;display:flex;align-items:center}
 .platform-page #dashboard .catalog-heading{margin-bottom:20px}
 .platform-page #dashboard .catalog-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;box-sizing:border-box;gap:4px}
 .platform-page #dashboard .catalog-filters button{min-height:44px;font-size:16px;padding:9px 12px}
 .platform-page #dashboard .catalog-list{gap:18px}
 .platform-page #dashboard .catalog-featured{margin-top:78px}
 .platform-page #dashboard .mascot-shelf>.card-mascot{width:88px;height:88px;right:18px;top:-6px;pointer-events:none}
 .platform-page #dashboard .catalog-card{grid-template-columns:minmax(0,1fr);padding:10px;gap:0;min-height:0}
 .platform-page #dashboard .catalog-card>.catalog-preview{grid-column:1;grid-row:1;min-height:0}
 .platform-page #dashboard .catalog-build-preview{height:230px}
 .platform-page #dashboard .catalog-build-preview img{height:100%;max-height:100%;object-fit:contain}
 .platform-page #dashboard .catalog-item-preview{height:112px;padding:15px}
 .platform-page #dashboard .catalog-copy{grid-column:1;grid-row:2;padding:20px 8px 14px}
 .platform-page #dashboard .catalog-copy h3{font-size:26px;line-height:1.2;margin-bottom:10px;overflow-wrap:break-word}
 .platform-page #dashboard .catalog-copy>p{font-size:14px;line-height:1.65;color:#617257}
 .platform-page #dashboard .catalog-copy .catalog-features{font-size:12px;line-height:1.6;margin-top:12px}
 .platform-page #dashboard .catalog-action{grid-column:1;grid-row:3;min-width:0;justify-self:stretch;margin:0 8px 10px;font-size:17px;min-height:44px;white-space:normal;text-align:center}
 #dashboard .project-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 #dashboard .project-image{height:180px}
 #dashboard .project-body{padding:14px}
 #dashboard :is(.project-meta,.card-footer){font-size:12px;line-height:1.5;flex-wrap:wrap}
 #dashboard :is(.quickstart button,.all-projects){font-size:13px;min-height:44px}
 #dashboard .workflow-steps>li{grid-template-columns:1fr}
 #dashboard .workflow-image{height:180px}
 #dashboard :is(.workflow-step-copy p,.knowledge-answer p,.studio-description,.studio-features p){font-size:14px;line-height:1.7}
 #dashboard .workflow-step-copy h3,#dashboard .studio-features h3{font-size:18px}
 #dashboard .footer-links{display:flex;flex-wrap:wrap;gap:5px 16px;font-size:14px}
 #dashboard .footer-links a{min-height:40px;display:flex;align-items:center}
 #dashboard .home-footer p{font-size:12px;line-height:1.6}
 /* Tool workspaces: stack controls, keep previews and action groups inside the phone. */
 html body :is(.pixel-settings,.bridge-layout,.shape-layout,.gradient-workspace,.ency-workspace){grid-template-columns:minmax(0,1fr)}
 html body :is(.pixel-intro,.bridge-heading,.shape-heading,.banner-intro,.gradient-intro,.coordinate-intro,.tool-intro){min-width:0;gap:12px;flex-wrap:wrap}
 html body :is(.pixel-intro,.bridge-heading,.shape-heading,.banner-intro,.gradient-intro,.coordinate-intro,.tool-intro) h1{font-size:clamp(27px,7.5vw,34px);line-height:1.2;overflow-wrap:break-word}
 html body :is(.bridge-note,.shape-hint,.shape-footnote,.path-style small,.pixel-muted,.pixel-local,.pixel-upload small,.picker-note,.local-note){font-size:13px;line-height:1.6}
 html body :is(.bridge-actions,.shape-actions,.pixel-exports,.banner-actions,.palette-actions,.gradient-actions){display:flex;flex-wrap:wrap;gap:8px}
 html body :is(.bridge-actions,.shape-actions,.pixel-exports,.banner-actions,.palette-actions,.gradient-actions)>:is(button,a){flex:1 1 130px;min-width:0;min-height:44px;white-space:normal;font-size:14px}
 html body :is(.bridge-material-row,.pixel-material){min-width:0;font-size:13px}
 html body :is(.bridge-material-list,.pixel-material-list,#pathMaterials){grid-template-columns:minmax(0,1fr)}
 html body :is(.bridge-stage,.path-stage,.path-stage canvas){min-height:300px}
 html body .shape-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 html body .shape-option{min-height:64px;font-size:15px}
 html body .path-styles{grid-template-columns:minmax(0,1fr)}
 html body .path-style small{font-size:13px}
 html body .tool-palette .match-controls{min-width:0;width:100%;flex-wrap:wrap}
 html body .tool-palette .block-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 html body .tool-palette .matches-heading{flex-wrap:wrap;gap:12px}
 html body .ency-toolbar{grid-template-columns:minmax(0,1fr)}
 html body .ency-toolbar>*{grid-column:1;min-width:0}
 html body .ency-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 html body .ency-detail-hero{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:16px}
 html body .ency-detail-hero :is(canvas,.ency-icon){width:72px;height:72px}
 html body .ency-detail h2{font-size:23px;overflow-wrap:anywhere}
 html body .banner-workflow{flex-wrap:wrap;justify-content:flex-start;font-size:12px;gap:8px 16px}
 html body .banner-swatches{grid-template-columns:repeat(8,minmax(0,1fr))}
 html body .banner-pattern-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 html body .banner-layers{grid-template-columns:minmax(0,1fr);max-height:240px;overflow:auto}
 html body .banner-panel{padding:14px}
 html body .gradient-picker{width:calc(100vw - 20px);max-width:calc(100vw - 20px);padding:15px;box-sizing:border-box}
 /* Viewer remains a workspace: scrollable tool strip, bounded inspector, usable photo controls. */
 html body #studio .studio-header{flex-wrap:wrap;gap:8px;padding:8px;min-height:56px;height:auto}
 html body #studio .studio-header :is(button,.button){min-height:40px;font-size:13px}
 html body #studio .tool-dock{left:6px;right:6px;max-width:none;transform:none;flex-wrap:wrap}
 html body #studio .tool-dock .build-tools{flex:1;overflow-x:auto;min-width:0;scrollbar-width:thin}
 html body #studio .build-tools button{min-height:42px;font-size:12px;padding:9px 10px;flex:none;white-space:nowrap}
 html body #studio .camera-options>summary{min-height:42px;box-sizing:border-box}
 html body #studio .camera-options .viewer-toolbar{width:min(340px,calc(100vw - 24px));right:0;max-height:65dvh;overflow:auto;box-sizing:border-box}
 html body #studio .inspector{max-width:calc(100% - 16px);width:320px;right:8px;top:80px;bottom:8px;box-sizing:border-box}
 html body #studio .inspector-tabs button{min-height:44px;font-size:11px}
 html body dialog{max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:18px;overflow:auto}
 html body #photoDialog{width:calc(100vw - 12px);max-width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:calc(100dvh - 12px);padding:0}
 html body #photoDialog .photo-header{height:64px;padding:12px}
 html body #photoDialog .photo-layout{height:calc(100% - 64px);grid-template-columns:1fr;grid-template-rows:minmax(220px,1fr) minmax(200px,42%)}
 html body #photoDialog .photo-workspace{padding:10px;min-height:0}
 html body #photoDialog .photo-settings{border-left:0;border-top:1px solid #ffffff20;padding:14px;gap:14px;min-height:0;overflow:auto}
 html body #photoDialog :is(label,.photo-footnote,.photo-help){font-size:12px;line-height:1.5}
 html body #photoDialog :is(button,select){min-height:44px}
 html body.legal-page main{padding:22px 16px}
 html body.legal-page :is(p,dd,li){font-size:14px;line-height:1.75;overflow-wrap:anywhere}
 html body.legal-page nav{flex-wrap:wrap;gap:5px 14px}
 html body.legal-page nav a{display:inline-flex;align-items:center;min-height:40px}
 html body .changelog-entry p{font-size:13px;line-height:1.6}
}
@media (max-width:380px){
 .platform-page #dashboard .home-topbar .logo{font-size:18px}
 .platform-page #dashboard .catalog-card{padding:6px}
 .platform-page #dashboard .catalog-copy h3{font-size:24px}
 html body .tool-palette .block-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 html body .shape-layer{gap:8px}
}
@media (max-width:600px){
 .platform-page #dashboard .catalog-featured{margin-top:0}
 .platform-page #dashboard .mascot-shelf:has(>.card-mascot:not([hidden])) .catalog-featured{margin-top:78px}
 .platform-page #dashboard .catalog-card.catalog-palette{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;min-height:0}
 .platform-page #dashboard .catalog-card.catalog-palette>.catalog-preview{grid-column:1;grid-row:1;height:112px;min-height:0}
 .platform-page #dashboard .catalog-card.catalog-palette>.catalog-copy{grid-column:1;grid-row:2;padding:18px 8px 14px;text-align:center}
 .platform-page #dashboard .catalog-card.catalog-palette>.catalog-copy h3{font-size:26px}
 .platform-page #dashboard .catalog-card.catalog-palette>.catalog-copy>p{font-size:14px;line-height:1.65}
 .platform-page #dashboard .catalog-card.catalog-palette>.catalog-action{grid-column:1;grid-row:3;width:auto;justify-self:stretch;margin:0 8px 10px;min-width:0;min-height:44px;font-size:17px}
}
@media (max-width:600px){
 html body .tool-topbar nav,html body #dashboard .tool-topbar nav{gap:8px;justify-content:flex-start}
 html body .tool-topbar nav>a,html body #dashboard .tool-topbar nav>a{font-size:14px}
 html body .tool-topbar .pixel-tools-menu>summary,html body #dashboard .tool-topbar .pixel-tools-menu>summary{font-size:14px;gap:5px;padding:7px 8px}
 html body #photoDialog .photo-settings input[type=range]{min-height:28px}
}
@media (max-width:600px){
 html body .pixel-footer{flex-wrap:wrap;gap:12px;padding:20px 14px}
 html body .pixel-footer nav{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
 html body .pixel-footer nav a{display:inline-flex;align-items:center;min-height:40px}
 html body .release-copy p{font-size:13px;line-height:1.65}
 html body .release-row time{font-size:12px}
 html body .release-copy :is(strong,a){font-size:17px;line-height:1.35}
}