:root{--bg-atelier: #F5F7FB;--bg-stage: #FFFFFF;--bg-panel: #EDF2F9;--bg-dock: rgba(255, 255, 255, .92);--bg-key: #FFFFFF;--bg-key-hover: #F8FAFD;--bg-key-active: #E4ECF8;--text-main: #0B132B;--text-dim: #475569;--text-faint: #64748B;--line-subtle: rgba(15, 23, 42, .08);--line-strong: rgba(15, 23, 42, .16);--line-grid: rgba(54, 104, 196, .07);--led-blue: #2563EB;--led-mint: #059669;--led-amber: #D97706;--led-coral: #E11D48;--led-sky: #0284C7;--font-display: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, sans-serif;--font-body: "Be Vietnam Pro", system-ui, -apple-system, sans-serif;--font-mono: "SF Mono", Menlo, Consolas, ui-monospace, monospace;--shadow-stage: 0 20px 50px -15px rgba(11, 19, 43, .08), 0 0 0 1px var(--line-subtle);--shadow-dock: 0 16px 40px -10px rgba(11, 19, 43, .12), 0 0 0 1px var(--line-strong);--shadow-key: 0 4px 0 rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);--shadow-key-active: 0 1px 0 rgba(15, 23, 42, .06);--radius-stage: 24px;--radius-dock: 20px;--radius-key: 14px;--radius-pill: 999px;--ease-spring: cubic-bezier(.175, .885, .32, 1.15);--ease-smooth: cubic-bezier(.16, 1, .3, 1)}[data-theme=dark]{--bg-atelier: #0A0D14;--bg-stage: #101522;--bg-panel: #161D2E;--bg-dock: rgba(16, 21, 34, .92);--bg-key: #141A29;--bg-key-hover: #1C2438;--bg-key-active: #232E47;--text-main: #F8FAFC;--text-dim: #94A3B8;--text-faint: #64748B;--line-subtle: rgba(255, 255, 255, .07);--line-strong: rgba(255, 255, 255, .14);--line-grid: rgba(255, 255, 255, .04);--led-blue: #3B82F6;--led-mint: #10B981;--led-amber: #F59E0B;--led-coral: #F43F5E;--led-sky: #38BDF8;--shadow-stage: 0 24px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px var(--line-subtle);--shadow-dock: 0 20px 50px -15px rgba(0, 0, 0, .7), 0 0 0 1px var(--line-strong);--shadow-key: 0 4px 0 rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .3);--shadow-key-active: 0 1px 0 rgba(0, 0, 0, .3)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;width:100%;scroll-behavior:smooth}body{min-height:100%;min-height:100dvh;width:100%;overflow-x:hidden;font-family:var(--font-body);color:var(--text-main);background-color:var(--bg-atelier);transition:background-color .3s ease,color .3s ease;display:flex;flex-direction:column;position:relative;-webkit-font-smoothing:antialiased}.atelier-background-grid{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:linear-gradient(var(--line-grid) 1px,transparent 1px),linear-gradient(90deg,var(--line-grid) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 25%,transparent 80%);mask-image:radial-gradient(circle at 50% 45%,#000 25%,transparent 80%);z-index:0}.atelier-grid-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1;opacity:.65;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000 28%,transparent 78%);mask-image:radial-gradient(circle at 50% 45%,#000 28%,transparent 78%)}.atelier-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:clamp(.75rem,1.8vh,1.15rem) clamp(1rem,3vw,2.5rem);border-bottom:1px solid var(--line-subtle);background:var(--bg-atelier)}.brand-unit{display:flex;align-items:center;gap:.65rem}.brand-cloud-icon{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.12))}.brand-name{font-family:var(--font-display);font-size:1.25rem;font-weight:800;letter-spacing:-.03em;color:var(--text-main)}.header-controls{display:flex;align-items:center;gap:.5rem}.control-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:9px;border:1px solid var(--line-strong);background:var(--bg-stage);color:var(--text-main);font-family:var(--font-mono);font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-key);transition:all .12s ease;flex-shrink:0;position:relative}.control-btn:hover{background:var(--bg-key-hover);border-color:var(--text-main);transform:translateY(-1px)}.control-btn:active{transform:translateY(2px);box-shadow:var(--shadow-key-active)}.header-icon{display:inline-block;pointer-events:none;flex-shrink:0}.control-btn.zalo-btn{color:#0068ff}.control-btn.zalo-btn:hover{border-color:#0068ff;background:#0068ff14;box-shadow:0 0 10px #0068ff47}.control-btn.discord-btn{color:#5865f2}.control-btn.discord-btn:hover{border-color:#5865f2;background:#5865f214;box-shadow:0 0 10px #5865f247}.control-btn.discord-btn .check-icon{display:none}.control-btn.discord-btn.copied{border-color:var(--led-mint);color:var(--led-mint);background:#10b9811f;box-shadow:0 0 10px #10b98159}.control-btn.discord-btn.copied .discord-icon{display:none}.control-btn.discord-btn.copied .check-icon{display:block}.atelier-workspace{position:relative;z-index:10;flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:clamp(.75rem,2.5vh,2rem) clamp(.85rem,3vw,2rem);max-width:1280px;width:100%;margin:auto}.focus-stage-card{width:100%;background:var(--bg-stage);border-radius:var(--radius-stage);box-shadow:var(--shadow-stage);border:1px solid var(--line-strong);display:grid;grid-template-columns:1.15fr .85fr;min-height:420px;overflow:hidden;transition:border-color .3s ease}.stage-inspector{padding:clamp(1.75rem,4vh,3.25rem) clamp(1.5rem,3.5vw,3.25rem);display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--line-subtle);min-width:0;gap:1.5rem}.stage-top-meta{display:flex;align-items:center}.stage-index-cluster{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-panel);padding:3px 6px;border-radius:var(--radius-pill);border:1px solid var(--line-subtle)}.stage-nav-arrow{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--bg-stage);border:1px solid var(--line-subtle);color:var(--text-main);font-family:var(--font-mono);font-size:.95rem;line-height:1;cursor:pointer;transition:all .1s ease;-webkit-user-select:none;user-select:none}.stage-nav-arrow:hover{background:var(--bg-key-hover);color:var(--led-blue);border-color:var(--led-blue)}.stage-nav-arrow:active{transform:scale(.92)}.stage-index{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--text-dim);padding:0 4px;letter-spacing:.05em}.stage-body{flex:1;display:flex;flex-direction:column;justify-content:center}.stage-heading{font-family:var(--font-display);font-size:clamp(2rem,3.6vw,3.25rem);font-weight:800;line-height:1.1;letter-spacing:-.035em;color:var(--text-main);margin-bottom:.85rem;word-break:break-word;transition:opacity .12s ease,transform .12s ease}.stage-description{font-size:clamp(.92rem,1.15vw,1.05rem);line-height:1.7;color:var(--text-dim);max-width:540px}.stage-actions-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.btn-launch-primary{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:12px 24px;border-radius:12px;background:var(--led-blue);color:#fff;font-family:var(--font-display);font-size:.95rem;font-weight:700;text-decoration:none;cursor:pointer;border:none;box-shadow:0 4px #1d4ed8,0 8px 20px #2563eb38;transition:all .12s ease;white-space:nowrap}.btn-launch-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}.btn-launch-primary:active{transform:translateY(3px);box-shadow:0 1px #1d4ed8}.btn-inspect-secondary{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:12px 20px;border-radius:12px;background:var(--bg-stage);border:1px solid var(--line-strong);color:var(--text-main);font-family:var(--font-display);font-size:.95rem;font-weight:600;text-decoration:none;cursor:pointer;box-shadow:var(--shadow-key);transition:all .12s ease;white-space:nowrap}.btn-inspect-secondary:hover{background:var(--bg-panel)}.btn-inspect-secondary:active{transform:translateY(2px);box-shadow:var(--shadow-key-active)}.stage-capsule{position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,var(--capsule-tint, rgba(37, 99, 235, .08)) 0%,transparent 75%);padding:clamp(1.5rem,3vw,3rem);overflow:hidden;min-height:260px}.capsule-radiant-glow{position:absolute;width:min(300px,65vw);height:min(300px,65vw);border-radius:50%;background:var(--capsule-tint, rgba(37, 99, 235, .12));filter:blur(50px);pointer-events:none;animation:pulse-aura 4s ease-in-out infinite}@keyframes pulse-aura{0%,to{transform:scale(1);opacity:.55}50%{transform:scale(1.15);opacity:.9}}.stage-mascot-img{position:relative;width:clamp(160px,22vw,280px);aspect-ratio:1 / 1;object-fit:contain;filter:drop-shadow(0 20px 35px rgba(0,0,0,.18));animation:float-atelier 4s ease-in-out infinite;transition:opacity .2s ease,transform .2s ease;will-change:transform}@keyframes float-atelier{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.atelier-dock-container{position:relative;z-index:20;width:100%;max-width:1280px;margin:0 auto clamp(.75rem,2vh,1.5rem);padding:0 clamp(.85rem,2.5vw,1.5rem)}.dock-hardware-shelf{width:100%;background:var(--bg-dock);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line-strong);border-radius:var(--radius-dock);box-shadow:var(--shadow-dock);padding:.5rem;display:flex;gap:6px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.dock-hardware-shelf::-webkit-scrollbar{display:none}.dock-tool-key{flex:1 0 auto;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:var(--radius-key);background:var(--bg-key);border:1px solid var(--line-subtle);cursor:pointer;-webkit-user-select:none;user-select:none;box-shadow:var(--shadow-key);transition:all .15s var(--ease-spring);scroll-snap-align:center}.dock-tool-key:hover{background:var(--bg-key-hover);transform:translateY(-2px);border-color:var(--line-strong)}.dock-tool-key.active{background:var(--bg-key-active);border-color:var(--led-blue);box-shadow:0 0 0 2px var(--led-blue),0 4px 12px #2563eb33;transform:translateY(-3px)}.key-index{font-family:var(--font-mono);font-size:.65rem;font-weight:700;color:var(--text-faint)}.dock-tool-key.active .key-index{color:var(--led-blue)}.key-icon{font-size:1.3rem;line-height:1}.key-label{font-family:var(--font-display);font-size:.76rem;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}@media(max-height:820px){.atelier-header{padding:.55rem 1.5rem}.atelier-workspace{padding:.5rem 1rem}.focus-stage-card{min-height:360px}.stage-inspector{padding:1.5rem 2rem;gap:1rem}.stage-heading{font-size:2.15rem;margin-bottom:.5rem}.stage-description{font-size:.9rem;line-height:1.55}.stage-mascot-img{width:clamp(140px,18vw,210px)}.dock-tool-key{padding:6px 4px;min-width:86px}.key-icon{font-size:1.15rem}.key-label{font-size:.72rem}.atelier-dock-container{margin-bottom:.6rem}}@media(max-width:960px){.focus-stage-card{grid-template-columns:1fr;min-height:auto}.stage-capsule{order:-1;padding:1.75rem 1rem 1rem;min-height:160px;border-bottom:1px solid var(--line-subtle)}.stage-mascot-img{width:140px}.capsule-radiant-glow{width:180px;height:180px}.stage-inspector{border-right:none;padding:1.5rem clamp(1.2rem,3.5vw,2.5rem);gap:1.25rem}}@media(max-width:640px){.atelier-header{padding:.65rem .85rem}.brand-cloud-icon{width:26px;height:26px}.brand-name{font-size:1.15rem}.control-btn{height:32px;padding:0 9px;font-size:.72rem}.contact-pill-btn{height:32px;padding:0 9px;font-size:.7rem}.contact-pill-text strong{display:none}.atelier-workspace{padding:.65rem .65rem .4rem}.focus-stage-card{border-radius:18px}.stage-capsule{padding:1.25rem .75rem .75rem;min-height:140px}.stage-mascot-img{width:115px}.stage-inspector{padding:1.25rem 1rem;gap:1rem}.stage-heading{font-size:1.75rem;margin-bottom:.4rem}.stage-description{font-size:.88rem;line-height:1.6}.stage-actions-row{flex-direction:column;width:100%;gap:8px}.btn-launch-primary,.btn-inspect-secondary{width:100%;text-align:center;padding:11px 16px;font-size:.9rem}.atelier-dock-container{padding:0 .65rem;margin-bottom:.85rem}.dock-tool-key{min-width:82px;padding:7px 4px;border-radius:11px}.key-icon{font-size:1.2rem}.key-label{font-size:.7rem;max-width:74px}}
