*{box-sizing:border-box}
:root{font-family:Arial,"Microsoft YaHei",sans-serif;color:#282b29;background:#f5f4f0;font-synthesis:none}
body{margin:0;font-size:13px}button,input,select,textarea{font:inherit}button{cursor:pointer}button,input,select,textarea{accent-color:#455846}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.upload:focus-within{outline:2px solid #798d68;outline-offset:3px}
header{height:78px;background:#faf9f6;border-bottom:1px solid #dedfd7;padding:0 38px;display:flex;justify-content:space-between;align-items:center}.signature{font-size:26px;font-weight:800;letter-spacing:-1px}.signature span{font-weight:400;color:#969d89}.signature small{font-size:12px;letter-spacing:1px;font-weight:400}.header-actions{display:flex;align-items:center;gap:22px}.version,.eyebrow{font:10px monospace;letter-spacing:1.7px;color:#838978}.primary{border:0;background:#344531;color:#fff;padding:12px 18px;border-radius:4px}.intro{padding:32px 38px;display:flex;justify-content:space-between;align-items:end}.eyebrow{margin:0 0 12px}h1{font-size:28px;font-weight:500;letter-spacing:-.5px;margin:0 0 12px}.intro p:last-child{margin:0;color:#838779;font-size:12px}.template-id{text-align:right;font-size:10px;color:#838779;line-height:2}.template-id b{font:11px monospace;color:#414a39}
main{display:grid;grid-template-columns:280px minmax(0,1fr);margin:0 38px;border:1px solid #dcded4;border-radius:8px;overflow:hidden;background:#fbfaf7}aside{border-right:1px solid #dcded4;padding:22px;max-height:1080px;overflow:auto}aside section+section{border-top:1px solid #e0e2d9;padding-top:22px;margin-top:22px}aside h2{font-size:12px;font-weight:600;margin:0 0 16px}aside h2>span{font:10px monospace;color:#929987;margin-right:10px}
.brand-button{width:100%;border:1px solid #e0e1d8;border-radius:5px;background:transparent;display:flex;align-items:center;text-align:left;padding:12px 10px;gap:11px;margin-bottom:7px;color:#343a30}.brand-button[aria-pressed=true]{background:#eef0e7;border-color:#7b8d6b}.brand-dot{width:26px;height:26px;border-radius:50%;background:var(--dot);flex-shrink:0;display:grid;place-items:center;color:white;font:10px monospace}.brand-button strong{font-size:12px;display:block}.brand-button small{font-size:8px;display:block;color:#8a9080;margin-top:5px}.note,.asset-note{font-size:10px;line-height:1.8;color:#8a8f81;margin:12px 0 0}.asset-note{color:#7b725f}.field-label{display:block;font-size:11px;color:#79806f;margin:14px 0 7px}.field-label output{float:right;font-size:10px}input:not([type=checkbox]):not([type=range]):not([type=file]),textarea,select{width:100%;background:#fffefa;border:1px solid #dddfd4;border-radius:4px;padding:9px;color:#353d31;font-size:12px;min-width:0}textarea{resize:vertical;min-height:58px;line-height:1.5}input[type=range]{width:100%}.segmented{display:flex;border:1px solid #dce0d3;padding:3px;border-radius:5px;gap:3px}.segmented button{flex:1;border:0;padding:9px 8px;background:transparent;border-radius:3px;color:#89917d;font-size:11px;white-space:nowrap}.segmented button small{font-size:9px;margin-left:5px}.segmented button[aria-pressed=true]{background:#fffefb;box-shadow:0 1px 5px #313c2020;color:#3d5035}.toggle{display:flex;gap:6px;align-items:center;color:#76806b;font-size:11px;white-space:nowrap;cursor:pointer}.toggle input{margin:0}aside .toggle{margin-top:12px}.asset-buttons{display:flex;gap:7px}.upload{flex:1;position:relative;background:#f0f1e9;border:1px solid #d9decf;border-radius:4px;padding:10px;text-align:center;font-size:10px;cursor:pointer;overflow:hidden}.upload input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.text-button{border:0;background:transparent;color:#707b65;font-size:10px;padding:12px 0 0;text-decoration:underline}
.workspace{min-width:0;background:radial-gradient(#b4b8ac55 .7px,transparent .7px) 0 0/13px 13px,#eeeee7}.toolbar{padding:15px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;background:#f7f7f0dd;border-bottom:1px solid #dddfd3}.compact{border:0;background:#eaece3}.toggles{display:flex;gap:16px}.logic-strip{display:flex;justify-content:center;align-items:center;gap:14px;padding:21px 12px;color:#8a9280;font-size:10px}.logic-strip i{font:9px monospace;border:1px solid #c5cdba;padding:2px 4px;font-style:normal;margin-right:5px}.logic-strip b{font-weight:400;color:#b1b8a8}#preview{padding:8px 28px 30px;min-height:500px}.preview-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px;gap:10px}.preview-heading h2{font-size:12px;font-weight:500;letter-spacing:1px;margin:0}.brand-character{font-size:10px;color:#929987}.brand-preview+.brand-preview{border-top:1px solid #d5d9cd;margin-top:32px;padding-top:28px}.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}.card-frame{min-width:0}.face-label{display:flex;justify-content:space-between;color:#919987;font:9px monospace;letter-spacing:1px;margin:0 0 10px}.card-shell{container-type:inline-size;filter:drop-shadow(0 12px 13px #29311c17)}.card{--u:1cqw;position:relative;width:100%;aspect-ratio:90/54;isolation:isolate;overflow:hidden;background:var(--paper);color:var(--ink);font-family:Arial,"Microsoft YaHei",sans-serif;font-size:calc(var(--u)*2.25);line-height:1.4}.card *{min-width:0}.card.round{border-radius:calc(var(--u)*4)}.card.cut{clip-path:polygon(0 0,94% 0,100% 10%,100% 100%,6% 100%,0 90%)}.card.front{background:var(--front-bg);color:var(--front-ink)}.front-layout,.back-layout{position:absolute;inset:calc(var(--u)*5.5);z-index:1}.front-layout{display:grid;grid-template-rows:1fr auto;gap:calc(var(--u)*var(--gap))}.front-hero{display:flex;flex-direction:column;justify-content:space-between;align-items:start;gap:calc(var(--u)*var(--gap));padding-bottom:calc(var(--u)*2)}.logo-slot{width:calc(var(--u)*30);height:calc(var(--u)*16);display:flex;align-items:center;justify-content:flex-start;flex-shrink:0}.logo-slot img{width:100%;height:100%;object-fit:contain;object-position:left center}.logo-slot.seal{width:calc(var(--u)*18);height:calc(var(--u)*18)}.wordmark{font-family:Impact,"Arial Narrow",Arial,sans-serif;font-weight:900;font-size:calc(var(--u)*9);letter-spacing:calc(var(--u)*-.35);line-height:1}.wordmark small{display:block;font-family:Arial,sans-serif;font-size:calc(var(--u)*2.2);letter-spacing:calc(var(--u)*.5);font-weight:400;margin-top:calc(var(--u)*1.1)}.print-wordmark:after{content:"";display:block;height:calc(var(--u)*.55);margin-top:calc(var(--u)*1.4);background:linear-gradient(90deg,#00a6d7 0 24%,transparent 24% 26%,#e5007e 26% 49%,transparent 49% 51%,#f7d800 51% 74%,transparent 74% 76%,#222 76%)}.message h2{font-weight:500;line-height:1.24;white-space:pre-line;font-size:calc(var(--u)*4.2);margin:0;overflow-wrap:anywhere}.message p{font-size:calc(var(--u)*1.7);letter-spacing:calc(var(--u)*.12);margin:calc(var(--u)*1.4) 0 0;white-space:pre-line}.front-footer{border-top:1px solid color-mix(in srgb,currentColor 25%,transparent);padding-top:calc(var(--u)*2);display:flex;justify-content:space-between;gap:calc(var(--u)*2);font-size:calc(var(--u)*1.65);letter-spacing:calc(var(--u)*.1)}.brand-web{text-align:right;overflow-wrap:anywhere}
.back-layout{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--u)*19);grid-template-rows:calc(var(--u)*10) minmax(0,1fr) auto;column-gap:calc(var(--u)*var(--gap));row-gap:calc(var(--u)*var(--gap))}.brand-header{grid-area:1/1/2/3;display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*3);border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent);padding-bottom:calc(var(--u)*1.4)}.brand-header .logo-slot{width:calc(var(--u)*22);height:calc(var(--u)*8)}.brand-header .logo-slot.seal{width:calc(var(--u)*8);height:calc(var(--u)*8)}.brand-header .wordmark{font-size:calc(var(--u)*4.4)}.brand-header .wordmark small{font-size:calc(var(--u)*1.2);margin-top:calc(var(--u)*.5);letter-spacing:calc(var(--u)*.22)}.brand-header .print-wordmark:after{margin-top:calc(var(--u)*.6);height:calc(var(--u)*.25)}.brand-descriptor{font-size:calc(var(--u)*1.5);text-align:right;letter-spacing:calc(var(--u)*.1)}.identity{grid-area:2/1/3/2;align-self:center}.identity h2{font-size:calc(var(--u)*4.1);font-weight:500;line-height:1.18;margin:0;overflow-wrap:anywhere;white-space:pre-line}.identity p{font-size:calc(var(--u)*1.85);margin:calc(var(--u)*1.2) 0 0;opacity:.7;white-space:pre-line;overflow-wrap:anywhere}.contacts{grid-area:3/1/4/2;display:flex;flex-direction:column;gap:calc(var(--u)*1.1);font-size:calc(var(--u)*1.9);line-height:1.4}.contact-row{display:grid;grid-template-columns:calc(var(--u)*2.5) minmax(0,1fr);gap:calc(var(--u)*1)}.contact-row b{font:inherit;opacity:.45}.contact-row span{white-space:pre-line;overflow-wrap:anywhere}.action{grid-area:2/2/4/3;align-self:end;display:flex;flex-direction:column;align-items:start;gap:calc(var(--u)*1.5)}.qr-slot{width:calc(var(--u)*18);height:calc(var(--u)*18);background:#fff;display:grid;place-items:center;color:#999;flex-shrink:0}.qr-slot img{width:100%;height:100%;object-fit:contain;padding:calc(var(--u)*1.2)}.qr-placeholder{height:100%;width:100%;border:1px dashed #b0b0aa;display:flex;flex-direction:column;align-items:center;justify-content:center;font:calc(var(--u)*3) monospace;gap:calc(var(--u)*.7)}.qr-placeholder small{font:calc(var(--u)*1.5) Arial,sans-serif}.qr-caption{font-size:calc(var(--u)*1.7);overflow-wrap:anywhere}.no-qr .identity,.no-qr .contacts{grid-column:1/-1}.no-qr .action{display:none}
.decoration{position:absolute;right:-12%;top:-8%;width:65%;height:110%;z-index:0;pointer-events:none;opacity:.18}.technology .decoration{background:repeating-linear-gradient(90deg,transparent 0 12%,#8b3fff44 12% 12.4%),repeating-linear-gradient(0deg,transparent 0 12%,#3d8fff44 12% 12.4%);transform:rotate(-20deg);border:1px solid #8b3fff}.print .decoration{background:conic-gradient(from 30deg,#00a6d7 0 25%,#e5007e 25% 50%,#f7d800 50% 75%,#252525 75%);border-radius:50%;width:calc(var(--u)*48);height:calc(var(--u)*48);top:calc(var(--u)*-16);right:calc(var(--u)*-14);opacity:.12}.restaurant .decoration{border:calc(var(--u)*.5) double #b3933b;border-radius:50%;width:calc(var(--u)*75);height:calc(var(--u)*75);top:calc(var(--u)*-9);right:calc(var(--u)*-40)}
.safe-line{display:none;position:absolute;inset:calc(var(--u)*3.3333);border:1px dashed #cc6f61;z-index:4;pointer-events:none}.show-safe .safe-line{display:block}.show-structure .zone{outline:1px dashed #54a898;position:relative}.show-structure .zone:before{content:attr(data-zone);position:absolute;top:0;left:0;transform:translateY(-100%);background:#e2f5ec;color:#245345;font:calc(var(--u)*1.45) Arial,sans-serif;padding:calc(var(--u)*.15) calc(var(--u)*.5);white-space:nowrap;z-index:5}.show-structure .decoration{opacity:.05}
.portrait .pair{max-width:700px;margin:auto;gap:34px}.portrait .card{--u:1.6666667cqw;aspect-ratio:54/90}.portrait .card.cut{clip-path:polygon(0 0,90% 0,100% 6%,100% 100%,10% 100%,0 94%)}.portrait .front-hero{justify-content:flex-start;gap:calc(var(--u)*8)}.portrait .front-footer{flex-direction:column;gap:calc(var(--u)*2)}.portrait .brand-web{text-align:left}.portrait .back-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:calc(var(--u)*13) minmax(0,1fr) auto auto}.portrait .brand-header{grid-area:1/1/2/2;align-items:start;flex-direction:column;justify-content:start;gap:calc(var(--u)*1)}.portrait .brand-header .logo-slot{height:calc(var(--u)*8)}.portrait .brand-header .logo-slot.seal{width:calc(var(--u)*8);height:calc(var(--u)*8)}.portrait .brand-descriptor{text-align:left;font-size:calc(var(--u)*1.4)}.portrait .identity{grid-area:2/1/3/2}.portrait .contacts{grid-area:3/1/4/2}.portrait .action{grid-area:4/1/5/2;flex-direction:row;align-items:end;padding-top:calc(var(--u)*2);border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent);gap:calc(var(--u)*3)}.portrait .no-qr .back-layout{grid-template-rows:calc(var(--u)*13) minmax(0,1fr) auto}.portrait .qr-caption{max-width:calc(var(--u)*16);line-height:1.7}.portrait .identity h2{font-size:calc(var(--u)*3.8)}
.workspace-footer{display:flex;justify-content:space-between;gap:15px;padding:15px 24px;border-top:1px solid #d9ddce;font-size:10px;color:#808b73}#validation{padding:0 24px 14px;color:#7c6847;font-size:11px;line-height:1.8}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;background:#f8f8f1;padding:24px;border-top:1px solid #d9ddce}.principles small{font:9px monospace;color:#909c81;letter-spacing:1px}.principles h3{font-size:12px;font-weight:500;margin:9px 0}.principles p{font-size:10px;line-height:1.8;color:#8b9480;margin:0}footer{display:flex;justify-content:space-between;margin:22px 38px;color:#969b8d;font-size:10px}
@media(min-width:1600px){main{grid-template-columns:310px minmax(0,1fr)}#preview{padding:20px 48px 35px}.pair{gap:36px}}
@media(max-width:1150px){.pair{grid-template-columns:minmax(0,1fr);max-width:570px;margin:auto;gap:26px}.portrait .pair{grid-template-columns:repeat(2,minmax(0,1fr))}.toolbar{flex-wrap:wrap}.brand-character{font-size:9px}.principles{gap:12px}}
@media(max-width:780px){header{padding:0 18px;height:65px}.version,.template-id{display:none}.intro{padding:25px 18px}h1{font-size:23px}.intro p:last-child{line-height:1.7}main{margin:0 16px;grid-template-columns:1fr}aside{max-height:none;border-right:0;border-bottom:1px solid #ddd;padding:20px}#brand-picker{display:flex;gap:6px}.brand-button{padding:10px 7px;justify-content:center}.brand-dot,.brand-button small{display:none}.brand-button strong{font-size:11px}aside section:nth-child(3),aside section:nth-child(4){max-width:100%}#fields{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.toolbar{padding:12px}.logic-strip{gap:7px;font-size:9px}.logic-strip i{margin-right:3px}#preview{padding:8px 18px 25px}.portrait .pair{grid-template-columns:1fr;max-width:330px}.principles{grid-template-columns:1fr;gap:20px}.workspace-footer{flex-wrap:wrap}footer{margin:20px 18px;gap:20px;line-height:1.8}}
@media print{@page{size:A4;margin:12mm}body{background:white}header,.intro,aside,.toolbar,.logic-strip,.principles,.workspace-footer,#validation,footer{display:none!important}main{display:block;border:0;margin:0;overflow:visible}.workspace{background:white}#preview{padding:0}.brand-preview{break-inside:avoid;margin:0 0 10mm!important;padding:0!important;border:0!important}.preview-heading{margin-bottom:3mm}.preview-heading h2{font-size:9pt}.brand-character{font-size:7pt}.pair,.portrait .pair{display:flex;gap:6mm;max-width:none;margin:0}.card-frame{width:90mm;flex:none}.portrait .card-frame{width:54mm}.card-shell{filter:none}.card{print-color-adjust:exact;-webkit-print-color-adjust:exact}.face-label{font-size:7pt}.safe-line,.zone:before{display:none!important}.zone{outline:0!important}.decoration{opacity:.18!important}}