:root{
  --void:#050505; --panel:rgba(13,15,24,.78); --panel-raised:rgba(20,24,38,.85);
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,45,170,.28);
  --ink:#ffffff; --ink-dim:#94a3b8; --ink-faint:#475569;
  --cyan:#4ee3ff; --violet:#8b6bff; --magenta:#ff2daa; --magenta-light:#ff4fbf;
  --font-display:'Space Grotesk',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:16px; --radius-sm:12px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; min-height:100vh; color:var(--ink); font-family:var(--font-body); background:var(--void) url('assets/quantum-wallpaper.png') 48% 44% / 118% auto fixed no-repeat; animation:qb-wallpaper-drift 24s ease-in-out infinite alternate; }
@keyframes qb-wallpaper-drift{ from{ background-position:46% 40%; background-size:116% auto; } to{ background-position:54% 57%; background-size:126% auto; } }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} body{animation:none;} *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;} }

.qb-header{ position:sticky; top:0; z-index:30; min-height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px,calc((100vw - 1120px)/2)); background:rgba(5,5,5,.85); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.qb-back{ color:var(--ink-dim); text-decoration:none; font:500 .88rem var(--font-mono); transition:color .2s; }
.qb-back:hover{ color:var(--magenta-light); }
.qb-title{ font:700 1.08rem var(--font-display); letter-spacing:-.03em; color:var(--ink); }
.qb-main{ max-width:920px; margin:0 auto; padding:64px 24px 64px; }

.qb-intro{ display:flex; align-items:center; gap:24px; margin:0 0 28px; }
.quinny{ position:relative; width:104px; height:104px; flex:0 0 104px; display:grid; place-items:center; }
.quinny-core{ width:42px; height:42px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--magenta-light) 36%,var(--magenta) 72%); box-shadow:0 0 36px rgba(255,45,170,.65); animation:quinny-breathe 2.6s ease-in-out infinite; }
.quinny-orbit{ position:absolute; inset:0; border:1px solid rgba(255,45,170,.44); border-radius:50%; animation:quinny-spin 5s linear infinite; }
.orbit-1{ transform:rotateX(65deg); }.orbit-2{ transform:rotateX(65deg) rotateZ(90deg); animation-duration:3.4s; animation-direction:reverse; }
.quinny-electron{ position:absolute; top:-4px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
@keyframes quinny-spin{from{transform:rotateX(65deg) rotateZ(0)}to{transform:rotateX(65deg) rotateZ(360deg)}}
@keyframes quinny-breathe{50%{transform:scale(1.14)}}
.quinny.thinking .quinny-orbit{animation-duration:.85s}.quinny.thinking .orbit-2{animation-duration:.55s}.quinny.thinking .quinny-core{animation-duration:.55s}
.qb-bubble{ flex:1; padding:22px 24px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel); backdrop-filter:blur(16px); box-shadow:0 18px 52px rgba(0,0,0,.5); color:var(--ink-dim); line-height:1.7; }.qb-bubble p{margin:0}.qb-bubble b{color:var(--magenta-light)}

.qb-chips{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 24px; }
.qb-chip{ border:1px solid var(--line-strong); border-radius:999px; padding:10px 16px; background:rgba(13,15,24,.72); color:var(--ink-dim); font:500 .82rem var(--font-body); cursor:pointer; transition:transform .2s ease,border-color .2s ease,color .2s ease,background .2s ease,box-shadow .2s ease; }
.qb-chip:hover{ transform:translateY(-2px); border-color:var(--magenta); color:#fff; background:var(--panel-raised); box-shadow:0 0 15px rgba(255,45,170,.25); }

.qb-chat-panel{ border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; background:rgba(10,12,20,.86); backdrop-filter:blur(16px); box-shadow:0 20px 60px rgba(0,0,0,.6); }
.qb-chat-heading{ display:flex; align-items:center; gap:9px; padding:14px 20px; border-bottom:1px solid var(--line); color:var(--ink-dim); font:500 .8rem var(--font-mono); }
.qb-status-dot{ width:8px; height:8px; border-radius:50%; background:var(--magenta); box-shadow:0 0 12px var(--magenta); }
.qb-messages{ display:flex; flex-direction:column; gap:18px; min-height:290px; max-height:54vh; overflow-y:auto; padding:24px 22px; }
.qb-msg{ max-width:min(88%,680px); font-size:.96rem; line-height:1.7; animation:qb-message-in .22s ease-out both; }
@keyframes qb-message-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.qb-msg.child{ align-self:flex-end; padding:12px 16px; border:1px solid rgba(255,45,170,.55); border-radius:16px 16px 3px 16px; background:rgba(255,45,170,.16); color:var(--ink); }
.qb-msg.qb-reply{ align-self:stretch; max-width:none; padding:0; color:var(--ink-dim); }
.qb-reply-meta{ display:flex; align-items:center; gap:8px; margin:0 0 7px; color:var(--magenta-light); font:700 .75rem var(--font-mono); text-transform:uppercase; letter-spacing:.05em; }.qb-reply-meta::before{content:'ψ'; display:grid;place-items:center;width:20px;height:20px;border:1px solid var(--magenta-light);border-radius:50%;font-size:.8rem;}
.qb-reply-body{ padding-left:28px; }.qb-reply-body p{margin:0 0 10px;}.qb-reply-body p:last-child{margin-bottom:0;}
.qb-msg.system{ align-self:center; max-width:90%; color:var(--ink-faint); font-size:.8rem; text-align:center; }.qb-msg.thinking{ align-self:flex-start; color:var(--magenta-light); font:500 .8rem var(--font-mono); letter-spacing:.2em; animation:qb-pulse 1s ease-in-out infinite; }@keyframes qb-pulse{50%{opacity:.35}}

.qb-input-row{ display:flex; gap:10px; padding:16px 18px 0; border-top:1px solid var(--line); }.qb-input{ flex:1; min-width:0; min-height:48px; padding:12px 16px; border:1px solid var(--line-strong); border-radius:12px; outline:none; background:rgba(5,8,19,.85); color:var(--ink); font:400 .95rem var(--font-body); transition:all .2s ease; }.qb-input::placeholder{color:var(--ink-faint)}.qb-input:focus{border-color:var(--magenta);box-shadow:0 0 0 3px rgba(255,45,170,.25),0 0 20px rgba(255,45,170,.3)}
.qb-send{ border:0; border-radius:12px; min-height:48px; padding:12px 24px; background:linear-gradient(135deg,var(--magenta),var(--magenta-light)); color:#ffffff; font:700 .9rem var(--font-display); cursor:pointer; transition:transform .2s ease,box-shadow .2s ease; box-shadow:0 4px 20px rgba(255,45,170,.4); }.qb-send:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(255,45,170,.6)}.qb-send:active{transform:translateY(0) scale(.98)}.qb-send:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.qb-hint{ margin:11px 20px 17px; color:var(--ink-faint); font-size:.78rem; }.qb-footer{ border-top:1px solid var(--line); background:rgba(0,0,0,.5); padding:34px 0 46px; }.qb-footer-inner{max-width:920px;margin:0 auto;padding:0 24px}.qb-footer-fine{margin:0;color:var(--ink-faint);font:.8rem var(--font-mono)}.qb-footer-fine a{color:var(--magenta-light);text-decoration:none}
@media(max-width:620px){.qb-header{padding:0 18px}.qb-main{padding:42px 18px}.qb-intro{align-items:flex-start;gap:15px}.quinny{width:68px;height:68px;flex-basis:68px}.quinny-core{width:30px;height:30px}.qb-bubble{padding:16px}.qb-messages{min-height:260px;padding:20px 16px}.qb-reply-body{padding-left:0}.qb-input-row{padding:13px 13px 0}.qb-send{padding:12px 14px}.qb-hint{margin-left:15px;margin-right:15px}.qb-chat-heading{padding:13px 16px}}