| |
| |
| |
| |
| |
|
|
| :root { |
| --void: #000000; |
| --glass-bg: rgba(255,255,255,.02); |
| --glass-border: rgba(255,255,255,.06); |
| --border-1px: rgba(255,255,255,.06); |
| --border-glow: rgba(255,255,255,.10); |
| --purple: #8B5CF6; --cyan: #06B6D4; --green: #10B981; --gold: #F59E0B; --red: #EF4444; |
| --neon-purple: #A78BFA; --neon-cyan: #22D3EE; --neon-green: #34D399; |
| --text-primary: #e0e0e0; --text-secondary: #8888a0; --text-muted: #555570; |
| --radius-lg: 16px; --radius-md: 10px; --radius-sm: 6px; |
| --font-mono: 'SF Mono','Fira Code','JetBrains Mono',monospace; |
| --font-sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; |
| --transition-fast: 100ms cubic-bezier(.4,0,.2,1); |
| --transition-smooth: 220ms cubic-bezier(.4,0,.2,1); |
| } |
|
|
| *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} |
| html,body{height:100%;overflow:hidden} |
| body{ |
| font-family:var(--font-sans); |
| background:var(--void); |
| color:var(--text-primary); |
| -webkit-font-smoothing:antialiased; |
| } |
| ::selection{background:rgba(139,92,246,.4);color:#fff} |
|
|
| |
| .obsidian-shell{ |
| display:flex;flex-direction:column; |
| height:100vh;padding:.6rem;gap:.45rem; |
| max-width:760px;margin:0 auto; |
| overflow-y:auto; |
| } |
|
|
| |
| .aura-field{ |
| text-align:center; |
| padding:.6rem 0 .3rem; |
| flex-shrink:0; |
| position:relative; |
| } |
| .wizard-orbit{ |
| position:relative;display:inline-flex; |
| align-items:center;justify-content:center; |
| width:64px;height:64px; |
| } |
| .orbit-ring{ |
| position:absolute;inset:-4px; |
| border-radius:50%; |
| border:1.5px solid rgba(139,92,246,.25); |
| animation:orbit-spin 12s linear infinite; |
| } |
| |
| .orbit-ring.forging{ |
| border-color:rgba(6,182,212,.5); |
| box-shadow:0 0 20px rgba(6,182,212,.15),inset 0 0 20px rgba(6,182,212,.08); |
| animation:orbit-spin 6s linear infinite,orbit-glow 3s ease-in-out infinite; |
| } |
| @keyframes orbit-spin{to{transform:rotate(360deg)}} |
| @keyframes orbit-glow{0%,100%{box-shadow:0 0 16px rgba(139,92,246,.15),inset 0 0 16px rgba(139,92,246,.05)}50%{box-shadow:0 0 32px rgba(6,182,212,.25),inset 0 0 32px rgba(6,182,212,.12)}} |
|
|
| .wizard-hat{ |
| width:42px;height:42px; |
| filter:drop-shadow(0 0 12px rgba(139,92,246,.35)); |
| transition:filter var(--transition-fast),transform var(--transition-fast); |
| will-change:transform,filter;z-index:1; |
| } |
| .wizard-hat.pulse{ |
| animation:wiz-aether .5s cubic-bezier(.4,0,.2,1) infinite; |
| } |
| @keyframes wiz-aether{ |
| 0%{transform:scale(1);filter:drop-shadow(0 0 12px rgba(139,92,246,.35))} |
| 50%{transform:scale(1.12);filter:drop-shadow(0 0 28px rgba(6,182,212,.7))} |
| 100%{transform:scale(1);filter:drop-shadow(0 0 12px rgba(139,92,246,.35))} |
| } |
| .wizard-hat.stable{filter:drop-shadow(0 0 18px rgba(16,185,129,.7));animation:none;transform:scale(1)} |
| .wizard-hat.error{filter:drop-shadow(0 0 18px rgba(239,68,68,.7));animation:none} |
| .wizard-hat.deployed{filter:drop-shadow(0 0 22px rgba(245,158,11,.8));animation:none} |
|
|
| .hero-title{ |
| font-size:clamp(1.2rem,3.5vw,1.6rem);font-weight:800;line-height:1.1; |
| background:linear-gradient(135deg,var(--neon-purple),var(--neon-cyan),var(--neon-green)); |
| -webkit-background-clip:text;-webkit-text-fill-color:transparent; |
| background-clip:text; |
| margin-top:.3rem; |
| } |
|
|
| |
| .thought-stream{ |
| margin-top:.4rem;padding:.35rem .6rem; |
| background:rgba(255,255,255,.015); |
| border:1px solid var(--border-1px); |
| border-radius:var(--radius-sm); |
| text-align:left; |
| display:flex;align-items:flex-start;gap:.5rem; |
| opacity:0;transform:translateY(-3px); |
| transition:opacity .25s,transform .25s; |
| min-height:2.2rem; |
| } |
| .thought-stream.visible{opacity:1;transform:translateY(0)} |
| .stream-cursor{ |
| width:4px;height:4px;border-radius:50%; |
| background:var(--neon-purple); |
| margin-top:.35rem;flex-shrink:0; |
| animation:cursor-blink .6s ease-in-out infinite; |
| box-shadow:0 0 6px var(--neon-purple); |
| } |
| @keyframes cursor-blink{0%,100%{opacity:1}50%{opacity:.2}} |
| .stream-text{ |
| font-size:.72rem;color:var(--text-secondary); |
| line-height:1.5;font-family:var(--font-mono); |
| } |
| .stream-text .sentence{ |
| display:block;animation:sentence-in .3s ease-out; |
| margin-bottom:.15rem; |
| color:var(--text-primary); |
| } |
| @keyframes sentence-in{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}} |
|
|
| |
| .forge-input-section{flex-shrink:0} |
| .input-obsidian{ |
| display:flex;align-items:stretch;gap:.4rem; |
| background:rgba(255,255,255,.01); |
| border:1px solid var(--border-1px); |
| border-radius:var(--radius-lg); |
| padding:.3rem .3rem .3rem .85rem; |
| transition:border-color var(--transition-fast),box-shadow var(--transition-fast); |
| } |
| .input-obsidian:focus-within{ |
| border-color:rgba(139,92,246,.35); |
| box-shadow:0 0 18px rgba(139,92,246,.08); |
| } |
| #prompt-input{ |
| flex:1;background:transparent;border:none; |
| color:var(--text-primary);font-family:var(--font-sans); |
| font-size:.84rem;line-height:1.5;resize:none;outline:none; |
| padding:.3rem 0;min-height:36px;max-height:110px; |
| } |
| #prompt-input::placeholder{color:var(--text-muted)} |
|
|
| |
| .btn-lightning{ |
| width:42px;height:42px;min-width:42px; |
| background:var(--void); |
| border:1.5px solid rgba(255,255,255,.08); |
| border-radius:50%; |
| color:var(--neon-purple); |
| display:flex;align-items:center;justify-content:center; |
| cursor:pointer; |
| transition:all var(--transition-fast); |
| flex-shrink:0; |
| } |
| .btn-lightning:hover{ |
| border-color:rgba(139,92,246,.4); |
| box-shadow:0 0 16px rgba(139,92,246,.2),inset 0 0 8px rgba(139,92,246,.06); |
| color:var(--neon-cyan); |
| } |
| .btn-lightning:active{transform:scale(.94);background:var(--void)} |
| .btn-lightning:disabled{ |
| opacity:.3;cursor:not-allowed;transform:none; |
| box-shadow:none;border-color:rgba(255,255,255,.04); |
| color:var(--text-muted); |
| } |
|
|
| |
| .tab-nav{ |
| display:flex;gap:.2rem; |
| padding:.15rem; |
| background:rgba(255,255,255,.01); |
| border:1px solid var(--border-1px); |
| border-radius:var(--radius-sm); |
| flex-shrink:0; |
| } |
| .tab-btn{ |
| display:flex;align-items:center;gap:.3rem; |
| flex:1;padding:.35rem .6rem; |
| background:transparent;border:1px solid transparent; |
| border-radius:4px; |
| color:var(--text-muted); |
| font-family:var(--font-sans);font-size:.72rem;font-weight:600; |
| cursor:pointer;transition:all var(--transition-fast); |
| } |
| .tab-btn:hover:not(:disabled){ |
| background:rgba(255,255,255,.02); |
| color:var(--text-secondary); |
| border-color:rgba(255,255,255,.04); |
| } |
| .tab-btn.active{ |
| background:rgba(139,92,246,.08); |
| color:var(--text-primary); |
| border-color:rgba(139,92,246,.15); |
| } |
| .tab-btn.locked{cursor:not-allowed;opacity:.4} |
| .tab-icon{font-size:.85rem} |
| .tab-label{font-size:.68rem} |
|
|
| |
| .tab-panels{flex:1;min-height:0;position:relative} |
| .tab-panel{display:none;flex-direction:column;height:100%} |
| .tab-panel.active{display:flex} |
|
|
| |
| .forge-panel{ |
| display:flex;flex-direction:column; |
| background:rgba(255,255,255,.01); |
| border:1px solid var(--border-1px); |
| border-radius:var(--radius-lg); |
| overflow:hidden;flex:1; |
| } |
| .forge-header{ |
| display:flex;align-items:center;justify-content:space-between; |
| padding:.3rem .65rem; |
| border-bottom:1px solid var(--border-1px); |
| flex-shrink:0; |
| } |
| .forge-title{ |
| font-size:.68rem;font-weight:600; |
| color:var(--text-secondary); |
| text-transform:uppercase;letter-spacing:.1em; |
| } |
| .forge-actions{display:flex;align-items:center;gap:.35rem} |
| .char-count{font-size:.62rem;color:var(--text-muted)} |
| .forge-action{ |
| background:none;border:1px solid var(--border-1px); |
| border-radius:3px;padding:.12rem .3rem; |
| color:var(--text-secondary);cursor:pointer;font-size:.7rem; |
| transition:all var(--transition-fast); |
| } |
| .forge-action:hover{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)} |
|
|
| |
| .forge-code{ |
| flex:1;overflow:auto;padding:.65rem;margin:0; |
| font-family:var(--font-mono);font-size:.72rem; |
| line-height:1.5;color:var(--text-secondary); |
| white-space:pre-wrap;word-break:break-all; |
| } |
| .forge-code .placeholder{color:var(--text-muted);font-style:italic} |
|
|
| |
| .preview-container{flex:1;position:relative;background:#111} |
| .preview-iframe{width:100%;height:100%;border:none;display:block} |
| .preview-overlay{ |
| position:absolute;inset:0; |
| display:flex;align-items:center;justify-content:center; |
| background:rgba(0,0,0,.9); |
| transition:opacity var(--transition-smooth); |
| pointer-events:none; |
| } |
| .preview-overlay.hidden{opacity:0} |
| .overlay-content{text-align:center;color:var(--text-secondary)} |
| .obsidian-loader{ |
| width:32px;height:32px;margin:0 auto .6rem; |
| border:1.5px solid rgba(255,255,255,.06); |
| border-top-color:var(--neon-purple); |
| border-radius:50%; |
| animation:spin .7s linear infinite; |
| } |
| @keyframes spin{to{transform:rotate(360deg)}} |
|
|
| |
| .deploy-bar{ |
| display:flex;align-items:center;justify-content:space-between; |
| padding:.45rem .75rem; |
| background:rgba(255,255,255,.01); |
| border:1px solid var(--border-1px); |
| border-radius:var(--radius-lg); |
| flex-shrink:0; |
| transition:border-color var(--transition-smooth); |
| } |
| .deploy-bar.ready{ |
| border-color:rgba(16,185,129,.2); |
| box-shadow:0 0 12px rgba(16,185,129,.04); |
| } |
| .deploy-bar.verified{ |
| border-color:rgba(245,158,11,.2); |
| box-shadow:0 0 16px rgba(245,158,11,.06); |
| } |
| .deploy-status{display:flex;align-items:center;gap:.4rem} |
| .deploy-dot{ |
| width:5px;height:5px;border-radius:50%; |
| background:var(--text-muted); |
| transition:background var(--transition-fast); |
| } |
| .deploy-dot.ready{background:var(--neon-green);box-shadow:0 0 6px var(--neon-green)} |
| .deploy-dot.verifying{background:var(--neon-cyan);animation:dot-pulse .5s ease-in-out infinite} |
| .deploy-dot.deployed{background:var(--gold);box-shadow:0 0 8px var(--gold)} |
| @keyframes dot-pulse{0%,100%{opacity:1}50%{opacity:.3}} |
| .deploy-text{font-size:.72rem;color:var(--text-secondary)} |
|
|
| .btn-deploy{ |
| display:flex;align-items:center;gap:.3rem; |
| padding:.35rem .85rem; |
| background:var(--void); |
| border:1px solid var(--border-1px); |
| border-radius:var(--radius-sm); |
| color:var(--text-muted); |
| font-family:var(--font-sans);font-size:.75rem;font-weight:700; |
| cursor:pointer;transition:all var(--transition-smooth); |
| white-space:nowrap; |
| } |
| .btn-deploy:hover:not(:disabled){ |
| border-color:rgba(16,185,129,.3); |
| color:var(--neon-green); |
| box-shadow:0 0 12px rgba(16,185,129,.1); |
| } |
| .btn-deploy:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;border-color:var(--border-1px)} |
| .btn-deploy.ready:not(:disabled){ |
| border-color:rgba(16,185,129,.35); |
| color:var(--neon-green); |
| } |
| .btn-deploy.deploying{ |
| border-color:rgba(6,182,212,.3); |
| color:var(--neon-cyan); |
| } |
| .btn-deploy.deployed{ |
| border-color:rgba(245,158,11,.35); |
| color:var(--gold); |
| } |
| .deploy-spinner{ |
| display:none;width:12px;height:12px; |
| border:1.5px solid rgba(255,255,255,.1); |
| border-top-color:var(--neon-cyan); |
| border-radius:50%;animation:spin .5s linear infinite; |
| } |
| .btn-deploy.deploying .deploy-spinner{display:inline-block} |
|
|
| |
| .deploy-result{flex-shrink:0} |
| .verified-card{ |
| display:flex;align-items:center;gap:.6rem; |
| padding:.55rem .85rem; |
| background:rgba(245,158,11,.04); |
| border:1px solid rgba(245,158,11,.15); |
| border-radius:var(--radius-md); |
| animation:card-rise .3s ease-out; |
| } |
| @keyframes card-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} |
| .verified-icon{font-size:1.1rem;color:var(--gold)} |
| .verified-body strong{display:block;font-size:.75rem;margin-bottom:.05rem} |
| .verified-url{ |
| font-size:.7rem;color:var(--neon-cyan);text-decoration:none; |
| word-break:break-all;transition:color var(--transition-fast); |
| } |
| .verified-url:hover{color:var(--neon-purple)} |
|
|
| |
| .toast-container{position:fixed;bottom:.6rem;right:.6rem;display:flex;flex-direction:column;gap:.3rem;z-index:1000} |
| .toast{padding:.45rem .75rem;border-radius:var(--radius-sm);background:rgba(255,255,255,.02);border:1px solid var(--border-1px);color:var(--text-primary);font-size:.7rem;animation:toast-in .2s ease-out;max-width:260px} |
| .toast.error{border-color:rgba(239,68,68,.2)} |
| .toast.success{border-color:rgba(16,185,129,.2)} |
| @keyframes toast-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} |
| .code-chunk-new{animation:chunk-in .1s ease-out} |
| @keyframes chunk-in{from{opacity:0}to{opacity:1}} |
|
|
| |
| @media(max-width:500px){ |
| .obsidian-shell{padding:.35rem;gap:.3rem} |
| .wizard-orbit{width:50px;height:50px} |
| .wizard-hat{width:34px;height:34px} |
| .hero-title{font-size:1.05rem} |
| .thought-stream{padding:.25rem .45rem} |
| .stream-text{font-size:.65rem} |
| .tab-btn{padding:.3rem .4rem} |
| .tab-label{font-size:.62rem} |
| .deploy-bar{flex-direction:column;gap:.35rem;align-items:stretch} |
| .btn-deploy{justify-content:center} |
| } |
