.mobile-only{display:none}.crop-disclosure>summary,.box-disclosure>summary{display:none}.crop-disclosure{border:0}.box-disclosure{min-width:0}
.canvas-scroll:not(.zoomed){overflow:hidden}
@media(min-width:901px) and (max-width:1200px){.box-disclosure{grid-column:1;grid-row:2/5}.materials>.material-header{grid-column:2;grid-row:2}.materials>.color-list{grid-column:2;grid-row:3/5}.materials>.export-actions{grid-column:1;grid-row:5}.materials>.sample-note{grid-column:2;grid-row:5}}
@media(max-width:900px){
  :root{background:#fcfaff;font-size:16px}body{background:#fcfaff;padding-bottom:calc(96px + env(safe-area-inset-bottom))}main{padding:0 18px;max-width:660px}.mobile-only{display:block}
  .site-header{height:78px;padding:0 20px;max-width:660px;background:#fcfaff;gap:16px}.site-header nav,.header-action{display:none}.brand>.wallfid-wordmark{min-width:138px}.brand>.wallfid-wordmark>span.wallfid-lettering{font-size:31px}.brand>.wallfid-wordmark:after{top:27px;width:85px}.brand>.wallfid-wordmark>span.brand-descriptor{font-size:9px;margin-top:10px;letter-spacing:1.1px}
  .mobile-help{margin-left:auto;display:flex;align-items:center;gap:7px;min-height:44px;font-size:14px;color:#675679}.mobile-help span{display:grid;place-items:center;width:21px;height:21px;border:1px solid #b9a4d0;border-radius:50%;font-size:13px}
  .spark-hero,.idea-section,.workspace-intro,.make-section{display:none}.mobile-intro{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:15px 17px;background:#ede7fa;border-radius:16px;margin:4px 0 18px;overflow:hidden;min-height:139px}.mobile-intro>div{position:relative;z-index:1;flex:1;min-width:0}.mobile-intro p{font-size:10px;letter-spacing:1.1px;color:#7d6596}.mobile-intro h1{font-size:31px;line-height:1.15;margin:7px 0 8px;letter-spacing:-.8px;font-weight:550}.mobile-intro h1 em{font-family:Georgia,serif;font-weight:400;color:#9851ac}.mobile-intro span{font-size:13px;line-height:1.55;color:#756485}.mobile-intro img{width:112px;height:auto;margin-right:-20px;flex:none}
  .workspace-shell{margin:0;padding:0;border:0}.mobile-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;position:sticky;top:0;z-index:12;background:#fcfaff;padding:9px 0 13px;margin:0 0 15px;border-bottom:1px solid #e4d9ee;scroll-margin-top:0}.mobile-steps button{display:flex;justify-content:center;align-items:center;gap:7px;min-height:45px;font-size:14px;border-radius:25px;color:#8a789d}.mobile-steps button span{display:grid;place-items:center;width:23px;height:23px;border:1px solid #d5c6e3;border-radius:50%;font-size:12px}.mobile-steps button[aria-current=step]{background:#ede4f8;color:#6032a1;font-weight:600}.mobile-steps button[aria-current=step] span{background:#7545bc;color:white;border-color:#7545bc}
  .workspace{display:block;padding:0;scroll-margin-top:76px}.workspace>.settings,.workspace>.preview,.workspace>.materials{display:none;padding:0;border:0;outline:0}.workspace[data-mobile-panel=setup]>.settings,.workspace[data-mobile-panel=preview]>.preview,.workspace[data-mobile-panel=materials]>.materials{display:block}.panel-title{margin:0 0 20px}.panel-title .step-number{display:none}.panel-title h2,.preview-top h2{font-size:23px;letter-spacing:-.5px}.settings>.panel-title{display:none}
  .setting-section{margin-bottom:20px}.section-title{margin-bottom:12px}.section-title h3{font-size:17px}.size-options{gap:10px}.size-options button{height:90px;border-radius:12px;background:white;min-width:0}.size-options strong{font-size:24px}.size-options small{font-size:12px}.board-icon{margin-bottom:6px}.size-options button.selected{background:#f0e8fa}.settings .hint{font-size:13px;color:#8a769b;line-height:1.55}.settings>.setting-section:first-of-type .hint{margin-top:10px}
  .upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:17px 10px;border-radius:12px;min-height:110px;background:#fff}.upload-icon{font-size:22px;line-height:1}.upload-zone strong{font-size:17px}.upload-zone small{font-size:12px}.file-status{font-size:12px;margin:9px 0;overflow-wrap:anywhere}.examples{font-size:13px;display:flex;gap:8px;align-items:center}.examples>span{flex-basis:auto;margin:0 4px 0 0;font-size:12px}.examples button{padding:7px 9px;border:1px solid #e2d6ed;border-radius:20px;min-height:44px;font-size:13px;background:white}.examples button.active{background:#eee4fb;border-color:#c8b2e3;color:#6436a4}
  .crop-disclosure{border:1px solid #e1d5ed;border-radius:12px;padding:0 14px;background:white;margin-bottom:16px}.crop-disclosure>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;font-size:15px;min-height:49px;cursor:pointer}.crop-disclosure>summary::-webkit-details-marker,.box-disclosure>summary::-webkit-details-marker{display:none}.crop-disclosure>summary span{font-size:22px;font-weight:300;color:#9678b5}.crop-disclosure[open]>summary span{transform:rotate(45deg)}.crop-disclosure>.section-title{padding-top:12px}.crop-content{padding-bottom:17px;gap:14px}.crop-controls label{font-size:14px}.crop-controls input{min-height:30px}.crop-content canvas{width:88px;height:88px}.crop-controls{gap:9px}
  .final-setting{margin-bottom:10px}.final-setting .hint{margin-top:5px;margin-left:25px}.check-row{font-size:14px;min-height:44px}.calibration{font-size:13px;margin-top:14px}.calibration summary{min-height:40px;padding:10px 0}.calibration input{font-size:16px;min-height:44px}.settings>#generateButton,.settings>.hint.centre{display:none}.initial-setting input{font-size:24px;min-height:44px}
  .preview-top{align-items:center;margin-bottom:18px}.preview-top .step-number{display:none}.preview-top>div{min-width:0}.subtle-button{min-height:44px;font-size:13px}.view-options{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#ede7f4;border-radius:10px;padding:4px;margin-bottom:15px}.view-options button{min-height:42px;padding:7px;font-size:14px;border:0;border-radius:7px}.view-options button.active{background:white;box-shadow:0 2px 5px #38224c12;color:#6735aa}.canvas-stage{padding:13px;border-radius:16px;background:#eee7f7}.board-stage-label{font-size:10px;letter-spacing:.6px;margin-bottom:13px}.board-stage-label span:last-child{font-size:11px}.canvas-scroll{padding:3px 3px 10px;touch-action:pan-x pan-y}.canvas-scroll canvas{max-width:none}.stage-caption{font-size:11px;margin-top:8px}.stage-caption span:last-child{font-size:10px}.preview-tools{padding:10px 0;font-size:13px;gap:8px}.preview-tools label{display:flex;align-items:center;gap:6px}.zoom-tools{gap:5px}.zoom-tools button{min-width:44px;min-height:44px;border-radius:9px;background:white;border:1px solid #e3d7ec;font-size:20px}.zoom-tools #zoomReset{font-size:13px}.zoom-tools span{font-size:12px;min-width:34px}.stats{padding:15px 0 18px;gap:0}.stats strong{font-size:27px}.stats span{font-size:12px}.stats>div+div{padding-left:12px}.preview-tip,.preview-caption{font-size:13px;line-height:1.6}.preview-caption{margin-top:8px;color:#8a789b}
  .workspace[data-mobile-panel=materials]>.materials{display:flex;flex-direction:column;gap:0}.materials>.panel-title{order:0}.selected-colour-note{order:1;background:#f0e8fa;border-radius:12px;padding:13px 15px;margin-bottom:19px}.selected-colour-note p{font-size:14px;line-height:1.6;color:#6b4989}.selected-colour-note button{font-size:14px;color:#7545bc;min-height:42px;padding-top:6px}.selected-colour-note button:disabled{display:none}.material-header{order:2;font-size:14px;margin-bottom:8px;min-height:35px}.color-list{order:3;height:auto;max-height:370px;overflow-y:auto;border:1px solid #e5d9ee;border-radius:12px;padding:0 10px;background:white;margin-bottom:17px}.color-row{min-height:63px;gap:12px;padding:11px 3px}.color-info strong{font-size:17px}.color-info small{font-size:12px}.color-swatch{width:29px;height:29px}.color-amount{font-size:22px}.color-amount small{font-size:12px}.box-disclosure{order:4;border:1px solid #e2d6ec;border-radius:12px;padding:0 13px;background:white;margin-bottom:18px}.box-disclosure>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;min-height:49px;font-size:14px;cursor:pointer}.box-disclosure>summary span{font-size:22px;color:#9575b5}.box-disclosure[open]>summary span{transform:rotate(45deg)}.box-topline{padding-top:10px}.box-topline h3{font-size:16px}.box-topline>span{font-size:12px}.box-grid{margin-top:12px;gap:4px;padding:4px;max-width:none}.box-cell{height:44px;border-radius:2px}.compartment-number{font-size:12px;line-height:18px}.box-position{font-size:13px;min-height:0;margin:12px 0;line-height:1.6}.export-actions{order:5;margin:0;gap:9px}.export-actions>#exportPng{display:none}.export-actions>#printButton{font-size:14px;background:white}.export-actions>#exportCsv{font-size:14px;min-height:44px}.sample-note{order:6;font-size:12px;line-height:1.65;margin-top:17px}.sample-note strong{font-size:14px}
  .mobile-action-bar{position:fixed;bottom:0;left:0;right:0;z-index:20;background:#fcfaffed;backdrop-filter:blur(10px);border-top:1px solid #e2d7eb;padding:12px max(18px,calc((100vw - 624px)/2)) calc(12px + env(safe-area-inset-bottom));display:flex;gap:10px;align-items:center}.mobile-action-bar .primary-button{flex:1;border-radius:12px;min-height:49px;font-size:16px;padding:13px 14px;justify-content:center}.mobile-action-bar #mobileBack{min-height:49px;padding:0 13px;font-size:14px;color:#796287}.mobile-action-bar [hidden]{display:none!important}.toast{bottom:100px;font-size:14px;max-width:calc(100vw - 36px)}
  footer{padding:25px 0 10px;border:0;gap:9px;margin-top:22px}.footer-brand{font-size:26px}footer>span,footer>a:last-of-type,footer small{display:none}.footer-brand span{font-size:11px}dialog{max-width:calc(100% - 28px);max-height:85dvh;border-radius:16px;padding:25px 20px}dialog h2{font-size:25px}dialog ol{padding-left:22px}#exportPreview{max-height:48dvh}.dialog-close{min-width:44px;min-height:44px}.primary-button:hover:not(:disabled){background:#5c2f9b}
}
@media(max-width:370px){main{padding:0 14px}.site-header{padding:0 16px}.mobile-intro{padding:14px;min-height:126px;gap:0}.mobile-intro h1{font-size:27px}.mobile-intro span{font-size:12px}.mobile-intro img{width:90px;margin-right:-22px}.mobile-intro p{font-size:9px}.mobile-steps button{font-size:13px;gap:5px}.mobile-steps button span{width:21px;height:21px}.examples{gap:5px;flex-wrap:wrap}.examples>span{flex-basis:100%;margin-bottom:2px}.examples button{padding:7px 10px}.preview-tools{flex-wrap:wrap}.zoom-tools{margin-left:auto}.box-cell{height:36px}.compartment-number{font-size:11px;min-width:16px}.board-stage-label{font-size:9px}.stats strong{font-size:25px}}
@media print{.mobile-steps,.mobile-action-bar,.mobile-intro,.mobile-help{display:none!important}body{padding:0}}