:root{--bg:#f7f5f0;--ink:#252b26;--text:#363e37;--muted:#687062;--line:#dedfd5;--field:#858e7d;--card:#fffefa;--accent:#427354;--accent-ink:#31583f;--accent-soft:#edf2e7;--shadow:0 5px 20px #26322205}.studio-page{background:var(--bg)}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px;flex:none}.top{max-width:1256px;padding:24px 40px;border-bottom:1px solid var(--line)}.logo{font-size:28px;gap:7px;letter-spacing:-1.5px}.studio-shell{max-width:1256px;padding:0 40px;margin:auto}.studio-intro{display:flex;justify-content:space-between;align-items:flex-end;padding:45px 0 32px;gap:20px}.eyebrow{font-size:10px;font-weight:500;letter-spacing:1.9px;color:#7b8076}h1{font-family:Georgia,'Times New Roman',serif;font-size:64px;font-weight:400;line-height:1.1;letter-spacing:-2.7px;margin-top:13px}h1>span{color:#6f8c56}.steps{display:flex;list-style:none;gap:24px;padding-bottom:6px}.steps li{display:flex;align-items:center;gap:8px;font-size:11px;color:#909587}.steps li>span{font:11px var(--mono);border:1px solid #dddfd5;border-radius:50%;width:26px;height:26px;display:grid;place-items:center}.steps .active{color:#3a6248}.steps .active>span{background:#e6edda;border-color:#d3ddc0}.workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr);gap:22px}.art-panel{border:1px solid var(--line);border-radius:18px;background:var(--card);overflow:hidden;min-width:0;box-shadow:0 4px 8px #272f2303}.panel-heading{display:flex;justify-content:space-between;align-items:center;padding:17px 21px;border-bottom:1px solid var(--line)}.panel-title{display:flex;align-items:center;gap:9px}.tiny-grid{font-size:23px;color:#6b7862}h2{font-size:14px;font-weight:500;letter-spacing:-.2px}.import-btn{min-height:33px!important;font-size:11px!important;border-color:#e0e1d7!important;border-radius:7px!important;background:transparent}.import-btn svg{width:14px;height:14px}.editing-area{display:flex;align-items:stretch;min-height:374px}.tool-rail{padding:16px 10px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line);background:#f8f8f2}.tool{display:grid;place-items:center;width:34px;height:34px;border:1px solid transparent;border-radius:7px;background:transparent;color:#72796d;transition:background .15s,color .15s}.tool:hover{background:#e9ece0;color:var(--ink)}.tool.active{background:#e4ebd9;border-color:#d5dfc6;color:#3e6548}.tool svg{width:18px;height:18px}.tool-separator{height:1px;background:#e1e4d8;margin:5px 3px}.canvas-outer{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;padding:25px 30px;background:radial-gradient(circle,#c8ccbb8a .7px,transparent .9px) 0 0/12px 12px}.canvas-mat{width:min(100%,330px);line-height:0;box-shadow:0 8px 28px #22351b0a;border:1px solid #c8ccbd;background:white}.canvas-mat canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair;image-rendering:pixelated;outline-offset:4px}.brush-bar{padding:12px 18px;display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);min-height:60px}.color-swatches{display:flex;gap:8px}.color{width:24px;height:24px;border-radius:50%;border:1px solid #c8cbbb;position:relative}.color.active:after{content:'';position:absolute;inset:-4px;border:1.5px solid #5e7553;border-radius:50%}.black{background:#222722}.white{background:white}.none{background:conic-gradient(#cfd1c7 25%,#fff 0 50%,#cfd1c7 0 75%,#fff 0) 50%/8px 8px}.bar-line{display:block;height:20px;width:1px;background:var(--line);flex:none}.brush-size{display:flex;align-items:center;gap:9px;font-size:11px;white-space:nowrap}.brush-size input{width:65px;accent-color:#55754b}.brush-size output{min-width:27px;font:10px var(--mono);color:var(--muted)}.filled{display:flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap}.filled input{accent-color:#52754f}.dimensions{margin-left:auto;background:none;border:0;font:10px var(--mono);color:#66715f;white-space:nowrap}.dimensions>span+span{margin-left:5px}.canvas-bottom{display:flex;justify-content:space-between;align-items:center;gap:6px;border-top:1px solid var(--line);padding:8px 15px;min-height:46px}.history-actions{display:flex;gap:4px;align-items:center}.quiet-btn{background:transparent;border:0;min-width:27px;min-height:27px;display:inline-flex;align-items:center;justify-content:center;border-radius:5px;color:#737c6b}.quiet-btn:hover{background:#eef0e6;color:#344b30}.quiet-btn:disabled{opacity:.3;cursor:default}.quiet-btn svg{width:15px;height:15px}.text-btn{font-size:10px;padding:3px 8px}.canvas-meta{font:9px var(--mono);letter-spacing:1px;color:#8a917f}.qr-panel{border-radius:18px;background:#e8eddf;border:1px solid #dce2d1;padding:23px 28px;display:flex;align-items:center;flex-direction:column;position:relative;min-width:0}.qr-top{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:20px}.qr-top .eyebrow{font-size:9px;color:#66725e;letter-spacing:1.4px}.live-badge{display:flex;align-items:center;gap:5px;font-size:9px;color:#66775a}.live-badge>span{width:5px;height:5px;background:#6b9958;border-radius:50%;box-shadow:0 0 0 3px #dbe7ce}.qr-paper{background:#fff;padding:5px;border-radius:10px;box-shadow:0 8px 20px #3d502f0a;transform:rotate(-1.3deg);width:min(100%,272px);line-height:0}.qr-paper canvas{width:100%;height:auto;border-radius:5px}.qr-link{font:12px var(--mono);letter-spacing:.2px;margin-top:21px;overflow-wrap:anywhere;text-align:center}.qr-caption{font-size:9px;color:#6b7c60;margin-top:8px}.qr-caption #scanStatus::before{content:'✓ ';font-size:10px}.placement{margin-top:23px;text-align:center;display:flex;align-items:center;gap:18px}.placement-label{font-size:10px;color:#7c8870}.placement-controls{display:flex;align-items:center;gap:4px}.placement-controls button{display:grid;place-items:center;width:26px;height:26px;border:1px solid #d4ddc9;background:#f8faf2;border-radius:5px;color:#67775e;font-size:15px}.placement-controls button:hover{background:white}.placement-controls svg{width:14px;height:14px}.pattern-button{display:flex;gap:7px;align-items:center;border:0;background:none;font-size:10px;color:#617253;margin-top:16px;padding:6px}.pattern-button svg{width:13px;height:13px}.studio-bottom{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-top:20px}.additional{flex:1;max-width:670px}.additional summary{padding:17px 20px;border:1px solid var(--line);border-radius:10px;font-size:11px;display:flex;justify-content:space-between;list-style:none;cursor:pointer;background:#fbfaf6}.additional summary::-webkit-details-marker{display:none}.additional summary>span{font-size:16px;line-height:12px;color:#8d9483}.additional[open] summary>span{transform:rotate(45deg)}.link-settings{padding:20px;border:1px solid var(--line);border-top:0;display:grid;gap:9px;font-size:11px}.url-control{display:flex;align-items:center;background:#fffefa;border:1px solid #d5dbc9;border-radius:8px;padding:0 12px;font:13px var(--mono);min-height:44px}.url-control #https{border:0;background:none;color:#b0b5a6;font:inherit;padding:0}.url-control #https[aria-pressed=true]{color:#3c6749}.url-control input{min-width:40px;width:100%;border:0;background:none;outline:none;font:inherit}.url-control input:focus{box-shadow:0 2px #5e7a4a}.continue{min-height:51px;min-width:188px;display:flex;align-items:center;justify-content:space-between;gap:38px;padding:0 25px;border:0;border-radius:10px;color:#263a23;background:#d9ed93;font-size:13px;font-weight:500;box-shadow:0 3px 8px #334d1607;transition:background .15s,transform .15s}.continue:hover{background:#cde57f;transform:translateY(-1px)}.continue:disabled{opacity:.5;cursor:wait}.continue svg{width:18px;height:18px}.studio-error{font-size:12px;color:#aa423a;text-align:right;margin-top:8px;min-height:0}.studio-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:28px;padding:20px 0 25px;color:var(--muted);font-size:10px}.studio-footer>span:first-child{font-family:Georgia,serif;font-style:italic;font-size:13px}.studio-dialog{margin:auto;border:1px solid var(--line);border-radius:20px;background:var(--card);padding:28px;width:min(580px,calc(100% - 28px));max-height:90dvh;overflow:auto;color:var(--ink);box-shadow:0 20px 80px #23331c30}.studio-dialog::backdrop{background:#27342160;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:24px}.dialog-head h2{font:30px Georgia,serif;letter-spacing:-.8px}.dialog-close{background:#edf0e6;border:0;border-radius:50%;width:29px;height:29px;font-size:21px;color:#748169}.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.template-grid>button{min-width:0;background:#f3f4ed;border:1px solid #e1e4d6;padding:12px 7px;border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:9px}.template-grid>button:hover{border-color:#91a174;background:#edf2df}.template-grid canvas{width:100%;max-width:85px;aspect-ratio:1;object-fit:contain;image-rendering:pixelated}.initials-row{display:flex;align-items:center;gap:12px;margin-top:18px;font-size:11px}.initials-row input{max-width:70px;min-height:36px;font-size:13px}.upload-zone{margin-top:25px;padding:25px;border:1px dashed #cbd3bd;border-radius:10px;display:flex;justify-content:center;align-items:center;gap:14px}.upload-zone svg{color:#81936b}.upload-zone .btn{font-size:12px;min-height:40px}.dialog-error{font-size:12px;color:#ab4238;margin-top:12px}.photo-preview{display:flex;align-items:center;justify-content:center;gap:20px}.photo-preview canvas{width:44%;height:auto;max-height:230px;object-fit:contain}.photo-preview #pixelPreview{image-rendering:pixelated}.photo-sliders{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:25px 0}.photo-sliders label{display:grid;gap:6px;font-size:11px}.photo-sliders input{width:100%;accent-color:#5b7c45}.photo-sliders .invert-check{display:flex;align-items:center;gap:8px}.invert-check input{width:auto}.studio-dialog>.btn.primary{width:100%;background:#427354;box-shadow:none;margin-top:14px}.size-editor{display:flex;flex-direction:column;align-items:center;gap:8px}.size-step{display:flex;justify-content:center;gap:5px}.size-step button{background:#eef1e4;border:1px solid #dae0cd;border-radius:5px;width:25px;height:25px;font-size:15px;color:#627651}.size-middle{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}.size-middle .size-step{flex-direction:column}.size-middle canvas{width:min(100% - 90px,300px);height:auto;touch-action:none;cursor:move}.size-fields{display:flex;gap:14px;align-items:flex-end;justify-content:center;margin-top:18px}.size-fields label{display:grid;gap:6px;font-size:11px;width:92px}.size-fields>span{padding-bottom:14px;color:#8b977c}.size-fields input{min-height:42px;text-align:center}.resize-check{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12px;margin-top:18px}.resize-check input{accent-color:#5b7c45}button:focus-visible,canvas:focus-visible,summary:focus-visible{outline:2px solid #6a8c4c;outline-offset:3px}#endingStatus{min-height:13px;color:#728264}#selectionActions{display:flex;flex-wrap:wrap;align-items:center}
@media(min-width:1600px){.studio-intro{padding-top:55px;padding-bottom:37px}.editing-area{min-height:410px}.canvas-mat{width:min(100%,355px)}}
@media(max-width:1020px){.studio-shell{padding:0 25px}.top{padding:21px 25px}.studio-intro{padding-top:32px}h1{font-size:53px}.steps{gap:12px}.steps li{font-size:10px;gap:5px}.workspace{grid-template-columns:minmax(0,1.5fr) minmax(270px,1fr);gap:16px}.canvas-outer{padding:25px 20px}.brush-bar{gap:9px;padding:12px}.brush-size input{width:45px}.brush-size{gap:6px}.qr-panel{padding:23px 19px}.filled{font-size:9px}.canvas-meta{font-size:8px}.placement{gap:9px}}
@media(max-width:760px){.studio-shell{max-width:580px;padding:0 18px}.top{padding:18px 20px}.logo{font-size:25px}.nav a{font-size:11px;padding:8px}.studio-intro{display:block;padding:29px 0 23px}.eyebrow{font-size:8px}h1{font-size:49px;margin-top:11px}.steps{margin-top:22px;padding:0;gap:25px}.steps li{font-size:10px}.steps li>span{width:23px;height:23px;font-size:9px}.workspace{grid-template-columns:1fr;gap:18px}.panel-heading{padding:13px 15px}.panel-title h2{font-size:12px}.editing-area{position:relative;min-height:0;display:flex;flex-direction:column-reverse}.tool-rail{flex-direction:row;border-right:0;border-top:1px solid var(--line);justify-content:center;padding:8px 7px;gap:3px}.tool{width:34px;height:34px}.tool-separator{width:1px;height:22px;margin:6px 3px}.canvas-outer{padding:23px 25px;min-height:300px}.canvas-mat{width:min(100%,305px)}.brush-bar{gap:12px;padding:11px 13px}.brush-size input{width:58px}.filled{font-size:10px}.dimensions{font-size:9px}.canvas-bottom{padding:7px 12px}.qr-panel{padding:22px 30px}.qr-paper{width:240px}.placement{margin-top:18px;gap:20px}.qr-top{margin-bottom:19px}.qr-link{margin-top:18px}.pattern-button{margin-top:12px}.studio-bottom{margin-top:17px;flex-wrap:wrap;gap:16px}.additional{flex-basis:100%;max-width:none}.continue{width:100%;min-height:53px}.studio-footer{margin-top:24px;font-size:9px}.studio-footer>span:first-child{font-size:12px}.studio-dialog{padding:22px}.dialog-head h2{font-size:26px}.template-grid{gap:7px}.template-grid>button{font-size:8px}.canvas-meta{font-size:8px}.import-btn{font-size:10px!important}.color{width:22px;height:22px}.color-swatches{gap:8px}}
@media(max-width:380px){.brush-bar{gap:8px}.brush-size{gap:4px}.brush-size input{width:34px}.brush-size output{min-width:25px}.tool{width:30px;height:32px}.tool-rail{gap:2px}.canvas-outer{padding:20px}.filled{font-size:9px}.studio-intro h1{font-size:43px}.dimensions{font-size:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* A quieter workspace: equal panels, with options beside the active tool. */
.studio-intro { padding: 31px 0 26px; align-items: center; }
.studio-intro h1 { font-size: 51px; letter-spacing: -2px; margin: 0; }
.workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.art-panel { display: flex; flex-direction: column; }
.panel-heading { min-height: 62px; padding: 15px 20px; }
.editing-area { flex: 1; min-height: 404px; }
.tool-rail { padding: 16px 10px; gap: 7px; }
.tool { width: 36px; height: 36px; position: relative; }
.tool-corner { position: absolute; right: 3px; bottom: 3px; width: 0; height: 0; border-left: 4px solid transparent; border-bottom: 4px solid currentColor; font-size: 0; opacity: .65; }
.canvas-outer { padding: 24px; }
.canvas-mat { width: min(100%, 330px); }
.canvas-bottom { min-height: 47px; padding: 8px 15px; }
.canvas-bottom .dimensions { font-size: 11px; min-height: 29px; padding: 5px 7px; border-radius: 6px; }
.canvas-bottom .dimensions:hover { background: #eef0e6; color: #344b30; }
.history-actions { gap: 5px; }
.qr-panel { padding: 22px 24px; }
.qr-top { margin-bottom: 16px; }
.qr-paper { width: min(100%, 330px); padding: 0; border: 1px solid #d8dece; border-radius: 3px; transform: none; box-shadow: 0 8px 24px #3d502f08; }
.qr-paper canvas { display: block; border-radius: 2px; }
.qr-link { margin-top: 17px; }
.qr-caption { margin-top: 6px; }
.placement { margin-top: 16px; gap: 16px; }
.pattern-button { margin-top: 10px; padding: 5px; }
.studio-shell { padding-bottom: 35px; }
.studio-bottom { margin-top: 18px; align-items: flex-start; }
.additional { max-width: none; }
.tool-popover { position: fixed; z-index: 60; width: 228px; max-width: calc(100vw - 24px); padding: 15px; border: 1px solid #d8ddcf; border-radius: 12px; background: #fffefa; color: var(--ink); box-shadow: 0 12px 36px #2934231c, 0 2px 8px #2934230a; }
.popup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.popup-head h2, #toolOptionsTitle { font-size: 12px; font-weight: 500; letter-spacing: 0; }
#closeToolOptions { display: grid; place-items: center; width: 25px; height: 25px; border: 0; border-radius: 6px; background: #f0f2e9; color: #737c6b; font-size: 18px; line-height: 1; }
#closeToolOptions:hover { color: #344b30; background: #e6eadc; }
.tool-popover .color-swatches { gap: 12px; padding: 3px 2px 4px; }
.tool-popover .color { width: 26px; height: 26px; }
.tool-popover .color.active:after { inset: -4px; }
#shapeOptions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-bottom: 15px; }
#shapeOptions button { min-width: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; min-height: 47px; padding: 7px 2px; border: 1px solid #e1e5d8; border-radius: 7px; background: #f9faf5; color: #69775e; font-size: 9px; }
#shapeOptions button:hover { background: #edf2e4; border-color: #a8b594; }
#shapeOptions button.active, #shapeOptions button[aria-pressed="true"] { background: #e4ebd9; border-color: #b8c9a1; color: #3e6548; }
#shapeOptions button svg { width: 18px; height: 18px; }
#brushOptions, #filledOptions, #selectionOptions, #moveOptions { margin-top: 15px; }
#brushOptions .brush-size { font-size: 11px; gap: 10px; }
#brushOptions input[type="range"] { width: 89px; }
#brushOptions output { font-size: 10px; min-width: 29px; }
#filledOptions label, #filledOptions .filled { display: flex; align-items: center; gap: 8px; font-size: 11px; }
#filledOptions input { accent-color: #52754f; }
#selectionOptions { display: flex; align-items: center; gap: 4px; border-top: 1px solid #e5e8dd; padding-top: 12px; }
#selectionOptions button { flex: 1; min-height: 30px; font-size: 10px; border: 1px solid #e0e4d6; background: #f8faf2; border-radius: 6px; padding: 4px; }
#selectionOptions button:hover { background: #eaf0df; }
#moveOptions { display: flex; justify-content: center; gap: 6px; }
#moveOptions button { display: grid; place-items: center; width: 35px; height: 31px; border: 1px solid #d8e0cc; border-radius: 6px; background: #f4f7ec; color: #597148; font-size: 17px; }
#moveOptions button:hover { background: #e5edd8; }
@media (min-width: 1600px) {
    .studio-intro { padding-top: 38px; padding-bottom: 28px; }
    .editing-area { min-height: 404px; }
    .canvas-mat { width: min(100%, 330px); }
}
@media (max-width: 1020px) {
    .workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 17px; }
    .studio-intro h1 { font-size: 48px; }
    .canvas-outer { padding: 20px; }
    .qr-panel { padding: 22px 20px; }
    .editing-area { min-height: 370px; }
    .placement { gap: 10px; }
}
@media (max-width: 760px) {
    .studio-intro { padding: 26px 0 23px; }
    .studio-intro h1 { font-size: 45px; letter-spacing: -1.7px; }
    .workspace { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .panel-heading { min-height: 57px; padding: 13px 15px; }
    .editing-area { flex: none; min-height: 0; }
    .canvas-outer { padding: 24px; min-height: 0; }
    .canvas-mat { width: min(100%, 330px); }
    .tool-rail { justify-content: center; gap: 9px; padding: 9px; }
    .tool { width: 38px; height: 36px; }
    .canvas-bottom { min-height: 44px; padding: 7px 12px; }
    .qr-panel { padding: 22px 24px; }
    .qr-paper { width: min(100%, 330px); }
    .studio-bottom { margin-top: 17px; }
    .studio-shell { padding-bottom: 26px; }
}
@media (max-width: 380px) {
    .studio-intro h1 { font-size: 40px; }
    .tool-rail { gap: 7px; }
    .canvas-outer, .qr-panel { padding-left: 20px; padding-right: 20px; }
    .canvas-bottom .dimensions { font-size: 10px; padding-left: 3px; padding-right: 3px; }
}
.tool-popover-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.placement-controls { display: grid; grid-template-columns: repeat(3, 26px); grid-template-rows: repeat(3, 26px); gap: 3px; }
.placement-controls [data-move="0,-1"] { grid-area: 1 / 2; }
.placement-controls [data-move="-1,0"] { grid-area: 2 / 1; }
.placement-controls #centerArt { grid-area: 2 / 2; }
.placement-controls [data-move="1,0"] { grid-area: 2 / 3; }
.placement-controls [data-move="0,1"] { grid-area: 3 / 2; }
#moveOptions { display: grid; grid-template-columns: repeat(3, 28px); grid-template-rows: repeat(3, 28px); gap: 4px; width: max-content; margin-left: auto; margin-right: auto; }
#moveOptions button { width: 28px; height: 28px; }
#moveOptions [data-shift="0,-1"] { grid-area: 1 / 2; }
#moveOptions [data-shift="-1,0"] { grid-area: 2 / 1; }
#moveOptions [data-shift="1,0"] { grid-area: 2 / 3; }
#moveOptions [data-shift="0,1"] { grid-area: 3 / 2; }
.qr-paper, .qr-paper canvas { aspect-ratio: 1; }
/* Keep the drawing surface itself, without a decorative workspace behind it. */
.canvas-outer { padding: 0; background: none; }
.canvas-mat { width: 100%; max-width: none; border: 2px solid #77846e; box-shadow: none; }
.editing-area { min-height: 0; }
.qr-paper { width: calc(100% - 9px); }
@media (min-width: 1600px) { .canvas-mat { width: 100%; } .editing-area { min-height: 0; } }
@media (max-width: 1020px) { .canvas-outer { padding: 0; } .editing-area { min-height: 0; } .qr-paper { width: calc(100% - 17px); } }
@media (max-width: 760px) {
  .canvas-outer { padding: 0; }
  .canvas-mat { width: 100%; }
  .qr-panel { padding: 0 0 20px; }
  .qr-top { padding: 20px 20px 0; }
  .qr-paper { width: 100%; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
}
@media (max-width: 380px) { .canvas-outer { padding: 0; } .qr-panel { padding-left: 0; padding-right: 0; } }

.size-middle canvas { width: min(calc(100% - 74px), 360px); }

/* Fit tall and wide art by both dimensions, with no letterboxing in the canvas. */
.canvas-mat { flex: 0 0 auto; max-width: 100%; }

.qr-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0 20px 20px;border:1px solid var(--line);border-top:0;background:#fbfaf6}.qr-range-field{min-width:0;display:grid;gap:7px}.qr-range-field label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px}.qr-range-field output{font:11px var(--mono);color:var(--muted);white-space:nowrap}.qr-range-field input[type=range]{width:100%;min-width:0;margin:0;min-height:28px;accent-color:var(--accent);cursor:pointer}
@media(max-width:420px){.qr-settings{grid-template-columns:1fr}}

.template-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.template-grid>button[aria-expanded=true]{border-color:#7f9664;background:#edf2df}.heart-options{display:grid;grid-template-columns:128px minmax(0,1fr);align-items:center;gap:24px;padding:20px;margin-top:16px;border:1px solid var(--line);border-radius:12px;background:#f8f9f2}.heart-options[hidden]{display:none}.heart-options>canvas{width:128px;height:128px;image-rendering:pixelated;border:1px solid #cbd1c0;border-radius:3px}.heart-fields{display:grid;gap:10px;min-width:0}.heart-fields label{display:flex;justify-content:space-between;gap:8px;font-size:11px}.heart-fields label>span{color:var(--muted);font-size:10px}.heart-fields input{min-width:0;width:100%;min-height:40px;text-transform:uppercase;letter-spacing:2px}.heart-fields .btn{width:100%;min-height:40px;font-size:12px}
@media(max-width:420px){.heart-options{grid-template-columns:92px minmax(0,1fr);gap:16px;padding:15px}.heart-options>canvas{width:92px;height:92px}.heart-fields label{display:block}.heart-fields label>span{margin-left:6px}}
.heart-fields label.invert-template{display:flex;justify-content:flex-start;align-items:center;gap:8px;font-size:11px}.heart-fields .invert-template input{width:14px;height:14px;min-height:0;margin:0;accent-color:#55754b}
.brush-footprint{position:fixed;z-index:40;pointer-events:none;background:#7b8d6166;box-shadow:inset 0 0 0 1px #64745066}.brush-footprint[hidden]{display:none}
.size-step button:disabled{opacity:.35;cursor:default}

/* Text templates share the same bounded preview and Apply step as hearts. */
.template-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.text-options{display:grid;grid-template-columns:128px minmax(0,1fr);gap:24px;align-items:center;padding:20px;margin-top:16px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.text-options[hidden]{display:none}.text-options>canvas{width:128px;height:auto;max-height:180px;object-fit:contain;image-rendering:pixelated;border:1px solid var(--line);border-radius:3px}
.text-fields{display:grid;gap:8px;min-width:0}.text-fields label{font-size:12px}.text-fields textarea{width:100%;min-width:0;min-height:104px;resize:vertical;font-size:16px;line-height:1.45}.text-fields output{font:11px var(--mono);color:var(--muted)}.text-fields .btn{width:100%;min-height:40px;font-size:12px}
@media(max-width:420px){.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.text-options{grid-template-columns:minmax(0,1fr);gap:16px;padding:15px}.text-options>canvas{width:128px;max-height:120px;justify-self:center}}

#textInvert[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card)}

.text-fields .text-lines{display:flex;align-items:center;gap:8px;font-size:12px}.text-lines input{accent-color:var(--accent);margin:0;width:14px;height:14px}.text-wrap-help{font-size:11px;line-height:1.4;color:var(--muted)}

.text-fields .text-error{font-size:12px;line-height:1.45;color:var(--danger);overflow-wrap:anywhere}.text-fields .text-error:empty{display:none}

.studio-footer > a { color: var(--muted); }

#endingStatus { color: var(--muted); }
#endingStatus[data-state="available"] { color: var(--accent-ink); }
#endingStatus[data-state="error"] { color: var(--danger); }