.sg-hero{padding:72px 28px 56px;background:linear-gradient(180deg,var(--sand),var(--paper));border-bottom:1px solid var(--line);text-align:center}.sg-eyebrow{display:inline-block;padding:7px 13px;border-radius:999px;background:#fff;color:var(--sea-deep);font-size:13px;font-weight:600;margin-bottom:18px}.sg-hero h1{font:700 clamp(48px,7vw,72px)/1 var(--display);letter-spacing:-2px;margin:0 0 18px}.sg-hero h1 em{font-style:normal;color:var(--sky)}.sg-hero p{font-size:17px;color:var(--soft);max-width:650px;margin:0 auto}.sg-note{margin-top:20px;font-size:12px;color:var(--rock)}
body>section{border-bottom:1px solid var(--line);padding:56px 28px}body>section h2{font:700 28px var(--display);margin:0 0 7px}body>section h3{font:700 18px var(--display);margin:30px 0 12px}.wrap{max-width:var(--max);margin:auto;padding:0 28px}.lede{color:var(--soft);font-size:15px;max-width:700px;margin:0 0 32px}.swatch-grid,.icon-grid,.component-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}.swatch,.component,.panel{border:1px solid var(--line);border-radius:14px;background:#fff}.swatch{overflow:hidden}.fill{height:70px}.label{padding:10px 12px}.name{font-weight:600;font-size:14px}.hex{font-size:12px;color:var(--soft)}.use,.usage{font-size:12px;color:var(--rock);margin-top:4px}.type-row{display:flex;align-items:baseline;gap:24px;padding:16px 0;border-top:1px solid var(--line)}.type-row:first-of-type{border-top:none}.sample{font-family:var(--display);font-weight:700}.meta{font-size:13px;color:var(--soft);min-width:150px}.body-sample{font-size:16px;max-width:560px}.logo-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.panel{padding:28px;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.panel.dark{background:var(--ink);color:#fff}.word{font:700 24px var(--display);color:var(--ink)}.word span{color:var(--sky)}.panel.dark .word{color:#fff}.panel.dark .word span{color:var(--sky)}
.icon-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:18px 10px 16px;text-align:center;min-height:148px}.icon-frame{width:64px;height:64px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center}.icon-frame img{width:64px;height:64px;display:block;object-fit:contain}.icon-card .name{font-size:13px}.icon-card .usage{max-width:150px;margin:4px auto 0}.component{padding:24px}.component h3{margin:0 0 10px}.component-grid{align-items:start}.component-wide{grid-column:span 2}.badge-row,.btn-row{display:flex;flex-wrap:wrap;gap:10px}.rule{border:1px solid #F2C6B7;background:#FFF7F3;border-radius:20px;padding:24px}.rule strong{font-family:var(--display);font-size:20px}.rule p{margin:8px 0 0;color:var(--soft)}
.demo-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.demo-header .brand{font-size:18px}.demo-header .brand-mark{width:24px;height:24px}.demo-nav{display:flex;align-items:center;gap:14px;color:var(--soft);font-size:12px}.demo-nav strong{background:var(--sky);color:#fff;border-radius:9px;padding:7px 10px}.demo-footer{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--soft)}.demo-footer .brand{font-size:16px}.demo-footer .brand-mark{width:22px;height:22px}.demo-footer-links{margin-left:auto}.summary-demo{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.summary-mini{display:flex;align-items:center;gap:7px;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:10px;font-size:11px}.summary-mini img{width:20px;height:20px}.summary-mini strong{margin-left:auto;font-family:var(--display)}.summary-mini.total{background:var(--sea-deep);color:#fff;border-color:var(--sea-deep)}.summary-mini.total span{color:#BDE7D9}.map-demo{display:flex;align-items:center;justify-content:center;color:var(--rock);font-size:13px;background:linear-gradient(145deg,#E6F1FB,#E1F5EE)}
.scene-demo{border-radius:20px;background:linear-gradient(145deg,var(--snow),var(--sand) 55%,#E1F5EE);min-height:230px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.demo-nook{background:#fff;border:1px solid rgba(44,44,42,.08);box-shadow:0 18px 45px rgba(44,44,42,.12);border-radius:18px;padding:20px 22px;width:78%;position:relative}.demo-nook small{color:var(--soft);font-size:11px}.demo-nook h3{font-size:24px;margin:4px 0}.demo-nook p{font-size:13px;color:var(--soft);margin:0}.demo-sun{position:absolute;width:58px;height:58px;border-radius:50%;background:var(--sun);top:28px;right:12%}.demo-wave{position:absolute;bottom:18px;width:75%;height:50px;border-top:4px solid var(--sea);border-radius:50%;transform:rotate(-2deg)}
@media(max-width:700px){.sg-hero{padding:52px 20px 42px}.sg-hero h1{font-size:48px}body>section{padding:42px 20px}.type-row{display:block}.meta{margin-bottom:8px}.component-wide{grid-column:auto}.demo-footer-links{margin-left:0}.summary-demo{grid-template-columns:1fr}.demo-header .brand-name{display:inline}.demo-nav span{display:none}}