#cinema-study-concept { color-scheme: light dark; --cs-paper:light-dark(#f4f1e9,#1c1e1d); --cs-ink:light-dark(#252b29,#edece6); --cs-muted:light-dark(#636b65,#abb5ad); --cs-line:light-dark(#d9ded5,#404842); --cs-soft:light-dark(#e6ebe3,#29372e); --cs-accent:light-dark(#375b47,#b3d1ba); --cs-on-accent:light-dark(#fffdf4,#182d20); --cs-night:light-dark(#263b39,#122c2b); --cs-sky:light-dark(#687e73,#284742); --cs-building:light-dark(#acafa0,#626f65); --cs-window:light-dark(#d8ca99,#b8ad82); --cs-shadow:light-dark(#162d2b,#0d2422); font-family:"Segoe UI","Microsoft YaHei",sans-serif; color:var(--cs-ink); }
#cinema-study-concept * { box-sizing:border-box; }
#cinema-study-concept [hidden] { display:none !important; }
#cinema-study-concept .cs-phone { width:min(100%,420px); margin:0 auto; background:var(--cs-paper); border:1px solid var(--cs-line); border-radius:22px; overflow:hidden; }
#cinema-study-concept button { font:inherit; cursor:pointer; color:inherit; }
#cinema-study-concept button:disabled { opacity:.38; cursor:default; }
#cinema-study-concept .cs-top { display:flex; justify-content:space-between; align-items:center; padding:19px 22px 15px; border-bottom:1px solid var(--cs-line); gap:10px; }
#cinema-study-concept .cs-brand { font-family:Georgia,"Songti SC","SimSun",serif; font-size:21px; letter-spacing:3px; font-weight:500; }
#cinema-study-concept .cs-kicker { font-size:11px; letter-spacing:1.4px; color:var(--cs-muted); }
#cinema-study-concept .cs-tools { display:flex; align-items:center; gap:6px; }
#cinema-study-concept .cs-plain { background:transparent; border:0; padding:8px; display:inline-flex; align-items:center; gap:5px; font-size:12px; border-radius:6px; }
#cinema-study-concept .cs-plain[aria-pressed="true"] { color:var(--cs-accent); background:var(--cs-soft); }
#cinema-study-concept .cs-chapter { padding:16px 22px 14px; display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--cs-muted); font-size:12px; }
#cinema-study-concept .cs-step { font-variant-numeric:tabular-nums; }
#cinema-study-concept .cs-visual { position:relative; aspect-ratio:1.66; background:var(--cs-night); overflow:hidden; }
#cinema-study-concept .cs-art { position:absolute; inset:0; overflow:hidden; }
#cinema-study-concept .cs-sky { position:absolute; inset:0; background:var(--cs-sky); }
#cinema-study-concept .cs-building { position:absolute; width:68%; height:100%; left:16%; top:6%; background:var(--cs-building); display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,1fr); padding:7% 6%; gap:13% 12%; }
#cinema-study-concept .cs-window { background:var(--cs-shadow); position:relative; }
#cinema-study-concept .cs-window:nth-child(3n+2) { background:var(--cs-window); }
#cinema-study-concept .cs-window:nth-child(6)::after { content:""; position:absolute; width:28%; height:62%; left:35%; bottom:0; border-radius:45% 45% 0 0; background:var(--cs-shadow); }
#cinema-study-concept .cs-frame { position:absolute; inset:0; border:18px solid var(--cs-shadow); border-top-width:12px; border-bottom-width:23px; }
#cinema-study-concept .cs-frame::before { content:""; position:absolute; left:47%; top:0; bottom:0; width:12px; background:var(--cs-shadow); }
#cinema-study-concept .cs-frame::after { content:""; position:absolute; right:-2px; top:0; bottom:0; width:21%; background:var(--cs-shadow); clip-path:polygon(20% 0,100% 0,100% 100%,88% 100%); }
#cinema-study-concept .cs-overhead { background:var(--cs-sky); }
#cinema-study-concept .cs-room { position:absolute; inset:12% 16%; border:12px solid var(--cs-building); background:var(--cs-night); }
#cinema-study-concept .cs-table { position:absolute; width:30%; height:44%; left:35%; top:28%; border-radius:5px; background:var(--cs-building); }
#cinema-study-concept .cs-person { position:absolute; width:12%; aspect-ratio:1; border-radius:50%; background:var(--cs-window); }
#cinema-study-concept .cs-person.one { top:43%; left:15%; }
#cinema-study-concept .cs-person.two { top:43%; right:15%; background:var(--cs-sky); }
#cinema-study-concept .cs-door { position:absolute; left:15%; bottom:-12px; width:20%; height:12px; background:var(--cs-sky); }
#cinema-study-concept .cs-sequence { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:8px; padding:11% 5%; background:var(--cs-sky); }
#cinema-study-concept .cs-panel { height:100%; background:var(--cs-night); position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
#cinema-study-concept .cs-head { position:absolute; top:24%; left:35%; width:31%; height:29%; border-radius:45%; background:var(--cs-building); }
#cinema-study-concept .cs-torso { position:absolute; left:20%; top:50%; width:61%; height:50%; border-radius:45% 45% 0 0; background:var(--cs-building); }
#cinema-study-concept .cs-panel.middle { background:var(--cs-building); }
#cinema-study-concept .cs-panel.middle::before { content:""; position:absolute; inset:18% 22%; background:var(--cs-window); border:7px solid var(--cs-shadow); }
#cinema-study-concept .cs-panel.third .cs-head { transform:translateY(-8%) rotate(-12deg); }
#cinema-study-concept .cs-panel.third .cs-torso { transform:rotate(-6deg); }
#cinema-study-concept .cs-media-note { padding:8px 22px 0; font-size:11px; color:var(--cs-muted); display:flex; justify-content:space-between; gap:6px; }
#cinema-study-concept .cs-copy { padding:20px 22px 18px; }
#cinema-study-concept .cs-director { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 10px; margin-bottom:14px; font-size:13px; }
#cinema-study-concept .cs-director span { font-size:11px; color:var(--cs-muted); letter-spacing:.4px; }
#cinema-study-concept .cs-topic { margin:0 0 4px; font-family:Georgia,"Songti SC","SimSun",serif; font-weight:500; font-size:30px; line-height:1.3; letter-spacing:1px; }
#cinema-study-concept .cs-term { font-size:11px; letter-spacing:1.1px; color:var(--cs-muted); }
#cinema-study-concept .cs-question { font-size:17px; line-height:1.7; margin:18px 0 0; }
#cinema-study-concept .cs-lead { font-size:13px; line-height:1.8; margin:9px 0 0; color:var(--cs-muted); }
#cinema-study-concept .cs-primary { flex:1; padding:12px 14px; background:var(--cs-accent); color:var(--cs-on-accent); border:1px solid var(--cs-accent); border-radius:8px; font-size:14px; display:flex; justify-content:center; align-items:center; gap:7px; }
#cinema-study-concept .cs-save { width:44px; height:44px; flex:none; border:1px solid var(--cs-line); background:transparent; padding:0; border-radius:12px; display:grid; place-items:center; position:relative; }
#cinema-study-concept .cs-save svg { width:18px; height:18px; }
#cinema-study-concept .cs-save[aria-pressed="true"] { border-color:var(--cs-accent); background:var(--cs-soft); color:var(--cs-accent); }
#cinema-study-concept .cs-answer { padding:25px 22px 18px; }
#cinema-study-concept .cs-answer-inner { border-top:1px solid var(--cs-line); padding-top:18px; margin-top:20px; }
#cinema-study-concept .cs-answer dl { margin:0; }
#cinema-study-concept .cs-answer dt { font-size:12px; color:var(--cs-accent); margin-top:15px; }
#cinema-study-concept .cs-answer dt:first-child { margin-top:0; }
#cinema-study-concept .cs-answer dd { margin:5px 0 0; font-size:14px; line-height:1.85; }
#cinema-study-concept .cs-source { font-size:11px; color:var(--cs-muted); margin:16px 0; }
#cinema-study-concept .cs-source a { color:var(--cs-accent); text-underline-offset:3px; }
#cinema-study-concept .cs-feedback { display:flex; gap:8px; }
#cinema-study-concept .cs-feedback button { flex:1; padding:10px 7px; background:transparent; border:1px solid var(--cs-line); border-radius:7px; font-size:12px; }
#cinema-study-concept .cs-feedback button[aria-pressed="true"] { color:var(--cs-accent); border-color:var(--cs-accent); background:var(--cs-soft); }
#cinema-study-concept .cs-next-reason { margin:0; padding:13px 22px; border-top:1px solid var(--cs-line); font-size:11px; line-height:1.7; color:var(--cs-muted); }
#cinema-study-concept .cs-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 22px 16px; border-top:1px solid var(--cs-line); }
#cinema-study-concept .cs-footer-center { display:flex; gap:16px; align-items:center; }
#cinema-study-concept .cs-icon { width:32px; height:32px; flex:none; padding:0; display:grid; place-items:center; border-radius:8px; position:relative; }
#cinema-study-concept .cs-icon svg { width:16px; height:16px; }
#cinema-study-concept .cs-nav-icon svg { width:14px; height:14px; }
#cinema-study-concept .cs-tools .cs-icon svg { width:18px; height:18px; }
#cinema-study-concept .cs-icon:not(:disabled):hover { background:var(--cs-soft); }
#cinema-study-concept .cs-group-controls { display:flex; align-items:center; gap:10px; }
#cinema-study-concept .cs-hint { font-size:11px; color:var(--cs-muted); }
#cinema-study-concept .cs-sheet { padding:24px 22px; }
#cinema-study-concept .cs-sheet h2 { margin:0 0 8px; font-family:Georgia,"Songti SC","SimSun",serif; font-size:24px; font-weight:500; }
#cinema-study-concept .cs-sheet > p { font-size:13px; color:var(--cs-muted); line-height:1.8; margin:8px 0 20px; }
#cinema-study-concept .cs-route-item { display:block; width:100%; text-align:left; background:transparent; border:0; border-top:1px solid var(--cs-line); padding:19px 0; }
#cinema-study-concept .cs-route-item strong { display:block; font-size:16px; font-weight:500; }
#cinema-study-concept .cs-route-item span { display:block; margin-top:5px; font-size:12px; color:var(--cs-muted); line-height:1.8; }
#cinema-study-concept .cs-route-item small { display:block; margin-top:9px; color:var(--cs-accent); font-size:11px; }
#cinema-study-concept .cs-back { width:100%; margin-top:20px; }
#cinema-study-concept[data-mood="archive"] { --cs-soft:light-dark(#eae3db,#342d28); --cs-accent:light-dark(#76543b,#ddbd98); --cs-on-accent:light-dark(#fffaf1,#302419); }
#cinema-study-concept[data-mood="archive"] .cs-topic { letter-spacing:2px; }
#cinema-study-concept[data-mood="minimal"] .cs-topic { font-family:"Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:0; }
#cinema-study-concept[data-mood="minimal"] .cs-brand { font-family:"Segoe UI","Microsoft YaHei",sans-serif; letter-spacing:1px; }
#cinema-study-concept[data-compact="true"] .cs-copy { padding-top:15px; padding-bottom:15px; }
#cinema-study-concept[data-compact="true"] .cs-question { margin-top:12px; }
#cinema-study-concept[data-compact="true"] .cs-director { margin-bottom:10px; }
#cinema-study-concept .cs-deck { perspective:1400px; touch-action:pinch-zoom; user-select:none; }
#cinema-study-concept .cs-rotator { display:grid; transform-style:preserve-3d; transition:transform 440ms cubic-bezier(.2,.7,.2,1); }
#cinema-study-concept .cs-deck[data-flipped="true"] .cs-rotator { transform:rotateY(180deg); }
#cinema-study-concept .cs-face { grid-area:1 / 1; min-width:0; background:var(--cs-paper); backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; }
#cinema-study-concept .cs-front-face { transform:rotateY(0deg); }
#cinema-study-concept .cs-back-face { transform:rotateY(180deg); }
#cinema-study-concept .cs-changing .cs-rotator { transition:none; }
#cinema-study-concept .cs-flip-hint { margin:auto 0 0; padding:12px 22px 16px; color:var(--cs-muted); text-align:center; font-size:12px; letter-spacing:.4px; }
#cinema-study-concept .cs-back-heading { display:flex; justify-content:space-between; gap:10px; color:var(--cs-accent); font-size:12px; margin-bottom:18px; }
#cinema-study-concept .cs-back-title { font-family:Georgia,"Songti SC","SimSun",serif; font-size:28px; line-height:1.4; font-weight:500; margin:0 0 6px; }
#cinema-study-concept .cs-back-face .cs-flip-hint { padding:20px 0 0; }
#cinema-study-concept .cs-back-face .cs-source { line-height:1.8; }
#cinema-study-concept .cs-back-face .cs-feedback { margin-top:18px; }
#cinema-study-concept .cs-flip-control { font-size:12px; }
#cinema-study-concept .cs-chapter { padding:8px 16px 8px 22px; gap:10px; }
#cinema-study-concept .cs-chapter-name { flex:1; line-height:1.6; }
#cinema-study-concept .cs-route-intro { margin-bottom:8px; }
#cinema-study-concept .cs-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#cinema-study-concept .cs-zoom-scene { background:var(--cs-sky); }
#cinema-study-concept .cs-zoom-scene .cs-room { inset:8% 12%; border-width:10px; }
#cinema-study-concept .cs-zoom-scene .cs-room::before { content:""; position:absolute; inset:13%; border:8px solid var(--cs-building); }
#cinema-study-concept .cs-zoom-scene .cs-room::after { content:""; position:absolute; inset:28%; border:6px solid var(--cs-building); }
#cinema-study-concept .cs-zoom-scene .cs-person { left:44%; top:41%; width:12%; z-index:1; }
#cinema-study-concept .cs-visual { aspect-ratio:auto; background:var(--cs-soft); }
#cinema-study-concept .cs-visual > svg { display:block; width:100%; height:auto; }
#cinema-study-concept .cs-lesson-controls { padding:10px 20px; background:var(--cs-soft); }
#cinema-study-concept .cs-motion-label { display:flex; align-items:center; gap:12px; font-size:12px; }
#cinema-study-concept .cs-motion-label input { min-width:0; flex:1; accent-color:var(--cs-accent); height:32px; }
#cinema-study-concept .cs-motion-label > span:last-child { min-width:32px; text-align:right; }
#cinema-study-concept .cs-audio-options { display:flex; gap:10px; }
#cinema-study-concept .cs-audio-choice { border:1px solid var(--cs-line); border-radius:7px; background:var(--cs-paper); padding:8px 12px; font-size:12px; flex:1; }
#cinema-study-concept .cs-audio-choice[aria-pressed="true"] { background:var(--cs-accent); color:var(--cs-on-accent); }
#cinema-study-concept audio { width:100%; height:34px; display:block; margin-top:10px; }
#cinema-study-concept .cs-audio-status { display:block; font-size:11px; color:var(--cs-muted); margin-top:6px; }
#cinema-study-concept .cs-details-content { font-size:14px; line-height:1.8; }
#cinema-study-concept .cs-details-content h3 { font-size:13px; font-weight:500; color:var(--cs-accent); margin:22px 0 6px; }
#cinema-study-concept .cs-details-content p { margin:5px 0 12px; }
#cinema-study-concept .cs-details-content a { color:var(--cs-accent); overflow-wrap:anywhere; }
#cinema-study-concept .cs-details-note { color:var(--cs-muted); font-size:12px; }
#cinema-study-concept .cs-details-open { margin-top:18px; padding:9px 0; color:var(--cs-accent); font-size:12px; }
#cinema-study-concept .cs-route-cards { padding:0 0 15px; display:grid; gap:4px; }
#cinema-study-concept .cs-route-card { border:0; background:transparent; text-align:left; padding:10px 12px; border-radius:6px; font-size:13px; }
#cinema-study-concept .cs-route-card:hover { background:var(--cs-soft); }
#cinema-study-concept .cs-catalog-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
#cinema-study-concept .cs-catalog-heading h2 { margin:0; }
#cinema-study-concept .cs-route-close { width:32px; margin:0; }
#cinema-study-concept .cs-search-label { display:block; color:var(--cs-muted); font-size:12px; margin-bottom:7px; }
#cinema-study-concept .cs-search-field { display:flex; align-items:center; gap:4px; border:1px solid var(--cs-line); border-radius:8px; padding:3px 5px 3px 12px; background:var(--cs-paper); }
#cinema-study-concept .cs-catalog-search { width:100%; min-width:0; flex:1; border:0; padding:9px 0; background:transparent; color:var(--cs-ink); font:inherit; font-size:16px; }
#cinema-study-concept .cs-catalog-search::placeholder { color:var(--cs-muted); font-size:13px; }
#cinema-study-concept .cs-catalog-search::-webkit-search-cancel-button { display:none; }
#cinema-study-concept .cs-search-clear { flex:none; min-width:44px; min-height:44px; }
#cinema-study-concept .cs-route-status { color:var(--cs-muted); font-size:12px; line-height:1.6; margin:12px 0; }
#cinema-study-concept .cs-directory-section { border-top:1px solid var(--cs-line); }
#cinema-study-concept .cs-directory-heading { margin:0; font-weight:500; }
#cinema-study-concept .cs-directory-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; border:0; padding:16px 0; text-align:left; background:transparent; }
#cinema-study-concept .cs-directory-label { min-width:0; }
#cinema-study-concept .cs-directory-label strong { display:block; font-size:17px; font-weight:500; }
#cinema-study-concept .cs-directory-label > span { display:block; color:var(--cs-muted); font-size:12px; margin-top:4px; }
#cinema-study-concept .cs-directory-toggle svg, #cinema-study-concept .cs-topic-toggle svg { flex:none; width:16px; height:16px; }
#cinema-study-concept .cs-directory-toggle[aria-expanded="true"] > svg, #cinema-study-concept .cs-topic-toggle[aria-expanded="true"] > svg { transform:rotate(180deg); }
#cinema-study-concept .cs-director-topics { padding:0 0 10px 12px; }
#cinema-study-concept .cs-directory-topic-row { display:flex; align-items:center; gap:8px; }
#cinema-study-concept .cs-topic-resume { min-width:0; flex:1; border:0; padding:11px 0; text-align:left; background:transparent; }
#cinema-study-concept .cs-topic-resume strong { display:block; font-size:14px; font-weight:500; }
#cinema-study-concept .cs-topic-resume span { display:block; font-size:12px; color:var(--cs-muted); margin-top:4px; }
#cinema-study-concept .cs-topic-toggle { display:grid; place-items:center; flex:none; width:44px; height:44px; border:0; border-radius:6px; background:transparent; }
#cinema-study-concept .cs-topic-toggle:hover { background:var(--cs-soft); }
#cinema-study-concept .cs-route-cards { padding:0 0 8px; gap:2px; }
#cinema-study-concept .cs-route-card { display:flex; align-items:baseline; gap:10px; min-height:44px; line-height:1.7; }
#cinema-study-concept .cs-card-number { flex:none; color:var(--cs-muted); font-size:12px; font-variant-numeric:tabular-nums; }
#cinema-study-concept .cs-route-card[aria-current="true"], #cinema-study-concept .cs-search-result[aria-current="true"] { background:var(--cs-soft); color:var(--cs-accent); }
#cinema-study-concept .cs-search-result { display:block; width:100%; padding:14px 8px; border:0; border-top:1px solid var(--cs-line); background:transparent; text-align:left; }
#cinema-study-concept .cs-search-result strong { display:block; font-size:15px; font-weight:500; }
#cinema-study-concept .cs-search-result span, #cinema-study-concept .cs-search-result small { display:block; color:var(--cs-muted); font-size:12px; line-height:1.6; margin-top:4px; }
#cinema-study-concept .cs-search-pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
#cinema-study-concept .cs-search-pagination button { min-height:44px; }
#cinema-study-concept .cs-search-page { color:var(--cs-muted); font-size:12px; font-variant-numeric:tabular-nums; }
#cinema-study-concept .cs-search-empty { margin:20px 0; font-size:13px; line-height:1.8; color:var(--cs-muted); }
#cinema-study-concept .cs-answer dd { line-height:1.7; }
#cinema-study-concept .cs-rotator { transition-duration:240ms; }
@media(prefers-reduced-motion:reduce) { #cinema-study-concept .cs-rotator { transition:none; } }
@media(max-width:360px) { #cinema-study-concept .cs-top { padding:15px 16px; } #cinema-study-concept .cs-copy { padding-left:18px; padding-right:18px; } #cinema-study-concept .cs-tools { gap:0; } #cinema-study-concept .cs-kicker { display:none; } #cinema-study-concept .cs-hint { font-size:11px; } }
@media(pointer:coarse) { #cinema-study-concept button { min-height:44px; } #cinema-study-concept .cs-icon { min-height:32px; } #cinema-study-concept .cs-icon::after { content:""; position:absolute; inset:-6px; } #cinema-study-concept .cs-group-controls, #cinema-study-concept .cs-tools { gap:12px; } }
