*{margin:0;padding:0;box-sizing:border-box}.container{max-width:1200px;margin:0 auto;padding:2rem}h1{text-align:center;font-size:clamp(2rem,5vw,2.5rem);margin-bottom:2rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.context-window{background:#ffffff0f;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:1.5rem;padding:2rem;margin-bottom:2rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 40px #0000004d}.window-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding:1.125rem 1.5rem;background:#ffffff0a;border-radius:1rem;border:1px solid rgba(255,255,255,.08)}.token-counter{font-size:1.2rem;font-weight:600;color:#a8b3cf;background:linear-gradient(90deg,#60a5fa,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tokens-container{display:flex;flex-direction:column;gap:.75rem;min-height:200px;padding:1.5rem;background:#00000026;border-radius:1.25rem;border:1px solid rgba(255,255,255,.08);position:relative;overflow-y:auto;max-height:500px}.empty-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:.5;font-size:1.2rem;text-align:center}.controls{display:flex;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap;justify-content:center}.btn{padding:.875rem 1.75rem;border:none;border-radius:.75rem;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.5px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}.btn-primary{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 4px 20px #3b82f64d;border:1px solid rgba(255,255,255,.1)}.btn-secondary{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 20px #10b9814d;border:1px solid rgba(255,255,255,.1)}.btn-danger{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 20px #ef44444d;border:1px solid rgba(255,255,255,.1)}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.legend{display:flex;gap:1.25rem;justify-content:center;margin:1.25rem 0;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:.5rem}.legend-color{width:1rem;height:1rem;border-radius:.25rem;box-shadow:0 2px 8px #0003}.system-color{background:linear-gradient(135deg,#ef4444,#dc2626)}.user-color{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.assistant-color{background:linear-gradient(135deg,#10b981,#059669)}.info-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:2rem}.info-card{background:#ffffff0f;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:1rem;padding:1.5rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000001a}.info-card h3{margin-bottom:.75rem;color:#a8b3cf;background:linear-gradient(90deg,#60a5fa,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}@media (max-width: 768px){.container,.context-window{padding:1rem}.window-header{flex-direction:column;gap:.75rem;text-align:center}.controls{flex-direction:column;align-items:stretch}.btn{width:100%}.info-panel{grid-template-columns:1fr}}@keyframes slideIn{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0) scale(1);opacity:1}to{transform:translate(-50px) scale(.8);opacity:0}}@keyframes contextSaturated{0%{background-color:#ef44441a}50%{background-color:#ef44444d}to{background-color:#ef44441a}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.token{padding:.625rem 1rem;border-radius:.75rem;font-size:.9rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;animation:slideIn .5s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);width:-moz-fit-content;width:fit-content;max-width:80%;word-break:break-word;line-height:1.5}.token.system{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 20px #ef444440;border:1px solid rgba(255,255,255,.1);margin-left:0;margin-right:auto;text-align:left;font-weight:500;width:-moz-fit-content;width:fit-content;max-width:80%;padding:.625rem 1rem;font-size:.95rem;letter-spacing:.2px;position:relative;z-index:1}.token.system:before{display:none}.token.user{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;box-shadow:0 4px 20px #3b82f640;border:1px solid rgba(255,255,255,.1);margin-left:auto;position:relative}.token.user:before{content:"";position:absolute;right:-8px;top:50%;transform:translateY(-50%);border-left:8px solid #3b82f6;border-top:8px solid transparent;border-bottom:8px solid transparent}.token.assistant{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 20px #10b98140;border:1px solid rgba(255,255,255,.1);margin-right:auto;position:relative}.token.assistant:before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);border-right:8px solid #10b981;border-top:8px solid transparent;border-bottom:8px solid transparent}.token.old{opacity:.7;transform:scale(.98);filter:saturate(.8)}.token:hover{transform:scale(1.02);box-shadow:0 6px 24px #0003;filter:brightness(1.1)}.saturated{animation:contextSaturated 1s ease-in-out 3;border-color:#ef444480!important}.window-header.saturated{animation:shake .5s ease-in-out 2}.token.about-to-remove{animation:pulse .5s ease-in-out infinite;background:linear-gradient(135deg,#f59e0b,#d97706)!important;box-shadow:0 4px 20px #f59e0b66!important}.token.removing{animation:slideOut .3s ease-in forwards}