/* MakeASCIIArt v0.5: brand polish, intent-led templates, first-screen layout and on-canvas controls. */
.brand-icon{width:45px;height:45px;margin-right:8px;background:transparent;border:0;border-radius:0;padding:0;transform:none}
.brand-icon svg{display:block;filter:drop-shadow(0 2px 0 rgba(255,168,193,.38))}
.hero-bubble{position:absolute;top:18px;left:-4%;border:1.5px solid #242433;border-radius:50% 50% 44% 48%;background:#fffaf7;color:#37303c;padding:10px 13px;font-size:11px;font-weight:900;transform:rotate(-11deg);box-shadow:0 4px 16px #9f729c1b;white-space:nowrap}
.hero-bubble-right{left:auto;right:-10%;background:#ffe1ec;transform:rotate(11deg)}
.template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.template-card{min-height:96px;padding:5px 2px;gap:2px;position:relative}
.template-card img{height:51px;width:100%;object-fit:contain}
.template-card span:not(.template-category){font-size:10px;line-height:1.18;text-align:center}
.template-category{color:#ab82af;font-size:8px;letter-spacing:.15px;line-height:1.1;font-weight:800;text-align:center}
.template-card[data-id="birthday"]{background:linear-gradient(145deg,#fff5d7,#ffe3ef)}
.template-card[data-id="avatar"]{background:linear-gradient(145deg,#dbfff0,#e8e9ff)}
.template-card[data-id="birthday"] .template-category{color:#d78855}
.template-card[data-id="avatar"] .template-category{color:#558c80}
.template-card[data-id="birthday"]::after{content:"🎉";position:absolute;right:3px;top:16px;font-size:14px;transform:rotate(18deg)}
.template-card[data-id="avatar"] img{max-width:51px;border-radius:50%;background:#e4fff0;border:2px solid #fff;box-shadow:0 0 0 1px #b7e6ce}
.canvas-transform-controls{position:absolute;display:flex;gap:2px;z-index:10;transform:translate(-50%,-50%);background:#fff;border:1px solid #f3bad3;border-radius:13px;padding:4px;box-shadow:0 5px 15px #71546d25}
.canvas-transform-controls button{min-width:34px;min-height:34px;border:0;background:#fff6fb;color:#af3a73;font-size:21px;font-weight:900;border-radius:9px;line-height:1;touch-action:manipulation}
.canvas-transform-controls button:hover{background:#ffdfec}
.canvas-transform-controls button:active{background:#ffc6df}
@media(min-width:1221px) and (max-height:980px){
  .site-header{height:60px}
  .hero{min-height:136px;height:136px;padding:0 10px}
  .hero-illustration{height:137px}
  .hero-illustration img{height:151px}
  .hero-bubble{display:none}
  .hero .eyebrow{font-size:9px}
  .hero h1{font-size:clamp(37px,3.7vw,50px);letter-spacing:-2.7px;margin:5px 0 5px}
  .hero p{font-size:12px}
  .hero-tags{margin-top:8px}
  .hero-tags span{font-size:10px;padding:5px 10px}
  .studio{padding:10px 12px 11px}
  .studio-modes{margin-bottom:8px}
  .mode-button{padding:8px 12px;font-size:12px}
  .workspace{gap:10px;align-items:start}
  .panel{padding:12px}
  .canvas-panel{padding:11px}
  .canvas-header{margin-bottom:6px}
  .stage-shell{width:100%;max-width:572px;margin:0 auto;padding:5px}
  .canvas-bottom{padding:6px 0 8px}
  .sample-strip{padding-top:7px}
  .sample-thumbnails button{height:34px;width:34px}
  .template-card{min-height:77px;padding:3px 2px}
  .template-card img{height:38px}
  .template-category{font-size:7px}
  .template-card span:not(.template-category){font-size:9px}
  .section-heading{margin-bottom:6px}
  .panel-intro{margin-bottom:8px;line-height:1.35}
  .creator-panel,.export-panel{max-height:590px;overflow-y:auto}
  .creator-panel .label-title{margin:10px 0 6px}
  .creator-panel .helper-note{margin-top:9px}
  .creator-panel textarea{min-height:46px}
  .creator-panel .inline-additions{margin-top:7px}
  .creator-panel .inline-additions button,.creator-panel .inline-additions .upload-art{padding:7px 3px}
  .background-swatches{gap:6px}
  .background-swatch{width:26px;height:26px}
  .export-panel .panel-divider{margin:10px 0}
  .export-panel .export-option{margin-top:9px}
}
@media(max-width:660px){
  .hero-bubble{display:none}
  .template-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .template-card{min-height:82px}
  .template-card img{height:45px}
  .canvas-transform-controls button{min-width:32px;min-height:32px}
}