body.hub-house { --hh-blue:var(--blue); --hh-green:var(--green); --hh-amber:var(--amber); --hh-floor:#e8eff2; --hh-wall:#4a6674; --hh-garden:#e2efea; --hh-furniture:#c1d7df; }
body.hub-house.theme-dark { --hh-floor:#343f47; --hh-wall:#c1d6dd; --hh-garden:#2b4541; --hh-furniture:#466776; }
body.hub-house .wrap { max-width:1520px; padding:20px 32px; }
body.hub-house .hero,body.hub-house .cast { display:none; }
body.hub-house .back { font-size:.9rem; }
.hh { margin:24px 0 36px; letter-spacing:0; }
.hh [hidden] { display:none!important; }
.hh-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.hh-heading h1 { margin:6px 0 10px; font-size:2.2rem; max-width:none; line-height:1.15; }
.hh-heading p { margin:0; max-width:650px; font-size:1rem; }
.hh-heading .hh-kicker { font-size:.85rem; color:var(--green); font-weight:500; }
.hh-tabs { display:flex; flex-shrink:0; gap:4px; border-bottom:2px solid var(--line); }
.hh .hh-tabs button { width:auto; height:auto; min-height:44px; padding:10px 16px; border:0; border-radius:6px 6px 0 0; font-size:.95rem; font-weight:500; background:transparent; }
.hh .hh-tabs button[aria-selected=true] { background:var(--blue); color:var(--on-accent); }
.hh-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:32px; align-items:start; }
.hh-visual { min-width:0; }
.hh-plan,.hh-model-stage { position:relative; width:100%; aspect-ratio:900/580; }
.hh-plan { isolation:isolate; }
.hh-drawing { width:100%; height:100%; display:block; color:var(--line); }
.hh-garden { fill:var(--hh-garden); stroke:var(--green); stroke-width:2; stroke-dasharray:8 6; }
.hh-room-fill { fill:var(--hh-floor); }
.hh-guest-fill { fill:var(--surface); }
.hh-walls { fill:none; stroke:var(--hh-wall); stroke-width:8; stroke-linejoin:miter; }
.hh-door-swing { stroke:var(--blue); stroke-width:2; fill:var(--paper); }
.hh-windows { fill:none; stroke:var(--hh-blue); stroke-width:4; }
.hh-walk { fill:none; stroke:var(--green); stroke-width:2; stroke-dasharray:5 6; }
.hh-furniture { fill:var(--hh-furniture); stroke:var(--hh-wall); stroke-width:2; }
.hh-ledger-art { fill:var(--surface); stroke:var(--amber); stroke-width:2; }
.hh-rule-art { fill:var(--surface); stroke:var(--green); stroke-width:2; }
.hh-pin { position:absolute; display:grid; place-items:center; width:44px; height:44px; transform:translate(-50%,-50%); border-radius:50%; border:2px solid var(--blue); background:var(--surface); color:var(--blue); text-decoration:none; font-size:1rem; font-weight:600; box-shadow:0 3px 9px #0002; z-index:2; }
.hh-pin.is-governance { border-color:var(--green); color:var(--green); }
.hh-pin.is-active,.hh-pin:hover,.hh-pin:focus-visible { background:var(--blue); color:var(--on-accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--blue) 18%,transparent); }
.hh-pin.is-governance.is-active,.hh-pin.is-governance:hover { background:var(--green); }
.hh-map-label { position:absolute; font-size:.85rem; line-height:1.3; font-weight:500; color:var(--text); text-align:center; max-width:21%; padding:4px; background:var(--hh-floor); }
.hh-label-family { left:25%; top:33%; }
.hh-label-guest { left:3%; top:49%; max-width:14%; background:var(--surface); }
.hh-label-desk { left:67%; top:44%; }
.hh-label-kids { left:26%; top:57%; }
.hh-label-workshop { left:66%; top:69%; }
.hh-legend { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin:16px 0 0; font-size:.9rem; color:var(--muted); }
.hh-legend>span { display:flex; gap:8px; align-items:center; }
.hh-legend>span::before { content:''; display:block; width:18px; height:4px; background:var(--blue); }
.hh-legend>.hh-governance-key::before { background:var(--green); }
.hh-route { border-left:1px solid var(--line); padding-left:24px; }
.hh-route h2 { font-size:1rem; font-weight:600; margin:0 0 14px; }
.hh-route ol { list-style:none; margin:0; padding:0; }
.hh-lesson { display:grid; grid-template-columns:28px minmax(0,1fr) 26px; align-items:center; gap:10px; min-height:70px; padding:12px 8px; border-radius:6px; text-decoration:none; color:var(--text); }
.hh-lesson:hover,.hh-lesson.is-active { background:var(--surface); box-shadow:inset 0 0 0 2px var(--blue); }
.hh-lesson.is-governance:hover,.hh-lesson.is-governance.is-active { box-shadow:inset 0 0 0 2px var(--green); }
.hh-number { color:var(--blue); font-size:.9rem; font-variant-numeric:tabular-nums; }
.is-governance .hh-number { color:var(--green); }
.hh-lesson-title { display:block; font-size:1rem; font-weight:600; line-height:1.3; }
.hh-topics { display:block; color:var(--muted); font-size:.85rem; line-height:1.45; margin-top:4px; }
.hh-phase { border-top:1px solid var(--line); margin-top:12px; padding-top:12px; }
.hh-model { position:relative; }
.hh-model-stage { min-height:370px; overflow:hidden; }
.hh-model-stage canvas { display:block; width:100%; height:100%; touch-action:pan-y; }
.hh-pins { position:absolute; inset:0; pointer-events:none; z-index:2; }
.hh-pins .hh-pin { pointer-events:auto; }
.hh-camera { position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:3; }
.hh .hh-camera button { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); background:var(--surface); }
body.theme-dark .hh-camera img { filter:invert(1); }
.hh-status { color:var(--muted); font-size:.95rem; padding:12px 0; }
.hh-family { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 24px; padding:18px 0 0; margin:18px 0 0; border-top:1px solid var(--line); list-style:none; }
.hh-family li { display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--text); }
.hh-person-emoji { font-size:1.8rem; line-height:1.2; }
body.hub-house .learn-band { border-radius:0; border-width:1px 0 0; background:none; padding:24px 0; }
body.hub-house .learn-band h2 { font-size:1.2rem; }
@media(max-width:1100px) {
    .hh-layout { grid-template-columns:minmax(0,1fr) 290px; gap:20px; }
    .hh-route { padding-left:16px; }
    .hh-heading { align-items:flex-start; flex-direction:column; gap:18px; }
}
@media(max-width:850px) {
    body.hub-house .wrap { padding:18px; }
    .hh-layout { grid-template-columns:minmax(0,1fr); gap:28px; }
    .hh-route { padding:0; border-left:0; }
    .hh-route ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .hh-phase { border:0; margin:0; padding:0; }
    .hh-heading h1 { font-size:1.9rem; }
    .hh-model-stage { min-height:360px; }
}
@media(max-width:520px) {
    .hh-tabs { width:100%; }
    .hh .hh-tabs button { flex:1; padding:10px 6px; font-size:.9rem; }
    .hh-route ol { grid-template-columns:minmax(0,1fr); }
    .hh-map-label { display:none; }
    .hh-plan { aspect-ratio:900/580; }
    .hh-drawing { overflow:visible; }
    .hh-pin { width:36px; height:36px; font-size:.85rem; }
    .hh-legend { justify-content:flex-start; gap:10px 18px; font-size:.85rem; }
    .hh-model-stage { min-height:240px; aspect-ratio:1.15; }
    .hh-lesson { min-height:76px; }
    body.hub-house .aw-like-pop { max-width:calc(100vw - 110px); }
}