/* SELFEEL 3D — lighting, geometry and readable native annotations. */
.three-stage{position:relative;width:100%;height:100%;isolation:isolate;background:radial-gradient(ellipse at 48% 60%,#eff0ed00 25%,#fafaf900 70%);overflow:hidden;border-radius:24px}
.three-stage>canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab;position:relative;z-index:1}.three-stage>canvas:active{cursor:grabbing}.three-stage>canvas:focus-visible{outline:3px solid #50563d;outline-offset:-6px}
.three-tools{position:absolute;left:20px;right:20px;bottom:12px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;z-index:4;font-size:15.6px;color:#50563d;pointer-events:none}.three-tools>*{pointer-events:auto}.three-tools button{font:inherit;color:#50563d;background:#ffffffd9;border:1px solid #dfe0db;border-radius:999px;min-height:40px;padding:8px 14px;cursor:pointer}.three-composition .three-tools{font-size:27.6px;bottom:8px;gap:18px}.three-composition .three-tools button{font-size:27.6px;padding:10px 20px;min-height:52px}.three-composition .three-tools>span{display:none}
.three-chart-wrap{height:clamp(380px,43vw,560px);margin-top:24px;background:radial-gradient(ellipse at 48% 65%,#ebebe9,#f9f9f8 72%);border-radius:24px;overflow:hidden}.three-data-scene{height:350px;margin-top:24px;background:radial-gradient(ellipse at 48% 65%,#ececea,#f9f9f8 72%);border-radius:24px}
.three-labels{position:absolute;inset:0;pointer-events:none;z-index:3}.three-label{position:absolute;transform:translate(-50%,-50%);font-size:19.2px;line-height:1.4;font-weight:600;color:#50563d;background:#ffffffe0;padding:2px 7px;border-radius:7px;white-space:nowrap}.three-label.tick{font-size:16.8px;font-weight:500;color:#50563d}.three-label.time{transform:translate(-50%,0)}
.chart-view-toggle{display:flex;gap:5px;background:#ececea;padding:5px;border-radius:999px;width:fit-content;margin-top:24px}.chart-view-toggle button{font:inherit;font-size:18px;color:#50563d;border:0;background:transparent;border-radius:999px;padding:10px 20px;min-height:44px;cursor:pointer}.chart-view-toggle button[aria-pressed=true]{background:white;color:#50563d;box-shadow:0 3px 9px #50563d10;font-weight:650}
.three-fallback{position:absolute;inset:0;z-index:0;pointer-events:none}.three-fallback-slab{position:absolute;left:20%;top:45%;width:60%;height:35%;border-radius:25px;transform:perspective(600px) rotateX(55deg) rotateZ(-17deg);background:linear-gradient(130deg,#fff,#e0e1dd);box-shadow:0 14px 0 #b9bbb1,0 30px 35px #50563d25}.three-fallback>i{position:absolute;width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 28% 22%,white,#e4e5e1 45%,#aaada0);box-shadow:15px 30px 35px #50563d18}.three-stage[data-render=webgl] .three-fallback{display:none}
@media(max-width:760px){.three-chart-wrap{height:380px;margin-inline:-12px;border-radius:20px}.three-data-scene{height:290px;margin-inline:-10px}.three-label{font-size:16.8px;padding:2px 5px}.three-label.tick{font-size:15.6px}.three-tools{left:8px;right:8px;gap:7px;font-size:14.4px;bottom:8px}.three-tools>span{display:none}.three-tools button{font-size:14.4px;min-height:38px;padding:8px 11px}.three-composition .three-tools{bottom:2px}.three-composition .three-tools button{font-size:34.8px;padding:12px 24px;min-height:65px}.chart-view-toggle{width:100%}.chart-view-toggle button{flex:1;font-size:19.2px}.studio-plot{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.three-stage>canvas{scroll-behavior:auto}}
.three-composition .three-tools{display:none!important}.three-view-note{font-size:18px!important;color:#50563d;margin:16px 0 0!important}.three-composition{border-radius:0}.three-label{box-shadow:0 2px 8px #50563d05}
.three-hero{height:460px;background:radial-gradient(ellipse at 50% 65%,#e8e9e5,#f8f8f7 75%);border-radius:30px;overflow:hidden}.three-hero-caption{font-size:16.8px!important;line-height:1.7;color:#50563d!important;margin:12px 5px 0!important}.three-hero .three-tools{bottom:16px}.three-hero .three-tools>span{display:none}
@media(max-width:760px){.three-hero{height:350px;border-radius:24px}.three-chart-wrap{height:320px}.three-hero-caption{font-size:16.8px!important}}
.page-listen>img{width:48px!important;height:48px!important;max-width:48px!important;flex:0 0 48px;object-fit:contain!important;aspect-ratio:1!important}.three-view-note{max-width:65ch}