.hg-h1 { max-width: 24ch; }
.hg-h1 span { display: block; margin-top: .35em; font-size: .5em; line-height: 1.12; color: var(--ink-soft); max-width: 36ch; }
@media (max-width: 699px) { .hg-wide { display: none !important; } }
@media (min-width: 700px) { .hg-phone { display: none !important; } }
svg.hg-phone { max-width: 26rem; margin-inline: auto; }
.sg-fig figcaption .hg-src { display: block; }
.hg-card { border: 2px solid var(--line-strong); background: var(--paper-raised); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.hg-card svg { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .hg-card { padding: .7rem .8rem; } }
.hg-nl text { font-family: var(--font-body); font-size: 14px; fill: var(--ink); }
.hg-nl .k { font-weight: 700; }
.hg-nl .ttl { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-soft); }
.hg-nl .seg { stroke: var(--ink); stroke-width: 1.5; }
.hg-nl .seg-a { fill: color-mix(in oklab, var(--ink) 7%, var(--paper-raised)); }
.hg-nl .seg-b { fill: color-mix(in oklab, var(--ink) 17%, var(--paper-raised)); }
.hg-nl .seg-c { fill: color-mix(in oklab, var(--ink) 29%, var(--paper-raised)); }
.hg-nl .band { stroke: var(--ink); stroke-width: 2; }
.hg-nl .hatch { stroke: var(--ink); stroke-width: 1.4; }
.hg-nl .axis { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.hg-nl .tick { stroke: var(--ink); stroke-width: 1.4; }
.hg-nl .guide { stroke: var(--ink-soft); stroke-width: 1.2; stroke-dasharray: 4 4; }
.sg-dia .hg-name { font-size: 15px; font-weight: 700; fill: #fff; }
.hg-plan .t-title { font-size: 14px; }
.sg-dia .hg-q { font-size: 15px; font-weight: 700; fill: #fff; }
.sg-dia .hg-yn { font-size: 14px; font-weight: 700; fill: var(--highlight); }
.sg-dia .hg-head { fill: var(--highlight); }
.sg-dia .hg-bar { fill: color-mix(in oklab, #fff 14%, var(--primary-deep)); stroke: var(--highlight); stroke-width: 1.5; }
.sg-dia .hg-note { fill: none; stroke: var(--highlight); stroke-width: 1.5; stroke-dasharray: 5 5; }
.sg-dia .hg-lane { fill: color-mix(in oklab, #fff 7%, transparent); }
.sg-dia .hg-mine { fill: color-mix(in oklab, #fff 5%, transparent); }
.sg-dia .hg-door { stroke: #fff; stroke-width: 5; }
.sg-dia .hg-dim { stroke: #fff; stroke-width: 1.5; fill: none; }
.sg-dia .hg-path { fill: none; stroke: oklch(90% 0.10 85); stroke-width: 2; stroke-dasharray: 6 6; stroke-linecap: round; }
.sg-dia .hg-body { fill: oklch(90% 0.10 85); }
.sg-dia .hg-glass { fill: var(--primary-deep); }
.hg-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; align-items: center; }
@media (max-width: 759px) { .hg-split { grid-template-columns: 1fr; } }
.hg-legend { list-style: none; margin: 0; padding: 0; color: var(--paper); }
.hg-legend li { margin: 0 0 1.1rem; font-size: .98rem; line-height: 1.35; }
.hg-legend li:last-child { margin-bottom: 0; }
.hg-legend b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; }
.hg-strip { position: relative; display: block; height: 10px; margin-top: .45rem; background: color-mix(in oklab, #fff 12%, transparent); }
.hg-strip i { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); background: var(--highlight); }
.hg-strip--on i::after { content: ""; position: absolute; top: -3px; right: -9px; border: 8px solid transparent; border-left: 9px solid var(--highlight); border-right: 0; }
.hg-tile .hg-strip { background: color-mix(in oklab, var(--ink) 10%, transparent); margin: .3rem 0 0; }
.hg-tile .hg-strip i { background: var(--ink); }
.hg-tile .hg-strip--on i::after { border-left-color: var(--ink); }
.hg-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; }
.hg-tile { grid-column: span 2; display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem .8rem; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper-raised); }
.hg-tile--wide { grid-column: span 3; }
.hg-tile p { margin: 0; }
.hg-tile__k { font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.hg-tile__v { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.1; }
.hg-tile__d { font-size: .95rem; line-height: 1.35; }
.hg-tile a { margin-top: auto; padding-top: .55rem; font-size: .84rem; }
@media (max-width: 699px) { .hg-tiles { grid-template-columns: 1fr; } .hg-tile, .hg-tile--wide { grid-column: auto; } }
.hg-quote { margin: 1.9rem 0; }
.hg-quote .sg-quote { margin: 0; }
.hg-car { transform-box: view-box; transform-origin: 345px 265px; }
@keyframes hg-drive {
0% { transform: translate(55px, 0) rotate(90deg); animation-timing-function: linear; }
30% { transform: translate(0, 0) rotate(90deg); animation-timing-function: cubic-bezier(.2,.72,.2,1); }
100% { transform: translate(0, 0) rotate(0deg); }
}
.hg-lanefig.reveal-in .hg-car { animation: hg-drive 3.2s .4s both; }
@media (prefers-reduced-motion: reduce) { .hg-car { animation: none !important; } }