@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap";:root{--blue:#0071bc;--deep:#003b66;--cyan:#00a8e8;--red:#ed1c24;--yellow:#ffd200;--ink:#09273d;--muted:#688093;--line:#dbe5ea;--paper:#f7fafb;--offwhite:#e6efff;--radius:8px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);margin:0;font-family:DM Sans,sans-serif}.book{display:flex}.sidebar{border-right:1px solid var(--line);z-index:5;background:#fff;flex-direction:column;width:264px;height:100vh;padding:29px 20px 24px;display:flex;position:fixed;top:0;left:0;overflow:hidden}.logo{width:130px;height:auto;display:block}.logo.logo--icon{width:72px}.side-brand{padding:3px 10px 39px}.side-brand small{color:#8095a3;letter-spacing:.5px;margin-top:17px;font:10px/1.55 DM Mono,monospace;display:block}.sidebar nav{flex:1;gap:3px;min-height:0;margin-right:-4px;padding-right:4px;display:grid;overflow-y:auto}.sidebar nav a{color:#527083;border-radius:7px;align-items:center;gap:12px;padding:11px 10px;font-size:14px;text-decoration:none;transition:background .15s,color .15s;display:flex}.sidebar nav a:hover{color:var(--blue);background:#edf7fc}.sidebar nav span{color:#9fb1bc;font:10px DM Mono,monospace}.side-footer{border-top:1px solid var(--line);color:#8095a3;flex:none;margin:18px 10px 0;padding-top:18px;font-size:11px;line-height:1.5}.mobile-menu{display:none}.toast{z-index:20;background:var(--ink);color:#fff;border-radius:999px;padding:10px 18px;font-size:13px;font-weight:600;animation:.2s toast-in;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #09273d40}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}main{width:calc(100% - 264px);min-width:0;margin-left:264px}.hero{background:var(--deep);color:#fff;min-height:640px;position:relative;overflow:hidden}.hero-grid{opacity:.16;background-image:linear-gradient(#a6d4ed44 1px,#0000 1px),linear-gradient(90deg,#a6d4ed44 1px,#0000 1px);background-size:64px 64px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,#000,#0000 85%);mask-image:linear-gradient(90deg,#000,#0000 85%)}.hero-glow{pointer-events:none;border:1px solid #8fc4e055;border-radius:50%;width:520px;height:520px;position:absolute;top:50px;right:-160px}.hero-content{z-index:1;max-width:820px;padding:72px clamp(44px,8vw,126px) 48px;position:relative}.hero .logo{width:165px}.tag,.overline{letter-spacing:1.5px;text-transform:uppercase;font:10px DM Mono,monospace}.tag{color:#8dc7e7;margin:32px 0 14px}.hero h1,.section h2{letter-spacing:-3px;margin:0 0 22px;font-size:clamp(40px,4.8vw,68px);line-height:1.01}.hero h1 em,.section h2 em{font-family:Playfair Display,serif;font-weight:600}.hero h1 em{color:#d2edfb}.hero-tagline{letter-spacing:-.5px;color:#fff;margin:-8px 0 18px;font-size:clamp(22px,2.4vw,32px);font-weight:600;line-height:1.2}.hero-tagline em{color:#ffd200;font-family:Playfair Display,serif;font-weight:600}.lede{color:#cae0eb;max-width:560px;font-size:17px;line-height:1.65}.lede strong{color:#fff;font-weight:600}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.button{cursor:pointer;border:none;border-radius:6px;align-items:center;gap:10px;padding:13px 18px;font-family:inherit;font-size:13px;font-weight:700;text-decoration:none;transition:transform .15s,box-shadow .15s;display:inline-flex}.button:hover{transform:translateY(-1px)}.button--primary{color:var(--deep);background:#fff}.button--ghost{color:#fff;background:#ffffff14;border:1px solid #fff3}.button--ghost:hover{background:#ffffff24}.hero-meta{border-top:1px solid #ffffff1f;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;padding-top:28px;display:grid}.hero-meta h4{letter-spacing:1px;text-transform:uppercase;color:#8dc7e7;margin:0 0 8px;font-family:DM Mono,monospace;font-size:11px}.hero-meta p{color:#b8d4e4;margin:0;font-size:13px;line-height:1.55}.hero-meta code{color:#fff;background:#ffffff14;border-radius:3px;padding:1px 5px;font:11px DM Mono,monospace}.dots{gap:13px;display:flex;position:absolute;bottom:74px;right:10%}.dots i,.large-points i{border-radius:50%;width:31px;height:31px;display:block}.dots i:first-child,.large-points i:first-child{background:var(--cyan)}.dots i:nth-child(2),.large-points i:nth-child(2){background:var(--red)}.dots i:nth-child(3),.large-points i:nth-child(3){background:var(--yellow)}.section{width:100%;padding:110px clamp(44px,8vw,126px)}.section-copy{max-width:928px}.overline{color:var(--blue);margin:0 0 20px}.section h2{font-size:clamp(35px,4vw,57px)}.section h2 em{color:var(--blue)}.big-copy,.description{color:#597285;max-width:650px;font-size:17px;line-height:1.65}.principles{border-top:1px solid var(--line);grid-template-columns:repeat(3,1fr);margin-top:64px;display:grid}.principles article{border-right:1px solid var(--line);margin-right:28px;padding:24px 28px 12px 0}.principles article:last-child{border:0}.principles b{font-size:20px}.principles p{color:var(--muted);font-size:14px;line-height:1.5}.logo-section{background:#fff}.asset-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;max-width:none;display:grid}.asset-group{max-width:none;margin:36px 0 8px}.asset-group h3{color:var(--ink);margin:0 0 16px;font-size:14px;font-weight:700}.asset-card{border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden}.asset-preview{place-items:center;height:160px;padding:24px;display:grid}.asset-preview--light{background:#f4fbff}.asset-preview--dark{background:var(--deep)}.asset-preview--icon{background:linear-gradient(145deg,#f4fbff,#e8f4fa)}.asset-preview .logo{width:140px}.asset-preview--icon .logo{width:72px}.asset-meta{border-top:1px solid var(--line);gap:4px;padding:16px 18px;display:grid}.asset-meta strong{font-size:14px}.asset-meta span{color:var(--muted);font-size:12px}.format-row{flex-wrap:wrap;gap:6px;margin-top:10px;display:flex}.format-btn{border:1px solid var(--line);color:var(--ink);letter-spacing:.4px;cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:5px;padding:5px 10px;font:10px/1 DM Mono,monospace;transition:border-color .15s,color .15s,background .15s;display:inline-flex}.format-btn svg{opacity:.75;flex:none}.format-btn:hover svg{opacity:1}.format-btn:hover{border-color:var(--blue);color:var(--blue);background:#edf7fc}.logo-showcase{border:1px solid var(--line);border-radius:var(--radius);grid-template-columns:repeat(3,1fr);max-width:none;margin:28px 0 34px;display:grid;overflow:hidden}.logo-box{place-items:center;height:180px;display:grid}.logo-box .logo{width:155px}.logo-box.light{background:#f4fbff}.logo-box.dark{background:var(--deep)}.logo-box.photo{background:linear-gradient(135deg,#6db3d4,#004369)}.spec-grid{grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px;display:grid}.spec-grid h4{color:var(--ink);margin:0 0 8px;font-size:13px}.spec-grid p{color:var(--muted);margin:0;font-size:13px;line-height:1.55}.download-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;max-width:none;margin-bottom:32px;padding:24px;display:flex}.download-panel h3{margin:0 0 6px;font-size:15px}.download-panel p{color:var(--muted);margin:0;font-size:13px}.download-panel__actions{flex-wrap:wrap;gap:10px;display:flex}.download-list{gap:0;display:grid}.download-item{border:0;border-top:1px solid var(--line);text-align:left;cursor:pointer;width:100%;color:var(--ink);background:0 0;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:12px 0;font-family:inherit;transition:color .15s;display:grid}.download-item:last-child{border-bottom:1px solid var(--line)}.download-item:hover{color:var(--blue)}.download-item span{font-size:14px;font-weight:600}.download-item code{color:var(--muted);font:11px DM Mono,monospace}.download-item svg{color:var(--blue)}.dl-btn{background:var(--blue);color:#fff;cursor:pointer;border:0;border-radius:5px;align-items:center;gap:7px;padding:9px 14px;font-family:inherit;font-size:12px;font-weight:700;transition:background .15s;display:inline-flex}.dl-btn:hover{background:#005a96}.dl-btn--sm{width:fit-content;margin-top:8px;padding:6px 10px;font-size:11px}.rules{color:#597285;grid-template-columns:repeat(3,1fr);gap:20px;font-size:13px;line-height:1.5;display:grid}.rules div{gap:8px;display:flex}.rules svg{color:var(--blue);flex:none;width:17px}.swatches{max-width:830px;margin-top:50px}.swatch{border:0;border-top:1px solid var(--line);text-align:left;cursor:pointer;width:100%;color:var(--ink);background:0 0;grid-template-columns:66px 1fr 20px;align-items:center;gap:18px;padding:13px 0;font-family:inherit;transition:color .15s;display:grid}.swatch:hover{color:var(--blue)}.swatch:last-child{border-bottom:1px solid var(--line)}.paint{border-radius:4px;height:52px}.swatch strong,.swatch code,.swatch small{display:block}.swatch strong{font-size:15px}.swatch code{color:var(--blue);margin:4px 0;font:12px DM Mono,monospace}.swatch small{color:var(--muted);font-size:12px}.swatch svg{color:#79909e}.contrast-table-wrap{max-width:720px;margin-top:48px}.contrast-table-wrap h3{margin:0 0 16px;font-size:16px}.contrast-table{border-collapse:collapse;width:100%;font-size:13px}.contrast-table th,.contrast-table td{text-align:left;border-bottom:1px solid var(--line);padding:12px 14px}.contrast-table th{letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font:10px DM Mono,monospace}.badge-ok,.badge-warn{border-radius:999px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-block}.badge-ok{color:#0a7a3e;background:#e6f8ee}.badge-warn{color:#b45309;background:#fff3e0}.table-note{color:var(--muted);margin:14px 0 0;font-size:12px}.type-section{background:#eaf6fc}.type-card{border-radius:var(--radius);background:#fff;margin-top:48px;padding:38px}.type-card--secondary{margin-top:16px}.type-card span,.ui-label,.prompt span{letter-spacing:1px;color:var(--blue);font:10px DM Mono,monospace}.type-card h3{letter-spacing:-2px;margin:16px 0 10px;font-size:54px}.type-card h3.serif{font-family:Playfair Display,serif;font-weight:600}.type-card p{letter-spacing:2px;white-space:nowrap;margin:0 0 22px;font-size:28px;overflow:hidden}.type-card p.serif-sample{letter-spacing:0;font-family:Playfair Display,serif;font-size:32px;font-style:italic}.type-card small{color:var(--muted)}.scale{margin-top:25px;display:grid}.scale div{border-bottom:1px solid #cde0ea;grid-template-columns:120px 130px 1fr;align-items:center;padding:17px 0;display:grid}.scale span,.scale b{color:#698194;font:11px DM Mono,monospace}.scale strong{font-size:20px}.elements{background:var(--deep);color:#fff}.elements h2 em,.elements .overline{color:#9fd4ef}.elements .description{color:#c1dae7}.element-stage{border-radius:var(--radius);background:linear-gradient(120deg,#074f7c,#003b66);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:32px;max-width:none;min-height:300px;margin-top:48px;padding:48px 55px;display:flex}.large-points{gap:20px;display:flex}.large-points i{width:75px;height:75px}.element-stage>p{color:#c3dcea;max-width:280px;margin:0;font-size:14px;line-height:1.6}.dot-assets{flex-direction:column;gap:10px;display:flex}.dot-asset{color:#fff;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:6px;grid-template-rows:auto auto;grid-template-columns:auto 1fr;align-items:center;gap:8px 12px;padding:12px 14px;font-size:13px;display:grid}.dot-asset .format-row{grid-column:1/-1;margin-top:0}.dot-asset .format-btn{color:#fff;background:#ffffff14;border-color:#ffffff2e}.dot-asset .format-btn:hover{color:#fff;background:#ffffff29;border-color:#ffffff59}.dot-asset img{object-fit:contain;width:24px;height:24px}.dot-asset svg{opacity:.7;margin-left:auto}.dot-asset--static{cursor:default;grid-template-rows:auto;grid-template-columns:auto 1fr auto}.dot-yellow{background:var(--yellow);border-radius:50%;flex:none;width:24px;height:24px}.dot-asset small{opacity:.7;margin-left:auto;font:11px DM Mono,monospace}.ui{background:#fff}.token-table-wrap{max-width:640px;margin-top:32px}.token-table{border-collapse:collapse;width:100%;font-size:13px}.token-table th,.token-table td{text-align:left;border-bottom:1px solid var(--line);padding:12px 14px}.token-table th{letter-spacing:.5px;text-transform:uppercase;color:var(--muted);font:10px DM Mono,monospace}.token-table code{color:var(--blue);font:12px DM Mono,monospace}.ui-grid{grid-template-columns:repeat(3,1fr);gap:18px;max-width:none;margin-top:48px;display:grid}.ui-grid article{border:1px solid var(--line);border-radius:var(--radius);min-height:210px;padding:25px}.ui-grid button{background:var(--blue);color:#fff;cursor:default;border:0;border-radius:4px;margin:35px 0 22px;padding:12px 16px;font-family:inherit;font-weight:700;display:block}.ui-grid button span{margin-left:25px}.ui-grid p{color:var(--muted);font-size:13px;line-height:1.55}.badge{color:#0067a8;background:#e6f5fc;border-radius:20px;width:max-content;margin:35px 0 22px;padding:9px 12px;font-size:13px;font-weight:600}.surface{border-radius:var(--radius);border:1px solid #dde9ef;flex-direction:column;gap:11px;margin:30px 0 19px;padding:16px;display:flex;box-shadow:0 7px 20px #043f5e0b}.surface span{color:var(--blue);font-size:12px}.guidelines{background:#fff}.guidelines-grid{grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;display:grid}.guideline-card{border-radius:var(--radius);border:1px solid var(--line);padding:28px}.guideline-card h3{align-items:center;gap:8px;margin:0 0 16px;font-size:15px;display:flex}.guideline-card--dont h3{color:#c0392b}.guideline-card--do h3{color:#0a7a3e}.guideline-card ol{color:var(--muted);margin:0;padding-left:20px;font-size:13px;line-height:1.75}.ai{background:#fff7d8}.prompt{background:var(--ink);color:#fff;border-radius:var(--radius);grid-template-columns:1fr 1.3fr;gap:40px;margin-top:42px;padding:31px;display:grid}.prompt h3{margin:12px 0;font-size:23px}.prompt span{color:var(--yellow)}.prompt ul{color:#d4e2ea;margin:0;padding-left:19px;font-size:13px;line-height:1.7}footer{border-top:1px solid var(--line);background:#fff;flex-wrap:wrap;align-items:center;gap:30px;width:100%;padding:34px clamp(44px,8vw,126px);display:flex}footer .logo{width:100px}footer p{color:var(--muted);margin:0;font-size:12px}.footer-actions{flex-wrap:wrap;gap:10px;margin-left:auto;display:flex}@media (width<=900px){.hero-meta,.asset-grid,.spec-grid,.guidelines-grid{grid-template-columns:1fr}}@media (width<=800px){.sidebar{width:260px;transition:all .2s;transform:translate(-100%);box-shadow:8px 0 30px #003b6633}.sidebar.visible{transform:translate(0)}.mobile-menu{z-index:8;border:1px solid var(--line);color:var(--deep);cursor:pointer;background:#fff;border-radius:5px;padding:8px;display:block;position:fixed;top:16px;right:18px}main{width:100%;margin:0}.hero{min-height:auto}.section{padding:75px 25px}.hero-content{padding:58px 25px 40px}.dots{bottom:43px;right:25px}.principles,.rules,.ui-grid,.prompt{grid-template-columns:1fr}.principles article{border-right:0;border-bottom:1px solid var(--line);margin:0}.logo-showcase{grid-template-columns:1fr}.logo-box{height:150px}.scale div{grid-template-columns:1fr;gap:5px}.element-stage{flex-direction:column;align-items:flex-start;padding:35px 25px}.element-stage>p{max-width:none}.large-points i{width:50px;height:50px}.type-card h3{font-size:40px}footer{gap:15px;padding:25px}.footer-actions{margin-left:0}}