/* Case illustrations depict behavior, with real sample imagery inside the interface. */
[hidden] { display:none !important; }
.case-scene { height:246px; position:relative; display:flex; justify-content:center; align-items:center; padding:20px 24px 42px; overflow:hidden; background:#f0f3ed; border-bottom:1px solid #e2e7dd; color:#34483e; pointer-events:none; }
.case-scene * { box-sizing:border-box; }
.case-scene img { object-fit:contain; }
.case-scene>div { width:100%; max-width:315px; }
.scene-caption { position:absolute; bottom:13px; left:12px; right:12px; text-align:center; font-size:11px; font-weight:500; color:#53675c; }
.scene-browser,.scene-sheet,.scene-review-list,.scene-chart,.scene-portal,.scene-product-detail,.scene-store-shell,.scene-loadmore,.scene-tabs { background:#fff; border:1px solid #d6dfd4; border-radius:7px; padding:12px; box-shadow:0 5px 16px #31473209; }
.scene-topline,.scene-address { display:flex; justify-content:space-between; gap:8px; font-size:9px; font-weight:600; margin-bottom:9px; white-space:nowrap; }
.scene-topline span,.scene-address span { font-weight:400; color:#78897c; }
.scene-address { font-size:8px; background:#f1f4ef; padding:5px 7px; border-radius:3px; }.scene-address span { color:#007b57; }
.scene-products { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.scene-products>div { min-width:0; }.scene-products img { height:64px; width:100%; background:#f7f6f2; border-radius:3px; }.scene-products i { display:block; height:3px; width:75%; background:#dce3d9; margin:6px 0 3px; }.scene-products small { font-size:8px; }
.scene-pager { display:flex; gap:6px; align-items:center; justify-content:center; margin-top:8px; font-size:9px; }.scene-pager>* { padding:3px 6px; border-radius:3px; background:#f3f5ef; }.scene-pager>b { background:#2b795b; color:white; }
.scene-sheet table { border-collapse:collapse; width:100%; font-size:9px; }.scene-sheet th,.scene-sheet td { padding:6px; border:1px solid #cddacb; text-align:center; }.scene-sheet th { background:#e5efe0; font-weight:500; }.scene-sheet td[colspan] { background:#f6eddd; }.scene-switch { display:flex; gap:6px; align-items:center; justify-content:end; font-size:9px; margin-top:9px; }.scene-switch i { width:22px; height:12px; border-radius:10px; background:#007b57; }.scene-switch i:after { content:''; display:block; width:8px; height:8px; border-radius:50%; background:#fff; margin:2px 0 0 12px; }
.case-scene.scene-dynamicdata { background:#f6eee5; }.scene-scroll-window { height:155px; position:relative; padding-right:18px; }.scene-scroll-list { display:grid; gap:6px; }.scene-product-row { display:flex; align-items:center; gap:10px; padding:5px 10px; border:1px solid #d6dfd4; border-radius:5px; background:white; height:47px; }.scene-product-row img { height:36px; width:35px; }.scene-product-row>div { flex:1; }.scene-product-row b { font-size:8px; display:block; letter-spacing:.6px; }.scene-product-row i { display:block; width:65%; height:4px; margin-top:5px; background:#dbe2d6; }.scene-product-row>span { font-size:8px; color:#72806b; }.scene-new { border-color:#84b29a; background:#f2faf2; }.scene-new>span { color:#267b52; }.scene-dynamicdata .scene-old { opacity:.32; transform:translateY(-8px); border-style:dashed; filter:grayscale(1); }.scene-dynamicdata .scene-old>span { color:#944c2e; font-weight:600; }.scene-dynamicdata .scene-old img { opacity:.25; }.scene-scrollbar { position:absolute; right:2px; top:0; bottom:0; width:4px; background:#dce4d7; border-radius:3px; }.scene-scrollbar i { display:block; height:35%; background:#94a98f; margin-top:28px; border-radius:3px; }
.scene-type1 { background:#edf0f6; }.scene-news>strong { font-size:11px; letter-spacing:1px; }.scene-news>div { padding:6px 0; border-bottom:1px solid #e5e7e3; }.scene-news b { display:block; font-size:9px; line-height:1.4; }.scene-news small { display:block; margin-top:3px; font-size:7px; color:#7c827b; }.scene-type1 .scene-browser { padding:9px 12px; }.scene-type1 .scene-pager { margin-top:5px; }
.scene-type2 { background:#f6f1e7; }.scene-review { border-bottom:1px solid #e8e8dc; padding:7px 0; }.scene-review>b { color:#ae8145; font-size:10px; }.scene-review small { color:#798274; margin-left:6px; font-size:8px; font-weight:400; }.scene-review p { font-size:8px; line-height:1.5; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin-top:3px; }.scene-page-groups { display:flex; justify-content:center; align-items:center; gap:12px; font-size:11px; letter-spacing:3px; margin-top:10px; }.scene-page-groups>span { color:#99a193; }.scene-page-groups>b { padding:5px 9px; border:1px solid #7aa589; border-radius:4px; background:#eef5eb; }.scene-page-groups>i { font-style:normal; }
.scene-type4 { background:#eeeaf3; }.scene-track { display:flex; align-items:center; gap:10px; margin:5px 0; }.scene-track>b { font-size:12px; font-variant-numeric:tabular-nums; color:#868292; }.scene-track>img { height:25px; width:25px; border-radius:3px; }.scene-track>span { font-size:9px; }.scene-track small { display:block; font-size:7px; color:#8b8794; margin-top:2px; }.scene-chart .scene-pager { justify-content:end; }
.scene-iframe,.scene-iframe_pagination { background:#eaf0f6; }.scene-portal-body { display:grid; grid-template-columns:2.4fr 1fr; gap:8px; }.scene-frame { position:relative; padding:21px 8px 8px; border:2px solid #779ccb; border-radius:4px; background:#f8fbff; }.scene-frame-label { position:absolute; top:4px; left:7px; font-size:8px; color:#476e9e; }.scene-frame>b { display:block; font-size:9px; line-height:1.5; padding:6px 0; border-bottom:1px solid #dce5ee; }.scene-ad { border-radius:3px; background:#f4f0e9; text-align:center; padding:8px 2px; }.scene-ad span { font-size:8px; letter-spacing:1px; }.scene-ad img { display:block; width:100%; height:70px; }.scene-detail-top { display:flex; gap:12px; align-items:center; margin-bottom:7px; }.scene-detail-top img { width:42px; height:46px; background:#f3f2ed; border-radius:3px; }.scene-detail-top b { font-size:9px; }.scene-detail-top small { display:block; font-size:8px; color:#7b8478; margin-top:6px; }.scene-product-detail .scene-frame p { font-size:9px; }.scene-product-detail .scene-pager { justify-content:end; }
.scene-shadow_products { background:#eae9f1; }.scene-store-shell { padding:9px; }.scene-component { position:relative; border:2px dashed #a393c0; border-radius:4px; padding:21px 8px 6px; background:#f7f5fb; }.scene-component .scene-frame-label { color:#7d639d; }.scene-component .scene-products img { height:45px; }.scene-component .scene-products small { display:none; }.scene-component .scene-pager { margin-top:6px; }
.scene-loadbutton { background:#eaf4ee; }.scene-loadmore .scene-products img { height:58px; }.scene-loadmore .scene-products small { display:none; }.scene-more-button { text-align:center; border:1px solid #3f9270; color:#267253; padding:6px; border-radius:4px; margin-top:8px; font-size:10px; }.scene-more-button span { margin-left:12px; color:#859583; font-size:8px; }.scene-added { display:flex; gap:6px; margin-top:8px; align-items:center; }.scene-added span { font-size:8px; color:#568264; }.scene-added i { height:12px; flex:1; background:#e6f2e4; border:1px dashed #a8c2a1; }
.scene-lazyloading { background:#f2eee8; }.scene-wait { display:flex; align-items:center; gap:12px; }.scene-skeleton,.scene-companies { background:white; border:1px solid #e1dfd6; border-radius:6px; padding:13px; flex:1; min-width:0; }.scene-skeleton i { display:block; height:10px; background:#eceee8; margin:12px 0; border-radius:2px; }.scene-skeleton span { font-size:8px; color:#8f9489; }.scene-clock { border:1px solid #adad8e; border-radius:50%; width:40px; height:40px; flex-shrink:0; text-align:center; padding-top:7px; font-size:10px; }.scene-clock small { font-size:7px; }.scene-companies b { display:block; font-size:9px; margin-top:10px; }.scene-companies small { display:block; font-size:7px; margin:5px 0 13px; color:#81917c; }
.scene-require_login { background:#f3ece9; }.scene-login { display:flex; gap:16px; align-items:center; }.scene-login>img { width:38%; height:135px; background:#fff; border:1px solid #e6ddd6; border-radius:5px; }.scene-login-states { flex:1; }.scene-login-states>div { background:white; border:1px solid #dfdcd2; border-radius:5px; padding:9px; }.scene-login-states b { font-size:9px; display:block; }.scene-lock { display:inline-block; color:#94866f; float:right; font-size:10px; }.scene-login-states i { height:5px; background:#d5d1c6; filter:blur(2px); display:block; margin:7px 0; }.scene-login-button { display:block; text-align:center; margin:6px auto; font-size:8px; color:#796452; }.scene-login-states .scene-unlocked { background:#f1f9ec; border-color:#a2bca0; }.scene-unlocked small { font-size:7px; display:block; margin-bottom:5px; color:#779071; }
.scene-device_type { background:#f4eee6; }.scene-devices { display:flex; align-items:center; justify-content:center; gap:16px; }.scene-desktop { background:white; border:5px solid #c5cabc; border-bottom-width:12px; padding:6px; width:60%; text-align:center; border-radius:6px; }.scene-desktop>span,.scene-phone>span { display:block; font-size:7px; letter-spacing:1px; color:#919783; }.scene-desktop img { height:67px; width:100%; }.scene-desktop small { font-size:7px; }.scene-phone { width:29%; max-width:80px; background:white; border:4px solid #5c7060; padding:12px 6px; border-radius:13px; text-align:center; }.scene-phone>div { margin-top:10px; font-size:8px; padding:10px 2px; background:#e6f0df; border:1px dashed #a1b295; }.scene-phone b { font-size:22px; display:block; margin:8px 0; }.scene-phone small { font-size:6px; }
.scene-popup-store { position:relative; padding:18px; border:1px solid #d0d8cb; background:#e8ecdf; border-radius:6px; }.scene-popup-store>.scene-products { opacity:.25; }.scene-overlay { position:absolute; inset:9px 20px; background:white; border:1px solid #d1d9ce; box-shadow:0 5px 20px #34473325; border-radius:6px; padding:20px 10px; text-align:center; }.scene-overlay>span { position:absolute; top:4px; right:9px; font-size:16px; color:#846944; }.scene-overlay small { font-size:8px; letter-spacing:1px; display:block; }.scene-overlay b { display:block; font-size:12px; margin:10px 0; }.scene-overlay i { font-style:normal; background:#edf0e6; padding:5px 12px; border-radius:3px; font-size:8px; }
.scene-reveal { display:flex; align-items:center; gap:16px; }.scene-house { position:relative; background:#fff; border:1px solid #d3dbcc; border-radius:6px; padding:12px; text-align:center; width:46%; }.scene-house svg { width:100%; height:70px; color:#82937a; }.scene-house b { font-size:10px; display:block; }.scene-house>span { position:absolute; right:-8px; bottom:14px; font-size:8px; background:#344e3b; color:white; padding:6px; border-radius:12px; }.scene-house-detail { flex:1; background:#fffdf4; border:1px solid #d7cda9; border-radius:5px; padding:14px; }.scene-house-detail b { font-size:11px; display:block; margin-bottom:10px; }.scene-house-detail>span { display:block; margin-top:8px; font-size:9px; }
.scene-letter-tabs { display:flex; gap:8px; padding-bottom:9px; border-bottom:1px solid #dce4d5; font-size:11px; }.scene-letter-tabs>* { padding:5px 8px; }.scene-letter-tabs>b { background:#deeccd; color:#356b2c; border-radius:3px; }.scene-tabs>div:not(.scene-letter-tabs) b { display:block; font-size:10px; padding:6px 0; font-weight:400; }.scene-tabs>small { display:block; font-size:8px; color:#7c8b72; border-top:1px solid #e5e9e0; padding-top:6px; }
.feature-pending:hover { transform:none; }.feature-card[hidden] { display:none; }
.feature-card:hover .scene-dynamicdata .scene-old,.feature-card:focus-visible .scene-dynamicdata .scene-old { animation:scene-disappear 2.8s infinite; }.feature-card:hover .scene-new,.feature-card:focus-visible .scene-new { animation:scene-arrive 2.8s infinite; }.feature-card:hover .scene-more-button { background:#e1f1e5; }
@keyframes scene-disappear { 0%,15% { opacity:1; transform:translateY(0); } 60%,100% { opacity:0; transform:translateY(-16px); } }
@keyframes scene-arrive { 0%,15% { opacity:.15; transform:translateY(9px); } 60%,100% { opacity:1; transform:translateY(0); } }
.catalog-group#extension { margin-top:0; }
.lesson-memory { display:flex; justify-content:space-between; align-items:center; gap:18px; padding-top:18px; font-size:12px; color:#527051; }
@media(max-width:760px) { .case-scene { height:246px; padding:18px 16px 38px; }.scene-address { font-size:7px; }.scene-topline { font-size:8px; }.scene-wait { gap:7px; }.scene-skeleton,.scene-companies { padding:9px; } }
@media(max-width:500px) { .case-scene { height:246px; padding-inline:30px; }.lesson-memory { align-items:flex-start; line-height:1.7; } }
@media(prefers-reduced-motion:reduce) { .case-scene * { animation:none !important; transition:none !important; } }

/* Optional lesson text is rendered before JavaScript; keep the exercise clear. */
.lesson-reference{max-width:1120px;margin:32px auto 56px;padding:0 24px;color:#52645b;font-size:14px;line-height:1.75}
.lesson-reference details{border-top:1px solid #dfe7e1;padding-top:18px}
.lesson-reference summary{cursor:pointer;font-weight:600;width:fit-content}
.lesson-reference p{max-width:780px;margin-top:12px}