/* Choose and position, personalize, then print. */
@media screen {
 [hidden]{display:none!important}
 .journey-steps{display:flex;gap:8px;flex-wrap:wrap}
 .journey-steps button{display:flex;align-items:center;gap:9px;min-height:54px;border:2px solid #789480;background:#fffefb;font-size:16px;padding:9px 14px}
 .journey-steps b{display:grid;place-items:center;width:29px;height:29px;border:2px solid currentColor;border-radius:50%}
 .journey-steps [aria-current=step]{color:#fff;background:#225c49;border-color:#225c49}
 .journey-intro{margin:0 0 22px}.journey-intro h2{font:500 29px Fredoka;margin:0 0 6px}.journey-intro p{margin:0;color:#496256;font-size:17px}
 .journey-actions{display:flex;gap:12px;justify-content:space-between;margin:18px 0 6px;width:100%}.journey-actions button{min-height:52px;font-size:17px}.journey-actions .primary{margin-left:auto}
 .create-own{border:2px solid #789480;border-radius:12px;padding:12px;margin:5px 0 20px;background:#f3f7ed}.create-own button{width:100%;font-size:17px}.create-own p{margin:8px 0 0}
 #detail-choices,#tab-photos,.optional-backing{display:none!important}
 body:not(.online-coloring) #color-tools,body:not(.online-coloring) #clear-color{display:none!important}
 body[data-step="1"] .tabs,body[data-step="1"] .elements-panel,body[data-step="1"] #adjust-design{display:none!important}
 body:not([data-step="1"]) .design-library,body:not([data-step="1"]) #design-controls{display:none!important}
 body:not([data-step="3"]) #print-panel{display:none!important}
 body[data-step="3"] .inspector,body[data-step="3"] #workspace-divider,body[data-step="3"] #adjust-design,body[data-step="3"] .crop-toggle{display:none!important}
 body[data-step="3"] .workspace{display:block}body[data-step="3"] .studio{max-width:850px;margin:auto}body[data-step="3"] .canvas-wrap{width:min(100%,520px)}
 .design-workbench{container-type:inline-size;width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:18px}
 .canvas-area{min-width:0;align-self:center}.canvas-area .canvas-wrap{width:100%;max-width:680px}
 #design-controls{margin:0;padding:14px;min-width:0}#design-controls .design-control-pair{flex-wrap:wrap;gap:8px}#design-controls .design-overview{gap:8px}#design-controls .design-overview p{font-size:13px}
 #design-controls summary{font-size:19px}#design-controls .design-actions button{font-size:14px;padding:8px}
 #design-controls .precision-control{gap:5px}#design-controls .precision-step{min-width:44px}#design-controls .design-number input{width:68px!important}
 .studio{container-type:inline-size}
 @container (min-width:560px){body[data-step="1"] .design-workbench{grid-template-columns:250px minmax(0,1fr)}}
 #color-tools{position:static;height:auto;max-height:none;overflow:visible;margin:18px 0;padding:0 0 16px}
 .intro{align-items:center}.intro h1{font-size:34px}
 .text-weight-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:16px}.text-weight-heading input{width:80px!important}.text-weight-heading label{font-size:16px}.weight-endpoints{display:flex;justify-content:space-between;font-size:13px;color:#496256}.letter-appearance input[type=range]{width:100%;margin:8px 0}
 .letter-appearance{border:2px solid #819e89;border-radius:12px;padding:8px 12px 12px;margin:18px 0}.letter-appearance legend{font-size:18px;font-weight:700;padding:0 5px}.letter-appearance label{margin:5px 0}.letter-appearance .check{font-size:15px}.letter-appearance input[type=checkbox]{width:22px;height:22px;flex-shrink:0}

}
@media screen and (max-width:820px){
 main{padding-bottom:25px}.intro{display:block}.intro h1{font-size:27px}.journey-steps{margin-top:18px;display:grid;grid-template-columns:.8fr 1.3fr .8fr;gap:5px}.journey-steps button{font-size:13px;padding:8px 5px;gap:5px;justify-content:center}.journey-steps b{width:24px;height:24px;flex-shrink:0}
 .journey-intro h2{font-size:25px}.journey-intro p{font-size:16px}
 .workspace{display:flex;flex-direction:column;gap:18px}.studio{display:flex;flex-direction:column;height:auto;overflow:visible;order:2;width:100%;position:relative;top:auto}.inspector{display:block;position:relative;inset:auto;order:1;max-height:none;overflow:visible;z-index:auto;box-shadow:none;padding:14px;border-radius:16px;width:100%}.inspector-heading,.tabs{position:static}.inspector-heading #close-inspector{display:none}.inspector .panel{max-height:none;overflow:visible}
 .canvas-wrap{width:100%;height:auto;aspect-ratio:1;position:relative;top:auto;max-width:480px;align-self:center}.canvas-wrap #canvas{width:100%;height:auto}.canvas-history{position:static;order:0}.studio-heading{order:-1}.studio-bottom{margin-top:12px}.studio #status{max-height:none;font-size:14px}
 #color-tools{height:auto;max-height:none;position:static;overflow:visible;margin:18px 0;padding:10px}
 .mobile-dock{display:none}.journey-actions button{font-size:16px}#templates{grid-template-columns:repeat(2,minmax(0,1fr))}.template span{font-size:15px}.template img{max-height:none}.tabs button{flex:1}
 body[data-step="2"] .studio{order:1;position:sticky;top:0;z-index:8;padding:9px;box-shadow:0 5px 12px #143d3422}body[data-step="2"] .inspector{order:2}body[data-step="2"] .canvas-wrap{width:min(48dvh,260px)}body[data-step="2"] .studio-heading{display:none}body[data-step="2"] .studio-bottom,body[data-step="2"] #status{display:none}body[data-step="2"] .canvas-history{position:absolute;right:7px;top:8px;flex-direction:column;gap:5px}body[data-step="2"] .canvas-history button{padding:0 5px;min-height:40px}body[data-step="2"] .canvas-history span{font-size:28px}body[data-step="2"] .canvas-history b{display:none}body[data-step="2"] .journey-actions{margin:7px 0 0}body[data-step="2"] .journey-actions button{min-height:44px;padding:8px 12px;font-size:15px}
 body[data-step="3"] #print-panel{display:flex}
}

@media screen {
 .canvas-area{align-self:start;position:sticky;top:16px}
 #design-controls .design-overview{margin:8px 0}#design-controls #design-overview{width:90px;height:90px}
 #design-controls .rotation-options{margin:0 0 12px}#design-controls .rotation-options summary{font-size:15px;margin:0;min-height:36px;padding:6px 0}
 #design-controls>p:last-child{margin:8px 0 0;font-size:12px}
 #design-controls #design-lock-status{font-size:13px;margin:8px 0}
}
@media screen and (max-width:820px){.canvas-area{position:relative;top:auto}}