/* TP33 visual system — transparent, readable, and responsive */
:root{--tp33-gold:#d6ac62;--tp33-red:#9e2625;--tp33-glass:rgba(10,11,16,.35)}
#tp33-hud{position:fixed;inset:0;z-index:40;pointer-events:none;color:#e6c38a;font:600 10px/1.5 system-ui,sans-serif;letter-spacing:.18em;text-shadow:0 2px 10px #000;}
.tp33-hud-top,.tp33-hud-bottom{position:absolute;left:clamp(16px,3vw,42px);right:clamp(16px,3vw,42px);display:flex;align-items:center;justify-content:space-between;gap:14px}
.tp33-hud-top{top:82px}.tp33-hud-bottom{bottom:12px}.tp33-live{display:flex;align-items:center;gap:8px}.tp33-live i{width:6px;height:6px;background:#c89a49;border-radius:50%;box-shadow:0 0 12px #e7b967}.tp33-zone{text-align:right}.tp33-coordinate{font-variant-numeric:tabular-nums}.tp33-motion{pointer-events:auto;cursor:pointer;color:#e9c890;background:rgba(10,10,13,.65);border:1px solid #bc8e47;border-radius:30px;padding:7px 10px;font:inherit;letter-spacing:.06em}.tp33-motion:focus-visible{outline:2px solid white;outline-offset:3px}.tp33-progress{position:absolute;bottom:0;left:0;width:100%;height:2px;background:#332617}.tp33-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#9c3327,#f0c57a);transform-origin:left;transform:scaleX(0)}
#tp32-world{pointer-events:none!important}body{isolation:isolate}main{position:relative;z-index:1}header.topbar{z-index:80!important}#tp33-hud{z-index:30}main>.section,main>.hero{position:relative;isolation:isolate}main>.section:before,main>.hero:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(2,2,4,.70),rgba(2,2,4,.29) 50%,rgba(2,2,4,.65));}main>.section{scroll-margin-top:82px}
.tp33-glass{background:linear-gradient(140deg,rgba(34,32,33,.55),rgba(10,11,16,.24))!important;border:1px solid rgba(216,170,94,.46)!important;box-shadow:inset 0 1px 0 rgba(255,244,216,.09),0 18px 48px rgba(0,0,0,.32)!important;backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);transform-style:preserve-3d;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.tp33-glass:hover{transform:translateY(-7px) perspective(900px) rotateX(2deg);box-shadow:0 28px 65px #0009!important;border-color:rgba(238,196,116,.85)!important}}
#artistProfile.tp29-active .tp29-world{max-width:none!important;width:100%!important;border-radius:12px!important;min-height:620px!important;height:min(850px,calc(100svh - 105px))!important}
#artistProfile.tp29-active .tp29-backdrop{opacity:0!important}#artistProfile.tp29-active .tp29-card{background:linear-gradient(130deg,rgba(29,30,35,.45),rgba(8,9,13,.18))!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.tp33-profile-mode #tp33-hud{display:none} .tp33-no-motion *, .tp33-no-motion *:before,.tp33-no-motion *:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
@media(max-width:700px){.tp33-hud-top{top:72px}.tp33-live{font-size:8px}.tp33-zone{font-size:8px}.tp33-guide{display:none}.tp33-hud-bottom{bottom:6px}.tp33-motion{padding:5px 8px;font-size:8px}#artistProfile.tp29-active .tp29-world{height:min(780px,calc(100svh - 85px))!important;min-height:570px!important}.tp33-glass{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}}
@media(prefers-reduced-motion:reduce){.tp33-glass{transition:none!important}}