/* Supplementary reading on the studio's own cream paper and warm brown palette. */
.app-guide,.detail-guide-entry { --guide-paper:#FFF9F0; --guide-ink:#342A21; --guide-muted:#87735D; --guide-selected:#E8D8C5; --guide-line:#E8D8C580; }
.detail-guide-item { display:block; flex:0 0 44px; }
.detail-guide-entry { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:9px; border:1px solid #a68c6320; border-radius:24px; background:#fff3dd99; color:#4f4437; backdrop-filter:blur(6px); -webkit-tap-highlight-color:transparent; }
.detail-guide-entry svg,.app-guide-symbol svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.detail-guide-entry:focus-visible { outline:none; background:var(--guide-paper); box-shadow:0 3px 12px #6d4a2530; }
@media(hover:hover) and (pointer:fine) { .focus-detail:not(.is-direct-input) .detail-guide-entry:hover { background:#fff7e8d9; border-color:#a68c6360; } }
.app-guide { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#342A2133; backdrop-filter:blur(1px); overscroll-behavior:contain; color:var(--guide-ink); }
.app-guide[hidden],.app-guide [hidden] { display:none!important; }
.app-guide-panel { display:grid; grid-template-rows:auto minmax(0,1fr); width:89vw; height:90svh; min-width:0; min-height:0; overflow:hidden; border:1px solid #ffffffb3; border-radius:20px; background:var(--guide-paper); box-shadow:0 24px 80px #342A2138,0 3px 12px #342A2117; }
.app-guide-header { display:flex; align-items:center; justify-content:space-between; gap:20px; min-width:0; padding:20px 28px; border-bottom:1px solid var(--guide-line); }
.app-guide-brand { display:flex; align-items:center; gap:15px; min-width:0; }
.app-guide-symbol { display:block; flex:0 0 32px; width:32px; height:32px; color:var(--guide-muted); }
.app-guide-header h2 { margin:0; color:var(--guide-ink); font-size:20px; line-height:1.4; font-weight:650; }
.app-guide-description { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:3px 0 0; color:var(--guide-muted); font-size:12px; line-height:1.6; }
.app-guide-status { padding:1px 7px; border-radius:5px; background:#E8D8C55c; }
.app-guide-close { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--guide-ink); font-size:28px; line-height:1; }
.app-guide-close:hover { background:#E8D8C573; }
.app-guide-layout { display:grid; grid-template-columns:clamp(180px,15vw,236px) minmax(0,1fr); min-height:0; }
.app-guide-nav { padding:24px 16px; overflow-y:auto; border-right:1px solid var(--guide-line); background:#FBF3E7; }
.app-guide-nav-main,.app-guide-nav-sub { display:flex; flex-direction:column; gap:7px; }
.app-guide-nav-sub { margin-top:7px; }
.app-guide-nav button { display:flex; align-items:center; gap:11px; width:100%; min-height:46px; padding:11px 14px; border:0; border-radius:9px; background:transparent; color:var(--guide-muted); text-align:left; font-size:14px; line-height:1.5; }
.app-guide-nav-main button { color:var(--guide-ink); font-weight:600; }
.app-guide-nav-main button.is-active { background:var(--guide-selected); }
.app-guide-nav-sub button { min-height:38px; padding-left:28px; font-size:13px; }
.app-guide-nav-sub button::before { content:''; flex:0 0 4px; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.65; }
.app-guide-nav-sub button.is-active { color:var(--guide-ink); font-weight:600; }
.app-guide-nav svg { flex:0 0 18px; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.app-guide-content { min-width:0; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-color:#CDBBA3 transparent; scrollbar-width:thin; padding:30px clamp(24px,2.2vw,42px) 40px; scroll-padding-top:28px; touch-action:pan-y pinch-zoom; -webkit-overflow-scrolling:touch; }
.app-guide-content::-webkit-scrollbar { width:7px; }
.app-guide-content::-webkit-scrollbar-thumb { border:1px solid var(--guide-paper); border-radius:6px; background:#CDBBA3; }
.app-guide-document { min-width:0; max-width:1500px; margin:0 auto; padding-bottom:var(--guide-end-space,32px); }
.app-guide-headline { margin:0 0 12px; color:var(--guide-ink); font-size:clamp(23px,2vw,31px); font-weight:650; line-height:1.45; letter-spacing:.01em; }
.app-guide-lead { margin:0 0 26px; color:var(--guide-ink); font-size:15px; line-height:1.85; }
.app-guide-overview { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(210px,.8fr); align-items:center; gap:28px; }
.app-guide-shots { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; min-width:0; }
.app-guide-shot { display:flex; flex-direction:column; align-items:center; min-width:0; margin:0; padding:13px 12px 11px; border:1px solid var(--guide-line); border-radius:12px; background:#ffffffa6; }
.app-guide-shot img { display:block; width:auto; max-width:100%; height:auto; max-height:560px; object-fit:contain; border-radius:8px; }
.app-guide-shot figcaption { margin-top:11px; color:var(--guide-muted); font-size:12px; line-height:1.6; text-align:center; }
.app-guide-overview[data-media-layout="posters"] { align-items:start; }
.app-guide-overview[data-media-layout="character"] .app-guide-shots { grid-template-columns:minmax(0,1fr); width:100%; max-width:380px; margin:0 auto; }
.app-guide-overview[data-media-layout="character"] img { max-height:420px; }
.app-guide-overview[data-media-layout="landscape"] { grid-template-columns:minmax(0,1fr); align-items:start; }
.app-guide-overview[data-media-layout="landscape"] .app-guide-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.app-guide-overview[data-media-layout="landscape"] .app-guide-feature+.app-guide-feature { margin-top:0; }
.app-guide-overview[data-media-layout="landscape"] .app-guide-shots { grid-template-columns:minmax(0,1fr); width:100%; max-width:1100px; margin:0 auto; gap:22px; }
.app-guide-overview[data-media-layout="landscape"] img { width:100%; max-height:none; }
.app-guide-feature+.app-guide-feature { margin-top:28px; }
.app-guide-feature::before { content:''; display:block; width:20px; height:2px; margin-bottom:11px; background:#B49370; }
.app-guide-content h3 { margin:0 0 8px; color:var(--guide-ink); font-size:17px; line-height:1.6; font-weight:600; }
.app-guide-content p { color:var(--guide-ink); }
.app-guide-feature p,.app-guide-steps p,.app-guide-response p,.app-guide-note p { margin:0; font-size:14px; line-height:1.85; overflow-wrap:anywhere; }
#app-guide-usage { margin-top:32px; padding-top:26px; border-top:1px solid var(--guide-line); }
.app-guide-section-title { margin:0 0 21px; color:var(--guide-ink); font-size:23px; line-height:1.5; font-weight:600; }
.app-guide-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:0; padding:0; list-style:none; }
.app-guide-steps li { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:start; gap:12px; min-width:0; }
.app-guide-step-number { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--guide-selected); color:var(--guide-ink); font-size:13px; font-weight:650; }
.app-guide-steps h3 { margin-top:4px; font-size:15px; }
.app-guide-response,.app-guide-note { margin-top:28px; padding:22px 24px; border:1px solid var(--guide-line); border-radius:12px; background:#FCF4E8; }
.app-guide-note { margin-top:14px; background:transparent; }
.app-guide button:focus-visible { outline:none; filter:brightness(.78); text-decoration:underline; text-underline-offset:4px; }
.app-guide-content:focus-visible { outline:none; background:#FFFCF6; }
.app-guide-open .focus-detail * { animation-play-state:paused!important; }
@media(max-width:1100px) {
 .app-guide-overview { grid-template-columns:minmax(0,1fr); gap:24px; }
 .app-guide-shots { max-width:680px; margin:0 auto; }
 .app-guide-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
 .app-guide-feature+.app-guide-feature { margin-top:0; }
 .app-guide-content h3 { font-size:15px; }
 .app-guide-steps { gap:18px; }
 .app-guide-steps li { grid-template-columns:1fr; gap:9px; }
}
@media(max-width:760px) {
 .app-guide-panel { width:calc(100vw - max(8px,env(safe-area-inset-left)) - max(8px,env(safe-area-inset-right))); height:calc(100svh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom))); border-radius:14px; }
 .app-guide-header { gap:12px; padding:14px 16px; }
 .app-guide-brand { gap:10px; }
 .app-guide-symbol { flex-basis:26px; width:26px; height:26px; }
 .app-guide-header h2 { font-size:18px; }
 .app-guide-description { font-size:11px; gap:7px; }
 .app-guide-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
 .app-guide-nav { padding:9px 12px; overflow:visible; border-right:0; border-bottom:1px solid var(--guide-line); }
 .app-guide-nav-main { flex-direction:row; gap:6px; }
 .app-guide-nav-main button { justify-content:center; min-height:40px; padding:8px 12px; font-size:13px; }
 .app-guide-nav-sub { display:none; }
 .app-guide-content { padding:23px 18px 28px; }
 .app-guide-headline { font-size:23px; }
 .app-guide-lead { font-size:14px; margin-bottom:20px; }
 .app-guide-shots { gap:10px; }
 .app-guide-shot { padding:8px 7px 9px; border-radius:9px; }
 .app-guide-shot figcaption { font-size:11px; }
 .app-guide-overview[data-media-layout="posters"] .app-guide-shots { grid-template-columns:minmax(0,1fr); width:100%; max-width:360px; }
 .app-guide-overview[data-media-layout="character"] .app-guide-shots { max-width:280px; }
 .app-guide-overview[data-media-layout="landscape"] .app-guide-features { grid-template-columns:minmax(0,1fr); }
 .app-guide-features { grid-template-columns:minmax(0,1fr); gap:22px; }
 .app-guide-section-title { font-size:21px; }
 .app-guide-steps { grid-template-columns:minmax(0,1fr); gap:21px; }
 .app-guide-steps li { grid-template-columns:34px minmax(0,1fr); gap:12px; }
 .app-guide-response,.app-guide-note { padding:18px; }
}
@media(prefers-reduced-motion:reduce) {
 .app-guide * { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}