:root{
    --paper:#14122B;         /* nền đêm tím than kiểu nhacdechill */
    --ink:#EFE9D6;           /* chữ kem, như phấn trên bảng */
    --ink-60:rgba(239,233,214,.62);
    --ink-35:rgba(239,233,214,.38);
    --ink-18:rgba(239,233,214,.15);
    --tile:#05A6F5;          /* xanh da trời - nét nhấn ký họa */
    --sprout:#C1FF72;        /* xanh chồi non - màu thương hiệu */
    --bar:#0D0B1F;
    --cream:#F2EDDC;
    --mangrove:#6FA37B;
    --water:#7FB3C4;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Be Vietnam Pro',sans-serif;color:var(--ink);background:var(--paper)}
  body.locked{overflow:hidden}
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:90;
    background-image:url("/assets/paper-noise.png");
  }

  /* ---------- sketch strokes ---------- */
  .sk path,.sk circle,.sk line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .sk .red{stroke:var(--tile)}
  .sk .grn{stroke:var(--mangrove)}
  .sk .blu{stroke:var(--water)}
  .sk .thin{stroke-width:1.1;opacity:.55}
  .card .sk [pathLength]{stroke-dasharray:1;stroke-dashoffset:0}
  .card.drawn .sk [pathLength]{animation:draw 1.15s ease forwards}
  .card:hover .sk [pathLength]{animation:draw 1.2s ease forwards}
  /* iOS/Android Safari render pathLength không chuẩn → khử hẳn dash trên cảm ứng */
  @media (hover:none),(pointer:coarse){
    .card .sk [pathLength],
    .card.drawn .sk [pathLength],
    .card:hover .sk [pathLength]{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
  }
  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

  /* ---------- nav: bar tối, canh thẳng khối nội dung ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:40;
    background:var(--bar);
    border-bottom:1px solid rgba(239,233,214,.08);
    font-size:13px;letter-spacing:.03em;
  }
  .navwrap{
    max-width:1280px;margin:0 auto;padding:15px 6vw;
    display:flex;align-items:center;
  }
  .brand{font-family:'Be Vietnam Pro',sans-serif;font-weight:700;font-size:20px;letter-spacing:.005em;line-height:1;color:var(--cream)}
  .brand em{font-style:normal;color:var(--sprout)}
  .navlinks{margin-left:auto;display:flex;align-items:center;gap:34px}
  nav a{color:rgba(242,237,220,.66);text-decoration:none;transition:color .25s}
  nav a:hover{color:var(--sprout)}
  .soundmaster{
    display:flex;align-items:center;gap:9px;
    background:none;border:1px solid rgba(242,237,220,.32);border-radius:99px;
    padding:7px 14px;cursor:pointer;color:var(--cream);
    font-family:inherit;font-size:11.5px;letter-spacing:.05em;
  }
  .soundmaster:hover{border-color:var(--sprout);color:var(--sprout)}
  .soundmaster .led{width:7px;height:7px;border-radius:50%;background:rgba(242,237,220,.35)}
  .soundmaster.on .led{background:var(--sprout);box-shadow:0 0 8px rgba(193,255,114,.75)}

  /* ---------- hero: 2 cột, chuông gió bên phải ---------- */
  header{
    min-height:94vh;display:grid;grid-template-columns:1.05fr .95fr;
    align-items:start;gap:4vw;
    padding:130px 6vw 30px;max-width:1280px;margin:0 auto;
  }
  .hero-copy{padding-top:4vh}
  .eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-60);margin-bottom:18px}
  h1{font-family:'Prata',serif;font-weight:400;font-size:clamp(32px,3.9vw,54px);line-height:1.12;max-width:16ch}
  h1 em{font-style:normal;color:var(--sprout)}
  .lede{max-width:52ch;margin-top:22px;font-size:14px;font-weight:300;line-height:1.85;color:var(--ink-60)}
  .hero-hint{margin-top:26px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-35)}
  .hero-chime{
    position:relative;justify-self:center;align-self:start;
    width:min(430px,38vw);margin-top:2vh;touch-action:pan-y;text-align:center;
  }
  .hero-chime .roofart{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(27,68,224,.4))}
  .hero-chime .strand span{font-size:12.5px}
  @media (max-width:860px){
    header{grid-template-columns:1fr;min-height:auto;padding-top:104px;gap:10px}
    .hero-chime{width:min(360px,84vw);margin:16px auto 0;justify-self:center}
  }

  /* ---------- sections & cards ---------- */
  section{padding:60px 6vw 20px;max-width:1280px;margin:0 auto}
  .sec-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:8px}
  .sec-head h2{font-family:'Prata',serif;font-weight:400;font-size:clamp(24px,3vw,34px)}
  .sec-head .rule{flex:1;height:1px;background:var(--ink-18);min-width:60px}
  .sec-note{font-size:12.5px;font-weight:300;color:var(--ink-60);max-width:62ch;line-height:1.75;margin-bottom:32px}
  .grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
  .grid>.card{flex:1 1 260px}
  @media(min-width:900px){ .grid>.card{max-width:calc((100% - 48px)/3)} }
  /* lưới linh hoạt: số điểm bao nhiêu cũng được, hàng cuối lẻ thì căn giữa cho có chủ ý */
  .card{
    border:1px solid var(--ink-18);background:rgba(255,255,255,.035);
    padding:20px 20px 16px;display:flex;flex-direction:column;align-items:stretch;cursor:pointer;
    transition:transform .35s ease,border-color .35s ease;text-align:left;font-family:inherit;color:inherit;
  }
  .card:hover{transform:translateY(-4px);border-color:var(--ink-35)}
  .card:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
  .card .art{height:140px;width:100%;align-self:stretch;display:flex;align-items:center;justify-content:center;margin-bottom:12px}  /* Safari đặt align-items:flex-start cho thẻ button nên phải ghi rõ, không thì ký họa dạt trái */
  .card .art svg{display:block;height:100%;width:auto;max-width:100%;margin:0 auto}
  .card .tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sprout);margin-bottom:6px}
  .card h3{font-family:'Prata',serif;font-weight:400;font-size:19px;margin-bottom:8px;line-height:1.3}
  .card p{font-size:12.5px;font-weight:300;line-height:1.7;color:var(--ink-60);flex:1}
  .card .open{
    margin-top:14px;padding-top:12px;border-top:1px dashed var(--ink-18);
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-60);
    display:flex;justify-content:space-between;align-items:center;
  }
  .card:hover .open{color:var(--sprout)}

  footer{margin-top:60px;border-top:1px solid var(--ink-18)}
    .foot-inner{max-width:1280px;margin:0 auto;padding:34px 6vw 40px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px}
    .fcol-left{display:flex;flex-direction:column;gap:5px;max-width:34ch}
    .fbrand{font-family:'Prata',serif;font-size:16px;color:var(--ink)}
    .fdesc{font-size:12.5px;color:var(--ink-60);line-height:1.55}
    .fcol-right{text-align:right;font-size:12px;color:var(--ink-60);line-height:1.7}
    .hero-tagline{font-family:'Prata',serif;font-size:clamp(17px,1.9vw,23px);line-height:1.5;color:var(--ink-60);margin-top:30px;max-width:34ch}
    @media (max-width:760px){
      .foot-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}
      .fcol-left{align-items:center;text-align:center}
      .fcol-right{text-align:center}
    }
  
    .socials{display:flex;gap:14px;justify-content:center}
    .socials a{width:44px;height:44px;border-radius:50%;border:1px solid var(--ink-18);
      display:flex;align-items:center;justify-content:center;color:var(--ink-60);
      transition:color .2s,border-color .2s,transform .2s}
    .socials a:hover{color:var(--sprout);border-color:var(--sprout);transform:translateY(-2px)}
    
    
  


  /* ================= HOME: bản đồ 34 cánh cửa ================= */
  #homeView header{grid-template-columns:1fr auto;gap:5vw}
  .mapwrap{position:relative;justify-self:end;align-self:center}
  #vnmap{display:block;height:min(76vh,740px);width:auto;max-width:44vw}
  .prov{fill:rgba(255,255,255,.045);stroke:rgba(239,233,214,.42);stroke-width:.7;cursor:pointer;transition:fill .25s,stroke .25s}
  .prov:hover{fill:rgba(193,255,114,.18);stroke:var(--sprout)}
  .prov.openp{fill:rgba(27,68,224,.8);stroke:#9DB6FF;stroke-width:1;animation:provGlow 2.6s ease-in-out infinite}
  .prov.sel{fill:rgba(193,255,114,.26);stroke:var(--sprout);stroke-width:1.6}
  .langtoggle{
    background:none;border:1px solid rgba(239,233,214,.28);color:var(--ink-60);
    font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.1em;
    padding:7px 11px;cursor:pointer;transition:color .25s,border-color .25s;
  }
  .langtoggle:hover{color:var(--sprout);border-color:var(--sprout)}
  /* thẻ xác nhận khi chạm bản đồ trên điện thoại */
  .mapsheet{
    position:fixed;left:12px;right:12px;bottom:14px;z-index:82;
    background:var(--bar);border:1px solid rgba(239,233,214,.2);
    padding:14px 16px;display:none;align-items:center;gap:12px;
    transform:translateY(14px);opacity:0;transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .28s;
  }
  .mapsheet.show{transform:translateY(0);opacity:1}
  .mapsheet:not(.show){pointer-events:none}
  .mapsheet .ms-txt{flex:1;min-width:0}
  .mapsheet .ms-name{font-family:'Prata',serif;font-size:17px;line-height:1.25}
  .mapsheet .ms-sub{font-size:10.5px;color:var(--ink-60);margin-top:4px;line-height:1.5}
  .mapsheet .ms-go{
    flex:none;background:var(--sprout);color:#14122B;border:0;
    font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.04em;
    padding:12px 18px;cursor:pointer;white-space:nowrap;
  }
  .mapsheet .ms-go[disabled]{background:transparent;color:var(--ink-35);border:1px solid rgba(239,233,214,.2);cursor:default}
  .mapsheet .ms-x{
    flex:none;background:none;border:0;color:var(--ink-35);font-size:20px;
    line-height:1;padding:6px 2px 6px 6px;cursor:pointer;
  }
  @keyframes provGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(27,68,224,.7))}50%{filter:drop-shadow(0 0 13px rgba(27,68,224,1))}}
  .isl{fill:rgba(239,233,214,.5)}
  .isl-label{fill:rgba(239,233,214,.45);font-family:'Be Vietnam Pro',sans-serif;font-size:9px;letter-spacing:.06em}
  .maptip{
    position:fixed;z-index:70;pointer-events:none;display:none;
    background:var(--bar);border:1px solid rgba(239,233,214,.18);
    padding:10px 13px;max-width:230px;
  }
  .maptip b{font-family:'Prata',serif;font-weight:400;font-size:14px;display:block;margin-bottom:3px}
  .maptip .st{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
  .maptip .st.open{color:var(--sprout)}
  .maptip .st.soon{color:var(--ink-35)}
  .maptip .mg{font-size:10.5px;color:var(--ink-60);margin-top:5px;line-height:1.5;font-weight:300}
  .statline{display:flex;align-items:center;gap:14px;margin-top:26px}
  .statline .num{font-family:'Prata',serif;font-size:15px}
  .statline .track{position:relative;width:150px;height:1px;background:var(--ink-18)}
  .statline .track i{position:absolute;left:0;top:-1px;height:3px;width:calc(100%/34);background:var(--sprout)}
  .statline small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-35)}
  .btn{
    font-family:inherit;font-size:12.5px;letter-spacing:.06em;cursor:pointer;
    padding:13px 24px;border:none;background:var(--sprout);color:#10250A;
    font-weight:500;display:inline-block;margin-top:26px;
  }
  .btn:hover{filter:brightness(1.08)}
  .steps{max-width:1280px;margin:0 auto;padding:30px 6vw 70px;display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .step .n{font-family:'Prata',serif;font-size:26px;color:var(--sprout)}
  .step h4{font-family:'Prata',serif;font-weight:400;font-size:16px;margin:8px 0 6px}
  .step p{font-size:12px;font-weight:300;line-height:1.7;color:var(--ink-60)}
  .toast{
    position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(8px);z-index:80;
    background:var(--bar);border:1px solid rgba(239,233,214,.18);color:var(--ink);
    padding:13px 20px;font-size:12.5px;font-weight:300;opacity:0;pointer-events:none;
    transition:opacity .35s,transform .35s;max-width:86vw;text-align:center;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  .toast b{color:var(--sprout);font-weight:500}
  .backbar{margin-bottom:26px}
  .backbar button{
    background:none;border:none;cursor:pointer;font-family:inherit;
    font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-35);padding:0;
  }
  .backbar button:hover{color:var(--sprout)}
  @media (max-width:860px){
    #homeView header{grid-template-columns:1fr}
    .mapwrap{justify-self:center;margin-top:20px}
    #vnmap{max-width:88vw;height:auto;width:min(340px,80vw)}
    .steps{grid-template-columns:1fr;gap:22px;padding-bottom:50px}
  }

  /* ================= DOOR (detail overlay) ================= */
  .door{
    position:fixed;inset:0;z-index:60;background:var(--paper);
    display:none;overflow:hidden;
  }
  .door.open{display:block;animation:doorIn .45s ease}
  @keyframes doorIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

  .door-top{
    position:absolute;top:0;left:0;right:0;z-index:5;
    display:flex;align-items:center;gap:20px;padding:20px 34px;font-size:12px;letter-spacing:.05em;
  }
  .door-top .crumb{color:var(--ink-35)}
  .door-top .crumb b{color:var(--ink);font-weight:500}
  .door-close{
    margin-left:auto;background:none;border:1px solid var(--ink-35);border-radius:99px;
    width:38px;height:38px;cursor:pointer;color:var(--ink);font-size:15px;font-family:inherit;
  }
  .door-close:hover{border-color:var(--ink)}

  /* chime column */
  .chime{
    position:absolute;left:50%;top:86px;transform:translateX(-50%);
    width:min(560px,88vw);z-index:3;touch-action:pan-y;text-align:center;
  }
  .chime .roofart{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 34px rgba(27,68,224,.45))}
  .rail{
    position:absolute;left:50%;top:calc(100% - 16px);transform:translateX(-50%);
    display:inline-flex;justify-content:center;gap:clamp(12px,4vw,34px);white-space:nowrap;max-width:94%;
  }
  .rail::before{
    content:'';position:absolute;left:0;right:0;top:-3px;height:8px;pointer-events:none;
    background:
      radial-gradient(circle 3.4px at 4px 50%, var(--sprout) 96%, transparent 100%),
      radial-gradient(circle 3.4px at calc(100% - 4px) 50%, var(--sprout) 96%, transparent 100%),
      linear-gradient(var(--ink),var(--ink));
    background-repeat:no-repeat;
    background-size:100% 8px,100% 8px,100% 3px;
    background-position:center;
    clip-path:inset(0 0 0 0);
    transition:clip-path .8s cubic-bezier(.16,1,.3,1);
  }
  .rail.furl::before{clip-path:inset(0 50% 0 50%)}   /* xà thu về giữa, chờ kéo ra */
  .strand{transform-origin:top center;will-change:transform;cursor:default;user-select:none;-webkit-user-select:none}
  .strand span{display:block;text-align:center;font-size:13px;line-height:1.55;font-weight:300;color:var(--ink)}
  .strand span.sp{height:9px}
  .strand span:nth-child(n+8){opacity:.85}
  .strand span:nth-child(n+13){opacity:.62}
  .strand span:nth-child(n+18){opacity:.42}
  .strand span:nth-child(n+23){opacity:.26}
  .strand.ring span{color:var(--tile);transition:color 1.2s}

  /* left copy */
  .door-quote{position:absolute;left:5vw;top:24vh;max-width:190px;z-index:4;
    font-size:11.5px;letter-spacing:.03em;color:var(--ink-60);line-height:1.7}
  .door-quote b{display:block;font-weight:500;color:var(--ink);margin-bottom:3px}
  .door-title{position:absolute;left:5vw;bottom:8vh;max-width:400px;z-index:4}
  .door-title .tag{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--sprout);margin-bottom:10px}
  .door-title h2,.door-title h1{font-family:'Prata',serif;font-weight:400;font-size:clamp(28px,3.6vw,46px);line-height:1.15}
  .door-title h2 .dash,.door-title h1 .dash{color:var(--tile)}

  /* right info panel */
  .door-info{
    position:absolute;right:5vw;top:50%;transform:translateY(-50%);
    width:min(300px,80vw);z-index:4;
    border-left:1px solid var(--ink-18);padding-left:22px;
  }
  .door-info p.desc{font-size:12.5px;font-weight:300;line-height:1.8;color:var(--ink-60);margin-bottom:18px}
  .door-info dl{font-size:11.5px;line-height:1.7}
  .door-info dt,.door-mobileinfo dt{letter-spacing:.16em;text-transform:uppercase;font-size:9.5px;color:var(--sprout);margin-top:12px}
  .door-info dd,.door-mobileinfo dd{color:var(--ink-60);font-weight:300}

  .door-hint{
    position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:4;
    font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-35);white-space:nowrap;
  }
  .door-nav{
    position:absolute;bottom:8vh;right:5vw;z-index:4;display:flex;gap:12px;
  }
  .door-nav button{
    background:none;border:1px solid var(--ink-35);color:var(--ink);cursor:pointer;
    font-family:inherit;font-size:11px;letter-spacing:.08em;padding:9px 16px;
  }
  .door-nav button:hover{border-color:var(--ink)}

  .door-mobileinfo{display:none}
  @media (max-width:900px){
    .door-info{position:static;transform:none;width:auto;margin:0;display:none}
    .door-quote{display:none}
    .door-mobileinfo{display:block}   /* thả cho trôi theo trang: một tầng cuộn duy nhất, không kẹt gesture */
  }
  .door-mobileinfo dd{font-size:12px;line-height:1.6}
  @media (max-width:900px){
    .navwrap{padding:12px 18px}
    nav a{display:none}
    .navlinks{gap:12px}
    .brand{font-size:19px}
    .strand span{font-size:11px}
    .door-hint{display:none}
    .door-top{padding:16px 18px;position:sticky;top:0;background:var(--paper);z-index:6}
    /* Door mobile: layout dòng chảy, dây chuông gió chiếm chỗ thật */
    .door{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
    .door.open{display:flex;flex-direction:column}
    .chime{position:relative;left:auto;top:auto;transform:none;width:min(480px,86vw);margin:14px auto 0;order:0}
    .rail{position:relative;left:auto;right:auto;top:auto;transform:none;margin-top:-16px}
    .door-title{position:static;left:auto;right:auto;bottom:auto;max-width:none;margin:10px 20px 0;order:1}
    .door-nav{position:static;right:auto;bottom:auto;margin:22px 20px 40px;justify-content:center;order:2}
  }
  @media (max-height:720px){
    .chime{top:66px;width:min(480px,80vw)}
    .strand span{font-size:11px}
  }
  @media (prefers-reduced-motion: reduce){
    .door.open{animation:none}
  }

/* ---- nút kính lúp + ô tìm kiếm ---- */
.iconbtn{width:38px;height:38px;border-radius:50%;border:1px solid rgba(239,233,214,.22);
 background:transparent;color:#EFE9D6;display:grid;place-items:center;cursor:pointer;
 transition:border-color .2s,background .2s;flex:0 0 auto;padding:0}
.iconbtn:hover{border-color:rgba(193,255,114,.55);background:rgba(193,255,114,.07)}
.iconbtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;
 stroke-linecap:round;stroke-linejoin:round}
.sh{position:fixed;inset:0;z-index:120;display:none;background:rgba(9,8,22,.86);
 backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.sh.on{display:block}
.sh-in{max-width:640px;margin:0 auto;padding:76px 18px 24px;height:100%;display:flex;flex-direction:column}
.sh-bar{display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(239,233,214,.22);padding-bottom:12px}
.sh-bar svg{width:19px;height:19px;stroke:rgba(239,233,214,.55);fill:none;stroke-width:2;
 stroke-linecap:round;flex:0 0 auto}
#shq{flex:1;background:transparent;border:0;outline:0;color:#EFE9D6;font-size:1.16rem;
 font-family:inherit;padding:6px 0}
#shq::placeholder{color:rgba(239,233,214,.34)}
.sh-close{background:transparent;border:0;color:rgba(239,233,214,.5);font-size:1.5rem;
 cursor:pointer;line-height:1;padding:0 4px}
.sh-close:hover{color:#EFE9D6}
.sh-meta{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
 color:rgba(239,233,214,.38);padding:14px 2px 4px}
.sh-list{overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.sh-item{display:block;width:100%;text-align:left;background:transparent;border:0;
 border-bottom:1px solid rgba(239,233,214,.07);padding:13px 4px;cursor:pointer;color:inherit;font-family:inherit}
.sh-item:hover,.sh-item.on{background:rgba(193,255,114,.07)}
.sh-nm{font-size:.99rem;color:#EFE9D6;margin-bottom:3px}
.sh-nm mark{background:transparent;color:#C1FF72;padding:0}
.sh-sub{font-size:.8rem;color:rgba(239,233,214,.45)}
.sh-empty{padding:34px 4px;color:rgba(239,233,214,.4);font-size:.92rem;line-height:1.7}
@media(max-width:600px){.sh-in{padding:62px 14px 16px}#shq{font-size:1.04rem}}

/* <a> bọc vùng bản đồ chỉ để tạo đường dẫn, không được đổi hình thức */
#vnsvg a,svg a{text-decoration:none;color:inherit;outline:none}
#vnsvg a:focus-visible path.prov{stroke:#C1FF72;stroke-width:1.6}

  /* ================= V2 EXPERIENCE ================= */
  #provSections section{content-visibility:auto;contain-intrinsic-size:900px}
  .hero-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .hero-actions .btn{margin-top:26px}
  .btn.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink-35)}
  .btn.btn-ghost:hover{border-color:var(--sprout);color:var(--sprout);filter:none}
  .door-share{margin-left:auto;background:none;border:1px solid var(--ink-35);border-radius:99px;
    min-height:38px;padding:0 14px;cursor:pointer;color:var(--ink);font:inherit;font-size:10.5px;letter-spacing:.08em}
  .door-share:hover{border-color:var(--sprout);color:var(--sprout)}
  .door-close{margin-left:0}
  .door-shop{margin-top:19px;padding-top:15px;border-top:1px solid var(--ink-18)}
  .door-shop[hidden]{display:none!important}
  .door-shop-kicker{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--sprout);margin-bottom:6px}
  .door-shop-title{font-family:'Prata',serif;font-size:16px;line-height:1.35;color:var(--ink);margin:0 0 6px}
  .door-shop-note{font-size:10.5px;line-height:1.55;color:var(--ink-35);font-weight:300;margin:0 0 10px}
  .door-shop-link{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;
    font-size:10.5px;letter-spacing:.08em;border-bottom:1px solid var(--sprout);padding-bottom:3px}
  .door-shop-link:hover{color:var(--sprout)}
  @media(max-width:900px){
    .door-share{padding:0 11px;font-size:0}.door-share::before{content:'↗';font-size:15px}
    .hero-actions{gap:8px}.hero-actions .btn{margin-top:22px}
    .door-shop{margin:18px 0 4px}
  }


  /* V2.1: explicit, accessible sharing and sound controls. */
  .share-panel{position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 32px));
    height:fit-content;max-height:85dvh;overflow:auto;padding:26px;border:1px solid var(--ink-35);
    background:var(--paper);color:var(--ink);z-index:150;font-family:inherit}
  .share-panel:not([open]){display:none}
  .share-panel::backdrop{background:rgba(9,8,22,.78);backdrop-filter:blur(5px)}
  .share-panel h2{font-family:'Prata',serif;font-size:23px;font-weight:400;margin:0 0 12px}
  .share-panel p{font-size:13px;line-height:1.65;color:var(--ink-60);margin:0 0 18px}
  .share-panel label{display:block;font-size:11px;margin:0 0 8px;color:var(--sprout)}
  .share-panel input{display:block;width:100%;box-sizing:border-box;padding:13px 10px;border:1px solid var(--ink-35);
    background:transparent;color:var(--ink);font:inherit;font-size:14px;user-select:text;-webkit-user-select:text}
  .share-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
  .share-actions button{min-height:44px;padding:9px 14px;background:transparent;border:1px solid var(--ink-35);
    color:var(--ink);cursor:pointer;font:inherit;font-size:12px}
  .share-actions button:first-child{background:var(--sprout);color:#10250A;border-color:var(--sprout)}
  .share-panel #shareStatus{margin:16px 0 0;min-height:20px}
  .share-panel :focus-visible,.door-sound:focus-visible{outline:2px solid var(--sprout);outline-offset:3px}
  .door-sound{flex-shrink:0;min-height:38px;padding:0 12px;background:transparent;border:1px solid var(--ink-35);
    border-radius:99px;color:var(--ink);font:inherit;font-size:11px;cursor:pointer}
  .door-sound[aria-pressed="true"]{border-color:var(--sprout);color:var(--sprout)}
  .door-top .crumb{min-width:0;flex:1}
  .door-share,.door-close{flex-shrink:0}
  @media(max-width:900px){.door-top{gap:9px}.door-top .crumb{font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .door-sound{padding:0 9px;font-size:10px}.door-share{margin-left:0}}


/* Quiet travel tools, stamps, and saved places. */
.journey-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:15px}
.text-action{font:inherit;font-size:11px;letter-spacing:.05em;background:none;border:0;border-bottom:1px solid var(--ink-35);padding:8px 0;color:var(--ink-60);cursor:pointer;text-decoration:none}
.text-action:hover{color:var(--sprout);border-color:var(--sprout)}
.door-tools{position:absolute;left:5vw;bottom:3vh;display:flex;gap:14px;z-index:4;align-items:center}
.door-drift{min-height:38px;padding:0 11px;background:none;border:1px solid var(--ink-35);border-radius:99px;color:var(--ink);font:inherit;font-size:11px;cursor:pointer}
.door-drift[aria-pressed="true"]{color:var(--sprout);border-color:var(--sprout)}
.route-links{max-width:1280px;margin:0 auto;padding:24px 6vw 48px;border-top:1px solid var(--ink-18)}
.route-links h2{font-family:Prata,serif;font-size:19px;font-weight:400;margin-bottom:15px}
.route-links div{display:flex;gap:12px 22px;flex-wrap:wrap}
.route-links a{font-size:12px;color:var(--ink-60);text-decoration:none;border-bottom:1px solid var(--ink-18);padding-bottom:4px}
.route-links a:hover{color:var(--sprout)}
.passport-panel{width:min(740px,calc(100vw - 24px))}
.passport-stamps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.passport-stamp{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;background:none;border:1px dashed var(--ink-18);color:var(--ink-35);font:inherit;font-size:11px;text-decoration:none}
.passport-stamp .seal{display:grid;place-items:center;width:48px;height:48px;border:1px dashed var(--ink-35);border-radius:50%;font-family:Prata,serif;font-size:16px;transform:rotate(-8deg)}
.passport-stamp.visited{color:var(--sprout);border-style:solid;border-color:rgba(193,255,114,.2)}
.passport-stamp.visited .seal{border:2px double var(--sprout);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px rgba(193,255,114,.4)}
.passport-stamp:hover{color:var(--ink);border-color:var(--ink-35)}
.passport-panel .passport-privacy{font-size:11px;margin:18px 0 0;color:var(--ink-35)}
.offline-state{font-size:10px;letter-spacing:.04em;color:var(--sprout)}
.saved-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.saved-list a{font-size:12px;color:var(--ink-60)}
.door-art{position:absolute;left:5vw;top:8vh;max-width:160px;opacity:.4;pointer-events:none}
.door-art svg{width:100%;height:auto}
.share-panel [hidden],.journey-actions [hidden]{display:none!important}
.offline-note{position:fixed;left:50%;top:72px;transform:translateX(-50%);font-size:11px;color:var(--sprout);background:var(--bar);padding:7px 12px;z-index:65;border:1px solid var(--ink-18)}
.offline-note[hidden]{display:none}
.door-related{position:absolute;right:5vw;bottom:2vh;max-width:44%;display:flex;gap:8px 16px;flex-wrap:wrap;z-index:4}
.door-related a{font-size:10px;color:var(--ink-35);text-decoration:none;border-bottom:1px solid var(--ink-18);padding-bottom:3px}
.door-related a:hover{color:var(--sprout)}
#homeView .steps[hidden]{display:none}
@media(max-width:900px){.door-related{position:static;order:3;max-width:none;margin:0 20px 32px}}
@media(max-width:900px){.door-tools{position:static;order:2;margin:18px 20px 0;gap:14px;flex-wrap:wrap}.door-hint{display:none}.door-nav{margin-top:14px}.door-art{display:none}.door-top{gap:6px}.door-drift{padding:0 8px;font-size:10px}.passport-stamps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:370px){.passport-stamps{grid-template-columns:repeat(2,1fr)}.door-top .crumb{max-width:90px}.door-top{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

a.card{font:inherit;color:inherit;text-decoration:none;display:block}button:disabled{opacity:.5;cursor:wait}