@import url('./assets/fonts.css');:root{--blue:#0865ff;--ink:#0f172a;--muted:#5b6b80;--line:#e2e8f0;--canvas:#f5f6f8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--canvas);color:var(--ink);font:14px/1.6 Inter,system-ui,sans-serif}a{color:var(--blue);text-decoration:none}header{background:white;border-bottom:1px solid var(--line);padding:20px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}header img{width:144px;display:block}header nav{display:flex;gap:24px;font-size:12px}main{max-width:1520px;padding:0 40px;margin:auto}.intro{padding:48px 0 32px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--muted);font-weight:600}h1{font-size:48px;line-height:1.1;letter-spacing:-2px;margin:20px 0}h2{font-size:22px;line-height:1.3;letter-spacing:-.6px;margin:0}.intro p{max-width:90ch;color:var(--muted);font-size:14px}.directions{display:grid;grid-template-columns:1fr 1fr;gap:24px}.direction{background:white;border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:20px;min-width:0}.direction.selected{border-color:var(--blue);box-shadow:inset 0 3px var(--blue)}.direction-head{display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--muted);letter-spacing:.8px}.direction-head span:first-child{color:var(--blue);font-weight:600}.lockup{height:145px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}.lockup img{width:70%;max-width:340px}.direction-story p{font-size:12px;color:var(--muted);max-width:65ch;min-height:38px}.size-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:66px}.size-row>img{flex-shrink:0;max-width:100%}.size-row .inverted{width:150px;height:64px;background:var(--ink);padding:16px;border-radius:8px}.actions{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px}.actions button{font:600 12px Inter,sans-serif;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);min-height:38px;padding:0 14px;cursor:pointer}.actions button:hover{background:#edf4ff;border-color:var(--blue);color:var(--blue)}.preview-section{padding:48px 0 0}.preview-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:20px}.preview-head h2{margin-top:12px}.preview-head p{font-size:12px;color:var(--muted)}.controls{display:flex;gap:12px;flex-shrink:0}.controls label{display:grid;gap:6px;font-size:11px;color:var(--muted)}select{height:40px;border:1px solid #b9c3d2;border-radius:8px;background:white;color:var(--ink);padding:0 12px;font:13px Inter,sans-serif;max-width:100%}.frame-wrap{height:820px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:white}iframe{width:100%;height:100%;border:0}.preview-foot{display:flex;justify-content:space-between;gap:24px;font-size:11px;color:var(--muted)}.principles{margin:40px 0;background:white;border:1px solid var(--line);border-radius:14px;padding:24px}.principles>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.principles p{font-size:12px;color:var(--muted)}.principles strong{color:var(--ink);display:block;margin-bottom:8px}footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--muted);font-size:11px}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:3px}@media(max-width:1100px){.preview-head{align-items:start;flex-direction:column}.size-row{gap:12px}.size-row .inverted{width:125px}.direction-story p{min-height:56px}}@media(max-width:720px){main{padding:0 16px}header{padding:16px;flex-wrap:wrap}header nav{gap:16px;font-size:11px}.intro{padding:32px 0 20px}h1{font-size:36px;letter-spacing:-1.2px}.directions{grid-template-columns:1fr;gap:16px}.direction{padding:20px}.lockup{height:130px}.direction-story p{min-height:0}.size-row .inverted{width:118px}.actions{gap:10px;flex-wrap:wrap}.actions button{padding:0 12px}.controls{width:100%;flex-wrap:wrap}.controls label{flex:1;min-width:130px}.frame-wrap{height:750px}.preview-foot{flex-wrap:wrap;gap:10px}.principles>div{grid-template-columns:1fr;gap:0}.preview-section{padding-top:32px}}@media print{header nav,.actions,.preview-section{display:none}main{padding:0}.intro{padding:20px 0}h1{font-size:36px}.directions{gap:16px}.direction{break-inside:avoid;padding:20px}.principles{break-inside:avoid}.lockup{height:100px}footer{padding-bottom:0}}
@media(max-width:1100px){.size-row{flex-wrap:wrap}.direction-head{flex-wrap:wrap}.direction-story h2{font-size:20px}}
.controls label{grid-template-columns:minmax(0,1fr)}.controls select{width:100%;min-width:0}

.brand-expression{position:relative;overflow:hidden;background:var(--ink);color:white;border-radius:10px;padding:24px;min-height:180px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}.expression-label{font-size:8px;letter-spacing:1.4px;opacity:.65;position:relative;z-index:1}.brand-expression>strong{font-size:27px;line-height:1.2;letter-spacing:-.8px;position:relative;z-index:1;max-width:75%}.expression-motif{position:absolute;right:0;bottom:-30px;width:160px;transform:rotate(-12deg);opacity:.16}.expression-motif img{display:block;width:100%}.brand-expression.core{background:#0865ff}.brand-expression.core .expression-motif{width:170px;right:-10px;bottom:-30px;transform:none;opacity:.22}.brand-expression.module{background:#0865ff}.brand-expression.module .expression-motif{width:190px;display:grid;grid-template-columns:1fr 1fr;gap:12px;right:-12px;bottom:-20px;transform:rotate(-12deg);opacity:.18}.brand-expression.flow .expression-motif{right:-20px;bottom:-34px;width:200px;transform:rotate(14deg);opacity:.2}.brand-expression.flow:after{content:'';position:absolute;right:45px;top:-30px;width:120px;height:250px;border:1px solid #33405c;border-radius:80px;transform:rotate(14deg)}@media(max-width:720px){.brand-expression{min-height:160px;padding:20px}.brand-expression>strong{font-size:24px}.expression-motif{width:130px}}