.stage{--cream:#f2eadf;--quiet:#918b82;--line:rgba(242,234,223,.13);display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,27vw,380px);height:calc(100svh - 70px);min-height:650px;overflow:hidden;background:#08090a;color:var(--cream);font-family:"Avenir",sans-serif}
.viewport{position:relative;min-width:0;height:100%;overflow:hidden;touch-action:none;cursor:grab;background:#08090a;background-image:radial-gradient(circle at 48% 46%,rgba(255,255,255,.025),transparent 35%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.01) 1px,transparent 1px);background-size:auto,88px 88px,88px 88px}
.viewport:active{cursor:grabbing}
.orientation{position:absolute;z-index:20;left:30px;top:26px;pointer-events:none;text-shadow:0 2px 18px #000}
.orientation small{color:#d9b875;font-size:7px;letter-spacing:.18em}
.orientation h1{margin:9px 0 5px;font:400 clamp(34px,3.7vw,56px)/.94 "Goudy Heavyface",Georgia,serif;letter-spacing:-.02em}
.orientation p{margin:0;color:#969088;font-size:9px}
.compute{position:absolute;z-index:24;right:22px;top:22px;width:248px;padding:12px;border:1px solid rgba(231,193,111,.24);border-radius:13px;background:rgba(12,13,13,.92);box-shadow:0 16px 48px rgba(0,0,0,.35);backdrop-filter:blur(14px)}
.computeValue{display:flex;align-items:center;gap:9px}.computeValue>span{display:grid;width:29px;height:29px;place-items:center;border:1px solid rgba(231,193,111,.3);border-radius:50%;color:#e8bf69;font-size:16px}.computeValue>div{display:grid;flex:1;gap:3px}.computeValue small{color:#b0a691;font-size:6px;letter-spacing:.13em}.computeValue strong{font:400 16px/1 "Goudy Heavyface",Georgia,serif}.computeValue em{color:#dcb760;font:700 7px Avenir,sans-serif}.liveDot{width:6px;height:6px;border-radius:50%;background:#88d8a5;box-shadow:0 0 10px #88d8a5;animation:live 3.4s ease-in-out infinite}.compute p{margin:8px 0;color:#77736d;font-size:6px;letter-spacing:.04em}.compute button{width:100%;min-height:30px;border:1px solid rgba(231,193,111,.22);border-radius:7px;background:rgba(231,193,111,.08);color:#e6c47d;font-size:7px;cursor:pointer}.compute button:hover{background:#e4bd68;color:#171309}
@keyframes live{50%{opacity:.35;transform:scale(.72)}}
.world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.path{position:absolute;border:1px solid rgba(220,212,198,.09);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;pointer-events:none;animation:pathDrift 14s ease-in-out infinite alternate}
@keyframes pathDrift{to{opacity:.42;filter:brightness(1.7)}}
.mote{position:absolute;width:2px;height:2px;border-radius:50%;background:#c4baaa;box-shadow:0 0 9px rgba(222,210,190,.55);opacity:.28;pointer-events:none;animation:moteDrift 8s ease-in-out infinite alternate}
.mote:nth-of-type(3n){width:3px;height:3px;background:#d5ad64}.mote:nth-of-type(5n){opacity:.12}
@keyframes moteDrift{0%{transform:translate3d(-3px,4px,0);opacity:.12}50%{opacity:.48}100%{transform:translate3d(8px,-7px,0);opacity:.2}}
.place{--accent:#d9b16d;--drift-delay:0s;position:absolute;display:block;width:126px;height:126px;padding:0;border:0;background:none;color:var(--cream);text-align:left;cursor:pointer;transform:translate(-50%,-50%);z-index:2}
.placeBody{position:absolute;inset:10px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 72%,#292929);border-radius:50%;background:radial-gradient(circle at 46% 42%,color-mix(in srgb,var(--accent) 17%,#111213),#090a0b 68%);box-shadow:0 0 0 10px color-mix(in srgb,var(--accent) 7%,transparent),0 0 34px color-mix(in srgb,var(--accent) 23%,transparent);animation:placeBreathe 6.8s ease-in-out infinite;animation-delay:var(--drift-delay);transition:border-color .18s ease,box-shadow .18s ease}
.placeBody:before{content:"";position:absolute;inset:13px;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:50%}.placeBody>i{position:absolute;width:48%;height:48%;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:44% 56% 51% 49%;animation:slowTurn 16s linear infinite}.placeBody>b{position:relative;color:var(--accent);font:400 25px "Goudy Heavyface",Georgia,serif;letter-spacing:-.04em}.orbit{position:absolute;inset:-8px;border:1px dashed color-mix(in srgb,var(--accent) 20%,transparent);border-radius:50%;animation:slowTurn 26s linear infinite reverse}
.placeLabel{position:absolute;left:calc(100% + 18px);top:50%;display:grid;width:230px;gap:4px;transform:translateY(-50%);text-shadow:0 2px 14px #000}.placeLabel small{color:var(--accent);font-size:6px;letter-spacing:.16em;text-transform:uppercase}.placeLabel strong{color:color-mix(in srgb,var(--accent) 56%,var(--cream));font:400 22px/1 "Goudy Heavyface",Georgia,serif}.placeLabel em{color:#8c8780;font-size:7px;font-style:normal}.place:hover .placeBody,.selected .placeBody{border-color:var(--accent);box-shadow:0 0 0 13px color-mix(in srgb,var(--accent) 9%,transparent),0 0 48px color-mix(in srgb,var(--accent) 35%,transparent)}.selected{z-index:5}.selected .placeLabel strong{color:var(--cream)}
.medium{width:104px;height:104px}.medium .placeBody>b{font-size:18px}.medium .placeLabel{left:calc(100% + 14px);width:215px}.medium .placeLabel strong{font-size:18px}
@keyframes placeBreathe{0%,100%{transform:translate3d(0,0,0)}45%{transform:translate3d(0,-5px,0)}65%{transform:translate3d(2px,-3px,0)}}
@keyframes slowTurn{to{transform:rotate(360deg)}}
.realmPanel{--panel-accent:#d9b16d;position:absolute;z-index:30;width:min(310px,calc(100% - 32px));padding:17px 18px;border:1px solid color-mix(in srgb,var(--panel-accent) 34%,var(--line));border-radius:14px;background:rgba(16,17,17,.93);box-shadow:0 24px 64px rgba(0,0,0,.55),-3px 0 24px color-mix(in srgb,var(--panel-accent) 8%,transparent);backdrop-filter:blur(18px)}
.realmPanel:before{content:"";position:absolute;left:-7px;top:45%;width:12px;height:12px;border-left:1px solid color-mix(in srgb,var(--panel-accent) 42%,transparent);border-bottom:1px solid color-mix(in srgb,var(--panel-accent) 42%,transparent);background:#101111;transform:rotate(45deg)}.closePanel{position:absolute;right:10px;top:10px;width:25px;height:25px;border:1px solid var(--line);border-radius:50%;background:none;color:#928c84;cursor:pointer}.realmPanel>small{color:var(--panel-accent);font-size:6px;letter-spacing:.16em;text-transform:uppercase}.realmPanel h2{margin:7px 28px 8px 0;font:400 24px/1 "Goudy Heavyface",Georgia,serif}.realmPanel p{margin:0;color:#b1aaa0;font-size:9px;line-height:1.55}.realmPanel>div{margin-top:13px;padding-top:10px;border-top:1px solid var(--line);color:#89847d;font-size:7px}
.viewControls{position:absolute;z-index:24;left:24px;bottom:24px;display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:rgba(12,13,13,.88);backdrop-filter:blur(12px)}.viewControls button{height:35px;min-width:36px;padding:0 10px;border:0;border-right:1px solid var(--line);background:none;color:#aaa49b;font-size:8px;cursor:pointer}.viewControls button:first-child,.viewControls button:nth-child(2){font-size:17px}.viewControls button:last-child{border-right:0}.viewControls button:hover{background:rgba(255,255,255,.05);color:var(--cream)}
.navigationHint{position:absolute;z-index:20;right:22px;bottom:24px;display:flex;align-items:center;gap:9px;padding:9px 11px;border-left:2px solid #d8ae61;background:rgba(10,11,11,.72);pointer-events:none}.navigationHint>span{color:#d8ae61}.navigationHint p{display:grid;gap:2px;margin:0}.navigationHint b{font-size:7px}.navigationHint small{color:#78746e;font-size:6px}
.ki{position:relative;z-index:40;display:flex;min-width:0;height:100%;flex-direction:column;padding:28px 24px 22px;border-left:1px solid rgba(242,234,223,.1);background:#0d0f10;box-shadow:-18px 0 50px rgba(0,0,0,.22)}.ki header{display:flex;align-items:center;gap:12px}.ki header img{width:46px;height:46px;border-radius:50%;box-shadow:0 0 24px rgba(126,197,217,.16)}.ki header div{display:grid;gap:4px}.ki header small{color:#84bac7;font-size:6px;letter-spacing:.14em}.ki header strong{font:400 18px "Goudy Heavyface",Georgia,serif}.kiPresence{position:relative;height:170px;margin:26px 0 10px;border:1px solid rgba(189,214,217,.08);border-radius:50%;background:radial-gradient(circle,rgba(119,175,184,.08),transparent 58%)}.kiPresence:before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:#b9e0e6;box-shadow:0 0 18px #9ed0d8;transform:translate(-50%,-50%)}.kiPresence i{position:absolute;inset:22%;border:1px solid rgba(155,202,208,.14);border-radius:47% 53% 42% 58%;animation:kiOrbit 18s linear infinite}.kiPresence i:nth-child(2){inset:33% 14%;animation-duration:24s;animation-direction:reverse}.kiPresence i:nth-child(3){inset:14% 36%;animation-duration:14s}@keyframes kiOrbit{to{transform:rotate(360deg)}}
.kiMessage{margin:12px 0 18px;color:#c3bbb0;font:400 13px/1.58 "IBM Plex Sans",Avenir,sans-serif}.kiAction{width:100%;min-height:42px;padding:9px 12px;border:1px solid rgba(154,205,211,.28);border-radius:9px;background:#a9d4d8;color:#091113;font-size:8px;font-weight:700;cursor:pointer}.kiAction:hover{background:#c1e2e5}.ki form{display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:5px;margin-top:8px;padding:6px;border:1px solid var(--line);border-radius:9px;background:#090b0c}.ki input{min-width:0;border:0;background:none;color:var(--cream);outline:none;font-size:8px}.ki input::placeholder{color:#686661}.ki form button{border:0;border-radius:6px;background:rgba(157,207,212,.09);color:#9dcdd3;cursor:pointer}.ki footer{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;color:#66645f;font-size:6px;letter-spacing:.05em}.ki footer i{width:5px;height:5px;border-radius:50%;background:#88d8a5;box-shadow:0 0 8px #88d8a5}.ki footer span{color:#393a39}
@media(max-width:980px){.stage{grid-template-columns:minmax(0,1fr) 300px}.orientation{left:20px;top:20px}.orientation h1{font-size:38px}.compute{right:16px;top:16px;width:220px}.navigationHint{display:none}.ki{padding:22px 18px}.kiPresence{height:140px}.placeLabel{width:190px}.placeLabel strong{font-size:19px}}
@media(max-width:700px){.stage{grid-template-columns:minmax(340px,1fr) 260px;height:calc(100svh - 215px);min-height:590px}.compute{width:205px}.orientation p{max-width:180px}.orientation h1{font-size:32px}.ki{padding:18px 14px}.kiPresence{height:110px;margin-top:18px}.kiMessage{font-size:11px}.realmPanel{width:260px}.viewControls{left:14px;bottom:14px}}
@media(prefers-reduced-motion:reduce){.liveDot,.path,.mote,.placeBody,.orbit,.placeBody>i,.kiPresence i{animation:none}}
