:root{--paper:#F4F0E7;--ink:#1B1D1B;--blue:#2925E8;--lime:#D9F553;--orange:#FF7A4B;--line:#c9c6b9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.wrap{width:min(1270px,calc(100% - 80px));margin:auto}.top{height:76px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--ink)}.top strong{font-size:22px;letter-spacing:-.07em}.top a{border:1px solid var(--ink);padding:13px 17px;font-size:12px;font-weight:800}.top a:hover{background:var(--ink);color:var(--paper)}.cover{padding:105px 0 95px;border-bottom:1px solid var(--ink)}.over{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.cover h1{font-size:clamp(82px,12vw,184px);letter-spacing:-.105em;line-height:.85;margin:33px 0 32px}.cover h1 span{color:var(--blue)}.cover .desc{font-size:18px;max-width:760px;line-height:1.85;word-break:keep-all}.cover-end{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:55px;border-top:1px solid var(--ink);padding-top:25px;font-size:12px;font-weight:800}.section{padding:95px 0;border-bottom:1px solid var(--ink)}.heading{display:grid;grid-template-columns:190px 1fr;gap:30px;margin-bottom:45px}.heading h2{font-size:clamp(44px,6vw,90px);letter-spacing:-.085em;line-height:1;margin:0}.bodycopy{font-size:16px;line-height:1.9;max-width:790px;word-break:keep-all}.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tile{background:#eae5d8;min-height:310px;padding:32px;display:flex;flex-direction:column;justify-content:space-between}.tile.blue{background:var(--blue);color:var(--paper)}.tile.lime{background:var(--lime)}.tile.dark{background:var(--ink);color:var(--paper)}.tile h3{font-size:clamp(33px,4vw,58px);letter-spacing:-.075em;line-height:1;margin:0}.tile p{font-size:15px;line-height:1.7;max-width:440px;margin:15px 0 0}.label{font-size:11px;font-weight:900;letter-spacing:.11em}.logo-stage{display:grid;grid-template-columns:1fr 1fr;gap:12px}.logo-frame{min-height:280px;padding:32px;display:grid;place-items:center;border:1px solid var(--ink)}.logo-frame.cream{background:var(--paper)}.logo-frame.ink{background:var(--ink)}.logo-frame img{width:100%;max-width:580px}.logo-frame .symbol{max-width:180px}.mini{font-size:12px;color:#62645d;line-height:1.7;margin:10px 0 0}.palette{display:grid;grid-template-columns:2fr 1.2fr 1.2fr 1fr 1fr;gap:9px}.swatch{min-height:255px;display:flex;flex-direction:column;justify-content:space-between;padding:20px}.swatch h3{font-size:21px;letter-spacing:-.04em}.swatch code{font-family:Consolas,monospace;font-size:13px}.scale{margin-top:14px;display:flex;gap:20px;flex-wrap:wrap;font-size:13px}.swatch-one{background:var(--blue);color:white}.swatch-two{background:var(--paper);border:1px solid var(--line)}.swatch-three{background:var(--ink);color:white}.swatch-four{background:var(--lime)}.swatch-five{background:var(--orange)}.sampletype{border-top:1px solid var(--ink);padding:35px 0}.sampletype strong{display:block;font-weight:900;font-size:clamp(64px,9vw,140px);line-height:.86;letter-spacing:-.09em}.sampletype .ko{font-size:clamp(37px,6vw,85px);letter-spacing:-.08em;line-height:1.18;word-break:keep-all}.sampletype p{font-size:13px;color:#555;line-height:1.7;margin-top:16px}.components{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.component{min-height:250px;border:1px solid var(--ink);padding:23px;position:relative;overflow:hidden}.component h3{font-size:32px;letter-spacing:-.06em;margin:15px 0 8px}.component p{font-size:13px;line-height:1.75}.shape{width:110px;height:110px;margin:22px auto 0}.shape.arc{border:24px solid var(--blue);border-right-color:transparent;border-radius:50%;transform:rotate(30deg)}.shape.pill{background:var(--orange);height:150px;width:51px;border-radius:100px;transform:rotate(27deg)}.shape.disc{border-radius:50%;background:var(--lime)}.voice{display:grid;grid-template-columns:1fr 1fr;gap:12px}.voice-col{padding:30px;background:#e8e5d9}.voice-col:nth-child(2){background:var(--ink);color:var(--paper)}.voice-col .example{font-size:clamp(25px,3vw,40px);letter-spacing:-.06em;font-weight:900;line-height:1.25;margin:25px 0}.voice-col ul{padding-left:19px;line-height:1.9;font-size:14px}.app-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.app{min-height:225px;border:1px solid var(--ink);padding:24px;display:flex;flex-direction:column;justify-content:space-between}.app b{font-size:13px}.app h3{font-size:33px;letter-spacing:-.07em}.app p{font-size:13px;line-height:1.7}.asset-grid{display:flex;gap:10px;flex-wrap:wrap}.asset-grid a{background:var(--ink);color:white;padding:17px 20px;font-size:13px;font-weight:800}.asset-grid a:hover{background:var(--blue)}.footer{background:var(--blue);color:var(--paper);padding:60px 0}.footer h2{font-size:clamp(54px,9.5vw,145px);letter-spacing:-.09em;line-height:.9;margin:0 0 30px}.footer p{font-size:13px;line-height:1.8;max-width:720px}.print-btn{background:var(--lime);border:0;padding:15px 20px;font-size:13px;font-weight:900;cursor:pointer}
@media(max-width:850px){.wrap{width:calc(100% - 38px)}.heading{grid-template-columns:1fr}.palette{grid-template-columns:repeat(3,1fr)}.logo-stage,.duo,.voice{grid-template-columns:1fr}.components,.app-list{grid-template-columns:1fr 1fr}.cover h1{font-size:clamp(65px,12.5vw,120px)}}@media(max-width:520px){.palette{grid-template-columns:1fr 1fr}.swatch{min-height:180px}.components,.app-list{grid-template-columns:1fr}.logo-frame{min-height:185px}.section{padding:70px 0}.cover{padding:68px 0}.cover h1{font-size:15vw}.heading h2{font-size:53px}}@media print{.top a,.print-btn{display:none}.wrap{width:94%}.cover{padding:48px 0}.section{break-inside:avoid;page-break-inside:avoid;padding:45px 0}.palette{grid-template-columns:repeat(5,1fr)}.swatch{min-height:160px}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* Honor the visitor's reduced-motion preference on brandbook navigation. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }