/* Modern UI palette, not an official VI color specification. Original mark is never recolored. */
:root{--brand:#007A67;--brand-deep:#006453;--brand-ink:#16483F;--sidebar:#16483F;--sidebar-2:#206052;--line:#DCEAE3;--bg:#F5FAF7;--muted:#52675E;--shadow:0 4px 18px rgba(20,72,63,.055);--brand-mint:#E6F8F1;--brand-lime:#B8EC72}
.brand-v31-logo{display:block;width:100%;height:auto;object-fit:contain;aspect-ratio:510/221;filter:none;transform:none}
.brand-v31-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,360px);gap:32px;align-items:center;background:linear-gradient(120deg,#fff 45%,#E6F8F1);border:1px solid var(--line);border-radius:24px;padding:32px;margin-bottom:24px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.brand-v31-hero-copy{min-width:0;position:relative}
.brand-v31-wordmark{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:25px}
.brand-v31-wordmark .brand-v31-logo{width:84px;max-width:100%;flex:none;padding:4px}
.brand-v31-wordmark>span{font-size:12px;color:var(--muted)}
.brand-v31-eyebrow{font-size:12px;font-weight:650;letter-spacing:.1em;color:var(--brand);margin:0 0 8px}
.brand-v31-hero h2{font-size:28px;line-height:1.45;color:var(--brand-ink);margin:0 0 12px;overflow-wrap:anywhere;letter-spacing:-.02em}
.brand-v31-intro{max-width:610px;color:var(--muted);font-size:14px;line-height:1.85;margin-bottom:23px}
.brand-v31-hero-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.brand-v31-hero-actions .btn{text-decoration:none;min-height:42px;border-radius:12px}
.brand-v31-hero-actions .btn.primary{background:var(--brand-lime);color:#16483F;border-color:#A3D75E;font-weight:650}
.brand-v31-hero-actions .btn.primary:hover{background:#ACE265}
.brand-v31-culture-link{display:inline-flex;gap:8px;margin-top:18px;color:var(--brand-deep);font-size:12.5px;text-underline-offset:4px}
.brand-v31-cast{display:flex;justify-content:center;gap:18px;align-items:flex-end;padding:18px 12px 12px;min-width:0}
.brand-v31-person{margin:0;flex:1;max-width:170px;min-width:0;text-align:center}
.brand-v31-portrait{height:214px;display:flex;align-items:flex-end;justify-content:center}
.brand-v31-portrait img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.brand-v31-person figcaption{margin-top:13px;line-height:1.5}.brand-v31-person b{display:block;font-size:15px;color:var(--brand-ink)}.brand-v31-person figcaption span{font-size:12px;color:var(--muted)}
.brand-v31-await{display:block;color:var(--muted);font-size:12px;padding:45px 6px;border:1px dashed #AFCFBE;border-radius:12px;width:100%;align-self:center}
.brand-v31-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:24px}
.brand-v31-guide>a{display:flex;gap:12px;align-items:flex-start;min-width:0;padding:20px;text-decoration:none;color:var(--brand-ink);border:1px solid var(--line);border-radius:16px;background:#fff}.brand-v31-guide>a:hover{background:#F0FAF4;border-color:#B1DAC5}.brand-v31-step{width:32px;height:32px;display:grid;place-items:center;flex:none;background:var(--brand-mint);color:var(--brand-deep);border-radius:10px;font-size:12px;font-weight:700}.brand-v31-guide b{display:block;font-size:14px;margin-bottom:5px}.brand-v31-guide div>span{display:block;color:var(--muted);font-size:12px;line-height:1.75;overflow-wrap:anywhere}
.brand-v31-login-culture{position:relative;z-index:1;margin-bottom:28px;color:var(--brand-ink)}.brand-v31-login-culture .brand-v31-logo{width:108px;max-width:100%;padding:8px;background:#fff;border-radius:14px}.brand-v31-login-culture p{font-size:20px;font-weight:650;margin:22px 0 8px;color:var(--brand-ink)}.brand-v31-login-culture>span{font-size:13px;color:var(--muted);line-height:1.85}
.login-hero{background:linear-gradient(155deg,#E6F8F1,#F8FCF8);color:var(--brand-ink)}.login-hero h1,.login-hero h2,.login-hero .feat b,.login-hero .f b{color:var(--brand-ink)}.login-hero .sub,.login-hero .feat span,.login-hero .feat .f span,.login-hero .f span{color:var(--muted)}.login-hero .feat .f>i{background:#D3EEDC;color:var(--brand-deep)}
.login-hero .brand-line span{color:var(--muted)!important}.login-hero .chips span{color:var(--brand-deep);background:#DDF0E4}.login-hero .feat .fi{background:#CDE7D6}
.brand-v31-culture{max-width:1040px;margin:0 auto;color:var(--brand-ink)}.brand-v31-culture-header{padding:30px;background:linear-gradient(135deg,#fff,#F0FAF4);border:1px solid var(--line);border-radius:20px;margin-bottom:20px}.brand-v31-culture-header .brand-v31-logo{width:94px;max-width:100%;margin-bottom:25px}.brand-v31-culture-header h2{font-size:25px;margin:0 0 12px;line-height:1.55}.brand-v31-culture-header>p:last-child{max-width:830px;color:var(--muted);line-height:1.9}
.brand-v31-culture-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:18px}.brand-v31-info-card{background:#fff;border:1px solid var(--line);padding:24px;border-radius:16px;margin-bottom:18px;min-width:0}.brand-v31-culture-grid .brand-v31-info-card{margin-bottom:0}.brand-v31-info-card h3{font-size:18px;margin:0 0 10px;color:var(--brand-ink)}.brand-v31-info-card p{color:var(--muted);line-height:1.85}.brand-v31-keywords{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.brand-v31-keywords span{background:var(--brand-mint);color:var(--brand-deep);padding:4px 11px;border-radius:999px;font-size:12px}.brand-v31-source{font-size:12px;margin-top:14px}.brand-v31-colors{display:flex;gap:16px;align-items:flex-start;margin:16px 0}.brand-v31-swatch{flex:none;display:block;width:64px;height:64px;background:linear-gradient(145deg,#80DCBA,#B8EC72);border-radius:14px}.brand-v31-colors b{font-size:14px}.brand-v31-colors p{margin-top:5px}
.brand-v31-help{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:18px}.brand-v31-help h3{font-size:18px;margin-bottom:14px;color:var(--brand-ink)}.brand-v31-help details{border-top:1px solid var(--line)}.brand-v31-help summary{font-size:14px;padding:16px 4px;cursor:pointer;color:var(--brand-ink);font-weight:600}.brand-v31-help p{color:var(--muted);padding:0 4px;line-height:1.85;margin:0 0 9px}.brand-v31-help a{display:inline-block;margin:0 4px 14px;color:var(--brand-deep);text-underline-offset:3px}.brand-v31-internal{color:var(--muted);font-size:12px;line-height:1.8;margin:0 0 16px;overflow-wrap:anywhere}
.brand-v31-hero :is(a,button):focus-visible,.brand-v31-guide a:focus-visible,.brand-v31-culture :is(a,summary):focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.brand-v31-document{margin:0;padding:24px;background:var(--bg);font:14px/1.8 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif}.brand-v31-document a{color:var(--brand-deep)}.brand-v31-document pre{white-space:pre-wrap;word-break:break-all;background:#F0FAF4;padding:14px;border-radius:10px;font-size:12px}.brand-v31-document ul{padding-left:22px}.brand-v31-document .brand-v31-culture{max-width:1000px}
@media(max-width:1100px){.brand-v31-hero{grid-template-columns:minmax(0,1fr) 250px;gap:20px;padding:26px}.brand-v31-hero h2{font-size:24px}.brand-v31-portrait{height:182px}.brand-v31-guide>a{padding:17px 14px;gap:9px}}
@media(max-width:740px){.brand-v31-hero{grid-template-columns:1fr;padding:23px 19px;gap:20px}.brand-v31-wordmark{margin-bottom:19px;gap:12px}.brand-v31-wordmark .brand-v31-logo{width:70px}.brand-v31-wordmark>span{font-size:11px}.brand-v31-hero h2{font-size:24px}.brand-v31-cast{max-width:350px;width:100%;justify-self:center;padding:8px}.brand-v31-portrait{height:162px}.brand-v31-guide{grid-template-columns:1fr;gap:10px}.brand-v31-culture-grid{grid-template-columns:1fr}.brand-v31-culture-header,.brand-v31-info-card,.brand-v31-help{padding:20px}.brand-v31-culture-header h2{font-size:21px}.brand-v31-document{padding:14px}.brand-v31-hero-actions .btn{font-size:12.5px;padding:9px 11px;min-height:40px}.brand-v31-colors{gap:12px}.brand-v31-swatch{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.brand-v31-hero *,.brand-v31-guide *{transition:none!important}}

/* 3.1.1: own characters, layered pastels and quiet native-CSS texture, not a copied campaign. */
:root{--sidebar:#EDF9EF;--sidebar-2:#E1F4E8;--brand-peach:#FFF0DF;--brand-lilac:#F0EAFB;--brand-sky:#E9F5FC}
.sidebar{color:var(--brand-ink);border-right:1px solid #D6EBDD;background-image:radial-gradient(#79AF9120 1px,transparent 1px),linear-gradient(180deg,var(--sidebar),var(--sidebar-2));background-size:17px 17px,100% 100%}
.sidebar .brand-v31-logo{background:transparent;border-radius:0;width:102px;padding:0;margin:16px 10px 11px;max-width:calc(100% - 20px)}
.sidebar .s-brand b{color:var(--brand-ink)}.sidebar .s-brand span{color:#52675E}
.sidebar .nav-item{color:#35564A;border:1px solid transparent;margin-bottom:4px}.sidebar .nav-item:hover{background:#FFFFFFA3;color:#16483F}.sidebar .nav-item.on{background:#C6EDAD;color:#16483F;border-color:#B7DF9E;box-shadow:0 3px 0 #A7CE9029}.sidebar .nav-item.on svg{color:#326640}.sidebar .s-foot{border-top-color:#C9DEC9}
.sidebar .nav-item[href="#/library"] svg{color:#7760A1}.sidebar .nav-item[href="#/ai"] svg{color:#AA6A23}.sidebar .nav-item[href="#/plans"] svg{color:#3F7E9F}.sidebar .nav-item[href="#/admin"] svg{color:#A3675A}
.brand-v31-login-culture .brand-v31-logo{background:transparent;border-radius:0;padding:0;width:108px}
.brand-v31-hero{background:linear-gradient(118deg,#FFFEF8 0%,#F4FBEE 51%,#E7F8F3 100%);border-color:#D4E9DA;box-shadow:0 7px 0 #CFE5D52A;isolation:isolate;padding:31px 32px}
.brand-v31-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#2D8D6411 1.2px,transparent 1.2px);background-size:22px 22px;mask-image:linear-gradient(100deg,transparent 25%,#000 100%)}
.brand-v31-hero::after{content:"";position:absolute;width:132px;height:77px;right:17%;top:-32px;border:1px solid #B5DCC155;border-radius:90% 10% 90% 10%;transform:rotate(-20deg);pointer-events:none;z-index:-1}
.brand-v31-wordmark{margin-bottom:19px}.brand-v31-wordmark>span{font-size:12px;letter-spacing:.015em}.brand-v31-wordmark .brand-v31-logo{width:71px;padding:0}
.brand-v31-eyebrow{display:flex;gap:7px;align-items:center;font-size:12px;letter-spacing:.04em;margin-bottom:10px}.brand-v311-dot{width:7px;height:7px;background:#77AE3F;border-radius:50%;box-shadow:0 0 0 4px #A9D97022}
.brand-v31-hero h2{font-size:33px;line-height:1.38;letter-spacing:-.025em;margin-bottom:15px}.brand-v31-intro{font-size:13.5px;max-width:490px;margin-bottom:21px}
.brand-v31-hero-actions .btn{box-shadow:0 2px 0 #BDD6B927;border-radius:12px}.brand-v31-hero-actions .btn.primary{border-color:#9DC759;box-shadow:0 3px 0 #8EBD473D}
.brand-v31-cast{gap:22px;padding:22px 3px 12px;position:relative}.brand-v31-person{max-width:162px;position:relative}.brand-v31-portrait{position:relative;height:237px;isolation:isolate}
.brand-v31-portrait::before{content:"";position:absolute;width:156px;max-width:100%;height:156px;bottom:20px;border-radius:47% 53% 42% 58%;background:#D7EFB3;z-index:-1;transform:rotate(-8deg)}
.brand-v311-hxy .brand-v31-portrait::before{background:#FFE0BD;transform:rotate(10deg);border-radius:54% 46% 58% 42%}.brand-v31-portrait::after{content:"";position:absolute;width:90%;height:10px;bottom:-4px;background:#97C3AB26;filter:blur(4px);border-radius:50%;z-index:-1}
.brand-v31-portrait img{filter:drop-shadow(0 6px 3px #396E4610)}.brand-v311-bubble{position:absolute;top:6px;left:4px;font-size:11px;padding:5px 11px;border:1px solid #B9D49D;border-radius:12px 12px 12px 2px;background:#FBFFF5;color:#3D6030;white-space:nowrap;z-index:2;transform:rotate(-5deg);pointer-events:none}.brand-v311-hxy .brand-v311-bubble{left:auto;right:0;top:19px;background:#FFF8EF;border-color:#E8CDA5;color:#77502E;border-radius:12px 12px 2px 12px;transform:rotate(5deg)}
.brand-v31-person figcaption{display:inline-flex;flex-direction:column;border:1px solid #D2E4D4;border-radius:14px;background:#FFFFFFB8;padding:7px 14px;margin-top:14px;min-width:100px;box-shadow:0 3px 0 #B8D1BE13}.brand-v31-person b{font-size:14px}.brand-v31-person figcaption span{font-size:10.5px;margin-top:1px}
.brand-v31-guide{gap:13px}.brand-v31-guide>a{position:relative;padding:19px 36px 20px 18px;border-radius:19px;gap:10px;border:1px solid #D3E5D5;box-shadow:0 4px 0 #C4D9C31E;overflow:hidden}.brand-v31-guide>a::before{content:"";position:absolute;right:-20px;bottom:-25px;width:96px;height:64px;border-radius:50%;border:1px solid currentColor;opacity:.08;pointer-events:none;transform:rotate(-25deg)}
.brand-v31-guide .brand-v311-mint{background:#EAF8DE;color:#315735}.brand-v31-guide .brand-v311-peach{background:var(--brand-peach);color:#704622;border-color:#EFDFC8}.brand-v31-guide .brand-v311-lilac{background:var(--brand-lilac);color:#625081;border-color:#DFD5EB}.brand-v31-guide>a:hover{filter:brightness(.988);border-color:currentColor}.brand-v31-guide b{font-size:14px;margin-bottom:5px}.brand-v31-guide div>span{color:#52675E;font-size:12px;line-height:1.7}.brand-v31-guide .brand-v31-step{background:#FFFFFFA3;color:inherit;border-radius:11px;flex:none}.brand-v311-card-arrow{position:absolute;right:14px;top:16px;font-size:21px;font-weight:500;opacity:.7}
.brand-v31-hero ~ .stats{gap:12px}.brand-v31-hero ~ .stats .stat{border-radius:15px;padding:15px 17px;background:#FBFFF8;border-color:#DFEBDC;box-shadow:none}.brand-v31-hero ~ .stats .stat:nth-child(2){background:#FFFCF7;border-color:#EDE3D2}.brand-v31-hero ~ .stats .stat:nth-child(3){background:#F8FCFF;border-color:#DCE8F0}.brand-v31-hero ~ .stats .stat:nth-child(4){background:#FCF9FF;border-color:#E7DFF1}
.brand-v31-hero ~ .quick .q{border-radius:19px;position:relative;overflow:hidden;min-height:149px;background:#F1FAE9;border-color:#D4E7C8;padding:20px}.brand-v31-hero ~ .quick .q:nth-child(2){background:#F2EFFA;border-color:#DFD5EF}.brand-v31-hero ~ .quick .q:nth-child(3){background:#FFF2DE;border-color:#EFDFC7}.brand-v31-hero ~ .quick .q:nth-child(4){background:#E9F5FB;border-color:#CFE2EE}.brand-v31-hero ~ .quick .q::after{content:"";width:85px;height:85px;position:absolute;right:-26px;bottom:-26px;border:12px solid #FFFFFF8C;border-radius:30px;transform:rotate(20deg);pointer-events:none}.brand-v31-hero ~ .quick .q .qi{border-radius:13px;background:#FFFFFFA8!important;box-shadow:0 2px 0 #173B2C0B;width:42px;height:42px}.brand-v31-hero ~ .quick .q b{font-size:14px;position:relative;z-index:1}.brand-v31-hero ~ .quick .q span{font-size:12px;position:relative;z-index:1;color:#52675E}
.brand-v31-culture-header{background:#F7F9F8}.brand-v31-culture-grid .brand-v31-info-card{background:#FFF;border-color:var(--line)}
.creative-tabs{padding:10px;border:1px solid var(--line);border-radius:14px;background:#F7F9F8;gap:10px}.creative-tabs .btn{border-radius:10px}.creative-card{border-radius:14px;background:#FFF}.creative-card h3{font-size:18px}.creative-history{border-radius:14px;background:#FFF}.creative-card .input,.creative-reference-list{background-color:#fff}
.brand-v31-standards{margin:0 0 20px}.brand-v31-standards-heading{margin:26px 0 17px}.brand-v31-standards-heading h3{font-size:21px;line-height:1.5;margin:0 0 10px;color:var(--brand-ink)}.brand-v31-standards-heading>p:last-child{line-height:1.85;color:var(--muted);max-width:900px;font-size:13px}.brand-v31-rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.brand-v31-rule{position:relative;border:1px solid var(--line);border-radius:14px;padding:21px 23px;background:#FFF;min-width:0;scroll-margin-top:100px}.brand-v31-rule-number{display:inline-grid;place-items:center;background:#EDF3EF;color:#426037;font-size:12px;font-weight:700;border-radius:8px;width:29px;height:29px;margin-bottom:12px}.brand-v31-rule h4{font-size:15px;line-height:1.5;margin:0 0 9px;color:var(--brand-ink)}.brand-v31-rule>p{color:var(--muted);font-size:13px;line-height:1.85;margin:0 0 9px}.brand-v31-rule .brand-v31-source{font-size:11.5px;margin:11px 0 0;color:#5B6D63;line-height:1.8}
.culture-rule-directory{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.culture-rule-directory button{font:inherit;font-size:13px;line-height:1.5;padding:8px 12px;min-height:36px;border:1px solid var(--line);border-radius:8px;background:#FFF;color:var(--brand-deep);cursor:pointer}.culture-rule-directory button:hover{background:#EDF5EF}.culture-rule-directory button:focus-visible,.brand-v31-rule:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media(max-width:740px){.brand-v31-rules-grid{grid-template-columns:1fr;gap:11px}.brand-v31-rule{padding:19px}.brand-v31-standards-heading h3{font-size:19px}}
@media(max-width:1100px){.brand-v31-hero{padding:25px;grid-template-columns:minmax(0,1fr) 260px}.brand-v31-hero h2{font-size:29px}.brand-v31-portrait{height:209px}.brand-v31-portrait::before{height:125px}.brand-v31-guide>a{padding:18px 28px 18px 14px}}
@media(max-width:740px){.brand-v31-hero{grid-template-columns:1fr;padding:23px 19px;gap:8px}.brand-v31-hero h2{font-size:28px}.brand-v31-wordmark{gap:11px;margin-bottom:17px}.brand-v31-wordmark .brand-v31-logo{width:60px}.brand-v31-wordmark>span{font-size:10.5px}.brand-v31-intro{font-size:13px}.brand-v31-cast{max-width:325px;width:100%;gap:14px;padding:20px 0 5px}.brand-v31-portrait{height:181px}.brand-v31-portrait::before{height:113px;width:117px;bottom:14px}.brand-v311-bubble{font-size:10px;padding:4px 9px;top:1px;left:0}.brand-v311-hxy .brand-v311-bubble{top:11px;right:-1px}.brand-v31-person figcaption{padding:6px 10px;min-width:89px;margin-top:12px}.brand-v31-guide>a{padding:18px 36px 18px 16px}.brand-v31-guide b{font-size:14px}.brand-v31-hero~.quick .q{padding:16px;min-height:164px}.brand-v31-hero~.quick .q b{font-size:13px}.brand-v31-hero~.quick .q span{font-size:11.5px}.creative-tabs{gap:8px;padding:8px}.creative-card h3{font-size:16px}}

/* 3.1.2 rule examples: original approved pixels remain unchanged. Wrong states are display-only. */
.brand-v312-example-notice{padding:11px 14px;border:1px solid #D3E6CC;border-radius:12px;background:#F5FBEF;font-size:12px!important;color:#41643C!important}
.brand-v312-examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 12px;align-items:stretch}
.brand-v312-example{margin:0;background:#FFF;border:1px solid #DAE8D6;border-radius:13px;overflow:hidden;min-width:0;display:flex;flex-direction:column}
.brand-v312-incorrect{border-color:#E8D2C9}
.brand-v312-example-label{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#E9F5DF;color:#355C2B;font-size:13px;line-height:1.5;font-weight:650;flex:none;min-height:36px}
.brand-v312-example-label>span{font-size:15px;font-weight:800;line-height:1}
.brand-v312-incorrect .brand-v312-example-label{background:#FAEEE9;color:#944E36}
.brand-v312-example-image{height:195px;flex:none;padding:13px 8px 9px;display:flex;align-items:flex-end;justify-content:center;position:relative;isolation:isolate;background-color:#F2F7F0;background-image:linear-gradient(45deg,#D7E5D43B 25%,transparent 25%),linear-gradient(-45deg,#D7E5D43B 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#D7E5D43B 75%),linear-gradient(-45deg,transparent 75%,#D7E5D43B 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;overflow:hidden}
.brand-v312-incorrect .brand-v312-example-image{background-color:#F6F5F1}
.brand-v312-example-subject{position:relative;height:100%;width:auto;aspect-ratio:var(--subject-ratio);max-width:100%;display:grid;place-items:center;min-width:0}
.brand-v312-example-subject>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:none;transform:none}
.brand-v312-example figcaption{padding:12px;overflow-wrap:anywhere;line-height:1.7;flex:1}
.brand-v312-example figcaption b{display:block;font-size:13px;line-height:1.5;min-height:3em;color:#244B3F;margin-bottom:6px}
.brand-v312-example figcaption>span{display:block;font-size:13px;color:#53675D;line-height:1.7}
.brand-v312-color-distortion img{filter:hue-rotate(145deg) saturate(.75)}
.brand-v312-squashed .brand-v312-example-subject{transform:scaleY(.58);transform-origin:center bottom}
.brand-v312-feature-circles,.brand-v312-feature-mask{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.brand-v312-feature-circles ellipse{fill:none;stroke:#D47525;stroke-width:1.2;vector-effect:non-scaling-stroke}
.brand-v312-feature-numbers text{font-family:-apple-system,"PingFang SC",sans-serif;font-size:8px;font-weight:800;fill:#9D4E14;paint-order:stroke;stroke:#FFF;stroke-width:2px;stroke-linejoin:round}
.brand-v312-feature-mask rect{fill:#DDE4DE;stroke:#ABB8AD;stroke-width:.6;stroke-dasharray:2 1}
.brand-v312-counter-good,.brand-v312-counter-bad{background-image:linear-gradient(180deg,#E8F1E9,#F9F7F0);background-size:100% 100%}
.brand-v312-counter{position:absolute;inset:auto 0 0;height:26%;background:linear-gradient(115deg,#E9D7BC,#C4A77F);border-top:8px solid #8D795E;box-shadow:0 -3px 0 #C4B394;z-index:2;pointer-events:none}
.brand-v312-counter-bad .brand-v312-counter{height:78%}
.brand-v312-reference-sheet .brand-v312-example-subject{width:100%;height:100%;aspect-ratio:auto}
.brand-v312-reference-sheet img{object-position:center center}
.brand-v312-sheet-layout{width:100%;height:100%;padding:9px 5px;display:flex;flex-direction:column;gap:7px;background:#FFF;border:1px solid #CEDACD;box-shadow:0 3px 0 #D3DDD055;min-width:0}
.brand-v312-sheet-layout>b{font-size:10px;color:#466345;font-weight:600;text-align:center;line-height:1.5}
.brand-v312-sheet-layout>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;flex:1;min-height:0}
.brand-v312-sheet-tile{border:1px solid #E3EAE1;border-radius:3px;display:flex;flex-direction:column;align-items:center;padding:4px 2px;min-width:0;min-height:0;background:#FAFCF8}
.brand-v312-sheet-tile>img{flex:1;min-height:0;width:100%;object-fit:contain;object-position:center bottom}
.brand-v312-sheet-view{font-size:9px;color:#52675E;text-align:center;line-height:1.5;margin-top:5px;overflow-wrap:anywhere}
.brand-v312-sheet-missing{display:flex;flex:1;align-items:center;color:#7B8777;font-size:9px;line-height:1.6;text-align:center;overflow-wrap:anywhere}
.brand-v312-sheet-layout>small{font-size:9px;color:#7D624F;text-align:center;line-height:1.5}
.brand-v312-example-await{grid-column:1/-1;margin:0;padding:24px 15px;border:1px dashed #BBCDC0;background:#FFFFFFA8;border-radius:12px;color:#617669;font-size:12px;line-height:1.8;min-height:105px}
.brand-v312-example-await .btn{display:block;margin-top:10px;font-size:12px;white-space:normal}
.brand-v312-unavailable .brand-v312-example-image>span{align-self:center;font-size:11px;text-align:center;color:#617669}
.brand-v312-image-failed .brand-v312-example-image{background:#F3F1EA}
@media(max-width:740px){.brand-v312-examples{grid-template-columns:1fr;gap:12px}.brand-v312-example-image{height:220px;padding:12px 7px 8px}.brand-v312-example-label{padding:8px 12px}.brand-v312-example figcaption b{min-height:0}}