.grok-face{display:inline-flex;line-height:0;-webkit-user-select:none;user-select:none;flex-shrink:0;--grok-shape-ms: .75s;--grok-shape-ease: cubic-bezier(.22, 1.15, .36, 1);--grok-spin-origin: 114.2705px 114.2705px}.grok-face__svg{display:block;overflow:visible;transform-origin:50% 50%}.grok-face[data-morphing] .grok-face__svg{animation:grok-face-shape-pop var(--grok-shape-ms) var(--grok-shape-ease)}@keyframes grok-face-shape-pop{0%{transform:scale(1)}30%{transform:scale(.985)}65%{transform:scale(1.02)}to{transform:scale(1)}}.grok-face__spin{transform-box:view-box;transform-origin:var(--grok-spin-origin);transform-origin:114.2705px 114.2705px}.grok-face__body,.grok-face__fx{pointer-events:none}.grok-face__ribbon{opacity:0;stroke-dasharray:var(--grok-ribbon-dash, 48) var(--grok-ribbon-gap, 180);stroke-dashoffset:0;animation:grok-face-ribbon-fade var(--grok-shape-ms) ease both,grok-face-ribbon-dash var(--grok-ribbon-spin-ms, var(--grok-shape-ms)) linear both;animation-delay:var(--grok-ribbon-delay, 0ms),var(--grok-ribbon-delay, 0ms)}@keyframes grok-face-ribbon-fade{0%{opacity:0}12%{opacity:.85}70%{opacity:.75}to{opacity:0}}@keyframes grok-face-ribbon-dash{0%{stroke-dashoffset:0}to{stroke-dashoffset:calc(-1 * (var(--grok-ribbon-dash, 48) + var(--grok-ribbon-gap, 180)))}}.grok-face[data-shape-fx] .grok-face__fx--front{transform-box:view-box;transform-origin:114.2705px 114.2705px;animation:grok-face-fx-drift var(--grok-shape-ms) linear both}.grok-face[data-shape-fx] .grok-face__fx--back{transform-box:view-box;transform-origin:114.2705px 114.2705px;animation:grok-face-fx-drift-back var(--grok-shape-ms) linear both}@keyframes grok-face-fx-drift{0%{transform:rotate(0)}to{transform:rotate(-28deg)}}@keyframes grok-face-fx-drift-back{0%{transform:rotate(0)}to{transform:rotate(20deg)}}@media(prefers-reduced-motion:reduce){.grok-face{--grok-shape-ms: 0ms}.grok-face[data-morphing] .grok-face__svg,.grok-face[data-shape-fx] .grok-face__fx--front,.grok-face[data-shape-fx] .grok-face__fx--back,.grok-face__ribbon{animation:none!important}.grok-face__ribbon{opacity:0}}.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:28px 24px 40px;animation:fade-in .7s ease both}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.wordmark{display:flex;align-items:center;gap:10px;align-self:flex-start;max-width:1080px;width:100%;margin:0 auto;font-size:.95rem;font-weight:500;letter-spacing:-.02em;color:#f5f5f5}.wordmark-face{flex-shrink:0;pointer-events:none}.stage{width:100%;max-width:1080px;margin:0 auto;display:flex;flex-direction:column;align-items:center;flex:1}.face-wrap{display:grid;place-items:center;margin:40px 0 28px;width:100%}.preview{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#0a0a0a;padding:14px 16px 16px;margin-bottom:28px}.preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.preview-label{font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#666}.control-block{margin-bottom:12px}.control-label{display:block;font-size:.7rem;color:#555;margin-bottom:6px;letter-spacing:.02em}.mood-chips{display:flex;flex-wrap:wrap;gap:6px}.chip{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.12);background:transparent;color:#9a9a9a;border-radius:999px;padding:5px 10px;font-size:.72rem;font-weight:500;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}.chip:hover{color:#e8e8e8;border-color:#ffffff47}.chip.active{color:#0a0a0a;background:#f5f5f5;border-color:#f5f5f5}.control-row{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.control-row.sliders{grid-template-columns:repeat(4,1fr);margin-top:4px}.swatch-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.swatch{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.2);padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px #00000059}.swatch.active{outline:1px solid #f5f5f5;outline-offset:2px}.hex-field{display:inline-flex;align-items:center;gap:6px;margin-left:2px}.hex-field input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:transparent;cursor:pointer}.hex-field input[type=color]::-webkit-color-swatch-wrapper{padding:2px}.hex-field input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.hex-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:78px;border:1px solid rgba(255,255,255,.12);background:#000;color:#c8c8c8;border-radius:6px;padding:4px 7px;font-size:.72rem;font-family:var(--mono)}.hex-input:focus{outline:none;border-color:#ffffff59}.slider-field{display:flex;flex-direction:column;gap:4px;min-width:0}.slider-field input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:3px;border-radius:999px;background:#ffffff1f;outline:none;cursor:pointer}.slider-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#f5f5f5;border:none;cursor:pointer}.slider-field input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#f5f5f5;border:none;cursor:pointer}.control-actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}.toggle{display:inline-flex;align-items:center;gap:7px;font-size:.74rem;color:#9a9a9a;cursor:pointer;-webkit-user-select:none;user-select:none}.toggle input{accent-color:#f5f5f5;width:14px;height:14px;cursor:pointer}.action-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.14);background:transparent;color:#e8e8e8;border-radius:6px;padding:5px 11px;font-size:.72rem;font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease}.action-btn:hover{background:#141414;border-color:#ffffff47}.split{width:100%;display:grid;grid-template-columns:1.35fr 1fr;gap:16px;align-items:stretch}.panel{min-width:0;display:flex;flex-direction:column}.code-panel{min-width:0}.agent-panel{border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#0a0a0a;overflow:hidden;height:100%}.agent-head{border-bottom:1px solid rgba(255,255,255,.08)}.agent-body{margin:0;padding:16px 18px 20px;overflow:auto;max-height:min(60vh,560px);font-size:.8rem;line-height:1.55;color:#d0d0d0;white-space:pre-wrap;word-break:break-word;flex:1}.tabs{display:flex;gap:2px;width:100%;border-bottom:1px solid rgba(255,255,255,.1)}.tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:transparent;color:#6a6a6a;padding:10px 14px;font-size:.82rem;font-weight:500;letter-spacing:.01em;cursor:pointer;border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .15s ease}.tab:hover{color:#c8c8c8}.tab.active{color:#f5f5f5;border-bottom-color:#f5f5f5}.hint{align-self:stretch;margin:12px 0 0;font-size:.72rem;color:#555;letter-spacing:.01em}.code{width:100%;margin-top:14px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#0a0a0a;overflow:hidden;flex:1;display:flex;flex-direction:column}.code-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 14px;border-bottom:1px solid rgba(255,255,255,.08);font-size:.72rem;color:#666;font-family:var(--mono)}.copy-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid rgba(255,255,255,.14);background:transparent;color:#e8e8e8;border-radius:6px;padding:5px 10px;font-size:.72rem;font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease}.copy-btn:hover{background:#141414;border-color:#ffffff47}.code pre{margin:0;padding:16px 18px 20px;overflow:auto;max-height:min(48vh,420px);font-size:.8rem;line-height:1.55;color:#d0d0d0;white-space:pre-wrap;word-break:break-word;flex:1}.foot{margin-top:40px;font-size:.72rem;color:#444;letter-spacing:.02em;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.foot-source{color:#3a3a3a}.foot a{color:#888;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.14);transition:color .15s ease}.foot a:hover{color:#f5f5f5}@media(max-width:900px){.split{grid-template-columns:1fr}.control-row.sliders{grid-template-columns:1fr 1fr}}@media(max-width:640px){.page{padding:20px 14px 36px}.face-wrap{margin:28px 0 20px}.control-row,.control-row.sliders{grid-template-columns:1fr}.tab{padding:10px;font-size:.78rem}.preview{padding:12px}}:root{color-scheme:dark;--font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--font);color:#f5f5f5;background:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font:inherit;color:inherit}code,pre{font-family:var(--mono)}#root{min-height:100vh}::selection{background:#ffffff2e;color:#fff}