/* Independent physical close views, with explicitly preset demonstrations. */
.demo-detail { color:#49392b; }
.demo-scene { position:absolute; inset:0; overflow:hidden; outline:0; }
.demo-room-plate { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
.demo-scroll { position:absolute; inset:0; overflow:hidden; overscroll-behavior:contain; outline:0; }
.demo-stage { position:relative; width:100%; min-height:100svh; isolation:isolate; }
.demo-heading { position:absolute; z-index:5; }
.demo-heading h1,.demo-heading p { margin:0; }
.demo-return { display:none; }
.demo-detail button { -webkit-tap-highlight-color:transparent; }
.demo-detail button:focus-visible { outline:2px solid #68734e; outline-offset:5px; }
.linko-heading { left:7%; top:14%; color:#594434; }
.linko-heading h1 { position:relative; width:max-content; font:400 clamp(82px,8vw,140px)/1 'Patrick Hand',cursive; letter-spacing:.01em; -webkit-text-stroke:1.6px currentColor; }
.linko-title-antennae { position:absolute; width:52px; height:42px; right:-7px; top:-18px; fill:currentColor; stroke:currentColor; stroke-width:2; }
.linko-heading p { margin-top:15px; font:400 clamp(24px,2vw,32px)/1.6 'Kaiti SC','STKaiti','KaiTi',serif; letter-spacing:.08em; }
.linko-laptop { position:absolute; z-index:6; left:10%; bottom:14%; width:min(45vw,87svh,760px); aspect-ratio:1.5; }
.linko-laptop-frame { display:block; width:100%; height:100%; pointer-events:none; user-select:none; }
.linko-laptop-screen { position:absolute; left:16.374%; top:12.822%; width:67.233%; height:55.664%; background:#f5eee5; clip-path:polygon(1.123% 0,98.915% 0,100% 100%,0 100%); overflow:hidden; }
.linko-screen-content { height:100%; padding:clamp(13px,1.4vw,22px) clamp(17px,1.7vw,27px); background:linear-gradient(120deg,#faf7f1,#eee5da); color:#4b4238; font-size:clamp(13px,1vw,17px); }
.linko-app-bar { display:flex; justify-content:space-between; font-family:'Patrick Hand',cursive; font-size:18px; color:#6b6155; line-height:1.2; }
.linko-task-demo-label { font-size:10px; letter-spacing:.12em; margin:8px 0 5px; color:#746b5d; }
.linko-task-heading { display:flex; align-items:center; justify-content:space-between; gap:9px; padding-bottom:10px; border-bottom:1px solid #d9cabc; }
.linko-task-heading h2 { margin:0; font:500 clamp(15px,1.25vw,21px)/1.4 'Kaiti SC','STKaiti','KaiTi',serif; white-space:nowrap; }
#linko-task-status { font-size:11px; white-space:nowrap; color:#665c44; }
#linko-task-status:before { content:''; display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:#eab740; }
.linko-detail[data-state="thinking"] #linko-task-status:before { background:#829bad; }
.linko-detail[data-state="done"] #linko-task-status:before { background:#819765; }
#linko-task-steps { padding-left:20px; margin:10px 0 6px; line-height:1.65; font-size:clamp(12px,.95vw,16px); }
#linko-task-steps [data-step-status="done"] { color:#657b4c; }
#linko-task-steps [data-step-status="active"] { color:#4c4c41; }
#linko-task-steps [data-step-status="pending"] { color:#7c7468; }
#linko-task-note { margin:0; font-size:clamp(11px,.85vw,14px); line-height:1.5; color:#7c6c55; }
.linko-character { position:absolute; z-index:7; left:44%; bottom:16%; width:min(43vw,64svh); aspect-ratio:1244/1264; border:0; padding:0; background:none; cursor:pointer; touch-action:manipulation; }
.linko-detail-art,.linko-detail-art svg { display:block; width:100%; height:100%; overflow:visible; }
.linko-detail-art { pointer-events:none; user-select:none; }
.linko-state-plinth { position:absolute; z-index:10; left:47%; bottom:9%; width:min(34vw,520px); padding:12px 18px 7px; border-radius:24px 24px 16px 16px; background-color:#d5a16c; background-image:linear-gradient(165deg,#ffe9c344,transparent 78%,#8a502533),url('/assets/huala-wall-board.png'); background-size:100% 100%,100% 500%; background-position:center; box-shadow:inset 0 2px 1px #ffebbf,0 8px 0 #b77943,1px 14px 10px #68402045; }
.linko-state-buttons { display:flex; gap:12px; }
.linko-state-buttons button { flex:1; min-width:0; min-height:42px; padding:8px 7px; border:1px solid #fdf3df; border-radius:24px; color:#64523a; background:linear-gradient(#fff4dc,#e5c99f); box-shadow:0 4px 0 #b98651,1px 6px 5px #8b582c35; font:17px/1.3 'Kaiti SC','STKaiti','KaiTi',serif; white-space:nowrap; transition:transform 180ms,box-shadow 180ms,background 180ms; }
.linko-state-buttons button[aria-pressed="true"] { background:linear-gradient(#fff6c4,#ffda75); box-shadow:0 2px 0 #b98651,0 0 16px #ffd76b66; transform:translateY(2px); color:#5f481f; }
.linko-state-plinth p { margin:7px 0 0; text-align:center; font:12px/1.3 'Kaiti SC','STKaiti','KaiTi',serif; color:#75522f; }
.linko-response { position:absolute; left:47%; bottom:4.5%; width:min(34vw,520px); margin:0; text-align:center; color:#58442c; font:17px/1.5 'Kaiti SC','STKaiti','KaiTi',serif; text-shadow:0 1px 3px #fff6dc; }
.linko-demo-disclaimer { position:absolute; bottom:15px; left:5%; right:5%; text-align:center; margin:0; color:#605342; font-size:11px; line-height:1.4; text-shadow:0 1px 3px #fff7e6; }
@media(hover:hover) and (pointer:fine) { .linko-detail:not(.is-direct-input) .linko-state-buttons button:hover { box-shadow:0 4px 0 #b98651,0 0 14px #fff3bd88; } .linko-detail:not(.is-direct-input) .linko-character:hover { filter:drop-shadow(0 0 10px #fff0c433); } }
.lume-stage { --monitor-width:min(88vw,calc((100svh - 140px)*1.4990234375)); }
.lume-heading { left:calc(50% - var(--monitor-width)*.41); top:42px; color:#262c2b; }
.lume-heading h1 { font:600 clamp(30px,2.7vw,44px)/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; letter-spacing:-.03em; }
.lume-heading p { margin-top:8px; font:400 clamp(18px,1.4vw,24px)/1.45 'Kaiti SC','STKaiti','KaiTi',serif; }
.lume-monitor { position:absolute; top:100px; left:calc((100% - var(--monitor-width))/2); width:var(--monitor-width); aspect-ratio:1535/1024; z-index:6; transform-origin:50% 45%; transition:transform 650ms cubic-bezier(.2,.7,.2,1); }
.lume-monitor-frame { display:block; width:100%; height:auto; object-fit:contain; pointer-events:none; user-select:none; }
.lume-screen { position:absolute; left:12.3127%; top:9.86328125%; width:75.4397394%; height:61.81640625%; display:flex; flex-direction:column; overflow:hidden; background:#f8f9fb; color:#263343; isolation:isolate; border-radius:1px; }
.lume-screen-toolbar { display:flex; align-items:center; justify-content:center; flex-shrink:0; height:32px; padding:0 14px; border-bottom:1px solid #d9dfe7; background:linear-gradient(#fff,#f6f8fc); gap:8px; }
.lume-window-dots { display:flex; gap:5px; }
.lume-window-dots i { width:8px; height:8px; border-radius:50%; background:#ff615b; }
.lume-window-dots i:nth-child(2) { background:#ffc044; }.lume-window-dots i:nth-child(3) { background:#28c64f; }
.lume-tabs { display:flex; align-self:stretch; gap:5px; }
.lume-tabs button { border:0; border-bottom:2px solid transparent; background:transparent; min-width:62px; padding:0 12px; color:#657184; font-size:13px; transition:background 160ms,color 160ms; }
.lume-tabs button[aria-selected="true"] { border-color:#2283f5; color:#1474db; background:#e8f1ff; }
@media(hover:hover) and (pointer:fine) { .lume-detail:not(.is-direct-input) .lume-tabs button:hover { background:#eef4fd; } }
.lume-tabs button:focus-visible { outline:2px solid #397dc6; outline-offset:-3px; }
.lume-demo-label { font-size:10px; color:#738093; white-space:nowrap; }
.lume-screen-panel { display:flex; flex:1; min-height:0; flex-direction:column; }
.lume-screen-viewport { position:relative; flex:1; min-height:0; width:100%; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; background:#fff; touch-action:pan-x pan-y pinch-zoom; }
#lume-screen-shot { display:block; width:100%; height:100%; object-fit:contain; max-width:none; user-select:none; pointer-events:none; }
.lume-feature-info { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 12px; flex-shrink:0; border-top:1px solid #dce4ee; background:#f6f9fd; }
.lume-feature-info>div { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
.lume-feature-info h2 { margin:0; font-size:13px; font-weight:600; line-height:1.3; }
.lume-feature-info p { margin:0; font-size:12px; line-height:1.4; color:#596a80; }
#lume-inspect { flex-shrink:0; min-height:28px; padding:3px 12px; border:1px solid #c6d9f2; border-radius:8px; background:#e8f2ff; color:#1e65b6; font-size:12px; transition:background 160ms; }
@media(hover:hover) and (pointer:fine) { .lume-detail:not(.is-direct-input) #lume-inspect:hover { background:#d7eaff; } }
.lume-inspect-note { position:absolute; top:0; left:12px; height:32px; display:flex; align-items:center; margin:0; padding:0; color:#718096; font-size:10px; line-height:1.2; pointer-events:none; }
.lume-detail.is-inspecting .lume-monitor { transform:scale(1.035); }
.lume-detail.is-inspecting #lume-screen-shot { width:155%; min-width:1000px; height:auto; object-fit:contain; }
.lume-detail.is-inspecting .lume-screen-viewport { cursor:grab; }
body.linko-detail-open .room,body.linko-detail-returning .room { transform-origin:81% 65%; }
body.lume-detail-open .room,body.lume-detail-returning .room { transform-origin:66% 65%; }
.demo-detail.is-open .demo-room-plate { animation:demo-room-arrive 1000ms cubic-bezier(.2,.65,.25,1) both; }
.demo-detail.is-open .demo-stage { animation:demo-content-arrive 1000ms cubic-bezier(.2,.65,.25,1) both; }
.demo-detail.is-open .desk-exit { animation:desk-ui-arrive 1200ms ease both; }
@keyframes demo-room-arrive { 0% { opacity:0; transform:scale(.88); } 24% { opacity:.25; } 100% { opacity:1; transform:none; } }
@keyframes demo-content-arrive { 0%,18% { opacity:0; transform:scale(.88) translateY(3%); } 100% { opacity:1; transform:none; } }
@media(max-width:850px) {
 .demo-scroll { overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
 .demo-room-plate { object-position:65% center; }
 .linko-detail .demo-room-plate { display:none; }
 .linko-stage { min-height:1250px; }
 /* The room and extended tabletop share the scroll world with the props. */
 .linko-stage::before { content:''; position:absolute; z-index:-2; left:0; right:0; top:0; height:100svh; background:url('/assets/linko-desk-clean.png') 65% center/auto 100svh no-repeat; }
 .linko-stage::after { content:''; position:absolute; z-index:-1; left:0; right:0; top:63svh; bottom:0; background:#cda272 url('/assets/linko-desk-clean.png') 65% 78%/auto 700svh no-repeat; mask-image:linear-gradient(transparent,#000 80px); pointer-events:none; }
 .linko-heading { top:86px; left:9%; }
 .linko-heading h1 { font-size:78px; }
 .linko-heading p { font-size:23px; margin-top:8px; line-height:1.5; }
 .linko-title-antennae { width:42px; height:34px; right:-9px; top:-14px; }
 .linko-character { top:263px; bottom:auto; width:min(88vw,360px); left:calc((100% - min(88vw,360px))/2); }
 .linko-laptop { left:calc((100% - min(118vw,600px))/2); top:580px; bottom:auto; width:min(118vw,600px); }
 .linko-screen-content { padding:10px 16px; font-size:13px; }
 .linko-app-bar { font-size:14px; }
 .linko-task-demo-label { font-size:9px; margin:4px 0; }
 .linko-task-heading { gap:6px; padding-bottom:6px; }
 .linko-task-heading h2 { font-size:15px; }
 #linko-task-status { font-size:10px; }
 #linko-task-status:before { width:5px; height:5px; margin-right:3px; }
 #linko-task-steps { font-size:12px; line-height:1.55; margin:7px 0 4px; }
 #linko-task-note { font-size:11px; }
 .linko-state-plinth { top:960px; bottom:auto; left:6%; width:88%; max-width:520px; padding:12px 12px 7px; border-radius:20px 20px 13px 13px; }
 .linko-state-buttons { gap:8px; }
 .linko-state-buttons button { font-size:16px; min-height:43px; padding:8px 3px; }
 .linko-response { top:1056px; bottom:auto; left:8%; width:84%; font-size:17px; }
 .linko-demo-disclaimer { top:1110px; bottom:auto; font-size:11px; left:8%; right:8%; }
 .demo-return { display:block; position:absolute; left:50%; transform:translateX(-50%); border:0; padding:10px 18px; border-radius:24px; background:#fff0d4c9; color:#57412c; font:17px/1.5 'Kaiti SC','STKaiti','KaiTi',serif; white-space:nowrap; }
 #linko-return { top:1170px; }
 .lume-stage { min-height:810px; }
 .lume-heading { left:7%; top:91px; }
 .lume-heading h1 { font-size:33px; }
 .lume-heading p { font-size:17px; margin-top:7px; }
 /* Phone: a compact portrait monitor chassis, still a physical screen on the desk. */
 .lume-monitor { top:193px; left:5%; width:90%; height:470px; aspect-ratio:auto; background:linear-gradient(0deg,#b6a18c 0,#d6c3ac 31px,#171614 32px); border:1px solid #302a24; border-radius:15px 15px 12px 12px; box-shadow:0 12px 18px #573d2638; }
 .lume-monitor-frame { display:none; }
 .lume-monitor:after { content:''; position:absolute; top:100%; left:31%; width:38%; height:47px; background:linear-gradient(110deg,#ad9d8a,#d8c8b4 50%,#a08d79); clip-path:polygon(35% 0,65% 0,72% 75%,100% 83%,100% 100%,0 100%,0 83%,28% 75%); filter:drop-shadow(0 5px 4px #573d2640); }
 .lume-screen { top:14px; left:12px; width:calc(100% - 24px); height:calc(100% - 54px); border-radius:3px; }
 .lume-screen-toolbar { height:42px; padding:0 4px; justify-content:center; gap:0; }
 .lume-window-dots,.lume-demo-label { display:none; }
 .lume-tabs { gap:1px; width:100%; justify-content:space-evenly; }
 .lume-tabs button { flex:1; min-width:0; padding:0 6px; font-size:13px; }
 .lume-feature-info { padding:11px 12px; gap:10px; flex-wrap:wrap; }
 .lume-feature-info>div { width:100%; display:block; }
 .lume-feature-info h2 { font-size:15px; margin-bottom:3px; }
 .lume-feature-info p { font-size:12px; line-height:1.55; }
 #lume-inspect { width:100%; min-height:39px; font-size:13px; }
 .lume-inspect-note { position:static; height:auto; display:block; flex-shrink:0; font-size:10px; padding:6px 10px; line-height:1.5; text-align:center; background:#f1f5fa; }
 .lume-detail.is-inspecting .lume-monitor { transform:scale(1.015); }
 #lume-return { top:744px; }
}
@media(max-width:850px) and (min-width:600px) {
 .linko-stage { min-height:1420px; }
 .linko-character { top:220px; left:44%; width:350px; }
 .linko-laptop { top:630px; }
 .linko-state-plinth { top:1080px; left:15%; width:70%; }
 .linko-response { top:1180px; }
 .linko-demo-disclaimer { top:1235px; }
 #linko-return { top:1300px; }
 .lume-stage { min-height:880px; }
 .lume-monitor { width:520px; left:calc(50% - 260px); height:560px; }
 #lume-return { top:834px; }
 .lume-heading { left:calc(50% - 260px); }
}
@media(max-width:380px) {
 .linko-laptop { top:560px; }
 .linko-state-plinth { top:870px; }
 .linko-response { top:967px; }
 .linko-demo-disclaimer { top:1020px; }
 #linko-return { top:1090px; }
 .linko-stage { min-height:1160px; }
 .linko-task-heading h2 { font-size:12px; }
 #linko-task-status { font-size:9px; }
 #linko-task-steps { font-size:10px; margin:4px 0; }
 #linko-task-note { font-size:10px; }
 .linko-screen-content { padding:8px 13px; }
}
@media(prefers-reduced-motion:reduce) {
 .demo-detail *,body.linko-detail-open .room,body.lume-detail-open .room { animation:none!important; transition:none!important; }
 .demo-detail.is-open .demo-room-plate,.demo-detail.is-open .demo-stage,.lume-detail.is-inspecting .lume-monitor { transform:none!important; }
}
/* The existing motion-off control is as quiet as the OS preference. */
.demo-detail.is-reduced-motion * { animation:none!important; transition:none!important; }
.demo-detail.is-reduced-motion.is-open .demo-room-plate,.demo-detail.is-reduced-motion.is-open .demo-stage,.demo-detail.is-reduced-motion.is-inspecting .lume-monitor { transform:none!important; }
body:has(.demo-detail.is-reduced-motion:not([hidden])) .room { animation:none!important; }