/* The research canvas explains the product without invented market records. */
.research-desk { --lens-color:#3875de; border:1px solid var(--line); border-radius:12px; background:#fff; color:#202b45; overflow:hidden; box-shadow:0 5px 0 var(--line),0 24px 65px #23304b15; }
.research-toolbar { min-height:74px; display:flex; align-items:center; gap:22px; padding:12px 25px; border-bottom:1px solid #dce1ed; }
.research-identity { display:flex; gap:12px; align-items:center; }
.research-mark { color:#df6349; font-size:35px; line-height:1; }
.research-identity strong { font:700 27px var(--display); letter-spacing:-1.2px; }.research-identity strong>span { color:#df6349; }
.research-identity small { font:500 15px var(--mono); letter-spacing:-.5px; margin-left:6px; }
.preview-tag { margin-left:auto; color:#68758d; background:#f3f5f9; border:1px solid #e0e5ef; border-radius:5px; padding:5px 10px; font:12px var(--mono); }
.research-tools { display:flex; gap:7px; }.research-tools button { display:grid; place-items:center; width:38px; height:38px; border:1px solid #d5dce9; border-radius:5px; background:white; color:#576683; font-size:23px; transition:background .2s,transform .2s; }
.research-tools button:hover { background:#eaf0fb; transform:translateY(-2px); }
.research-lenses { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:#dce1ed; border-bottom:1px solid #dce1ed; }
.research-lenses button { position:relative; display:flex; gap:15px; align-items:center; padding:21px 25px; background:#f9fafc; border:0; color:#607089; text-align:left; transition:background .2s,color .2s; }
.research-lenses button::after { content:''; position:absolute; height:3px; bottom:-1px; left:0; right:0; background:var(--lens-color); transform:scaleX(0); transition:transform .25s; }
.research-lenses button[aria-pressed=true] { background:#edf3ff; color:#264674; }.research-lenses button[aria-pressed=true]::after { transform:scaleX(1); }
.research-lenses button:hover { background:#edf1f8; }.research-lenses strong { display:block; font:600 19px/1.4 var(--display); }.research-lenses small { display:block; font:14px/1.5 var(--sans); margin-top:3px; }
.lens-icon { font-size:32px; color:var(--lens-color); }.lens-arrow { margin-left:auto; font-size:24px; transition:transform .2s; }.research-lenses button:hover .lens-arrow { transform:translate(2px,-3px); }
.research-workspace { display:grid; grid-template-columns:minmax(0,1fr) 310px; }
.research-canvas { position:relative; min-height:610px; overflow:hidden; background:radial-gradient(ellipse at 50% 46%,#f1f3f9 10%,transparent 60%),radial-gradient(#c4ccdf 1px,transparent 1px),#f1f3f9; background-size:auto,20px 20px,auto; isolation:isolate; }
.canvas-caption,.canvas-bottom { position:absolute; left:24px; right:24px; z-index:4; display:flex; justify-content:space-between; gap:10px; color:#738099; font:11px/1.5 var(--mono); letter-spacing:.03em; }
.canvas-caption { top:23px; }.canvas-caption span:last-child { letter-spacing:0; }.canvas-bottom { bottom:21px; align-items:center; font-size:12px; letter-spacing:0; }
.canvas-bottom>span { display:flex; gap:8px; align-items:center; }.canvas-bottom i { width:5px; height:5px; background:var(--lens-color); border-radius:50%; }.canvas-bottom button { border:0; background:transparent; color:#66738c; font:12px var(--mono); padding:7px 0; }.canvas-bottom button:hover { color:#243d6b; }
.canvas-orbit { position:absolute; top:50%; left:50%; border:1px solid #cdd5e766; border-radius:50%; pointer-events:none; z-index:-1; }
.orbit-one { width:55%; aspect-ratio:1; transform:translate(-50%,-50%) rotateX(20deg); }.orbit-two { width:84%; aspect-ratio:1; transform:translate(-50%,-50%) rotateX(38deg); }
.orbit-two::after { content:''; position:absolute; width:7px; height:7px; background:var(--lens-color); border-radius:50%; left:50%; top:-4px; box-shadow:0 0 18px #3875de55; }
.orbit-two { animation:orbit-turn 60s linear infinite; }
.connection-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.connection-track { stroke:#b7c5e0; stroke-width:1.2; fill:none; opacity:.65; transition:stroke .25s; }
.connection-flow { stroke:var(--lens-color); stroke-width:2; fill:none; stroke-linecap:round; stroke-dasharray:5 95; animation:flow-travel 8s linear infinite; opacity:.3; }
.connection.selected .connection-track { stroke:var(--lens-color); opacity:.65; }.connection.selected .connection-flow { stroke-width:2.5; opacity:1; animation-duration:5s; }
.research-core { position:absolute; left:50%; top:49%; width:47%; transform:translate(calc(-50% + var(--pan-x,0px)),calc(-50% + var(--pan-y,0px))); transition:transform .6s ease; pointer-events:none; }
.research-core img { width:100%; height:auto; mix-blend-mode:multiply; mask-image:radial-gradient(ellipse at center,#000 50%,transparent 72%); animation:core-float 7s ease-in-out infinite; }
.core-label { margin:0 auto; width:max-content; display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid #cdd6e7; background:#ffffffdb; box-shadow:0 4px 15px #58719a0c; border-radius:20px; padding:7px 13px; font:10px var(--mono); letter-spacing:.08em; color:#637490; }
.core-light { width:5px; height:5px; border-radius:50%; background:#e87a58; }
.research-point { position:absolute; left:var(--x); top:var(--y); width:170px; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:11px; background:none; border:0; padding:12px 4px; color:#596880; z-index:3; outline-offset:-3px!important; }
.point-icon { width:54px; height:54px; display:grid; place-items:center; color:var(--lens-color); border:1px solid #bac8e3; border-radius:18px; background:linear-gradient(135deg,#fff,#e7edf8); box-shadow:inset 0 2px 1px white,0 4px 0 #b5c2db,0 9px 15px #1d3a7410; font:29px var(--display); transition:transform .3s,box-shadow .3s,background .3s; animation:point-float 6s ease-in-out var(--delay) infinite; }
.point-label { font:500 15px/1.25 var(--sans); padding:5px 9px; border:1px solid transparent; border-radius:5px; background:#f1f3f9e8; transition:color .2s,background .2s; }
.research-point[aria-pressed=true] .point-icon { background:var(--lens-color); color:white; border-color:var(--lens-color); box-shadow:inset 0 2px 1px #ffffff40,0 4px 0 color-mix(in srgb,var(--lens-color) 70%,#101c33),0 10px 26px color-mix(in srgb,var(--lens-color) 25%,transparent); }
.research-point[aria-pressed=true] .point-label { color:#213b65; border-color:#bfcce4; background:#fff; }
.research-point:hover .point-icon { transform:translateY(-6px) rotate(-5deg); animation-play-state:paused; }.research-point:hover .point-label { color:#1e3559; background:white; }
.research-inspector { padding:28px 24px 20px; border-left:1px solid #d6deec; display:flex; flex-direction:column; min-width:0; background:linear-gradient(150deg,#fff,#f8faff); }
.inspector-eyebrow { display:flex; align-items:start; justify-content:space-between; gap:10px; color:var(--lens-color); font:10px/1.7 var(--mono); letter-spacing:.04em; margin-bottom:22px; }.inspector-eyebrow>span:last-child { font-size:23px; line-height:1; }
.research-inspector h3 { font:600 30px/1.15 var(--display); letter-spacing:-1.1px; margin-bottom:17px; }.research-inspector>p { color:#647089; font:16px/1.7 var(--sans); margin-bottom:26px; }
.inspector-label { display:block; font:10px/1.6 var(--mono); letter-spacing:.06em; color:#7c879e; }
.inspector-checks ul { list-style:none; padding:0; margin:13px 0 24px; }.inspector-checks li { position:relative; padding:9px 0 9px 20px; border-bottom:1px solid #e6eaf2; font:14px/1.55 var(--sans); color:#4e5e78; }.inspector-checks li::before { content:'↗'; position:absolute; left:0; top:10px; color:var(--lens-color); font-size:12px; }
.research-question { padding:17px 18px; margin-bottom:24px; border:1px solid #dfe6f1; border-left:3px solid var(--lens-color); background:#eef3fb; border-radius:0 6px 6px 0; }.research-question p { font:500 16px/1.55 var(--display); margin:10px 0 0; }
.inspector-footer { display:flex; justify-content:space-between; align-items:center; gap:15px; color:#8390a7; font:11px/1.7 var(--mono); margin-top:auto; }.inspector-footer a { font-size:25px; color:#273f67; }
.research-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:19px 25px; border-top:1px solid #d6deec; color:#728098; font:13px/1.5 var(--sans); background:#fafbfe; }.research-footer a { white-space:nowrap; color:#405577; font-weight:600; }.research-footer a span { margin-left:15px; }
.research-noscript { padding:25px; }.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.research-desk.is-expanded { position:fixed; inset:14px; z-index:50; overflow:auto; box-shadow:0 0 0 50px #152039bd; }.is-expanded .research-workspace { min-height:calc(100dvh - 238px); }.is-expanded .research-canvas { min-height:620px; }.canvas-expanded { overflow:hidden; }
.research-desk:is(.motion-paused,.offscreen,.tab-hidden) *, .research-desk:is(.motion-paused,.offscreen,.tab-hidden) *::after { animation-play-state:paused!important; }.research-desk.motion-paused .research-core { transform:translate(-50%,-50%); }
@keyframes flow-travel { to { stroke-dashoffset:-200; } }
@keyframes orbit-turn { from { transform:translate(-50%,-50%) rotateX(38deg) rotate(0); } to { transform:translate(-50%,-50%) rotateX(38deg) rotate(360deg); } }
@keyframes core-float { 50% { transform:translateY(-9px); } }
@keyframes point-float { 50% { translate:0 -5px; } }
@media(max-width:1150px) { .research-workspace { grid-template-columns:minmax(0,1fr) 280px; }.research-inspector { padding:25px 20px; }.research-canvas { min-height:650px; }.research-point { width:140px; }.point-label { font-size:14px; }.research-core { width:51%; }.research-lenses button { padding:19px; gap:10px; }.research-lenses small { font-size:12px; } }
@media(max-width:900px) { .research-workspace { grid-template-columns:1fr; }.research-canvas { min-height:540px; }.research-core { width:40%; }.research-inspector { border-left:0; border-top:1px solid #d6deec; display:grid; grid-template-columns:1fr 1fr; gap:0 30px; }.inspector-eyebrow { grid-column:1/-1; margin-bottom:15px; }.research-inspector h3,.research-inspector>p { grid-column:1; }.inspector-checks { grid-column:2; grid-row:2/4; }.research-question { grid-column:1/-1; }.inspector-footer { grid-column:1/-1; }.research-lenses strong { font-size:17px; }.lens-arrow { display:none; } }
@media(max-width:600px) { .research-toolbar { padding:13px; gap:8px; min-height:64px; }.research-identity { gap:6px; }.research-identity strong { font-size:23px; }.research-mark { font-size:27px; }.research-identity small { display:none; }.preview-tag { font-size:10px; padding:5px 7px; }.research-tools { gap:5px; }.research-tools button { width:32px; height:34px; font-size:20px; }.research-lenses button { flex-direction:column; gap:7px; padding:14px 5px; text-align:center; }.research-lenses strong { font-size:14px; }.research-lenses small { display:none; }.lens-icon { font-size:26px; line-height:1; }.research-canvas { min-height:440px; }.research-core { width:54%; }.canvas-caption,.canvas-bottom { left:12px; right:12px; font-size:9px; }.canvas-caption { top:15px; }.canvas-caption>span:last-child { display:none; }.canvas-bottom { bottom:13px; }.canvas-bottom button { font-size:10px; }.canvas-bottom>span { max-width:160px; }.research-point { width:106px; gap:8px; }.point-icon { width:41px; height:41px; border-radius:13px; font-size:24px; }.point-label { font-size:12px; padding:4px 5px; max-width:105px; }.core-label { font-size:8px; padding:5px 8px; }.research-inspector { display:block; padding:24px 20px; }.research-inspector h3 { font-size:30px; }.research-inspector>p { font-size:17px; }.inspector-checks li { font-size:15px; }.research-footer { padding:15px; flex-wrap:wrap; font-size:12px; gap:12px; }.research-desk.is-expanded { inset:5px; }.is-expanded .research-canvas { min-height:440px; } }
@media(prefers-reduced-motion:reduce) { .research-desk *, .research-desk *::after { animation:none!important; transition:none!important; }.research-core { transform:translate(-50%,-50%); } }