*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#050b14;color:#f5f7fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}body{overflow-x:hidden;background:radial-gradient(circle at 50% 38%,#101c2b 0,#07101c 34%,#050a12 70%)}button,input{font:inherit}.shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:86px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 3.2vw;border-bottom:1px solid rgba(255,255,255,.045);position:relative;z-index:20}.brand{display:flex;align-items:center;gap:14px}.brand-ring{width:50px;height:50px;border-radius:50%;border:2px solid #e8ae46;box-shadow:0 0 28px #d89125,inset 0 0 19px rgba(229,170,62,.35);position:relative}.brand-ring:after{content:"";position:absolute;inset:7px;border-radius:50%;border:1px dotted #ffd46e}.brand strong{font-size:23px}.brand span{display:block;color:#8f9bb0;font-size:13px;margin-top:2px}.presence{border:1px solid #243042;border-radius:28px;padding:12px 22px;display:flex;align-items:center;gap:12px;background:rgba(10,18,29,.65);backdrop-filter:blur(14px)}.presence i{width:9px;height:9px;border-radius:50%;background:#2ce69c;box-shadow:0 0 13px #2ce69c}.presence span{font-weight:700}.presence em{font-style:normal;color:#93a0b5;border-left:1px solid #26354a;padding-left:14px}.userbox{justify-self:end;display:flex;align-items:center;gap:11px;color:#cad2df}.userbox a{color:#8490a3;text-decoration:none;margin-left:7px}.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#29364b;font-weight:800}.clock{text-align:right;margin-right:12px}.clock strong{display:block;font-size:18px}.clock span{font-size:11px;color:#8390a4}.stage{flex:1;display:grid;grid-template-columns:minmax(210px,290px) minmax(460px,1fr) minmax(210px,290px);gap:2vw;align-items:center;padding:18px 2.5vw 6px;min-height:760px}.rail{display:flex;flex-direction:column;gap:14px;z-index:10}.nav-card,.connector-card{border:1px solid #253348;background:linear-gradient(135deg,rgba(13,23,36,.9),rgba(8,16,27,.75));border-radius:15px;min-height:78px;color:#eef2f7;text-align:left;padding:15px 17px;display:flex;gap:14px;align-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.01);transition:.2s}.nav-card{cursor:pointer}.nav-card:hover{transform:translateY(-2px);border-color:#625431;box-shadow:0 8px 25px rgba(0,0,0,.2),0 0 18px rgba(218,161,58,.08)}.nav-card b{width:38px;color:#f0bd57;font-size:25px;text-align:center}.nav-card strong{font-size:15px}.nav-card small{display:block;color:#8f9caf;margin-top:4px;font-size:12px}.nav-card.accent{border-color:#6e592f}.connector-card{display:block;min-height:0;margin-top:5px}.connector-card strong{font-size:13px}.connector-card a{display:inline-block;color:#e2b051;text-decoration:none;font-size:12px;margin-top:9px}.connector-row{display:flex;justify-content:space-between;font-size:11px;margin-top:8px;color:#98a4b7}.connector-row i{font-style:normal}.ok{color:#38dfa0}.bad{color:#ff6d74}.core{position:relative;height:100%;min-height:680px;display:flex;flex-direction:column;align-items:center;justify-content:center}.face-wrap{width:min(58vw,660px);aspect-ratio:1/1;position:relative;border-radius:50%;overflow:hidden;filter:drop-shadow(0 0 35px rgba(235,176,67,.10));transition:filter .25s,transform .25s;z-index:3}.face{width:100%;height:100%;object-fit:cover;border-radius:50%;mix-blend-mode:screen;mask-image:radial-gradient(circle at center,#000 54%,rgba(0,0,0,.78) 67%,transparent 79%);-webkit-mask-image:radial-gradient(circle at center,#000 54%,rgba(0,0,0,.78) 67%,transparent 79%);opacity:.98}.face-wrap.listening{filter:drop-shadow(0 0 52px rgba(255,190,72,.45));transform:scale(1.018)}.face-wrap.speaking{animation:pulseFace 1.05s ease-in-out infinite}.scan{position:absolute;left:18%;right:18%;top:14%;height:1px;background:linear-gradient(90deg,transparent,#ffcf6d,transparent);box-shadow:0 0 16px #ffc85a;opacity:.35;animation:scan 6s linear infinite}.halo{position:absolute;border-radius:50%;border:1px solid rgba(225,168,61,.2);z-index:1}.halo-a{width:min(61vw,700px);aspect-ratio:1;box-shadow:0 0 70px rgba(204,145,42,.05)}.halo-b{width:min(67vw,780px);aspect-ratio:1;border-style:dashed;opacity:.38;animation:rotate 34s linear infinite}#particleCanvas{position:absolute;width:min(70vw,820px);height:min(70vw,820px);z-index:2;pointer-events:none;opacity:.55}.response{min-height:48px;max-width:760px;text-align:center;margin-top:-25px;z-index:6;font-size:18px;line-height:1.45;padding:8px 18px;text-shadow:0 1px 16px #000}.response span{background:rgba(4,10,18,.7);border-radius:15px;padding:8px 14px;box-decoration-break:clone;-webkit-box-decoration-break:clone}.voicebar{z-index:6;margin-top:12px;width:min(430px,78vw);height:56px;border:1px solid #33445b;border-radius:29px;background:rgba(10,18,29,.86);display:flex;align-items:center;justify-content:center;gap:28px;color:#e9eef5;box-shadow:0 15px 45px rgba(0,0,0,.27)}.wave{display:flex;align-items:center;gap:3px;height:25px}.wave i{display:block;width:2px;height:8px;background:#efb64b;box-shadow:0 0 7px rgba(239,182,75,.7)}.wave.active i{animation:wave .7s ease-in-out infinite}.wave.active i:nth-child(2){animation-delay:.1s}.wave.active i:nth-child(3){animation-delay:.2s}.wave.active i:nth-child(4){animation-delay:.3s}.wave.active i:nth-child(5){animation-delay:.4s}.controls{display:flex;align-items:center;gap:38px;margin-top:22px;z-index:7}.round{width:58px;height:58px;border-radius:50%;border:1px solid #2f3c50;background:#09111c;color:#cfd8e6;cursor:pointer;font-size:20px}.round.mic{width:90px;height:90px;border:3px solid #efbf60;color:#ffd373;background:radial-gradient(circle,#523d1c 0,#151514 50%,#0b1018 76%);box-shadow:0 0 25px rgba(238,177,66,.36),inset 0 0 25px rgba(229,167,57,.18);font-size:26px}.round.mic.recording{animation:micpulse 1s ease-in-out infinite}.text-entry{width:min(620px,86vw);margin-top:14px;display:none;z-index:10;gap:8px}.text-entry.open{display:flex}.text-entry input{flex:1;border:1px solid #34425a;background:#09121f;color:#fff;border-radius:12px;padding:13px 15px;outline:none}.text-entry button{border:0;border-radius:12px;background:#e9b54e;color:#15110a;font-weight:800;padding:0 20px;cursor:pointer}.bottom{height:64px;padding:0 3.2vw 18px;display:flex;align-items:flex-end;justify-content:space-between;color:#8692a5;font-size:12px}.sunpos-wordmark{font-size:24px;color:white;font-weight:800}.sunpos-wordmark small{font-size:8px;display:block;letter-spacing:4px;font-weight:500}.bottom>div:last-child{text-align:right} @keyframes rotate{to{transform:rotate(360deg)}}@keyframes scan{0%{top:18%;opacity:.1}50%{opacity:.6}100%{top:78%;opacity:.1}}@keyframes wave{0%,100%{height:6px}50%{height:24px}}@keyframes micpulse{50%{box-shadow:0 0 52px rgba(242,179,57,.65),inset 0 0 35px rgba(235,177,67,.3)}}@keyframes pulseFace{0%,100%{filter:drop-shadow(0 0 28px rgba(255,192,75,.16))}50%{filter:drop-shadow(0 0 58px rgba(255,192,75,.48))}}
@media(max-width:1000px){.stage{grid-template-columns:170px 1fr 170px;gap:8px;padding-left:12px;padding-right:12px}.nav-card{min-height:68px;padding:11px}.nav-card b{width:28px}.face-wrap{width:min(60vw,580px)}.topbar{grid-template-columns:1fr auto}.presence{display:none}.clock{display:none}}
@media(max-width:760px){body{background:radial-gradient(circle at 50% 37%,#111e2d 0,#07101c 38%,#050a12 78%)}.topbar{height:70px;padding:0 16px}.brand-ring{width:38px;height:38px}.brand strong{font-size:19px}.brand span{font-size:11px}.userbox>span,.userbox>a{display:none}.stage{display:block;min-height:calc(100vh - 120px);padding:0}.rail{display:none}.core{min-height:calc(100vh - 122px);justify-content:center}.face-wrap{width:96vw;max-width:560px;margin-top:-52px}.halo-a{width:100vw}.halo-b{width:112vw}.response{font-size:16px;margin-top:-36px;width:94vw}.voicebar{margin-top:12px;height:50px}.controls{margin-top:20px}.round.mic{width:82px;height:82px}.bottom{height:52px;padding:0 16px 10px}.bottom>div:last-child{display:none}.sunpos-wordmark{font-size:18px}.connector-card{display:none}}
/* Sunny 0.2.1 mobile overhaul */
.mobile-menu-button,.mobile-drawer,.mobile-backdrop{display:none}
@media(max-width:760px){
  html,body{height:100%;min-height:100%;background:#050b14}
  body{overflow:hidden;background:radial-gradient(circle at 50% 31%,#152538 0,#07101c 40%,#050a12 76%)}
  .shell{height:100dvh;min-height:100dvh;overflow:hidden}
  .topbar{height:62px;min-height:62px;padding:0 14px;background:rgba(5,11,20,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.045);grid-template-columns:1fr auto}
  .brand{gap:10px}.brand-ring{width:34px;height:34px;box-shadow:0 0 18px #d89125,inset 0 0 12px rgba(229,170,62,.28)}.brand-ring:after{inset:5px}.brand strong{font-size:18px}.brand span{font-size:10px}
  .userbox{gap:8px}.avatar{width:32px;height:32px;font-size:13px}.clock,.userbox>span,.userbox>a{display:none}
  .mobile-menu-button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #304057;background:#0a1422;color:#e8eef7;border-radius:12px;font-size:20px;cursor:pointer}
  .stage{display:block;min-height:0;height:calc(100dvh - 62px);padding:0;position:relative}
  .rail{display:none!important}
  .core{height:100%;min-height:0;justify-content:flex-start;padding-top:max(2vh,10px);overflow:hidden}
  .face-wrap{width:min(92vw,52vh);max-width:none;margin:0;flex:0 0 auto}
  .halo-a{width:min(98vw,57vh)}.halo-b{width:min(112vw,64vh)}#particleCanvas{width:min(112vw,64vh);height:min(112vw,64vh)}
  .response{width:94vw;max-width:520px;min-height:52px;margin-top:-3.5vh;font-size:15px;line-height:1.35;padding:7px 10px;z-index:8}
  .response span{display:inline-block;max-height:84px;overflow:auto;background:rgba(3,9,16,.76);border:1px solid rgba(255,255,255,.04);padding:8px 12px;border-radius:14px}
  .voicebar{width:min(86vw,390px);height:48px;margin-top:8px;gap:20px;flex:0 0 auto}
  .controls{margin-top:14px;gap:24px;flex:0 0 auto}.round{width:48px;height:48px;font-size:17px}.round.mic{width:76px;height:76px;font-size:23px;border-width:2px}
  .text-entry{position:absolute;left:10px;right:10px;bottom:14px;width:auto;margin:0;padding:8px;border-radius:15px;background:rgba(7,16,28,.96);box-shadow:0 12px 35px rgba(0,0,0,.35)}
  .text-entry input{min-width:0}.text-entry button{padding:0 14px}
  .bottom{display:none}
  .mobile-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.58);opacity:0;pointer-events:none;transition:.2s;z-index:80}
  .mobile-backdrop.open{opacity:1;pointer-events:auto}
  .mobile-drawer{display:block;position:fixed;left:0;right:0;bottom:0;max-height:79dvh;overflow:auto;transform:translateY(105%);transition:transform .25s ease;background:linear-gradient(180deg,#101b2b,#08111d);border-top:1px solid #33445b;border-radius:22px 22px 0 0;z-index:90;padding:12px 14px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -25px 70px rgba(0,0,0,.5)}
  .mobile-drawer.open{transform:translateY(0)}
  .mobile-drawer-head{height:45px;display:flex;align-items:center;justify-content:space-between;padding:0 4px 8px}.mobile-drawer-head strong{font-size:17px}.mobile-drawer-head button{width:36px;height:36px;border-radius:50%;border:1px solid #33445b;background:#0a1422;color:#fff;font-size:25px;line-height:1;cursor:pointer}
  .mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .mobile-actions .nav-card{display:flex!important;min-height:66px;padding:10px 11px;border-radius:13px}.mobile-actions .nav-card b{width:26px;font-size:20px}.mobile-actions .nav-card strong{font-size:13px}.mobile-actions .nav-card small{font-size:10px}
  .mobile-system{margin-top:12px;padding:13px;border:1px solid #2a394e;border-radius:13px;background:#09131f}.mobile-system>strong{font-size:13px}.mobile-system a{display:inline-block;margin-top:10px;color:#e9b54e;font-size:12px;text-decoration:none}
  .mobile-system .connector-row{font-size:11px;margin-top:7px}
}
@media(max-width:390px) and (max-height:720px){
  .face-wrap{width:min(82vw,43vh)}.halo-a{width:min(90vw,49vh)}.halo-b,#particleCanvas{width:min(104vw,56vh);height:min(104vw,56vh)}
  .response{margin-top:-2vh;font-size:14px}.voicebar{height:44px;margin-top:5px}.controls{margin-top:9px}.round.mic{width:68px;height:68px}.round{width:44px;height:44px}
}

.connector-row span{min-width:0}.connector-row span b{font-weight:500}.connector-error{display:block;color:#ff8c92;font-size:10px;line-height:1.2;margin-top:3px;max-width:220px;overflow-wrap:anywhere}.connector-card{min-width:0}