.brand-wrap{display:flex;align-items:center;gap:14px;flex-shrink:0}.email-button{width:36px;height:36px;display:grid;place-items:center;border:1px solid #dce6df;border-radius:50%;color:#216959;background:#f6faf7}.email-button:hover{background:#e6f1e9}.email-button svg{width:18px;height:18px}.visitor-count{font-size:11px;white-space:nowrap;color:#547766;font-variant-numeric:tabular-nums}.mobile-nav{display:none}.expand-preview{font-size:10px;border:1px solid #cfddce;border-radius:6px;padding:6px 9px;margin-left:auto;white-space:nowrap}#busy{max-width:calc(100% - 20px)}.preview-open{overflow:hidden}.preview-panel.preview-expanded{position:fixed;inset:12px;z-index:80;width:auto;height:auto;min-height:0;max-height:none;display:flex;border:1px solid #bccfbd;box-shadow:0 0 0 30px #213b24cc}.preview-expanded #viewport{flex:1;min-height:0}.preview-expanded .model-metrics{flex-shrink:0}.preview-expanded .preview-controls{flex-shrink:0}
@media(max-width:1100px){.header-actions{flex-wrap:wrap;justify-content:flex-end}.header-actions #draft-status{display:none}.header-caption{display:none}header{height:auto;min-height:78px;gap:12px;padding-top:12px;padding-bottom:12px}}
@media(max-width:900px){.settings-panel{display:block!important;min-width:0}.workspace>*{min-width:0}.preview-panel{position:relative;top:auto;min-width:0}}
@media(max-width:650px){html{scroll-padding-top:64px}body{overflow-x:hidden}header{padding:12px 14px;flex-wrap:wrap;gap:10px}.brand-wrap{gap:12px}.brand{font-size:23px;gap:7px}.brand-icon{width:32px;height:32px;font-size:30px}.studio{display:inline;font-size:8px;letter-spacing:1px}.email-button{width:44px;height:44px}.header-actions{width:100%;display:flex;align-items:center;justify-content:space-between;gap:7px}.header-actions .visitor-count{font-size:11px;flex:1}.header-actions #draft-status{display:none}.header-actions select,.header-actions .secondary{min-height:44px;font-size:12px;padding:8px}.header-actions select{width:75px}.header-actions #save{font-size:12px}.header-caption{display:none}.mobile-nav{display:flex;position:sticky;top:0;z-index:12;gap:8px;padding:8px 14px;background:#f4f6f3f5;border-bottom:1px solid #dfe7de;backdrop-filter:blur(8px)}.mobile-nav button{flex:1;min-height:44px;background:#fff;border:1px solid #d8e3d8;border-radius:8px;color:#216959;font-size:13px}.workspace{display:flex;flex-direction:column;gap:16px}.source-panel{order:0}.preview-panel{order:1;min-height:520px;height:clamp(520px,72svh,680px);width:100%}.settings-panel{order:2;width:100%}.settings-panel section[data-panel]{padding-bottom:15px}main{padding:24px 14px 0}.panel{padding:18px}.intro h1{font-size:25px;line-height:1.35}.intro p{font-size:12px;line-height:1.7}.steps{display:none}.dropzone{padding:20px 12px}.dropzone strong{font-size:14px}.dropzone>span:not(.upload-icon),.dropzone small{font-size:11px}.image-wrap{height:260px}.source-head{font-size:11px}.source-head span:first-child{max-width:75%}.help,.source-panel .help,.settings-panel .help{font-size:12px;line-height:1.75}.panel-title h2{font-size:15px}.text-button{font-size:12px;min-height:40px}.settings-tabs button{min-height:44px;font-size:12px}.settings-tabs{overflow:visible}.range-head,.section-label,.toggle-line{font-size:13px}.range-head input[type=number],.ring-detail input[type=number],input[type=number],select{font-size:16px;min-height:38px}.range-head span{white-space:nowrap}.ring-detail input[type=number]{width:60px}input[type=range]{height:22px;margin:8px 0 12px;touch-action:pan-y}.ring-toggle{font-size:13px;min-height:44px}.ring-toggle input,input[type=checkbox]{width:18px;height:18px;flex-shrink:0}.ring-connection,.ring-summary{font-size:11px}.ring-delete{min-width:40px;min-height:40px}.ring-select{font-size:13px;min-height:40px}.ring-match{min-height:40px;font-size:11px}.ring-auto-height{font-size:12px}.secondary,.primary{min-height:44px;font-size:13px}.group-info{font-size:12px}.group-info small{font-size:10px}.settings-panel #groups{display:grid;grid-template-columns:1fr;gap:10px}.group{padding:14px}.group-top{font-size:12px}.height-input{font-size:16px;width:62px}.brush-tools{flex-wrap:wrap;gap:3px}.brush-tools button{min-height:44px;font-size:11px;padding:8px 7px}.preview-header{gap:8px;padding:14px}.preview-header .section-label{font-size:12px}.preview-header .history button{min-width:35px;min-height:40px}.expand-preview{font-size:11px;min-height:40px;padding:7px}.preview-filter{padding:0 14px 10px;flex-wrap:wrap;gap:10px}.preview-filter label{font-size:11px}#visibility button{min-width:32px;min-height:36px;font-size:11px}.view-preset button,.preview-tools button{min-width:38px;min-height:40px;font-size:11px}.preview-controls{padding:8px!important;gap:8px;flex-wrap:wrap}.canvas-hint{font-size:10px}.preview-controls .canvas-hint{width:100%;text-align:center}.model-metrics{gap:10px;padding:12px}.model-metrics small{font-size:10px}.model-metrics strong{font-size:14px}.model-metrics>span{font-size:10px;max-width:125px}.preview-footer{font-size:10px;padding:10px}.ring-handle{width:30px;height:30px;font-size:12px}#ring-edit-banner{font-size:11px;bottom:110px}#ring-edit-banner button{min-height:36px;font-size:11px}#busy{white-space:normal;width:max-content;font-size:11px}dialog{padding:22px;width:calc(100% - 24px);max-height:calc(100svh - 32px);overflow:auto}dialog h2{font-size:20px;padding-right:12px}dialog li{font-size:13px}.dialog-close{width:44px;height:44px;right:4px;top:2px}#draft-banner{flex-wrap:wrap;font-size:12px;gap:8px}.preview-panel.preview-expanded{inset:8px;min-height:0;height:auto;width:auto}.preview-expanded .preview-header{padding:10px}.preview-expanded .model-metrics{display:none}.preview-expanded #viewport{min-height:0}footer{flex-wrap:wrap;font-size:10px;line-height:1.7}.source-panel,.preview-panel,.settings-panel{scroll-margin-top:70px}}
@media(max-width:360px){.header-actions{flex-wrap:wrap}.visitor-count{flex-basis:100%!important}.brand{font-size:20px}.preview-header{flex-wrap:wrap}.preview-panel{min-height:540px}.ring-height-head{flex-wrap:wrap}.model-metrics>span{max-width:100px}}

@media(max-width:650px){.header-actions{display:grid;grid-template-columns:75px 1fr 1fr}.header-actions .visitor-count{grid-column:1/-1}.header-actions #load,.header-actions #save{width:100%}}