/* Screen furniture follows the real Library, Your work settings, and course
   viewer. The file handoff is a diagram outside the app, not an app feature. */
.study-links { display: flex; align-items: center; gap: 24px; }
.study-links a { color: #8995a9; text-decoration: none; font-size: 12px; }
.study-links a:hover { color: #3e5e9b; }
.course-film { --course-accent: #6b8cff; }
.scene { position: absolute; inset: 0; }
.scene[hidden] { display: none !important; }
.teacher-side { position: absolute; width: 304px; height: 700px; padding: 25px 16px; }
.teacher-side .app-brand { padding-left: 6px; }
.lib-identity { margin: 31px 4px 15px; display: flex; align-items: center; gap: 9px; font-size: 15px; }
.lib-identity small { color: #728199; font-size: 12px; margin-left: auto; }
.lib-search { display: flex; color: #8997aa; padding: 2px 8px 12px; }
.lib-search .glyph svg { width: 17px; height: 17px; }
.lib-section-label { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #53637d; padding: 10px 10px 9px; }
.lib-section-label .glyph svg { width: 18px; height: 18px; }
.lib-section-label small { margin-left: auto; font-size: 12px; color: #8b98ad; }
.lib-section-label .fold { color: #9aa5b8; margin-left: 10px; }
.lib-collection { font-size: 12px; padding: 9px 0 5px 37px; color: #8290a5; }
.lib-item { display: flex; align-items: center; gap: 7px; border-radius: 8px; font-size: 13px; padding: 10px 12px 10px 46px; color: #65748d; white-space: nowrap; }
.lib-item.current { background: #e3e9f4; color: #2e436a; }
.lib-item .tiny-number { color: #9ba6b6; font-size: 11px; }
.asset-section { overflow: hidden; }
.asset-section .lib-section-label { padding-top: 7px; padding-bottom: 6px; }
.asset-item { font-size: 12px; color: #74829a; padding: 1px 12px 6px 39px; }
.library-glow { position: absolute; left: 9px; top: 141px; width: 286px; height: 236px; border: 1.5px solid #c6d3ed; border-radius: 12px; pointer-events: none; background: #eaf0ff1a; }
.teacher-window { left: 306px; width: 798px; }
.teacher-window .app-header { padding-inline: 20px; }
.teacher-window .mode-name { font-size: 14px; }
.teacher-window .document-title { font-size: 13px; }
.teacher-window .page-count { font-size: 12px; margin-right: 0; }
.teacher-pages { position: absolute; left: 24px; right: 24px; top: 134px; display: grid; grid-template-columns: repeat(3, 236px); gap: 18px; }
.teacher-pages .page-card { width: 236px; }
.teacher-pages .card-thumb { width: 234px; height: 220px; }
.teacher-pages .card-art { top: 30px; transform: scale(.293); }
.teacher-pages .card-info { padding: 16px 11px; font-size: 13px; }
.teacher-page-label { position: absolute; left: 25px; top: 95px; font-size: 14px; color: #8290a4; }
.teacher-context { position: absolute; bottom: 45px; left: 332px; color: #92a0b6; font-size: 13px; display: flex; align-items: center; gap: 10px; }
.teacher-context .glyph svg { width: 17px; height: 17px; }
.settings-stage { background: #f2f4f8; }
.settings-nav { position: absolute; top: 90px; left: 322px; width: 172px; color: #7a879b; }
.settings-nav .settings-group-name { margin: 12px 10px; color: #929caf; font-size: 12px; }
.settings-nav > div:not(.settings-group-name) { margin: 4px 0; padding: 11px; font-size: 14px; border-radius: 9px; }
.settings-nav .selected { background: #e3e9f4; color: #334968; }
.settings-pane { position: absolute; left: 510px; top: 16px; width: 594px; height: 668px; padding: 37px 35px; background: #fff; border: 1px solid #d8dee9; border-radius: 18px; }
.settings-pane h1 { margin: 0 0 13px; font-size: 26px; font-weight: 600; letter-spacing: -.025em; }
.settings-pane > p { margin: 0 0 31px; color: #8591a5; font-size: 14px; line-height: 1.7; }
.settings-pane h2 { font-size: 16px; font-weight: 600; margin: 0 0 10px; }
.settings-description { font-size: 13px; line-height: 1.75; color: #8490a3; }
.publish-card { margin-top: 20px; padding: 20px; border: 1px solid #e0e5ef; border-radius: 12px; }
.current-library { display: flex; align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid #e9edf4; }
.current-library small { color: #929cae; font-size: 11px; display: block; margin-bottom: 7px; }
.current-library strong { font-size: 17px; font-weight: 550; color: #415472; }
.current-library > span:last-child { margin-left: auto; font-size: 12px; color: #8b97ab; }
.save-group { padding-block: 19px; }
.save-group + .save-group { border-top: 1px solid #e9edf4; }
.save-group > small { color: #8190a5; font-size: 12px; display: block; margin-bottom: 11px; }
.save-actions { display: flex; gap: 9px; align-items: center; }
.fake-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; padding: 10px 13px; color: #596b87; background: #fff; border: 1px solid #dce3ee; border-radius: 8px; white-space: nowrap; }
.fake-button.primary { background: #2c3c56; color: white; border-color: #2c3c56; }
.fake-button.highlight { background: #edf2ff; color: #4467bd; border-color: #acbeeb; }
.save-group p { font-size: 12px; color: #91a0b5; line-height: 1.6; margin: 12px 0 0; }
.library-muted { opacity: .48; }
.file-scene { background: #f2f4f8; }
.file-eyebrow { position: absolute; top: 84px; left: 0; right: 0; text-align: center; color: #8092b1; font-size: 12px; letter-spacing: .15em; font-weight: 600; }
.file-heading { position: absolute; left: 0; right: 0; top: 122px; margin: 0; font-size: 39px; font-weight: 550; letter-spacing: -.045em; text-align: center; color: #324665; }
.file-note { position: absolute; top: 560px; left: 0; right: 0; text-align: center; color: #8796ae; font-size: 15px; }
.file-object { position: absolute; z-index: 7; width: 348px; height: 252px; left: 386px; top: 243px; background: #fff; border: 1px solid #d6dfef; border-radius: 22px; box-shadow: 0 18px 45px -22px #48649545; display: flex; flex-direction: column; align-items: center; justify-content: center; transform-origin: center; }
.file-object > .glyph svg { width: 52px; height: 52px; color: #7290d5; stroke-width: 1.2; }
.file-object h2 { margin: 19px 0 9px; font-size: 19px; font-weight: 550; color: #3a4f70; letter-spacing: -.02em; }
.file-object h2 span { color: #8b9aba; font-weight: 400; }
.file-object p { font-size: 13px; color: #8b99b0; margin: 0; }
.file-object .file-check { position: absolute; top: 17px; right: 18px; width: 23px; height: 23px; border-radius: 50%; background: #eaf5ed; color: #6b967a; display: grid; place-items: center; font-size: 13px; }
.packing-slips { position: absolute; left: 423px; top: 267px; width: 274px; height: 172px; }
.packing-slip { position: absolute; inset: 0; border: 1px solid #d8e1f1; border-radius: 13px; background: #fff; box-shadow: 0 3px 8px #6d84ac13; padding: 25px; }
.packing-slip small { font-size: 11px; letter-spacing: .08em; color: #8a9dbf; }
.packing-slip strong { display: block; font-size: 17px; font-weight: 550; color: #456080; margin-top: 15px; }
.packing-slip p { font-size: 12px; color: #9ba8ba; }
.handoff-line { position: absolute; top: 370px; left: 203px; width: 714px; height: 1px; background: #cbd7ea; }
.handoff-line::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid #a9bcdb; border-right: 1px solid #a9bcdb; transform: rotate(45deg); }
.handoff-end { position: absolute; top: 324px; width: 110px; text-align: center; }
.handoff-end.teacher { left: 95px; }
.handoff-end.students { right: 95px; }
.handoff-end .glyph { height: 83px; width: 83px; background: #eef2f9; border: 1px solid #dae3f0; border-radius: 22px; color: #7790b7; }
.handoff-end .glyph svg { width: 30px; height: 30px; stroke-width: 1.4; }
.handoff-end strong { margin-top: 17px; display: block; font-size: 14px; font-weight: 500; color: #6e829f; }
.student-scene { background: #f2f4f8; }
.viewer-side { position: absolute; left: 0; top: 0; bottom: 0; width: 286px; padding: 24px 15px; border-right: 1px solid #e0e6f0; }
.viewer-side .app-brand { font-weight: 620; font-size: 16px; padding-inline: 6px; }
.viewer-identity { display: flex; gap: 8px; align-items: center; margin: 32px 4px 20px; color: #6c7b93; font-size: 14px; }
.viewer-identity > .glyph svg { width: 20px; height: 20px; }
.viewer-identity strong { font-size: 12px; font-weight: 450; margin-left: 5px; overflow: hidden; white-space: nowrap; }
.viewer-search { height: 29px; padding-left: 8px; color: #8796ad; margin-bottom: 14px; }
.viewer-search .glyph svg { width: 18px; height: 18px; }
.viewer-collection { margin-top: 16px; }
.viewer-collection-label { display: flex; align-items: center; padding: 9px 9px; font-size: 13px; font-weight: 550; color: #7e8ca3; }
.viewer-collection-label small { margin-left: auto; margin-right: 12px; color: #9aa6b8; font-size: 11px; }
.viewer-row { position: relative; margin-left: 14px; padding: 14px 52px 14px 12px; border-radius: 11px; font-size: 13px; line-height: 1.65; color: #647791; }
.viewer-row.current { background: #e8ecf3; color: #30496e; font-weight: 550; }
.viewer-row.current::after { content: ''; position: absolute; top: 50%; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: #6b8cff; transform: translateY(-50%); }
.viewer-response { position: absolute; right: 29px; top: 50%; width: 15px; height: 15px; border: 1.4px solid #a8b2c2; border-radius: 50%; transform: translateY(-50%); }
.viewer-response.read { border-color: #81a28b; }
.viewer-response.read::after { content: ''; position: absolute; width: 6px; height: 3px; left: 3px; top: 3px; border-left: 1.5px solid #71967c; border-bottom: 1.5px solid #71967c; transform: rotate(-45deg); }
.viewer-work { position: absolute; left: 299px; right: 15px; top: 18px; bottom: 16px; overflow: hidden; }
.viewer-intro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lesson-space-mark { display: block; flex: 0 0 auto; width: 20px; height: 24px; background: #6b8cff; -webkit-mask: url('../../images/LSlogo.svg') center / contain no-repeat; mask: url('../../images/LSlogo.svg') center / contain no-repeat; }
.viewer-intro-mark { width: 51px; height: 59px; opacity: .9; margin-bottom: 28px; }
.viewer-intro h2 { font-size: 28px; font-weight: 570; letter-spacing: -.03em; margin: 0 0 20px; }
.viewer-intro p { font-size: 15px; line-height: 1.85; color: #8491a7; max-width: 350px; margin: 0 0 22px; }
.viewer-intro-actions { display: flex; gap: 12px; }
.viewer-intro-actions .fake-button { padding: 12px 17px; font-size: 14px; border-radius: 12px; }
.course-cover-illustration { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 27px; }
.course-title-illustration { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 598px; height: 365px; padding: 55px 50px; border: 1px solid #d8dee9; border-radius: 36px; background: white; box-shadow: 0 18px 50px #1a223310; text-align: center; }
.course-title-illustration > span { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #6b8cff; }
.course-title-illustration h1 { font-size: 65px; font-weight: 650; letter-spacing: -.045em; line-height: 1.05; margin: 23px 0 25px; }
.course-title-illustration p { color: #8290a4; font-size: 14px; margin: 0; }
.course-cover-illustration > p { font-size: 13px; color: #8a97ab; }
.viewer-lesson { position: absolute; inset: 0; }
.viewer-lesson-title { position: absolute; top: 13px; left: 20px; right: 20px; display: flex; justify-content: space-between; color: #7d8ca5; font-size: 13px; }
.viewer-page-surface { position: absolute; top: 83px; left: 3px; width: 800px; height: 520px; background: #fff; overflow: hidden; border-radius: 5px; }
.viewer-art { position: absolute; width: 800px; height: 520px; inset: 0; }
.viewer-toolbar { position: absolute; bottom: 4px; left: 10px; right: 10px; height: 46px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 6px; border-top: 1px solid #e0e6ef; color: #8592a8; font-size: 13px; }
.viewer-toolbar .toolbar-end { justify-self: end; }
.viewer-page-controls { display: flex; gap: 22px; align-items: center; }
.viewer-page-controls .glyph svg { width: 16px; height: 16px; }
.toolbar-tool { padding: 8px 12px; border-radius: 8px; }
.toolbar-tool.selected { background: #e4eaf5; color: #6177a2; }
.viewer-page-popup { position: absolute; bottom: 62px; left: 249px; width: 306px; z-index: 5; padding: 7px; background: #fff; border: 1px solid #dce3ee; border-radius: 14px; box-shadow: 0 7px 25px #37547a15; }
.viewer-page-popup span { display: block; padding: 12px 11px; font-size: 13px; color: #7a8aa3; border-radius: 8px; }
.viewer-page-popup span.selected { background: #edf2fb; color: #607ca8; }
.viewer-sketch-actions { position: absolute; top: 43px; right: 18px; display: flex; gap: 8px; color: #7a8fac; font-size: 11px; }
.viewer-sketch-actions span { padding: 5px 10px; border: 1px solid #dae2ef; border-radius: 7px; }
.file-picker-veil { position: absolute; inset: 0; z-index: 9; background: #60728e22; }
.file-picker { position: absolute; left: 280px; top: 165px; width: 592px; background: #fff; border: 1px solid #d7e0ee; border-radius: 13px; box-shadow: 0 28px 70px -15px #2c456646; overflow: hidden; }
.file-picker-head { padding: 15px 21px; font-size: 14px; color: #586d8c; border-bottom: 1px solid #e8edf5; }
.file-picker-path { padding: 14px 23px; background: #f7f9fc; font-size: 12px; color: #8e9bb0; border-bottom: 1px solid #e8edf5; }
.file-picker-list { height: 119px; padding: 20px; }
.file-picker-row { padding: 14px; display: flex; align-items: center; gap: 12px; border-radius: 6px; background: #edf2ff; color: #5978b4; font-size: 14px; }
.file-picker-row .glyph svg { width: 21px; height: 21px; }
.file-picker-footer { padding: 15px 20px; display: flex; align-items: center; gap: 10px; justify-content: flex-end; border-top: 1px solid #e9eef5; }
.file-picker-footer small { margin-right: auto; color: #9aa6b8; font-size: 11px; }
.diagram-document { position: absolute; inset: 0; background: white; }
.diagram-heading { position: absolute; top: 29px; left: 37px; font-size: 27px; letter-spacing: -.03em; font-weight: 550; color: #354c72; }
.diagram-subtitle { position: absolute; top: 70px; left: 38px; font-size: 15px; color: #8596ae; }
.orbit-svg { position: absolute; top: 110px; left: 190px; width: 420px; height: 344px; overflow: visible; }
.orbit-svg text { font-family: var(--font-body); font-size: 15px; }
.diagram-values { position: absolute; left: 22px; top: 133px; width: 149px; padding: 13px; border: 1px solid #e3e9f3; border-radius: 12px; background: #f9fbff; }
.diagram-values:not(.is-open) { width: 104px; }
.diagram-values > span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #6981a4; }
.diagram-values .glyph svg { width: 14px; height: 14px; }
.diagram-value-label { margin-top: 20px; display: flex; justify-content: space-between; font-size: 12px; color: #8493aa; }
.diagram-range { position: relative; height: 4px; background: #dce5f5; border-radius: 3px; margin-top: 15px; }
.diagram-range .angle-knob { width: 15px; height: 15px; top: -5px; }
.diagram-legend { position: absolute; right: 31px; bottom: 22px; font-size: 12px; color: #8290a7; }
.diagram-zoom { position: absolute; left: 22px; bottom: 19px; display: flex; gap: 16px; align-items: center; font-size: 12px; color: #8b98ad; }
.flashcard-document { position: absolute; inset: 0; padding: 24px 48px; }
.flashcard-document > small { font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: #879bbd; }
.flashcard-document h1 { font-size: 25px; font-weight: 580; letter-spacing: -.035em; margin: 11px 0 0; color: #3a5075; }
.recall-card { position: absolute; left: 95px; top: 114px; width: 610px; height: 283px; perspective: 1200px; }
.recall-inner { position: absolute; inset: 0; transform-style: preserve-3d; }
.recall-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 37px 52px; border: 1px solid #d8e2f5; border-radius: 24px; background: #f9fbff; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; box-shadow: 0 10px 25px -20px #3868a73b; }
.recall-back { transform: rotateY(180deg); background: #eef4ff; }
.recall-face small { position: absolute; top: 20px; left: 24px; color: #92a2bd; font-size: 12px; }
.recall-face strong { color: #436087; font-size: 28px; font-weight: 500; line-height: 1.4; letter-spacing: -.025em; }
.recall-face em { position: absolute; bottom: 21px; font-size: 12px; font-style: normal; color: #95a4ba; }
.recall-nav { position: absolute; bottom: 34px; left: 95px; right: 95px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #8596b0; }
.recall-nav .fake-button { font-size: 12px; padding: 8px 15px; }
.recall-nav .muted { opacity: .4; }
/* The learner-facing viewer is a separate destination from the light authoring
   spaces above. Keep authored lesson pages bright inside a darker viewer shell. */
.student-scene { background: #1d1e23; color: #e7e9ee; }
.student-scene .viewer-side { background: #131418; border-right-color: #33353c; }
.student-scene .lesson-space-mark { background: #6b8cff; }
.student-scene .viewer-identity,
.student-scene .viewer-search,
.student-scene .viewer-collection-label,
.student-scene .viewer-row,
.student-scene .sidebar-bottom { color: #a2a7b2; }
.student-scene .viewer-identity strong { color: #e7e9ee; }
.student-scene .viewer-collection-label small { color: #7d8390; }
.student-scene .viewer-row.current { background: #33353c; color: #e7e9ee; }
.student-scene .viewer-response { border-color: #646b79; }
.student-scene .viewer-response.read { border-color: #66d994; }
.student-scene .viewer-response.read::after { border-color: #66d994; }
.student-scene .viewer-work { background: #1d1e23; }
.student-scene .viewer-intro p { color: #a2a7b2; }
.student-scene .viewer-intro .fake-button { background: #292b31; border-color: #444851; color: #e7e9ee; }
.student-scene .course-cover-illustration { background: #1d1e23; }
.student-scene .course-title-illustration { border-color: #33353c; background: #131418; box-shadow: 0 18px 50px #0008; }
.student-scene .course-title-illustration > span { color: #8ea6ff; }
.student-scene .course-title-illustration h1 { color: #e7e9ee; }
.student-scene .course-title-illustration p,
.student-scene .course-cover-illustration > p { color: #a2a7b2; }
.student-scene .viewer-lesson-title { color: #a2a7b2; }
.student-scene .viewer-toolbar { border-top-color: #33353c; color: #a2a7b2; }
.student-scene .toolbar-tool.selected { background: #33353c; color: #c4ceff; }
.student-scene .viewer-page-popup { background: #131418; border-color: #33353c; box-shadow: 0 7px 25px #0009; }
.student-scene .viewer-page-popup span { color: #a2a7b2; }
.student-scene .viewer-page-popup span.selected { background: #33353c; color: #d6ddff; }
.student-scene .viewer-sketch-actions { color: #a2a7b2; }
.student-scene .viewer-sketch-actions span { border-color: #444851; background: #292b31; }
.student-scene .file-picker-veil { background: #0008; }
.student-scene .file-picker { background: #131418; border-color: #33353c; box-shadow: 0 28px 70px -15px #000; color: #e7e9ee; }
.student-scene .file-picker-head { color: #e7e9ee; border-color: #33353c; }
.student-scene .file-picker-path { background: #1d1e23; color: #a2a7b2; border-color: #33353c; }
.student-scene .file-picker-row { background: #292b31; color: #c4ceff; }
.student-scene .file-picker-footer { border-color: #33353c; }
.student-scene .file-picker-footer small { color: #7d8390; }
.course-film .cursor { z-index: 30; }
.course-film .click-ring { z-index: 29; }
.course-film .scene, .file-object, .packing-slip { will-change: transform, opacity; }
.course-chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .study-links { gap: 12px; } .study-links a { font-size: 12px; } .chapters { gap: 0; flex-wrap: wrap; } .chapters button { padding: 9px 8px; font-size: 12px; } .caption p { font-size: 15px; } }