/* Feature Atlas — Le Plateau. Layout and accessible controls, isolated from Home. */
.atlas-document { background:#0a1519; }
body.feature-atlas { margin:0; min-width:0; min-height:100vh; isolation:isolate; color:#eaf0ed; font:400 14px/1.5 'PixelSound UI','Segoe UI',sans-serif; }
/* Shared projection typography. Every current/future catalogue placement uses
   these roles; never attach presentation rules to a feature identifier. */
.feature-atlas {
  --atlas-title-size:clamp(38px,2.7vw,40px);
  --atlas-subtitle-size:20px;
  --atlas-body-size:18px;
  --atlas-step-title-size:17px;
  --atlas-step-body-size:16px;
  --atlas-meta-size:12px;
  --atlas-title-leading:1.15;
  --atlas-subtitle-leading:1.5;
  --atlas-body-leading:1.7;
  --atlas-step-leading:1.6;
  --atlas-meta-leading:1.4;
  --atlas-paragraph-gap:16px;
  --atlas-section-gap:28px;
  --atlas-step-gap:24px;
  --atlas-screen-gutter:clamp(24px,3vw,40px);
  --atlas-reading-width:68ch;
  --atlas-weight-regular:400;
  --atlas-weight-emphasis:600;
  --atlas-ink:#293630;
  --atlas-ink-secondary:#405a4d;
  --atlas-ink-meta:#506455;
}
.feature-atlas *, .feature-atlas *::before, .feature-atlas *::after { box-sizing:border-box; }
.feature-atlas [hidden] { display:none !important; }
.feature-atlas button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.feature-atlas button:disabled { cursor:default; }
.feature-atlas :is(button,a,[tabindex]):focus-visible { outline:2px solid #a8f8ed; outline-offset:4px; }
.feature-atlas .sr-only, .atlas-skip:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.atlas-skip:focus { position:fixed; top:8px; left:12px; z-index:100; padding:12px 18px; background:#10272b; color:#e6f2ed; }
.atlas-icon-library { position:absolute; width:0; height:0; overflow:hidden; }
.atlas-icon { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex:none; }
[data-feature-atlas] { width:min(calc(100% - 56px),1320px); margin:0 auto; }
.atlas-masthead { position:relative; text-align:center; padding:28px 90px 22px; }
.studio-title-line { display:flex; justify-content:center; align-items:center; gap:28px; }
/* Stable text measure keeps the waves still while the local font loads. */
.studio-title-line h1 { margin:0; inline-size:5.5em; text-align:center; font:var(--pixelsound-display-weight) clamp(40px,4.2vw,58px)/1.1 var(--pixelsound-display-font); color:#f0eadb; letter-spacing:var(--pixelsound-display-spacing); }
.studio-title-line .title-wave { width:100px; height:32px; color:#7bc9c7; opacity:.8; flex:none; }
.sfx-toggle { position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:7px; min-height:36px; padding:7px 10px; border:1px solid #b5c7b83d; border-radius:5px; background:#16272b9c; color:#c5d5ce; font-size:10px !important; }
.sfx-toggle svg { width:18px; height:18px; }
.sfx-toggle[aria-pressed=true] .sfx-muted, .sfx-toggle[aria-pressed=false] .sfx-waves { display:none; }
.sfx-toggle[aria-pressed=false] { color:#a9b5b1; }
.atlas-message { margin:0 0 16px; padding:12px 16px; border:1px solid #c1a47373; border-radius:5px; background:#282b24ed; color:#e5d7bc; font-size:12px; }
.stage { display:grid; grid-template-columns:minmax(320px,.78fr) minmax(0,1.4fr); grid-template-areas:'apps apps' 'features session'; gap:20px; align-items:start; }
.atlas-panel { min-width:0; border:1px solid #b29b7042; border-radius:7px; }
.panel-heading { display:flex; align-items:center; gap:9px; padding:17px 16px; border-bottom:1px solid #afcaca24; }
.panel-heading h2 { margin:0; font-size:11px; font-weight:600; letter-spacing:.07em; }
#atlasApplications { scroll-margin-top:100px; }
.section-number { border:1px solid #adc4ba42; border-radius:3px; padding:1px 5px; font-size:9px; color:#a7bab1; }
.application-panel { grid-area:apps; position:relative; display:grid; grid-template-columns:148px minmax(0,1fr); }
.application-panel>.panel-heading { border-bottom:0; border-right:1px solid #b29b7042; }
.application-list { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; padding:10px; }
.app-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:88px; min-width:0; text-align:center; padding:10px 5px; border:1px solid transparent; border-radius:4px; background:transparent; }
.app-card>.atlas-icon { color:#9ebfbd; }
.app-name { font-size:13px; font-weight:600; line-height:1.3; }
.app-meta { font-size:10px; color:#a0b4ad; }
.app-card:disabled { color:#a9b3ab; }
.app-card:disabled .atlas-icon { color:#87968f; }
.app-card:disabled .app-meta { color:#c1b08e; }
.feature-panel { grid-area:features; }
.feature-count { margin-left:auto; color:#9fb4ad; font-size:10px; }
.feature-collection { margin:14px 17px 0; color:#b3ccc1; font-size:11px; }
.feature-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; }
.feature-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:18px; min-width:0; min-height:136px; padding:18px; text-align:left; border:1px solid #d7cbae38; border-radius:3px; background:transparent; }
.feature-code { font-size:11px; color:#a4beb3; font-variant-numeric:tabular-nums; }
.feature-name { font-family:inherit; font-weight:600; font-size:18px; line-height:1.3; letter-spacing:-.01em; overflow-wrap:anywhere; }
.feature-status { display:block; margin-top:7px; font:400 10px/1.4 'PixelSound UI','Segoe UI',sans-serif; color:#d2bb96; }
.feature-light { position:absolute; top:24px; right:17px; width:4px; height:4px; border-radius:50%; background:#8bbfb0; pointer-events:none; }
.feature-card[data-availability=coming-soon] .feature-light { background:#c4a16a; }
.feature-lock-text { margin:5px 18px 24px; color:#c8b992; font-size:12px; }
.session-area { grid-area:session; min-width:0; scroll-margin-top:100px; }
.projection-screen { position:relative; }
.projection-housing { position:relative; z-index:2; height:18px; border:1px solid #a6b4a273; border-radius:5px 5px 3px 3px; background:linear-gradient(#63716b,#243331 42%,#121f20 80%,#63746a); box-shadow:0 5px 10px #0005,inset 0 1px #e5e8d352; }
.projection-housing::before, .projection-housing::after { content:''; position:absolute; inset:3px auto 3px 9px; width:4px; border-radius:2px; background:#acb6a4; box-shadow:inset 0 1px #fff5; }
.projection-housing::after { left:auto; right:9px; }
.projection-housing>span { position:absolute; left:calc(50% - 19px); bottom:4px; width:38px; height:1px; background:#9ad6c6; box-shadow:0 0 5px #76dacb68; }
.projection-aperture { position:relative; height:0; overflow:clip; overflow-anchor:none; }
.projection-aperture::after { content:''; position:absolute; z-index:1; inset:auto 0 0; height:7px; border:1px solid #62786a; border-radius:0 0 3px 3px; background:linear-gradient(#b7c0a9,#53675c 50%,#273f38); box-shadow:0 -1px 3px #16251b30; pointer-events:none; }
.projection-screen[data-state=closed] .projection-aperture::after { display:none; }
.projection-screen[data-state=open] .projection-aperture { overflow:visible; }
.projection-screen+.session-placeholder, .projection-screen~.coming-soon-panel { margin-top:14px; }
.session-sheet { padding:28px var(--atlas-screen-gutter) 34px; border:1px solid #c8ba9a; border-top:5px solid #aa9471; border-radius:2px; color:var(--atlas-ink); font-size:var(--atlas-body-size); font-weight:var(--atlas-weight-regular); line-height:var(--atlas-body-leading); }
.session-topline { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-bottom:18px; border-bottom:1px solid #80775542; }
.session-location { display:flex; align-items:baseline; flex:1 1 210px; flex-wrap:wrap; gap:4px 10px; margin:0; color:var(--atlas-ink-meta); font-size:var(--atlas-meta-size); line-height:var(--atlas-meta-leading); letter-spacing:.05em; text-transform:uppercase; }
.session-location strong { color:var(--atlas-ink-secondary); font-size:inherit; font-weight:var(--atlas-weight-emphasis); letter-spacing:.03em; }
.session-actions { display:flex; align-items:center; gap:8px; flex:none; margin-left:auto; }
.share-link, .close-session { display:flex; align-items:center; justify-content:center; gap:6px; min-height:32px; border:1px solid #686d5b4f; border-radius:4px; background:#fff3; color:#3e524b !important; }
.share-link { padding:7px 10px; font-size:var(--atlas-meta-size) !important; font-weight:var(--atlas-weight-emphasis) !important; line-height:var(--atlas-meta-leading) !important; white-space:nowrap; }
.share-link>.atlas-icon { width:14px; height:14px; }
.close-session { width:32px; padding:6px; }
.close-session>svg { width:18px; height:18px; }
.session-sheet :is(button,a):focus-visible { outline-color:#247775; }
.session-heading { padding:var(--atlas-section-gap) 0 24px; }
.session-eyebrow { margin:0 0 9px; color:#607d6b; font-size:9px; letter-spacing:.18em; text-transform:uppercase; }
.session-sheet .session-eyebrow { margin-bottom:12px; color:var(--atlas-ink-meta); font-size:var(--atlas-meta-size); font-weight:var(--atlas-weight-emphasis); line-height:var(--atlas-meta-leading); letter-spacing:.12em; }
.session-heading h2 { margin:0; font:var(--atlas-weight-regular) var(--atlas-title-size)/var(--atlas-title-leading) Georgia,serif; letter-spacing:-.025em; overflow-wrap:anywhere; }
.session-subtitle { margin:14px 0 0; color:var(--atlas-ink-secondary); font-size:var(--atlas-subtitle-size); line-height:var(--atlas-subtitle-leading); }
.session-description { max-width:var(--atlas-reading-width); font-size:var(--atlas-body-size); line-height:var(--atlas-body-leading); }
.session-description p { margin:0 0 var(--atlas-paragraph-gap); }
.session-description p:last-child { margin-bottom:0; }
.session-details { max-width:var(--atlas-reading-width); margin:var(--atlas-paragraph-gap) 0 0; padding-left:22px; font-size:var(--atlas-body-size); line-height:var(--atlas-body-leading); color:var(--atlas-ink-secondary); }
.session-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--atlas-step-gap) 28px; list-style:none; padding:24px 0 0; margin:var(--atlas-section-gap) 0 0; border-top:1px solid #80775538; }
.session-step { display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; font-size:var(--atlas-step-body-size); line-height:var(--atlas-step-leading); color:var(--atlas-ink-secondary); }
.step-number { font-size:var(--atlas-meta-size); font-weight:var(--atlas-weight-emphasis); line-height:calc(var(--atlas-step-title-size) * var(--atlas-step-leading)); color:var(--atlas-ink-meta); font-variant-numeric:tabular-nums; }
.session-step strong { display:block; font-weight:var(--atlas-weight-emphasis); color:var(--atlas-ink); font-size:var(--atlas-step-title-size); margin-bottom:5px; }
.session-demo { margin:var(--atlas-section-gap) auto 0; max-width:780px; border:1px solid #58766c; border-radius:5px; overflow:hidden; color:#d8e3d8; background:#0c1d20; }
.demo-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; padding:12px 14px; border-bottom:1px solid #627a764d; }
.demo-heading h3 { font:var(--atlas-weight-emphasis) var(--atlas-meta-size)/var(--atlas-meta-leading) 'PixelSound UI','Segoe UI',sans-serif; letter-spacing:.06em; text-transform:uppercase; margin:0; }
.demo-heading>span { font-size:var(--atlas-meta-size); line-height:var(--atlas-meta-leading); text-transform:uppercase; letter-spacing:.02em; color:#b1c8bc; }
#sessionMedia { display:grid; gap:15px; }
#sessionMedia video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; background:#050d0f; color:#e4ede8; color-scheme:dark; }
#sessionMedia video+video { border-top:1px solid #6b9b92; }
.session-placeholder { min-height:440px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:42px; border:1px solid #c1ae8761; border-radius:3px; color:#c7d6cb; }
.session-placeholder h2 { margin:0 0 17px; font:400 34px/1.2 Georgia,serif; color:#e8e1d3; }
.session-placeholder>p:last-child { max-width:36ch; color:#b0c0b2; font-size:13px; line-height:1.8; }
.session-placeholder .session-eyebrow { color:#c0ad87; }
.coming-soon-tag { display:inline-block; margin-bottom:25px; border:1px solid #d4b78969; border-radius:3px; padding:5px 9px; font-size:11px; letter-spacing:.04em; color:#e0c59c; }
.atlas-footer { margin:30px 0; text-align:center; color:#a1b1a8; font-size:10px; letter-spacing:.06em; }
.atlas-footer>span { margin:0 10px; }
.clipboard-buffer { position:fixed; width:1px; height:1px; opacity:0; pointer-events:none; }
.no-script { max-width:640px; margin:40px auto; padding:20px; background:#172927; color:#e6eddf; }
@media (min-width:1550px) { [data-feature-atlas] { width:min(calc(100% - 96px),1440px); } }
@media (max-width:1100px) {
  [data-feature-atlas] { width:calc(100% - 36px); }
  .stage { grid-template-columns:minmax(260px,.85fr) minmax(0,1.4fr); gap:16px; }
  .application-panel { grid-template-columns:132px minmax(0,1fr); }
  .application-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .app-card { display:grid; grid-template-columns:24px minmax(0,1fr); align-content:center; justify-items:start; gap:4px 10px; min-height:63px; text-align:left; padding:9px; }
  .app-card>.atlas-icon { grid-row:1/3; }
  .app-name { font-size:12px; }
  .app-meta { font-size:9px; }
  .feature-list { gap:8px; padding:10px; }
  .feature-card { padding:14px; gap:17px; }
  .feature-name { font-size:16px; }
  .feature-light { right:14px; top:20px; }
  .session-topline { align-items:flex-start; }
}
@media (max-width:820px) {
  .stage { grid-template-columns:230px minmax(0,1fr); gap:14px; }
  .feature-list { grid-template-columns:1fr; }
  .feature-card { min-height:90px; gap:12px; }
  .feature-name { font-size:17px; }
  .session-topline { flex-wrap:wrap; }
  .session-steps { grid-template-columns:1fr; }
}
@media (max-width:690px) {
  .feature-atlas {
    --atlas-title-size:32px;
    --atlas-subtitle-size:18px;
    --atlas-body-size:17px;
    --atlas-step-title-size:16px;
    --atlas-step-body-size:15px;
    --atlas-paragraph-gap:15px;
    --atlas-section-gap:24px;
    --atlas-step-gap:21px;
    --atlas-screen-gutter:20px;
  }
  [data-feature-atlas] { width:calc(100% - 24px); }
  .atlas-masthead { padding:28px 0 20px; }
  .studio-title-line { gap:12px; }
  .studio-title-line h1 { font-size:38px; white-space:nowrap; }
  .studio-title-line .title-wave { width:38px; height:24px; }
  .sfx-toggle { position:static; transform:none; width:max-content; margin:14px auto 0; min-height:32px; padding:5px 10px; }
  .sfx-toggle svg { width:16px; height:16px; }
  .stage { display:flex; flex-direction:column; gap:14px; }
  .stage>* { width:100%; }
  .application-panel { display:block; }
  .application-panel>.panel-heading { border-right:0; border-bottom:1px solid #afcaca24; }
  .panel-heading { padding:12px 13px; }
  .panel-heading h2 { font-size:11px; }
  .application-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; padding:8px; }
  .app-card { grid-template-columns:17px minmax(0,1fr); gap:3px 6px; padding:8px 5px; min-height:60px; }
  .app-card>.atlas-icon { width:17px; height:17px; }
  .app-name { font-size:11px; }
  .app-meta { font-size:8px; }
  .feature-collection { margin:11px 13px 0; font-size:10px; }
  .feature-list { grid-template-columns:repeat(2,minmax(0,1fr)); padding:10px; gap:8px; }
  .feature-card { min-height:103px; padding:13px; gap:12px; }
  .feature-code { font-size:10px; }
  .feature-name { font-size:16px; }
  .feature-status { font-size:9px; margin-top:5px; }
  .feature-light { right:13px; top:18px; }
  .session-area { scroll-margin-top:90px; }
  .session-sheet { padding-block:24px 28px; }
  .session-topline { align-items:center; }
  .session-actions { gap:5px; }
  .share-link { min-height:34px; }
  .close-session { width:30px; min-height:34px; }
  .session-heading { padding-bottom:22px; }
  .demo-heading { padding:10px; gap:9px; }
  .session-placeholder { min-height:300px; padding:27px; }
  .session-placeholder h2 { font-size:29px; }
  .atlas-footer { font-size:9px; }
}
@media (max-width:350px) {
  .studio-title-line h1 { font-size:33px; }
  .studio-title-line .title-wave { width:26px; }
  .app-name { font-size:10px; }
  .feature-name { font-size:15px; }
  .feature-atlas { --atlas-screen-gutter:17px; }
}