:root{color-scheme:light;--paper: #f7f7f4;--panel: #ffffff;--ink: #171a1f;--muted: #626a73;--line: #d9ded8;--field: #f1f3f0;--copper: #b85f37;--signal: #1d7f6e;--violet: #4f46a7;--shadow: 0 24px 80px rgba(23, 26, 31, .14);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{min-height:100%;background:linear-gradient(90deg,rgba(23,26,31,.035) 1px,transparent 1px) 0 0 / 42px 42px,linear-gradient(rgba(23,26,31,.035) 1px,transparent 1px) 0 0 / 42px 42px,var(--paper);color:var(--ink)}body{min-width:320px;min-height:100vh;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.62}.shell{width:min(1420px,calc(100vw - 32px));min-height:100vh;margin:0 auto;padding:28px 0;display:grid;align-items:center}.console{min-height:min(860px,calc(100vh - 56px));padding:18px;border:1px solid var(--line);border-radius:8px;background:#ffffffc7;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.topbar,.output-header,.actions,.preset-row{display:flex;align-items:center}.topbar{justify-content:space-between;gap:16px;padding:4px 4px 18px;border-bottom:1px solid var(--line)}.eyebrow{margin:0 0 5px;color:var(--muted);font-size:.72rem;font-weight:760;letter-spacing:0;text-transform:uppercase}h1,h2{margin:0;letter-spacing:0}h1{font-family:ui-serif,Georgia,Cambria,Times New Roman,serif;font-size:clamp(2.2rem,5vw,5.4rem);line-height:.92;font-weight:680}h2{font-size:1.05rem;line-height:1.1}.runtime{min-height:40px;max-width:520px;padding:9px 12px;border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;gap:9px;color:var(--muted);background:var(--panel);font-size:.82rem;line-height:1.2}.runtime-dot{width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:var(--muted)}.runtime-ready .runtime-dot{background:var(--signal)}.runtime-error .runtime-dot{background:var(--copper)}.workbench{display:grid;grid-template-columns:minmax(340px,.78fr) minmax(420px,1.22fr);gap:18px;padding-top:18px}.controls,.output-panel{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.controls{padding:16px}.field{display:grid;gap:7px}.field span{color:var(--muted);font-size:.76rem;font-weight:720;text-transform:uppercase}textarea,input,select{width:100%;border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--ink);outline:none}textarea{resize:vertical;min-height:82px;padding:11px 12px;line-height:1.42}textarea:focus,input:focus,select:focus,button:focus-visible,.output:focus{border-color:var(--violet);box-shadow:0 0 0 3px #4f46a729}.prompt-field{margin-top:12px}.preset-row{flex-wrap:wrap;gap:8px;margin:12px 0 0}.preset,.secondary,.primary{min-height:38px;border:1px solid var(--line);border-radius:6px;padding:0 13px;color:var(--ink);background:var(--panel);font-weight:720}.preset:hover,.secondary:hover{border-color:var(--muted)}.setting-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}input,select{height:38px;padding:0 10px}.actions{justify-content:flex-end;gap:8px;margin-top:16px}.primary{min-width:132px;border-color:var(--ink);background:var(--ink);color:#fff}.primary:hover{background:#000}.output-panel{position:relative;display:grid;grid-template-rows:auto auto minmax(360px,1fr) auto;overflow:hidden}.output-header{justify-content:space-between;gap:16px;padding:16px}.metric{min-width:96px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;color:var(--muted);text-align:center;font-size:.82rem;font-weight:720}.progress-shell{height:3px;background:var(--field)}.progress-bar{width:0%;height:100%;background:linear-gradient(90deg,var(--signal),var(--violet),var(--copper));transition:width .18s ease}.output{margin:0;padding:20px;overflow:auto;white-space:pre-wrap;word-break:break-word;outline:none;color:var(--ink);font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.96rem;line-height:1.55}.output:empty:before{color:var(--muted);content:"Model output will appear here."}.token-rail{min-height:34px;padding:8px 12px 12px;display:flex;align-items:flex-end;gap:4px;border-top:1px solid var(--line);background:#fbfbfa}.token-mark{width:var(--token-size);height:9px;border-radius:999px;background:var(--signal);opacity:.42;animation:token-rise .36s ease-out both}.token-mark:nth-child(3n){background:var(--violet)}.token-mark:nth-child(5n){background:var(--copper)}@keyframes token-rise{0%{transform:translateY(7px);opacity:0}}@media (max-width: 980px){.shell{width:min(100vw - 20px,760px);align-items:start;padding:10px 0}.console{min-height:calc(100vh - 20px);padding:12px}.topbar{align-items:flex-start;flex-direction:column}.runtime{width:100%;max-width:none;border-radius:6px}.workbench{grid-template-columns:1fr}.setting-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.output-panel{grid-template-rows:auto auto minmax(280px,48vh) auto}}@media (max-width: 560px){.shell{width:100%;padding:0}.console{min-height:100vh;border:0;border-radius:0}.setting-grid{grid-template-columns:1fr}.actions{align-items:stretch;flex-direction:column}.primary,.secondary{width:100%}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.diagnostics-panel{border-top:1px solid var(--line);background:#fbfbfa}.diagnostics-header{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.diagnostics-header h2{font-size:.95rem}.diagnostics{max-height:220px;margin:0;padding:0 14px 14px;overflow:auto;white-space:pre-wrap;word-break:break-word;color:#2c3238;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.78rem;line-height:1.45}.diagnostics:empty:before{color:var(--muted);content:"Diagnostics will appear here."}