:root {color-scheme:light;--ink:#173658;--teal:#0996a1;--light:#e6f3f5;--gold:#ffc34b;--border:#dce9eb;--shadow:0 22px 55px rgba(24,67,89,.10);font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo,system-ui,sans-serif}
*{box-sizing:border-box}body{margin:0;min-width:320px;color:var(--ink);background:radial-gradient(ellipse at 9% 15%,#d6f7f0 0%,transparent 36%),radial-gradient(ellipse at 96% 8%,#fff6d6 0%,transparent 36%),#f5f9f9}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,input:focus-visible{outline:3px solid #2a9bdf;outline-offset:3px}a{color:inherit;text-decoration:none}.hidden{display:none!important}
.app-shell{max-width:1320px;margin:0 auto;padding:24px clamp(16px,3.7vw,48px) 18px}.topbar{display:flex;justify-content:flex-start;align-items:center;gap:12px;margin:0 0 24px}.brand{display:flex;align-items:center;gap:14px}.brand-logo{display:block;width:66px;height:66px;border-radius:18px;object-fit:cover;box-shadow:0 12px 30px rgba(15,55,86,.16)}.brand strong{display:block;font-size:18px;letter-spacing:.02em}.brand em{font-style:normal;color:#009da4}
.main-grid{display:grid;grid-template-columns:minmax(0,1.17fr) minmax(340px,.83fr);align-items:start;gap:23px}.stage-card,.control-card{border:1px solid #e0ebec;border-radius:25px;box-shadow:var(--shadow);background:white;overflow:hidden}.stage-card{background:linear-gradient(150deg,#e4f8f3 0%,#d6ecf5 40%,#f8f3dd 100%);padding:19px 19px 13px}.stage-heading{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:900;letter-spacing:.03em}.live-dot{width:9px;height:9px;background:#19bfa9;border-radius:50%;box-shadow:0 0 0 4px #19bfa929}.stage-chip{margin-left:auto;background:#fff9;border:1px solid #fff;padding:6px 11px;border-radius:30px;letter-spacing:.05em;font-size:10px}.stage{height:clamp(410px,53vw,570px);position:relative;margin:12px 0 0;border-radius:19px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 51% 45%,#ffffffa0,transparent 55%)}.stage-grid{position:absolute;z-index:-1;inset:0;background-image:linear-gradient(#fff9 1px,transparent 1px),linear-gradient(90deg,#fff9 1px,transparent 1px);background-size:35px 35px;transform:perspective(250px) rotateX(60deg) translateY(85px) scale(1.7);mask-image:linear-gradient(transparent 20%,#000 94%);pointer-events:none}.scene,.scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.scene{touch-action:none}.stage-shimmer{pointer-events:none;position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,#ffffffb0 0 2px,transparent 3px),radial-gradient(circle at 86% 26%,#fff 0 2px,transparent 3px),radial-gradient(circle at 20% 80%,#fff 0 3px,transparent 4px);background-size:100% 100%}.stage-bottom{position:absolute;pointer-events:none;display:flex;align-items:center;justify-content:flex-start;gap:12px;bottom:0;left:0;right:0;padding:17px 6px;font-size:11px;font-weight:800;color:#537489}.stage-caption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:12px 0 2px;color:#5b7688;font-size:10px;font-weight:700}.qr-overlay{position:absolute;z-index:5;inset:0;pointer-events:none;display:grid;place-items:center;opacity:0;transition:opacity .25s;visibility:hidden}.qr-overlay.show{opacity:1;pointer-events:auto;visibility:visible}.qr-tap{position:relative;width:var(--qr-size,270px);height:var(--qr-size,270px);padding:0;display:block;border:0;border-radius:5px;background:white;box-shadow:0 13px 50px #16345035;cursor:pointer;touch-action:manipulation}.qr-tap img{display:block;width:100%;height:100%;image-rendering:pixelated}.qr-hover-tip{position:absolute;left:50%;bottom:-39px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 40px);font-size:11px;font-weight:900;color:#24475e;background:#fffc;border-radius:30px;padding:7px 10px;box-shadow:0 4px 12px #2241}.qr-tap:focus-visible{outline:4px solid #02b9b2}
.loading,.scene-error{position:absolute;z-index:9;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;text-align:center;padding:20px;background:#e8f7f0e8;font-size:14px;font-weight:800}.scene-error{background:#fff4e9ef;color:#923e20}.scene-error span{font-size:12px;line-height:1.8;max-width:380px}.loading-spinner{width:32px;height:32px;border-radius:50%;border:4px solid #acd5dd;border-top-color:#079c9e;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.control-card{padding:clamp(22px,3vw,33px)}.eyebrow{font-size:10px;font-weight:900;letter-spacing:.22em;color:#07a5a8}.control-card h1{margin:10px 0 12px;font-size:clamp(24px,2.75vw,35px);line-height:1.36;letter-spacing:-.06em}.gradient-title{background:linear-gradient(90deg,#00aab4,#2474a9);color:transparent;background-clip:text}.intro{margin:0 0 25px;color:#658297;font-size:12px;line-height:1.85}.field-label{display:block;margin-bottom:9px;font-size:12px;font-weight:900}.url-wrap{display:flex;align-items:center;gap:7px;height:49px;padding:0 12px;border:1.5px solid #d5e4e7;border-radius:12px;background:#f8fbfc;transition:border .2s}.url-wrap:focus-within{border-color:#28b5b8}.url-icon{font-size:18px;color:#07a8a8}.url-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;font-size:13px;color:var(--ink)}.url-wrap input:focus-visible{outline:0}.url-wrap button{flex-shrink:0;border:0;background:#edf2f3;border-radius:7px;color:#758797;font-size:16px;width:27px;height:27px}.color-heading{margin-top:23px}.color-row{display:flex;justify-content:space-between;align-items:center;gap:12px}.color-pick{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:900;color:#517080}.color-pick input{width:46px;height:42px;border:1px solid #d8e6e9;border-radius:11px;background:white;padding:4px;cursor:pointer}.swatches{display:flex;gap:10px}.swatch{width:24px;height:24px;border-radius:50%;border:2px solid white;background:var(--swatch);box-shadow:0 0 0 1px #cee1e6}.swatch.chosen{box-shadow:0 0 0 2px #00adb6}.mini-help{font-size:10px;color:#778d9a;line-height:1.5;margin:10px 0 18px}.status{min-height:38px;margin-bottom:9px;padding:9px 11px;border-radius:9px;font-size:11px;line-height:1.7;background:#eef8f8;color:#236774}.status.error{background:#fff0ea;color:#a4402a}.action{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:51px;border-radius:13px;font-size:14px;font-weight:900;transition:transform .14s,filter .14s;border:0}.action:not(:disabled):active,.export-btn:not(:disabled):active{transform:scale(.98)}.action.primary{color:#fff;background:linear-gradient(100deg,#0ba8a4,#0b849d);box-shadow:0 6px 0 #066975}.action.primary:not(:disabled):hover{filter:brightness(1.07)}.action.secondary{height:43px;margin-top:13px;border:1px solid #c9e0e3;background:#f0f9f8;color:#257281}.divider-line{display:flex;align-items:center;gap:11px;margin:26px 0 17px;font-size:11px;font-weight:800;color:#8ba2ad}.divider-line:before,.divider-line:after{content:"";height:1px;background:#e5ecee;flex:1}.export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.export-btn{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:65px;border:1px solid #dbe7e9;border-radius:12px;background:#fafdfd;color:#2b5369;font-size:11px;font-weight:900}.export-btn:not(:disabled):hover{border-color:#0ca2a9;background:#f0fbfa}.export-icon{font-size:20px}.share-note{margin:13px 0 0;color:#8199a5;font-size:10px;line-height:1.7}.footer{display:none}
@media(max-width:940px){.main-grid{grid-template-columns:minmax(0,1fr)}.stage{height:clamp(330px,62vw,520px)}.control-card{max-width:none}.topbar{margin-bottom:16px}}
@media(max-width:520px){.app-shell{padding:13px 11px}.topbar{padding:3px 4px}.brand{gap:10px}.brand-logo{width:56px;height:56px;border-radius:15px}.brand strong{font-size:15px}.stage-card,.control-card{border-radius:20px}.stage-card{padding:12px 11px 9px}.stage{height:min(93vw,390px);min-height:310px;margin-top:7px}.stage-caption{font-size:9px}.stage-bottom{font-size:9px;padding:12px 4px}.stage-bottom .spark-label{display:none}.control-card{padding:23px 19px}.control-card h1{font-size:27px}.qr-hover-tip{font-size:10px}.footer{font-size:9px}}
@media(prefers-reduced-motion:reduce){.loading-spinner{animation-duration:1.3s}.action{transition:none}}
/* v0.2.0: QR application left intact; second studio for digital business cards. */
.studio-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:660px;margin:0 auto 22px}
.studio-tab{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;text-align:left;min-height:68px;padding:12px 17px;border:1px solid #dce8e9;border-radius:17px;color:#466879;background:#ffffffb8;box-shadow:0 6px 22px #2240570b;font-weight:900;font-size:14px}
.studio-tab small{grid-column:2;color:#8b9eaa;font-weight:600;font-size:10px;margin-top:3px}.studio-tab .tab-icon{grid-row:span 2;width:48px;height:48px;display:block;border-radius:14px;overflow:hidden;flex-shrink:0}.studio-tab .tab-icon img{width:100%;height:100%;display:block;border-radius:14px;object-fit:cover}
.studio-tab.active{background:#123d55;border-color:#123d55;color:#fff;box-shadow:0 7px 0 #b4d6d8}.studio-tab.active small{color:#b3dadd}.studio-tab.active .tab-icon{transform:translateY(-1px)}
.card-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 11px}.card-field{display:flex;flex-direction:column;gap:7px;min-width:0;font-size:11px;font-weight:900;color:#2e586e}.card-field-wide{grid-column:span 2}.card-field input{min-width:0;width:100%;height:45px;border:1.5px solid #d7e4e9;border-radius:11px;background:#f9fcfc;padding:0 11px;font-size:12px;color:#193b51;font-weight:500}.card-field input:focus{border-color:#12a4a7}.card-field input::placeholder{color:#9babb1}.required{display:inline-block;font-size:9px;background:#fdf0de;color:#9e5713;padding:3px 5px;border-radius:4px;margin-left:3px}.card-preview-label{font-weight:900;font-size:11px;color:#207c88;margin:13px 0 10px}
.card-preview{container-type:inline-size;border-radius:13px;overflow:hidden;box-shadow:0 5px 23px #0a38502a}
.business-card{--cu:clamp(7px,2.0cqi,16px);display:flex;flex-direction:column;position:relative;aspect-ratio:1.75;width:100%;overflow:hidden;border-radius:inherit;padding:calc(var(--cu)*2.05) calc(var(--cu)*2.7);background:radial-gradient(ellipse at 104% -10%,#248e91b0,transparent 50%),linear-gradient(115deg,#112e47,#1b4761 65%,#0e7376);color:#fff;box-shadow:inset 0 0 0 1px #ffffff26;isolation:isolate}
.business-card:before{content:"";position:absolute;z-index:-1;width:70%;aspect-ratio:1;right:-18%;top:-65%;border-radius:50%;border:calc(var(--cu)*.18) solid #e5b85a66;box-shadow:0 0 0 calc(var(--cu)*2) #ffffff08}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:5px}.card-kicker{letter-spacing:.12em;font-size:calc(var(--cu)*.76);font-weight:900;color:#f1cf77;white-space:nowrap}.card-star{color:#fff}.card-emblem{width:calc(var(--cu)*2.3);height:calc(var(--cu)*2.3);display:grid;place-items:center;overflow:hidden;flex-shrink:0;border-radius:25% 25% 38% 38%;border-top:calc(var(--cu)*.5) solid #ffcb58;background:#e8f7f3;color:#256578;font-size:calc(var(--cu)*1.3);font-weight:900}.card-emblem img{display:block;width:100%;height:100%;object-fit:contain;border-radius:inherit;background:#e8f7f3}.card-emblem [data-card-emblem-fallback]{display:block}
.card-ident{display:flex;flex-direction:column;gap:calc(var(--cu)*.26);margin-top:calc(var(--cu)*.8);padding-right:20%;min-width:0}.card-ident strong{font-size:calc(var(--cu)*2.15);line-height:1.15;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-ident span{font-size:calc(var(--cu)*1.05);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#dfedef}.card-ident span:last-child{font-size:calc(var(--cu)*.95);color:#e5c475}
.card-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:2%;flex:1;min-height:0;margin-top:calc(var(--cu)*.65)}.card-contacts{display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--cu)*.43);width:67%;min-width:0;padding-bottom:calc(var(--cu)*.45)}.card-contacts span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:calc(var(--cu)*.92);line-height:1.2;color:#e4f7f8}.card-contacts span:empty{display:none}.card-contacts span[data-card-phone]:not(:empty):before{content:"TEL  ";color:#7cd9ce;font-weight:900}.card-contacts span[data-card-email]:not(:empty):before{content:"MAIL  ";color:#7cd9ce;font-weight:900}.card-contacts span[data-card-website]:not(:empty):before{content:"WEB  ";color:#7cd9ce;font-weight:900}
.card-qr-wrap{width:28%;flex-shrink:0;display:grid;gap:calc(var(--cu)*.34);place-items:center}.card-qr-wrap img{display:block;aspect-ratio:1;width:100%;background:#fff;border:calc(var(--cu)*.44) solid #fff;border-radius:calc(var(--cu)*.5);image-rendering:pixelated;box-shadow:0 3px 12px #041c3544}.card-qr-wrap small{font-size:calc(var(--cu)*.55);letter-spacing:.09em;white-space:nowrap;color:#d9f3f4;font-weight:900}.card-qr-wrap img:not([src]){visibility:hidden}.card-footer{margin-top:calc(var(--cu)*.4);border-top:1px solid #ffffff35;padding-top:calc(var(--cu)*.4);display:flex;justify-content:space-between;color:#b4dadf;font-weight:800;font-size:calc(var(--cu)*.75)}
.card-overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding:12px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .35s}.card-overlay.show{opacity:1;visibility:visible;pointer-events:auto}.card-overlay{container-type:inline-size}.card-overlay .business-card{width:min(100%,640px);border-radius:18px;box-shadow:0 23px 53px #153c5652;--cu:clamp(7px,2.0cqi,16px)}
.card-stage-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}.card-back{border:1px solid #b8dcda;background:#fffffff2;color:#205569;padding:10px 15px;border-radius:22px;font-size:12px;font-weight:900;box-shadow:0 4px 13px #17365826}.card-back:hover{background:#e7f9f6}.card-qr-dialog{border:0;border-radius:19px;max-width:min(94vw,510px);padding:24px;text-align:center;box-shadow:0 20px 80px #152e4680;color:#1b3e56}.card-qr-dialog::backdrop{background:#122e42c7}.card-qr-dialog h2{font-size:19px;margin:8px 0}.card-qr-dialog p{font-size:12px;color:#597b8d;line-height:1.5}.card-qr-dialog img{display:block;width:min(72vw,380px);aspect-ratio:1;object-fit:contain;margin:15px auto;image-rendering:pixelated;background:#fff}.card-qr-dialog .action{margin:8px auto 0}.dialog-close{position:absolute;top:8px;right:10px;background:none;border:0;font-size:26px;color:#467083}
@media(max-width:940px){.card-overlay .business-card{max-width:650px}}
@media(max-width:520px){.studio-tabs{gap:7px;margin-bottom:15px}.studio-tab{min-height:62px;padding:9px;column-gap:7px;font-size:12px;border-radius:13px}.studio-tab .tab-icon{width:34px;height:34px}.studio-tab small{font-size:9px}.card-fields{grid-template-columns:1fr}.card-field-wide{grid-column:auto}.card-overlay{gap:8px;padding:5px}.card-overlay .business-card{border-radius:10px}.card-back{font-size:10px;padding:8px 10px}.card-stage-actions{gap:5px}.card-preview{margin-bottom:13px}.card-preview .business-card{--cu:clamp(7px,2cqi,12px)}}

.card-overlay.show .business-card{animation:cardReveal .75s cubic-bezier(.2,.86,.2,1) both}@keyframes cardReveal{from{opacity:0;transform:translateY(16px) rotateY(-10deg) scale(.91);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}@media(prefers-reduced-motion:reduce){.card-overlay.show .business-card{animation:none}}

/* v0.2.1: One shared modal owns the original WebGL stage; initial page contains forms only. */
.main-grid{display:flex;flex-direction:column;align-items:center;gap:0;max-width:800px;margin:0 auto}
.main-grid>.control-card{width:100%;max-width:800px}
.main-grid>.control-card.hidden{display:none!important}
.control-card #reverseBtn,.control-card #cardReverse{display:none!important}
#cardTransform{margin:20px 0 17px}
.transform-dialog{border:0;padding:0;width:min(860px,calc(100vw - 34px));max-width:860px;max-height:min(96dvh,960px);border-radius:25px;overflow:auto;box-shadow:0 27px 110px #071f35b0;background:#f8fcfc;color:var(--ink);overscroll-behavior:contain}
.transform-dialog::backdrop{background:#071d32c9;backdrop-filter:blur(7px)}
.transform-dialog-shell{min-width:0;padding:16px;display:flex;flex-direction:column;gap:11px}
.transform-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:4px 8px}
.transform-dialog-header h2{font-size:clamp(17px,2.5vw,23px);margin:3px 0 5px;line-height:1.3}
.transform-dialog-header p{font-size:11px;line-height:1.6;color:#668596;margin:0}
.transform-dialog-kicker{font-size:9px;font-weight:900;letter-spacing:.14em;color:#138e93}
.transform-dialog-close{flex:0 0 39px;width:39px;height:39px;border:1px solid #d7e7e7;border-radius:50%;color:#234458;background:white;font-size:28px;line-height:1;display:grid;place-items:center}
.transform-dialog .stage-card{width:100%;min-width:0;box-shadow:none;overflow:hidden;padding:13px 15px 10px;border-radius:17px}
.transform-dialog .stage{height:clamp(320px,48dvh,495px);margin-top:8px}
.transform-dialog .stage-caption{margin:8px 0 0}
.transform-dialog-footer{padding:0 4px 5px}
.transform-dialog-status{font-size:12px;color:#236774;background:#e7f8f8;padding:9px 12px;min-height:33px;line-height:1.5;border-radius:10px;margin:0 0 10px}
.transform-dialog-status.error{background:#fff0ea;color:#a4402a}
.transform-dialog-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.modal-tool{min-width:120px;min-height:39px;padding:8px 12px;border:1px solid #c9e0e3;border-radius:10px;background:white;color:#205569;font-size:12px;font-weight:900}
.modal-tool[hidden]{display:none!important}
.modal-tool:not(:disabled):hover{background:#eefaf8;border-color:#0aa1aa}
.modal-back{background:#123d55;color:white;border-color:#123d55}
.modal-back:not(:disabled):hover{background:#205b72}
@media(max-width:520px){
 .main-grid>.control-card{padding:22px 17px}
 .transform-dialog{width:100vw;max-width:none;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
 .transform-dialog-shell{min-height:100%;padding:max(9px,env(safe-area-inset-top)) 9px max(12px,env(safe-area-inset-bottom));gap:8px}
 .transform-dialog-header{padding:3px 5px}
 .transform-dialog-header h2{font-size:18px}
 .transform-dialog-header p{font-size:10px}
 .transform-dialog .stage-card{padding:9px 8px 7px;border-radius:14px}
 .transform-dialog .stage{height:clamp(245px,45dvh,430px);min-height:245px;margin-top:5px}
 .transform-dialog .stage-caption{font-size:9px}
 .transform-dialog .stage-bottom{font-size:9px;padding:10px 4px}
 .transform-dialog .card-overlay .business-card{width:min(100%,550px)}
 .transform-dialog-footer{padding:0 3px 4px}
 .transform-dialog-status{font-size:11px;margin-bottom:7px}
 .transform-dialog-actions{gap:6px}
 .modal-tool{min-width:0;flex:1 1 42%;min-height:40px;padding:7px 5px;font-size:11px}
}
@media(max-height:650px){.transform-dialog .stage{height:clamp(215px,43dvh,380px);min-height:215px}}

/* v0.2.3: make modal business card preserve its landscape aspect ratio in a flex overlay. */
.card-overlay .business-card{
 box-sizing:border-box;
 flex:0 0 auto;
 width:min(100%,var(--card-display-width,480px));
 height:auto;
 aspect-ratio:1.75 / 1;
 --cu:var(--card-display-unit,8px);
 display:grid;
 grid-template-columns:minmax(0,1fr) minmax(0,29%);
 grid-template-rows:auto auto minmax(0,1fr) auto;
 align-items:stretch;
 gap:0;
 padding:calc(var(--cu)*1.55) calc(var(--cu)*2.1);
}
.card-overlay .card-top{grid-column:1/-1;grid-row:1;min-width:0}
.card-overlay .card-ident{grid-column:1;grid-row:2;padding-right:3%;margin-top:calc(var(--cu)*.5);gap:calc(var(--cu)*.14);min-width:0}
.card-overlay .card-ident strong{font-size:calc(var(--cu)*1.83);line-height:1.17}
.card-overlay .card-ident span{font-size:calc(var(--cu)*.98);line-height:1.22}
.card-overlay .card-ident span:last-child{font-size:calc(var(--cu)*.82)}
.card-overlay .card-bottom{display:contents}
.card-overlay .card-contacts{grid-column:1;grid-row:3;width:100%;min-width:0;align-self:end;justify-content:flex-end;gap:calc(var(--cu)*.23);padding-bottom:calc(var(--cu)*.3)}
.card-overlay .card-contacts span{font-size:calc(var(--cu)*.76);line-height:1.12}
.card-overlay .card-qr-wrap{grid-column:2;grid-row:2/4;align-self:end;justify-self:end;width:100%;max-width:calc(var(--cu)*12.3);gap:calc(var(--cu)*.2)}
.card-overlay .card-qr-wrap img{max-width:100%;border-width:calc(var(--cu)*.35)}
.card-overlay .card-qr-wrap small{font-size:calc(var(--cu)*.48)}
.card-overlay .card-footer{grid-column:1/-1;grid-row:4;margin-top:calc(var(--cu)*.22);padding-top:calc(var(--cu)*.22);font-size:calc(var(--cu)*.65)}
.card-overlay .card-kicker{font-size:calc(var(--cu)*.63)}
.card-overlay .card-emblem{width:calc(var(--cu)*1.8);height:calc(var(--cu)*1.8);font-size:var(--cu)}
.card-overlay .card-stage-actions{flex:0 0 auto;align-self:center}
@media(max-width:520px){
 .transform-dialog .card-overlay .business-card{width:min(100%,var(--card-display-width,320px));--cu:var(--card-display-unit,6px)}
 .transform-dialog .card-overlay .card-contacts span{font-size:calc(var(--cu)*.7)}
 .transform-dialog .card-overlay .card-back{padding:8px 10px}
}

/* v0.2.5: local logo file input; the chosen image replaces only the card emblem. */
.card-logo-field{gap:8px}
.card-logo-picker{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.card-logo-picker input[type=file]{flex:1 1 220px;min-width:0;height:auto;padding:10px;background:#f9fcfc;border:1.5px solid #d7e4e9;border-radius:11px;font-size:12px;max-width:100%}
.card-logo-remove{border:1px solid #c9dfe5;background:white;border-radius:10px;padding:10px 12px;font-size:12px;font-weight:800;color:#205569;min-height:40px}
.card-logo-remove:disabled{opacity:.45;cursor:not-allowed}
.card-logo-field .mini-help{margin:0;font-weight:500;line-height:1.6}
.card-logo-status{font-size:11px;color:#286978;background:#ebf9f9;border-radius:8px;margin:0;padding:8px 10px;overflow-wrap:anywhere}
.card-logo-status.error{color:#a4402a;background:#fff0ea}
.card-emblem img[hidden],.card-emblem [data-card-emblem-fallback][hidden]{display:none!important}

/* v0.2.6: hide initial export buttons; website sits beside email on desktop; optional title remains hidden when empty. */
.control-card > .divider-line,.control-card > .export-grid{display:none}
.card-ident [data-card-title][hidden]{display:none!important}

/* v0.2.7: optional company/title, enlarged aspect-preserving uploaded logo, spacing. */
.card-ident [data-card-company][hidden],
.card-ident [data-card-title][hidden]{display:none!important}
/* The uploaded artwork is not clipped to the tiny M monogram or its yellow cap. */
.business-card .card-emblem.has-logo,
.card-overlay .business-card .card-emblem.has-logo{
  flex:0 0 auto;
  width:calc(var(--cu)*9.2);
  height:calc(var(--cu)*6.7);
  max-width:29%;
  max-height:calc(var(--cu)*6.7);
  border:0;
  border-radius:0;
  background:transparent;
  overflow:visible;
  padding:0;
}
.business-card .card-emblem.has-logo img,
.card-overlay .business-card .card-emblem.has-logo img{
  display:block;
  width:100%;height:100%;
  object-fit:contain;
  object-position:center top;
  background:transparent;
  border:0;
  border-radius:0;
}
/* Keep the identity block in its own left column, away from the larger logo. */
.card-preview .card-ident{padding-right:22%}
.card-overlay .card-ident{padding-right:3%}
#cardStatus{margin-top:20px}


/* v0.2.8: card-theme variations + PNG/preview layout harmonization. */
.business-card{
  --card-bg:linear-gradient(115deg,#112e47,#1b4761 65%,#0e7376);
  --card-kicker:#f1cf77;
  --card-name:#ffffff;
  --card-meta:#dfedef;
  --card-title:#e5c475;
  --card-label:#7cd9ce;
  --card-contact:#e4f7f8;
  --card-ring:#e5b85a66;
  --card-glow:#ffffff08;
  --card-outline:#ffffff26;
  --card-emblem-bg:#e8f7f3;
  --card-emblem-top:#ffcb58;
  --card-emblem-fg:#256578;
  --card-qr-shell:#ffffff;
  background:var(--card-bg)!important;
  color:var(--card-name)!important;
  box-shadow:inset 0 0 0 1px var(--card-outline)!important;
}
.business-card:before{border-color:var(--card-ring)!important;box-shadow:0 0 0 calc(var(--cu)*2) var(--card-glow)!important}
.business-card .card-kicker{color:var(--card-kicker)!important}
.business-card .card-ident strong{color:var(--card-name)!important}
.business-card .card-ident span{color:var(--card-meta)!important}
.business-card .card-ident span:last-child{color:var(--card-title)!important}
.business-card .card-contacts span{color:var(--card-contact)!important}
.business-card .card-contacts span[data-card-phone]:not(:empty):before,
.business-card .card-contacts span[data-card-email]:not(:empty):before,
.business-card .card-contacts span[data-card-website]:not(:empty):before{color:var(--card-label)!important}
.business-card .card-qr-wrap img{background:var(--card-qr-shell)!important;border-color:var(--card-qr-shell)!important}
.business-card .card-emblem:not(.has-logo){background:var(--card-emblem-bg)!important;border-top-color:var(--card-emblem-top)!important;color:var(--card-emblem-fg)!important}
.business-card[data-theme='ocean']{--card-bg:linear-gradient(115deg,#112e47,#1b4761 65%,#0e7376);--card-kicker:#f1cf77;--card-name:#ffffff;--card-meta:#dfedef;--card-title:#e5c475;--card-label:#7cd9ce;--card-contact:#e4f7f8;--card-ring:#e5b85a66;--card-glow:#ffffff08;--card-outline:#ffffff26;--card-emblem-bg:#e8f7f3;--card-emblem-top:#ffcb58;--card-emblem-fg:#256578;}
.business-card[data-theme='graphite']{--card-bg:linear-gradient(120deg,#1f2630,#303845 62%,#495363);--card-kicker:#d8deea;--card-name:#ffffff;--card-meta:#d7dee8;--card-title:#a6c4d9;--card-label:#87d9f1;--card-contact:#f3f6fa;--card-ring:rgba(150,162,185,.28);--card-glow:rgba(255,255,255,.05);--card-outline:rgba(255,255,255,.16);--card-emblem-bg:#f0f3f8;--card-emblem-top:#95a0b2;--card-emblem-fg:#36485e;}
.business-card[data-theme='light']{--card-bg:linear-gradient(120deg,#ffffff,#f7fbfd 58%,#edf5f8);--card-kicker:#2f6b8e;--card-name:#173658;--card-meta:#33556c;--card-title:#11818d;--card-label:#1498a5;--card-contact:#173658;--card-ring:rgba(23,54,88,.11);--card-glow:rgba(23,54,88,.03);--card-outline:rgba(23,54,88,.09);--card-emblem-bg:#eef6fb;--card-emblem-top:#5db5d7;--card-emblem-fg:#1f5977;}
.business-card[data-theme='forest']{--card-bg:linear-gradient(120deg,#16352f,#245348 60%,#2f7a66);--card-kicker:#e3d690;--card-name:#ffffff;--card-meta:#d7efe7;--card-title:#d4e89f;--card-label:#8fe0c7;--card-contact:#effbf6;--card-ring:rgba(221,209,145,.28);--card-glow:rgba(255,255,255,.04);--card-outline:rgba(255,255,255,.17);--card-emblem-bg:#edf8f3;--card-emblem-top:#84d0a0;--card-emblem-fg:#205f51;}
.business-card[data-theme='plum']{--card-bg:linear-gradient(120deg,#2a2142,#4a2f68 58%,#7a467f);--card-kicker:#f4d3a8;--card-name:#ffffff;--card-meta:#e6dbef;--card-title:#f3b7cb;--card-label:#f0bfdd;--card-contact:#f7effa;--card-ring:rgba(246,197,126,.25);--card-glow:rgba(255,255,255,.04);--card-outline:rgba(255,255,255,.16);--card-emblem-bg:#f7eef7;--card-emblem-top:#dd9bc8;--card-emblem-fg:#6b3b74;}
.business-card[data-theme='coral']{--card-bg:linear-gradient(120deg,#4a2f3f,#b24c61 58%,#ff8a5d);--card-kicker:#fff1b5;--card-name:#ffffff;--card-meta:#fff0ee;--card-title:#ffe3a4;--card-label:#fff0c5;--card-contact:#ffffff;--card-ring:rgba(255,245,200,.18);--card-glow:rgba(255,255,255,.04);--card-outline:rgba(255,255,255,.18);--card-emblem-bg:#fff8f0;--card-emblem-top:#ffc86f;--card-emblem-fg:#8c4b3c;}
.business-card[data-theme='sky']{--card-bg:linear-gradient(120deg,#daeefe,#b9dff7 58%,#86bde9);--card-kicker:#1c5c8f;--card-name:#183554;--card-meta:#2f5070;--card-title:#1d7ea0;--card-label:#0e8798;--card-contact:#234563;--card-ring:rgba(255,255,255,.42);--card-glow:rgba(255,255,255,.08);--card-outline:rgba(24,53,84,.10);--card-emblem-bg:#eff8ff;--card-emblem-top:#8bd3ff;--card-emblem-fg:#2b6f91;}
.business-card[data-theme='sand']{--card-bg:linear-gradient(120deg,#f6efe1,#eee0c0 58%,#dbc28f);--card-kicker:#7b5e2c;--card-name:#4b3822;--card-meta:#65523d;--card-title:#a1702e;--card-label:#9b7b4e;--card-contact:#4b3822;--card-ring:rgba(86,63,36,.12);--card-glow:rgba(255,255,255,.06);--card-outline:rgba(75,56,34,.08);--card-emblem-bg:#fff8ed;--card-emblem-top:#e5bf73;--card-emblem-fg:#7b5e2c;}
.theme-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.theme-option{display:flex;align-items:center;gap:8px;justify-content:flex-start;min-height:48px;padding:8px 10px;border:1px solid #d7e4e9;border-radius:12px;background:#f9fcfc;color:#214b61;font-weight:800;font-size:11px;text-align:left}
.theme-option:hover{border-color:#0aa1aa;background:#f1fbfb}
.theme-option.active{background:#123d55;color:#fff;border-color:#123d55;box-shadow:0 6px 0 #b4d6d8}
.theme-option.active .theme-swatch{box-shadow:0 0 0 2px rgba(255,255,255,.45)}
.theme-swatch{display:block;width:34px;height:22px;border-radius:8px;border:1px solid rgba(0,0,0,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.theme-ocean{background:linear-gradient(120deg,#112e47,#0e7376)}
.theme-graphite{background:linear-gradient(120deg,#1f2630,#495363)}
.theme-light{background:linear-gradient(120deg,#ffffff,#edf5f8)}
.theme-forest{background:linear-gradient(120deg,#16352f,#2f7a66)}
.theme-plum{background:linear-gradient(120deg,#2a2142,#7a467f)}
.theme-coral{background:linear-gradient(120deg,#4a2f3f,#ff8a5d)}
.theme-sky{background:linear-gradient(120deg,#daeefe,#86bde9)}
.theme-sand{background:linear-gradient(120deg,#f6efe1,#dbc28f)}
.business-card .card-emblem.has-logo,
.card-overlay .business-card .card-emblem.has-logo{width:calc(var(--cu)*5.9);height:calc(var(--cu)*4.3);max-width:14.5%;max-height:calc(var(--cu)*4.3)}
.business-card .card-emblem.has-logo img,
.card-overlay .business-card .card-emblem.has-logo img{object-position:center center}
@media(max-width:700px){.theme-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.theme-option{min-height:44px;padding:7px 8px;font-size:10px}.theme-swatch{width:30px;height:20px}}

/* v0.3.0: three independently selectable studio modes. */
.studio-tabs{grid-template-columns:repeat(3,minmax(0,1fr));max-width:800px}
@media(max-width:600px){.studio-tabs{gap:5px}.studio-tab{grid-template-columns:1fr;justify-items:center;text-align:center;padding:9px 4px;min-height:78px;font-size:11px}.studio-tab .tab-icon{grid-row:auto;width:34px;height:34px}.studio-tab small{grid-column:1;font-size:9px;line-height:1.35}}

/* v0.4.2: card event captions/status follow visible phase. */
.stage-caption [hidden],#cardStatus[hidden],#transformDialogStatus[hidden]{display:none!important}

/* Shared-link entry.  No animation and no sound starts before a click. */
.shared-start-dialog{border:0;padding:0;width:min(440px,calc(100vw - 34px));max-width:440px;max-height:calc(100dvh - 24px);border-radius:24px;overflow:auto;background:linear-gradient(150deg,#ffffff,#f1fcfb 75%,#fff8e4);color:#173658;box-shadow:0 30px 100px #071e35a8}
.shared-start-dialog::backdrop{background:#0b243cc7;backdrop-filter:blur(6px)}
.shared-start-shell{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;padding:42px 24px 28px;text-align:center}
.shared-start-close{position:absolute;top:13px;right:13px;width:36px;height:36px;border:1px solid #cbdfe2;border-radius:50%;background:#fff;color:#173658;font-size:24px;line-height:1;cursor:pointer}
.shared-start-logo{width:86px;height:86px;border-radius:20px;object-fit:contain}
.shared-start-shell h2{font-size:clamp(19px,4.6vw,24px);line-height:1.5;margin:2px 0 3px;letter-spacing:.02em}
.shared-start-button{width:min(100%,320px);min-height:54px;padding:12px 20px;border:0;border-radius:30px;background:linear-gradient(105deg,#0ca8a5,#107e98);color:#fff;font-size:17px;font-weight:800;box-shadow:0 5px 0 #075d72;cursor:pointer}
.shared-start-button:disabled{opacity:.55;cursor:wait}
.shared-start-status{min-height:1.4em;margin:0;font-size:12px;color:#617988}
.shared-start-dialog [hidden]{display:none!important}
@media(max-width:520px){.shared-start-shell{padding:40px 16px 24px;gap:15px}.shared-start-logo{width:72px;height:72px}}

/* QR / card share URL: high-visibility, 2-second clipboard feedback. */
.share-copy-toast{position:fixed;z-index:5000;left:50%;top:max(18px,env(safe-area-inset-top));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 28px);padding:13px 22px;border:1px solid #bce5de;border-radius:14px;background:#155c61;color:#fff;text-align:center;font-size:14px;font-weight:800;line-height:1.5;box-shadow:0 12px 38px #092f4560;pointer-events:none;animation:shareCopyToastAppear .18s ease-out both}
.share-copy-toast.copy-toast-error{background:#893d34;border-color:#c98573}
.share-copy-toast[hidden]{display:none!important}
@keyframes shareCopyToastAppear{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@media(max-width:520px){.share-copy-toast{font-size:12px;padding:12px 16px;max-width:calc(100vw - 18px)}}