@import url('/shared/shade-interface.css');
body[data-menu-shell]{--edge-x:clamp(24px,5vw,160px);--edge-y:clamp(24px,4vh,72px);--logo-width:clamp(320px,24vw,660px);--nav-width:clamp(360px,26vw,560px);--section-gap:28px}
body[data-menu-shell] .utility,body[data-menu-shell] .key-hint{display:none}
body[data-menu-shell][data-page=false] #app{height:100svh;min-height:100svh;padding:var(--edge-y) var(--edge-x);display:block}
body[data-menu-shell] #screen-home{width:100%;height:100%;max-width:none;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:24px;min-width:0}
body[data-menu-shell] .shade-composition{display:flex;flex-direction:column;align-items:center;gap:var(--section-gap);width:max(var(--logo-width),var(--nav-width));max-width:100%;align-self:center;justify-self:start;min-width:0}
body[data-menu-shell] #screen-home .brand{width:var(--logo-width);max-width:100%;margin:0;line-height:0}
body[data-menu-shell] #screen-home .wordmark{display:block;width:100%;height:auto}
body[data-menu-shell] #screen-home .menu-stack{display:flex;flex-direction:column;gap:16px;width:var(--nav-width);max-width:100%;padding:0;min-width:0}
body[data-menu-shell] #screen-home .menu-row{padding:0;margin:0;min-width:0}
body[data-menu-shell] .shade-minor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}
body[data-menu-shell] #screen-home .shade-action{width:100%;font-weight:400;line-height:1.25}
body[data-menu-shell] #screen-home [data-hierarchy=play]{height:88px;--control-height:88px;--control-type:38px;font-size:38px}
body[data-menu-shell] #screen-home [data-hierarchy=gallery]{height:64px;--control-height:64px;--control-type:28px;font-size:28px}
body[data-menu-shell] #screen-home [data-hierarchy=minor]{height:48px;--control-height:48px;--control-type:19px;font-size:19px}
body[data-menu-shell] #screen-home [data-hierarchy=play] .control-content{justify-content:center}
body[data-menu-shell] #screen-home [data-hierarchy=gallery] .control-content{padding:12px 24px;gap:16px}
body[data-menu-shell] #screen-home [data-hierarchy=minor] .control-content{padding:10px 12px;gap:10px}
body[data-menu-shell] #screen-home .control-content>span{white-space:nowrap}
body[data-menu-shell] #screen-home [data-hierarchy=gallery] .menu-icon{width:26px;height:26px}
body[data-menu-shell] #screen-home [data-hierarchy=minor] .menu-icon{width:20px;height:20px}
body[data-menu-shell] .destination-meta{margin-left:auto;font-size:10px;letter-spacing:.02em;line-height:1}
body[data-menu-shell] .shade-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;min-width:0}
body[data-menu-shell] .shade-meta{display:flex;align-items:center;gap:24px}
body[data-menu-shell] .preview-build{font-size:12px;color:var(--ui-muted);margin:0;line-height:1.4}
body[data-menu-shell] .shade-utilities{display:flex;align-items:center;gap:12px;width:auto;flex:none;margin:0;min-width:0}
body[data-menu-shell] .shade-utility.preference-control{width:auto;height:48px;min-height:48px}
body[data-menu-shell][data-page=true] #app{padding:var(--edge-y) var(--edge-x)!important;height:100svh;min-height:100svh;display:grid;place-items:center}
body[data-menu-shell][data-page=true] .utility{display:none}
body[data-menu-shell][data-page=true] .readability-layer{background:var(--ui-paper);opacity:.72}
body[data-menu-shell] .content-page{width:min(var(--shade-panel-width),100%);height:min(var(--shade-panel-height),calc(100svh - 2*var(--edge-y)));max-width:none;margin:0!important}
body[data-menu-shell] .family-content-panel{width:100%;height:100%;max-height:none;display:flex;flex-direction:column;gap:28px;padding:32px 40px;clip-path:none;border:1px solid var(--ui-rule);background:var(--ui-paper);overflow:hidden;box-shadow:8px 8px 0 color-mix(in srgb,var(--ui-ink) 16%,transparent)}
body[data-menu-shell] .family-content-panel::after,body[data-menu-shell] .panel-outline{display:none!important}
body[data-menu-shell] .family-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0;padding-bottom:24px;border-bottom:1px solid var(--ui-rule)}
body[data-menu-shell] .family-header h2{font:400 36px/1.2 var(--ui-font-body);letter-spacing:-.02em;margin:0}
body[data-menu-shell] .family-back{width:112px!important;height:44px;min-height:44px;font-size:16px;flex:none}
body[data-menu-shell] .family-back .control-content{justify-content:center;padding:8px 12px;gap:10px}
body[data-menu-shell] .family-content-panel .family-panel-scroll{flex:1;overflow:auto;min-height:0;padding:0 16px 16px 0;scrollbar-gutter:stable;overscroll-behavior:contain}
body[data-menu-shell] .update-footage{margin-top:24px;border-top:1px solid var(--ui-rule);padding-top:16px}
body[data-menu-shell] .update-footage summary{min-height:44px;padding:10px 0;cursor:pointer}
@media(max-height:800px){body[data-menu-shell]{--edge-y:24px;--logo-width:min(28vw,320px);--section-gap:24px}body[data-menu-shell] #screen-home [data-hierarchy=play]{height:76px;--control-height:76px;--control-type:34px;font-size:34px}body[data-menu-shell] #screen-home [data-hierarchy=gallery]{height:58px;--control-height:58px;--control-type:26px;font-size:26px}}
@media(max-width:700px){body[data-menu-shell]{--edge-x:20px;--edge-y:20px;--logo-width:min(68vw,300px);--nav-width:100%;--section-gap:24px}body[data-menu-shell] .shade-composition{width:100%;max-width:380px;justify-self:center}body[data-menu-shell] .shade-footer{flex-direction:column-reverse;align-items:center;gap:12px}body[data-menu-shell] .shade-utilities{justify-content:center;width:100%;gap:10px}body[data-menu-shell] .family-content-panel{padding:24px;gap:20px}body[data-menu-shell] .family-header h2{font-size:30px}}
@media(max-width:400px){body[data-menu-shell] #screen-home [data-hierarchy=minor]{--control-type:18px;font-size:18px}body[data-menu-shell] #screen-home [data-hierarchy=minor] .control-content{padding:8px 10px;gap:8px}body[data-menu-shell] #screen-home [data-hierarchy=minor] .menu-icon{width:18px;height:18px}body[data-menu-shell] .shade-minor-grid{gap:10px}body[data-menu-shell] .destination-meta{font-size:9px}body[data-menu-shell] .shade-utility.preference-control{padding:8px;gap:6px}}
@media(max-height:600px) and (min-width:600px){body[data-menu-shell]{--edge-y:12px;--edge-x:24px;--logo-width:150px;--nav-width:320px;--section-gap:24px}body[data-menu-shell] .shade-composition{flex-direction:row;width:max-content;max-width:100%;gap:32px}body[data-menu-shell] #screen-home .menu-stack{gap:10px}body[data-menu-shell] #screen-home [data-hierarchy=play]{height:58px;--control-height:58px;--control-type:28px;font-size:28px}body[data-menu-shell] #screen-home [data-hierarchy=gallery]{height:48px;--control-height:48px;--control-type:22px;font-size:22px}body[data-menu-shell] #screen-home [data-hierarchy=minor]{height:44px;--control-height:44px;--control-type:18px;font-size:18px}body[data-menu-shell] .shade-minor-grid{gap:10px;margin-top:2px}body[data-menu-shell] #screen-home{gap:16px}body[data-menu-shell] .family-content-panel{padding:16px 24px;gap:16px}body[data-menu-shell] .family-header{padding-bottom:16px}body[data-menu-shell] .family-header h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){body[data-menu-shell] *,body[data-menu-shell] *::before,body[data-menu-shell] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:380px){body[data-menu-shell] .shade-utilities{flex-direction:column;gap:8px}body[data-menu-shell] .shade-utility.preference-control{width:180px;gap:8px;padding:8px}}

/* Common cutout-well destinations; failed special Play shape is shelved. */
body[data-menu-shell] #screen-home .shade-action{--control-face:var(--ui-ink)!important;--control-label:var(--ui-paper)!important;background:transparent!important;border:0!important;border-radius:0;box-shadow:none!important;transform:none!important;transition:none!important;overflow:visible}
body[data-menu-shell] #screen-home .shade-action:not(:disabled):is(:hover,:focus-visible,.is-focus,.is-hover){--control-face:var(--ui-ink)!important;--control-label:var(--ui-paper)!important;box-shadow:none!important;outline:none}
body[data-menu-shell] #screen-home .shade-action::before,body[data-menu-shell] #screen-home .shade-action::after{content:none!important}
body[data-menu-shell] .destination-face{position:absolute;z-index:-1;inset:0;width:100%;height:100%;color:var(--ui-ink);fill:var(--ui-ink);pointer-events:none;filter:none}
body[data-menu-shell] #screen-home .shade-action .control-content{color:var(--ui-paper)!important;position:absolute;z-index:1;justify-content:center;padding:0 16px;gap:16px}
body[data-menu-shell] #screen-home .destination-well{display:grid;place-items:center;width:36px;height:36px;flex:none;background:none;color:var(--ui-ink);border:0;border-radius:0;box-shadow:none}
body[data-menu-shell] #screen-home .shade-action .menu-icon{background:none;box-shadow:none;padding:0;border-radius:0;width:28px;height:28px}
body[data-menu-shell] #screen-home [data-hierarchy=gallery]{height:68px;--control-height:68px;--control-type:28px;font-size:28px}
body[data-menu-shell] #screen-home [data-hierarchy=gallery] .destination-well{width:46px;height:46px}
body[data-menu-shell] #screen-home [data-hierarchy=gallery] .menu-icon{width:38px;height:38px}
body[data-menu-shell] #screen-home [data-hierarchy=minor]{height:56px;--control-height:56px;--control-type:20px;font-size:20px}
body[data-menu-shell] #screen-home [data-hierarchy=play]{height:100px;--control-height:100px}
body[data-menu-shell] #screen-home [data-hierarchy=play] .control-content{padding:0 20px;justify-content:center;gap:20px}
body[data-menu-shell] #screen-home [data-hierarchy=play] .destination-well{width:64px;height:64px}
body[data-menu-shell] #screen-home [data-hierarchy=play] .menu-icon{position:static;width:52px;height:52px;color:var(--ui-ink)}
body[data-menu-shell] #screen-home .shade-action:disabled{opacity:.55;--control-label:var(--ui-paper)!important;cursor:not-allowed}
body[data-menu-shell] #screen-home .shade-action:disabled .control-content{opacity:1}
/* One inset edge is the entire state signal. It neither stacks nor moves the face. */
body[data-menu-shell] #screen-home .shade-action:is(:focus-visible,.is-focus){outline:2px solid var(--ui-paper)!important;outline-offset:-4px}
@media(hover:hover) and (pointer:fine){body[data-menu-shell] #screen-home .shade-action:not(:disabled):hover{outline:2px solid var(--ui-paper)!important;outline-offset:-4px}}
body[data-menu-shell] #screen-home .destination-meta{position:absolute;right:8px;top:5px;margin:0;font-size:8px;line-height:1;opacity:.8}
@media(max-height:800px){body[data-menu-shell]{--section-gap:20px}body[data-menu-shell] #screen-home .menu-stack{gap:12px}body[data-menu-shell] #screen-home [data-hierarchy=play]{height:88px;--control-height:88px}body[data-menu-shell] #screen-home [data-hierarchy=gallery]{height:64px;--control-height:64px}body[data-menu-shell] #screen-home [data-hierarchy=minor]{height:54px;--control-height:54px;font-size:19px}}
@media(max-width:400px){body[data-menu-shell] #screen-home [data-hierarchy=minor] .control-content{padding:0 8px;gap:9px}body[data-menu-shell] #screen-home [data-hierarchy=minor]{font-size:18px}body[data-menu-shell] #screen-home .destination-well{width:32px;height:32px}body[data-menu-shell] #screen-home [data-hierarchy=minor] .menu-icon{width:26px;height:26px}}
@media(max-height:600px) and (min-width:600px){body[data-menu-shell] #screen-home .menu-stack{gap:6px}body[data-menu-shell] #screen-home{gap:12px}body[data-menu-shell] #screen-home [data-hierarchy=play]{height:58px;--control-height:58px}body[data-menu-shell] #screen-home [data-hierarchy=gallery]{height:48px;--control-height:48px;font-size:23px}body[data-menu-shell] #screen-home [data-hierarchy=minor]{height:44px;--control-height:44px;font-size:18px}body[data-menu-shell] #screen-home [data-hierarchy=gallery] .destination-well{width:34px;height:34px}body[data-menu-shell] #screen-home [data-hierarchy=gallery] .menu-icon{width:28px;height:28px}body[data-menu-shell] #screen-home .destination-well{width:30px;height:30px}body[data-menu-shell] #screen-home [data-hierarchy=minor] .menu-icon{width:24px;height:24px}}
@media(max-width:400px){body[data-menu-shell] #screen-home [data-hierarchy=play]{font-size:28px;--control-type:28px}body[data-menu-shell] #screen-home [data-hierarchy=play] .destination-well{width:48px;height:48px}body[data-menu-shell] #screen-home [data-hierarchy=play] .menu-icon{width:38px;height:38px}body[data-menu-shell] #screen-home [data-hierarchy=play] .control-content{gap:16px}body[data-menu-shell] #screen-home [data-hierarchy=gallery]{font-size:26px;--control-type:26px}}
@media(max-height:600px) and (min-width:600px){body[data-menu-shell] .shade-footer{flex-direction:row;align-items:center;gap:12px}}
@media(max-height:600px) and (min-width:600px){body[data-menu-shell] .shade-utilities{width:auto;flex:none}}

@media(max-height:800px) and (min-width:401px){body[data-menu-shell] #screen-home [data-hierarchy=play] .destination-well{width:60px;height:60px}body[data-menu-shell] #screen-home [data-hierarchy=play] .menu-icon{width:48px;height:48px}}
@media(max-height:600px) and (min-width:600px){body[data-menu-shell] #screen-home [data-hierarchy=play] .destination-well{width:40px;height:40px}body[data-menu-shell] #screen-home [data-hierarchy=play] .menu-icon{width:32px;height:32px}body[data-menu-shell] #screen-home [data-hierarchy=play] .control-content{gap:16px}}