/* Illustrated cards share October's ink frames, paper tones, and quiet motion.
   Each scene is decorative HTML, kept separate from the working Lantern demo. */
.ln-grid { --ln-ink: #282d27; display: grid; gap: 22px; margin-top: 46px; }
.ln-grid--steps, .ln-grid--details { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ln-grid--features { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ln-card { --panel: polygon(0 0, 100% 0, 100% 100%, 0 100%); min-width: 0; padding: 1.5px; background: var(--ln-ink); clip-path: var(--panel); }
.ln-card__inner { display: flex; flex-direction: column; height: 100%; background: #fff; clip-path: var(--panel); }
.ln-card__copy { flex: 1; padding: 25px 27px 29px; }
.ln-card__copy h3 { margin: 0 0 12px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.12; letter-spacing: -.045em; font-weight: 600; text-wrap: balance; }
.ln-card__copy p { margin: 0; color: #606257; font-size: 14px; line-height: 1.7; }
.ln-step-number { display: block; margin-bottom: 13px; color: #a3633a; font: 11px ui-monospace, monospace; letter-spacing: .08em; }
.ln-grid--steps .ln-card__copy h3, .ln-grid--details .ln-card__copy h3 { font-size: 23px; }
.ln-grid--steps .ln-card__copy p, .ln-grid--details .ln-card__copy p { font-size: 13px; }
.ln-card--find { --panel: polygon(0 0, 100% 0, 96% 100%, 0 100%); }
.ln-card--notice { --panel: polygon(4% 0, 100% 0, 96% 100%, 0 100%); }
.ln-card--reply { --panel: polygon(4% 0, 100% 0, 100% 100%, 0 100%); }
.ln-card--point { grid-column: span 7; --panel: polygon(0 0, 100% 0, 96% 100%, 0 100%); }
.ln-card--app { grid-column: span 5; --panel: polygon(5% 0, 100% 0, 100% 100%, 0 100%); }
.ln-card--model { grid-column: span 5; --panel: polygon(0 0, 96% 0, 100% 100%, 0 100%); }
.ln-card--screen { grid-column: span 7; --panel: polygon(0 0, 100% 0, 100% 100%, 4% 100%); }
.ln-card--bus, .ln-card--tools { grid-column: span 6; }
.ln-card--voice { --panel: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); }
.ln-card--point .ln-card__copy { padding-right: 46px; }
.ln-card--screen .ln-card__copy { padding-left: 46px; }
.ln-scene { position: relative; flex-shrink: 0; height: 320px; overflow: hidden; container-type: inline-size; color: #353d30; font-size: 12px; line-height: 1.4; background: #eeeee7; }
.ln-grid--steps .ln-scene { height: 255px; }
.ln-grid--details .ln-scene { height: 225px; }
.ln-scene svg { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.ln-scene img { flex-shrink: 0; width: 23px; height: 23px; object-fit: contain; }
.ln-scene .ln-mascot { width: 35px; height: 35px; }
.ln-scene-label { position: absolute; top: 18px; left: 7%; right: 7%; color: #767b6a; font: 10px/1.5 ui-monospace, monospace; }
.ln-dots { display: inline-flex; gap: 4px; flex-shrink: 0; }
.ln-dots i { width: 5px; height: 5px; border-radius: 50%; background: #eb816d; }
.ln-dots i:nth-child(2) { background: #e7bb6c; }
.ln-dots i:nth-child(3) { background: #83b38a; }
.ln-agent { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ln-agent img { width: 18px; height: 18px; }
.ln-window { overflow: hidden; border: 1px solid #899181; border-radius: 8px; background: #fffefa; box-shadow: 0 5px 0 #4c57401a, 0 17px 28px -20px #2b34285c; }
.ln-window__bar { display: flex; align-items: center; gap: 10px; min-height: 33px; padding: 8px 11px; border-bottom: 1px solid #dfe2d8; color: #858877; font-size: 9px; }
.ln-window__bar > span:last-child { min-width: 0; }
.ln-window__body { padding: 15px; }
.ln-window--dark { border-color: #394038; background: #232927; color: #edf0e8; box-shadow: 0 5px 0 #41473720, 0 17px 28px -20px #2b342880; }
.ln-window--dark .ln-window__bar { background: #303734; border-color: #434b43; color: #c8d0c4; }
.ln-code { font: clamp(9px, 3cqw, 11px)/1.8 ui-monospace, SFMono-Regular, monospace; white-space: nowrap; }
.ln-code + .ln-code { margin-top: 5px; }
.ln-green { color: #a9c8a6; }
.ln-note { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #667653; }
.ln-note svg { width: 14px; height: 14px; }
.ln-scene--find, .ln-scene--point, .ln-scene--edge { background-image: radial-gradient(#b8bcaf .7px, transparent .8px); background-size: 17px 17px; }
.ln-find-first { position: absolute; top: 48px; left: 6%; width: 82%; transform: rotate(-3deg); }
.ln-find-second { position: absolute; top: 111px; right: 5%; width: 80%; transform: rotate(2deg); }
.ln-find-first .ln-window__body, .ln-find-second .ln-window__body { padding: 10px 13px; }
.ln-found { position: absolute; left: 9%; right: 7%; bottom: 12px; display: flex; align-items: center; gap: 5px; font-size: 10px; color: #6b705e; }
.ln-found > svg { margin-left: auto; width: 14px; }
.ln-scene--notice { background: #f5ebda; }
.ln-scene--notice .ln-scene-label { font-size: 9px; text-align: center; }
.ln-beacon { position: absolute; width: 88px; height: 88px; top: 44px; left: calc(50% - 44px); display: grid; place-items: center; }
.ln-beacon .ln-mascot { position: relative; width: 81px; height: 81px; filter: drop-shadow(0 5px 8px #97712233); }
.ln-beacon-halo { position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(#eabc6599, #eabc6500 70%); }
.ln-beacon b { position: absolute; bottom: 5px; right: 0; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #8d661d; border-radius: 50%; background: #f7ce76; color: #4c371a; font-size: 12px; }
.ln-notice { position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 13px; width: 81%; border: 1px solid #a79673; border-radius: 8px; background: #fffdf6; box-shadow: 0 4px 0 #d8c9ab80; }
.ln-notice--one { top: 136px; left: 6%; }
.ln-notice--two { top: 192px; right: 6%; background: #fbf5e8; }
.ln-notice strong, .ln-notice span { display: block; }
.ln-notice strong { font-size: 10px; font-weight: 600; }
.ln-notice span { margin-top: 3px; font-size: 10px; color: #82795f; }
.ln-notice i { margin-left: auto; width: 6px; height: 6px; border-radius: 50%; background: #d7a444; }
.ln-scene--reply { background: #edf1e9; }
.ln-reply-window { position: absolute; width: 84%; top: 19px; left: 9%; transform: rotate(-2deg); }
.ln-reply-window .ln-window__body { padding: 10px 12px; }
.ln-question p { font-size: 12px; margin-top: 8px; }
.ln-reply-bubble { margin: 12px 0 13px 12px; padding: 10px; background: #e5ecd9; border: 1px solid #b6c1a5; border-radius: 7px 2px 7px 7px; color: #526345; font-size: 10px; }
.ln-compose { display: flex; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid #e1e3d8; font-size: 9px; color: #868b7a; }
.ln-compose > span:first-child { margin-right: auto; }
.ln-compose > svg { width: 14px; }
.ln-send { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; background: #bd6b32; border-radius: 5px; color: white; }
.ln-send svg { width: 15px; }
.ln-reply-sent { position: absolute; bottom: 13px; left: 12%; }
.ln-point-window { position: absolute; top: 46px; left: 7%; width: 64%; transform: rotate(-2deg); }
.ln-point-window .ln-window__body { padding: 15px 18px 18px; }
.ln-shop > span { color: #8d886d; font: 8px ui-monospace, monospace; letter-spacing: .13em; }
.ln-shop h4 { margin: 10px 0 16px; font: 23px/1.15 Georgia, serif; letter-spacing: -.045em; }
.ln-shop-item { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 11px; }
.ln-shop-item > i { position: relative; width: 30px; height: 32px; border: 1px solid #aba381; border-radius: 2px 2px 5px 5px; background: #e1d9bc; }
.ln-shop-item > i::before { content: ''; position: absolute; left: 8px; top: -6px; width: 10px; height: 10px; border: 1px solid #aba381; border-bottom: 0; border-radius: 8px 8px 0 0; }
.ln-shop-item small { display: block; margin-top: 3px; color: #989781; font-size: 9px; }
.ln-target { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 9px 11px; background: #778765; border: 1px solid #5c704b; outline: 1px dashed #c98549; outline-offset: 5px; color: #fff; font-size: 10px; }
.ln-target svg { width: 13px; }
.ln-cursor { position: absolute; z-index: 2; display: flex; align-items: flex-start; color: #ce7b38; filter: drop-shadow(0 2px 1px #0002); }
.ln-cursor .ln-pointer { width: 25px; height: 29px; }
.ln-cursor b { margin: 22px 0 0 -6px; padding: 3px 7px; border-radius: 4px; background: #ce7b38; color: white; font-size: 10px; font-weight: 500; white-space: nowrap; }
.ln-cursor--point { left: 54%; top: 212px; }
.ln-prompt { position: absolute; right: 6%; top: 155px; width: 48%; display: flex; align-items: center; gap: 6px; padding: 12px 10px; border: 1px solid #b59e77; border-radius: 8px; background: #fffdf7; box-shadow: 0 5px 0 #d7ceb7; font-size: 12px; }
.ln-key-hint { display: flex; gap: 4px; align-items: center; position: absolute; bottom: 17px; left: 8%; color: #868675; font-size: 9px; }
.ln-key-hint kbd { display: grid; place-items: center; min-width: 19px; height: 20px; border: 1px solid #c5c7b6; border-radius: 3px; background: #fbfbf4; font-family: inherit; font-size: 10px; }
.ln-key-hint > kbd:last-of-type { margin-right: 5px; }
.ln-scene--app { background: #eeedf1; }
.ln-app-window { position: absolute; left: 9%; right: 5%; top: 25px; transform: rotate(2deg); }
.ln-app-window .ln-window__body { padding: 11px; }
.ln-film { display: flex; justify-content: center; align-items: center; height: 99px; position: relative; border-radius: 3px; background: linear-gradient(155deg, #ded3b5 0%, #8caa9b 45%, #5a7b6b 46%, #446553 70%, #2f483d 71%); }
.ln-play { font-size: 31px; color: #fffdecd9; }
.ln-film > span:last-child { position: absolute; bottom: 6px; left: 8px; font-size: 8px; color: white; }
.ln-timeline { display: flex; gap: 4px; height: 30px; position: relative; margin-top: 9px; }
.ln-timeline > i { flex: 1; border: 1px solid #788d9b; border-radius: 2px; background: repeating-linear-gradient(90deg, #627d89 0 20px, #7e9a9d 20px 22px); }
.ln-timeline > i:nth-child(2) { background: #9387a3; border-color: #aca0bb; }
.ln-playhead { position: absolute; width: 2px; height: 40px; top: -5px; left: 35%; background: #e8c47f; }
.ln-task-sheet { position: absolute; width: 76%; bottom: 20px; left: 7%; padding: 14px 15px; border: 1px solid #8d909c; border-radius: 8px; background: #fffefa; box-shadow: 0 5px 0 #cac9d5; }
.ln-small-label { display: flex; justify-content: space-between; align-items: center; color: #8d8b84; font: 9px ui-monospace, monospace; letter-spacing: .06em; }
.ln-small-label b { font-size: 14px; font-weight: 400; }
.ln-task-sheet > strong { display: block; margin: 9px 0 12px; font-size: clamp(13px, 3.7cqw, 17px); line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
.ln-context-chip { display: flex; align-items: center; gap: 5px; font-size: 9px; color: #8d8674; }
.ln-context-chip > i { display: block; width: 6px; height: 7px; border: 1px solid #a49b7f; }
.ln-task-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 9px; border-top: 1px solid #e6e1d6; }
.ln-scene--model { background: #f4eddf; }
.ln-provider-rail { position: absolute; top: 22px; left: 10%; right: 10%; display: flex; align-items: center; justify-content: center; gap: 19px; }
.ln-provider-rail > span { font-size: 9px; color: #91866e; white-space: nowrap; }
.ln-model-menu { position: absolute; width: 72%; top: 66px; left: 13%; background: #fffefa; border: 1px solid #a69b85; border-radius: 8px; box-shadow: 0 5px 0 #ded1b9; transform: rotate(-2deg); overflow: hidden; }
.ln-model-heading { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; border-bottom: 1px solid #e5e0d5; }
.ln-model-heading > span:last-child { color: #989180; font-size: 9px; }
.ln-model-row { display: flex; align-items: center; justify-content: space-between; height: 33px; padding: 0 14px; color: #73705f; font-size: 12px; }
.ln-model-row i { width: 9px; height: 9px; border: 1px solid #d1cdbd; border-radius: 50%; }
.ln-model-selected { background: #f3e8d3; color: #955c2d; }
.ln-model-selected svg { width: 14px; }
.ln-model-custom { padding: 10px 14px; border-top: 1px solid #e5e0d5; color: #96907f; font-size: 10px; }
.ln-cursor--model { right: 14%; top: 154px; }
.ln-scene--screen { background: #eaf0e9; }
.ln-screen-window { position: absolute; top: 36px; left: 8%; width: 74%; transform: rotate(2deg); }
.ln-screen-window .ln-window__body { padding: 0; }
.ln-screen-page { display: grid; grid-template-columns: 28% 1fr; height: 178px; }
.ln-screen-sidebar { background: #e7ebdf; border-right: 1px solid #d2d9c7; padding: 25px 15px; }
.ln-screen-sidebar i { display: block; height: 5px; border-radius: 3px; background: #c7d1bd; margin-bottom: 11px; }
.ln-screen-sidebar i:nth-child(2) { width: 70%; }
.ln-screen-content { padding: 24px 22px; }
.ln-screen-content > span { font-size: 16px; letter-spacing: -.03em; }
.ln-screen-content > i { display: block; width: 80%; height: 6px; background: #e0e6d6; margin-top: 12px; border-radius: 2px; }
.ln-screen-content > i + i { width: 60%; margin-top: 7px; }
.ln-selection { display: flex; padding: 9px; border: 1px dashed #b4874f; margin-top: 16px; outline: 4px solid #ddcda640; }
.ln-selection > span { width: 100%; padding: 5px; text-align: center; border-radius: 2px; background: #91a17f; color: white; font-size: 10px; }
.ln-snapshot { position: absolute; display: flex; align-items: center; gap: 11px; bottom: 39px; right: 7%; width: 66%; padding: 12px; background: #fffefa; border: 1px solid #98a588; border-radius: 8px; box-shadow: 0 4px 0 #ccd5c4; }
.ln-snapshot-thumb { display: grid; place-items: center; flex-shrink: 0; width: 55px; height: 42px; padding: 9px 5px; border: 6px solid #e6eadf; border-radius: 2px; background: #91a17f; color: white; font-size: 8px; }
.ln-snapshot strong, .ln-snapshot span { display: block; }
.ln-snapshot strong { font-size: 11px; font-weight: 600; }
.ln-snapshot span { font-size: 9px; color: #88907c; margin-top: 4px; }
.ln-snapshot > svg { margin-left: auto; color: #798b65; width: 15px; }
.ln-scene-foot { position: absolute; bottom: 15px; left: 9%; right: 7%; color: #869079; font-size: 9px; }
.ln-scene--bus { background: #f0f1e9; padding: 22px 7% 18px; }
.ln-bus-title { display: flex; align-items: center; gap: 7px; color: #707863; font: 10px ui-monospace, monospace; margin-bottom: 20px; }
.ln-bus-title > span:last-child { margin-left: auto; font-family: inherit; font-size: 9px; color: #909681; }
.ln-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #8a9e72; box-shadow: 0 0 0 3px #8a9e7217; }
.ln-message { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; }
.ln-message > img { width: 28px; height: 28px; margin-top: 5px; padding: 4px; background: #fffef8; border: 1px solid #d1d6c5; border-radius: 6px; }
.ln-message > div { padding: 11px 13px; border: 1px solid #a2aa95; border-radius: 2px 8px 8px; background: #fffef9; box-shadow: 0 3px 0 #d7dbcd; }
.ln-message strong { font-size: 10px; font-weight: 600; }
.ln-message strong > span { margin-left: 7px; color: #929582; font-size: 9px; font-weight: 400; }
.ln-message p { margin-top: 7px; font-size: clamp(11px, 2.5cqw, 13px); }
.ln-message--two { margin-left: 17px; }
.ln-message--two > div { background: #f8f4e5; border-color: #b5b08f; box-shadow: 0 3px 0 #dfdcc5; }
.ln-message--three p { display: flex; align-items: center; gap: 5px; color: #708355; }
.ln-message--three svg { width: 13px; height: 13px; }
.ln-scene--tools { background: #eeedf1; }
.ln-tool-stack { position: absolute; top: 58px; left: 12%; right: 12%; transform: rotate(-2deg); }
.ln-tool-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: #fffefa; border: 1px solid #a4a2ab; border-radius: 7px; box-shadow: 0 4px 0 #d0cdd8; }
.ln-tool-row + .ln-tool-row { margin-top: 10px; }
.ln-tool-row:nth-child(2) { transform: translateX(10px); }
.ln-tool-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ddd9e3; border-radius: 6px; background: #f0edf2; color: #8d819b; font: 16px ui-monospace, monospace; }
.ln-tool-row strong, .ln-tool-row div > span { display: block; }
.ln-tool-row strong { font-size: 12px; font-weight: 600; }
.ln-tool-row div > span { margin-top: 3px; color: #8e8994; font-size: 9px; }
.ln-tool-row > svg { margin-left: auto; color: #8c9c77; width: 15px; }
.ln-tool-note { position: absolute; bottom: 15px; left: 12%; right: 8%; font-size: 9px; color: #867d8d; }
.ln-scene--local { background: #ecf0e6; }
.ln-laptop { position: absolute; top: 25px; left: 18%; width: 64%; transform: rotate(-3deg); }
.ln-laptop-screen { height: 138px; padding: 12px; border: 5px solid #59624e; border-radius: 8px 8px 2px 2px; background: #f9faf1; }
.ln-lock { display: grid; place-items: center; width: 44px; height: 44px; margin: 8px auto 10px; border: 1px solid #c6d0b4; border-radius: 12px; background: #e9efd9; color: #829268; }
.ln-lock svg { width: 23px; height: 23px; }
.ln-laptop-screen > span:last-child { display: block; color: #8a927b; font-size: 8px; text-align: center; }
.ln-laptop-base { height: 8px; margin: 0 -12px; border: 1px solid #919985; border-radius: 0 0 50% 50%; background: #bfc6b3; box-shadow: 0 10px 12px #6873531a; }
.ln-local-note { position: absolute; bottom: 24px; left: 0; width: 100%; justify-content: center; }
.ln-scene--voice { background: #f4ebdb; }
.ln-shortcut { position: absolute; display: flex; align-items: center; justify-content: center; gap: 8px; top: 27px; width: 100%; }
.ln-shortcut kbd { display: grid; place-items: center; width: 43px; height: 43px; border: 1px solid #b8ab91; border-radius: 7px; background: #fffdf5; color: #95805d; box-shadow: 0 4px 0 #d6c7aa; font-family: inherit; font-size: 18px; }
.ln-shortcut > kbd:last-child { width: 79px; font-size: 10px; }
.ln-voice { position: absolute; top: 95px; left: 12%; right: 12%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid #b9a480; border-radius: 9px; background: #fffcf5; box-shadow: 0 3px 0 #dacfba; }
.ln-mic { display: grid; place-items: center; width: 29px; height: 29px; background: #f4e5c7; border-radius: 50%; color: #af8e52; }
.ln-mic svg { width: 14px; }
.ln-voice > span:last-child { color: #9b886a; font-size: 9px; }
.ln-wave { display: flex; align-items: center; gap: 3px; height: 30px; }
.ln-wave i { display: block; width: 3px; height: 14px; border-radius: 2px; background: #cba56c; }
.ln-wave i:nth-child(3n) { height: 25px; }
.ln-wave i:nth-child(3n + 1) { height: 8px; }
.ln-voice-text { position: absolute; top: 174px; width: 100%; text-align: center; color: #8b795b; font: italic 15px Georgia, serif; }
.ln-edge-window { position: absolute; width: 71%; top: 31px; left: 10%; transform: rotate(-2deg); }
.ln-edge-window .ln-window__body { padding: 19px 15px 22px; }
.ln-editor-lines i { display: block; width: 73%; height: 5px; background: #788f7c; border-radius: 2px; margin-bottom: 9px; }
.ln-editor-lines i:nth-child(2n) { width: 51%; margin-left: 13px; background: #a19a79; }
.ln-editor-lines i:nth-child(3) { width: 84%; }
.ln-edge-dock { display: flex; align-items: center; flex-direction: column; position: absolute; top: 49px; right: 9%; width: 46px; padding: 6px 4px 10px; border: 1px solid #939b87; border-radius: 26px; background: #f7f8ed; box-shadow: 0 5px 14px #33462422; gap: 8px; }
.ln-edge-dock > span { position: absolute; top: 28px; right: 2px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #eabe6c; color: #604817; font-size: 9px; }
.ln-edge-dock > i { height: 1px; width: 20px; background: #d6d9ca; }
.ln-edge-dock > b { font-size: 18px; font-weight: 400; line-height: 1; color: #989b87; }
.ln-edge-dock > svg { width: 14px; height: 14px; color: #989b87; }
.ln-edge-note { position: absolute; bottom: 20px; left: 11%; right: 6%; }
/* These finite demonstrations start in view, pause offscreen, and settle in <5s. */
[data-card-motion='playing'] .ln-arrive, [data-card-motion='paused'] .ln-arrive { animation: ln-arrive 550ms 350ms cubic-bezier(.22, 1, .36, 1) both; }
[data-card-motion] .ln-notice--two { animation-delay: 1050ms; }
[data-card-motion] .ln-found, [data-card-motion] .ln-reply-sent { animation-delay: 1550ms; }
[data-card-motion] .ln-message--two { animation-delay: 1100ms; }
[data-card-motion] .ln-message--three { animation-delay: 2050ms; }
[data-card-motion='playing'] .ln-cursor--point, [data-card-motion='paused'] .ln-cursor--point { animation: ln-point-cursor 4200ms cubic-bezier(.45, 0, .2, 1) both; }
[data-card-motion='playing'] .ln-cursor--model, [data-card-motion='paused'] .ln-cursor--model { animation: ln-model-cursor 3500ms cubic-bezier(.45, 0, .2, 1) both; }
[data-card-motion='playing'] .ln-playhead, [data-card-motion='paused'] .ln-playhead { animation: ln-playhead 3000ms 250ms ease-out both; }
[data-card-motion='playing'] .ln-wave i, [data-card-motion='paused'] .ln-wave i { animation: ln-wave 650ms ease-in-out 4 alternate; }
[data-card-motion] .ln-wave i:nth-child(2n) { animation-delay: 180ms; }
[data-card-motion] .ln-wave i:nth-child(3n) { animation-delay: 330ms; }
[data-card-motion='playing'] .ln-glow, [data-card-motion='paused'] .ln-glow { animation: ln-glow 1400ms ease-in-out 2; }
[data-card-motion='paused'] *, [data-card-motion='paused'] *::before, [data-card-motion='paused'] *::after { animation-play-state: paused !important; }
@keyframes ln-arrive { from { opacity: .15; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ln-point-cursor { 0%, 12% { transform: translate(23px, 15px) rotate(4deg); } 40%, 70% { transform: translate(-16px, -6px) rotate(-4deg); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes ln-model-cursor { 0%, 12% { transform: translate(8px, -30px); } 50%, 85% { transform: translate(-9px, 2px); } 100% { transform: translate(0, 0); } }
@keyframes ln-playhead { from { transform: translateX(-38px); } to { transform: translateX(0); } }
@keyframes ln-wave { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes ln-glow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.92); } }
@media (max-width: 1100px) {
  .ln-grid { gap: 18px; }
  .ln-grid--features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ln-card { --panel: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
  .ln-grid--features .ln-card { grid-column: auto; }
  .ln-card .ln-card__copy { padding: 23px; }
  .ln-grid--steps .ln-card__copy, .ln-grid--details .ln-card__copy { padding: 21px; }
  .ln-grid--steps .ln-card__copy h3, .ln-grid--details .ln-card__copy h3 { font-size: 22px; }
  .ln-prompt { font-size: 11px; }
  .ln-shop h4 { font-size: 20px; }
  .ln-point-window { width: 74%; }
  .ln-prompt { width: 66%; top: 139px; right: 4%; }
  .ln-snapshot { width: 79%; }
  .ln-screen-window { width: 80%; }
  .ln-found { font-size: 9px; }
  .ln-found .ln-mascot { width: 27px; height: 27px; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .ln-grid--steps, .ln-grid--details { grid-template-columns: 1fr; }
  .ln-grid--steps .ln-card__inner, .ln-grid--details .ln-card__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .ln-grid--steps .ln-card__copy, .ln-grid--details .ln-card__copy { align-self: center; padding: 27px; }
}
@media (max-width: 760px) {
  .ln-grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 33px auto 0; gap: 20px; }
  .ln-card .ln-card__copy { padding: 24px; }
  .ln-card__copy h3 { font-size: 26px; }
  .ln-grid--steps .ln-card__copy h3, .ln-grid--details .ln-card__copy h3 { font-size: 24px; }
  .ln-card__copy p { font-size: 13px; }
  .ln-scene { height: 300px; }
  .ln-grid--steps .ln-scene { height: 255px; }
  .ln-grid--details .ln-scene { height: 225px; }
  .ln-task-sheet { bottom: 14px; }
  .ln-tool-stack { top: 46px; }
  .ln-tool-row { padding: 12px 14px; }
  .ln-scene--bus { padding-inline: 6%; }
  .ln-message { margin-bottom: 12px; gap: 7px; }
  .ln-message > div { padding: 10px 11px; }
  .ln-message strong > span { margin-left: 4px; }
  .ln-message--two { margin-left: 12px; }
}
@media (max-width: 380px) {
  .ln-card .ln-card__copy { padding: 22px; }
  .ln-cursor--point { left: 48%; }
  .ln-point-window .ln-window__body { padding-inline: 12px; }
  .ln-prompt { font-size: 10px; gap: 3px; padding: 9px; }
  .ln-prompt .ln-mascot { width: 30px; height: 30px; }
  .ln-model-menu { width: 76%; left: 9%; }
  .ln-snapshot { gap: 7px; padding: 10px; }
  .ln-snapshot-thumb { width: 45px; }
  .ln-snapshot strong { font-size: 10px; }
  .ln-message strong { font-size: 9px; }
  .ln-message p { font-size: 10px; }
  .ln-provider-rail { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-card-motion] *, [data-card-motion] *::before, [data-card-motion] *::after { animation: none !important; transition: none !important; }
}