.design-lab{background:var(--surface-0);min-height:100vh;color:var(--text-primary);font-family:var(--font-ui);font-size:var(--text-md);line-height:var(--leading-normal)}.design-lab *{box-sizing:border-box}.dl-shell{max-width:var(--shell-max);padding:var(--shell-pad);margin:0 auto}.dl-banner{background:var(--accent-soft);border-bottom:1px solid var(--border-subtle);padding:var(--space-3) var(--shell-pad);font-size:var(--text-sm);color:var(--text-secondary)}.dl-banner strong{color:var(--accent)}.dl-banner a{color:var(--accent-highlight)}.dl-section{margin-top:var(--space-7)}.dl-section-title{font-size:var(--text-xl);color:var(--accent);margin-bottom:var(--space-2);letter-spacing:.02em}.dl-section-note{font-size:var(--text-sm);color:var(--text-muted);margin-bottom:var(--space-4);max-width:52rem}.dl-toolbar{gap:var(--space-2);margin-bottom:var(--space-5);flex-wrap:wrap;align-items:center;display:flex}.dl-btn{font-family:inherit;font-size:var(--text-sm);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text-primary);cursor:pointer}.dl-btn:hover{border-color:var(--accent);color:var(--accent)}.dl-btn[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.dl-header{align-items:center;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--border-subtle);display:flex;position:relative}.dl-brand{align-items:center;gap:var(--space-3);color:inherit;margin-right:var(--space-5);flex-shrink:0;text-decoration:none;display:flex}.dl-brand-mark{flex-shrink:0;width:40px;height:40px;display:block}.dl-brand-text{font-size:var(--text-xl);letter-spacing:.04em;color:var(--accent);font-weight:700;line-height:1}.dl-primary-nav{gap:var(--space-1);flex-wrap:wrap;flex:1;min-width:0;display:flex}.dl-nav-link{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-sm);border:1px solid #0000;text-decoration:none;display:inline-flex}.dl-nav-link:hover,.dl-nav-link[aria-current=page]{color:var(--accent);background:var(--accent-soft);border-color:var(--border-subtle)}.dl-nav-link svg{flex-shrink:0}.dl-header-actions{align-items:center;gap:var(--space-2);flex-shrink:0;margin-left:auto;display:flex}.dl-icon-btn{border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-1);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;justify-content:center;align-items:center;display:inline-flex;position:relative}.dl-icon-btn:hover,.dl-icon-btn[aria-expanded=true]{color:var(--accent);border-color:var(--accent)}.dl-badge{background:var(--accent);border-radius:1px;width:8px;height:8px;position:absolute;top:4px;right:4px}.dl-user-menu{top:calc(100% + var(--space-2));background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--radius-lg);min-width:220px;box-shadow:var(--shadow-card);padding:var(--space-2);z-index:20;position:absolute;right:0}.dl-user-menu-label{font-size:var(--text-xs);color:var(--text-muted);padding:var(--space-2) var(--space-3);text-transform:uppercase;letter-spacing:.06em}.dl-user-menu a,.dl-user-menu button{align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2) var(--space-3);color:var(--text-secondary);font:inherit;font-size:var(--text-sm);text-align:left;border-radius:var(--radius-md);cursor:pointer;background:0 0;border:none;text-decoration:none;display:flex}.dl-user-menu a:hover,.dl-user-menu button:hover{background:var(--accent-soft);color:var(--accent)}.dl-user-menu-divider{background:var(--border-subtle);height:1px;margin:var(--space-2) 0}.dl-mobile-nav-toggle{display:none}@media (width<=900px){.dl-primary-nav{display:none}.dl-primary-nav.is-open{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-2);z-index:15;flex-direction:column;display:flex;position:absolute;top:100%;left:0;right:0}.dl-mobile-nav-toggle{display:inline-flex}}.dl-dense-grid{gap:var(--space-4);grid-template-columns:repeat(12,1fr);align-items:stretch;display:grid}.dl-span-4{grid-column:span 4}.dl-span-5{grid-column:span 5}.dl-span-6{grid-column:span 6}.dl-span-7{grid-column:span 7}.dl-span-8{grid-column:span 8}.dl-span-12{grid-column:span 12}@media (width<=1100px){.dl-span-4,.dl-span-5,.dl-span-6,.dl-span-7,.dl-span-8{grid-column:span 6}}@media (width<=720px){.dl-dense-grid{gap:var(--space-3);align-items:start}.dl-span-4,.dl-span-5,.dl-span-6,.dl-span-7,.dl-span-8,.dl-span-12{grid-column:span 12}}.dl-card{background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-card);flex-direction:column;height:100%;display:flex;position:relative;overflow:hidden}.dl-card-body{color:var(--text-secondary);font-size:var(--text-sm);flex:1}.dl-card-decor{width:40px;height:40px;color:var(--accent);opacity:.28;pointer-events:none;position:absolute}.dl-card-decor.tl{top:6px;left:6px}.dl-card-decor.br{bottom:6px;right:6px}.dl-card-title{font-size:var(--text-md);color:var(--accent);margin:calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-3);padding:var(--space-2) var(--space-2) var(--space-3);align-items:center;gap:var(--space-2);border-bottom:1px solid var(--border-subtle);display:flex}.dl-card-title-label{align-items:center;gap:var(--space-2);min-width:0;display:inline-flex}.dl-card-open{border-radius:var(--radius-sm);width:28px;height:28px;color:var(--text-muted);border:1px solid #0000;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;text-decoration:none;display:inline-flex}.dl-card-open:hover,.dl-card-open:focus-visible{color:var(--accent);background:var(--accent-soft);border-color:var(--border-subtle);outline:none}.dl-card-body p+p{margin-top:var(--space-2)}.dl-char-vitals{gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;justify-content:space-between;align-items:baseline;display:flex}.dl-char-level{font-size:var(--text-xl);color:var(--text-primary);font-weight:700;line-height:1}.dl-char-gt{align-items:center;gap:var(--space-1);font-size:var(--text-xs);color:var(--accent-highlight);font-variant-numeric:tabular-nums;margin-left:auto;font-weight:600;display:inline-flex}.dl-char-body{flex-direction:column;min-height:0;display:flex}.dl-equip-list{margin:var(--space-3) 0 0;gap:var(--space-1);flex-direction:column;padding:0;list-style:none;display:flex}.dl-equip-row{--rarity-color:var(--text-muted);gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--surface-0);border:1px solid var(--border-subtle);font-size:var(--text-xs);grid-template-columns:1.1rem 3.4rem minmax(0,1fr) auto;align-items:center;display:grid}.dl-equip-row.rarity-common{--rarity-color:#9ca3af}.dl-equip-row.rarity-uncommon{--rarity-color:#22c55e}.dl-equip-row.rarity-rare{--rarity-color:#3b82f6}.dl-equip-row.rarity-epic{--rarity-color:#a855f7}.dl-equip-row.rarity-legendary{--rarity-color:#f59e0b}.dl-equip-icon{color:var(--rarity-color);display:inline-flex}.dl-equip-slot{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.65rem}.dl-equip-name{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600;overflow:hidden}.dl-equip-rarity{color:var(--rarity-color);text-transform:uppercase;letter-spacing:.03em;font-size:.65rem;font-weight:600}.dl-xp{margin-bottom:var(--space-4)}.dl-xp-meta{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-1);justify-content:space-between;display:flex}.dl-xp-track,.dl-bar-track{background:var(--surface-3);border:1px solid var(--border-subtle);border-radius:2px;height:8px;overflow:hidden}.dl-bar-track.dl-bar-quest-tall{flex:1;height:2.25rem;min-height:2.25rem}.dl-bar-track.dl-bar-vital{height:.7rem}.dl-xp-fill,.dl-bar-fill{border-radius:1px;height:100%;position:relative;overflow:hidden}.dl-xp-fill{background:var(--accent);width:62%}.dl-bar-fill-quest{background:var(--accent);width:47%}.dl-bar-fill-hp{background:var(--danger);width:78%}.dl-bar-fill-mp{background:var(--info);width:73%}.dl-bar-fill:after{content:"";pointer-events:none;background:linear-gradient(110deg,#0000 25%,#ffffff38 45%,#0000 65%) 0 0/220% 100%;animation:2.8s linear infinite dl-bar-sheen;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.dl-bar-fill:after{animation:none}}@keyframes dl-bar-sheen{0%{background-position:140% 0}to{background-position:-40% 0}}.dl-attr-row{gap:var(--space-2);flex-wrap:wrap;display:flex}.dl-attr{border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border-subtle);color:var(--text-secondary);font-size:var(--text-xs);font-variant-numeric:tabular-nums;align-items:center;gap:4px;padding:2px 6px;display:inline-flex}.dl-attr svg{color:var(--accent);flex-shrink:0}.dl-attr-val{color:var(--text-primary);font-weight:600}.dl-quest-name{font-size:var(--text-md);color:var(--text-primary);margin-bottom:2px;font-weight:700}.dl-quest-diff{font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-3)}.dl-vital-grid{gap:var(--space-4);margin-bottom:var(--space-4);grid-template-columns:minmax(0,1fr) minmax(7rem,25%);align-items:stretch;display:grid}.dl-quest-progress-main{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.dl-quest-progress-meta{justify-content:space-between;align-items:baseline;gap:var(--space-2);flex-wrap:wrap;display:flex}.dl-quest-pct{font-size:var(--text-2xl);color:var(--text-primary);font-variant-numeric:tabular-nums;font-weight:700;line-height:1}.dl-quest-eta{font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}.dl-vital-stack{justify-content:space-between;gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.dl-bar-block{margin-bottom:var(--space-3)}.dl-bar-block-compact{margin-bottom:0}.dl-bar-meta{justify-content:space-between;gap:var(--space-2);font-size:var(--text-xs);color:var(--text-muted);margin-bottom:var(--space-1);font-variant-numeric:tabular-nums;display:flex}.dl-bar-meta strong{color:var(--text-secondary);font-weight:600}@media (width<=720px){.dl-vital-grid{grid-template-columns:1fr}.dl-vital-stack{gap:var(--space-3);flex-direction:row}.dl-vital-stack .dl-bar-block-compact{flex:1}}.dl-quest-context{gap:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--border-subtle);flex-direction:column;display:flex}.dl-quest-context-row{gap:var(--space-2);font-size:var(--text-xs);grid-template-columns:5.5rem 1fr;align-items:baseline;display:grid}.dl-quest-context-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.dl-quest-context-value{color:var(--text-primary);font-weight:600}.dl-quest-context-detail{color:var(--text-muted);grid-column:2;font-weight:400}.dl-meta{font-size:var(--text-xs);color:var(--text-muted);margin-top:var(--space-3)}.dl-chip{align-items:center;gap:var(--space-1);padding:2px var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--surface-2);color:var(--text-secondary);font-size:var(--text-xs);display:inline-flex}.dl-chip.accent{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.dl-icon-grid{gap:var(--space-3);grid-template-columns:repeat(auto-fill,minmax(96px,1fr));display:grid}.dl-icon-cell{align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--surface-1);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-xs);flex-direction:column;display:flex}.dl-icon-cell svg{color:var(--accent)}.dl-brand-row{gap:var(--space-5);flex-wrap:wrap;align-items:flex-end;display:flex}.dl-favicon-frame{border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-1);place-items:center;width:96px;height:96px;display:grid;overflow:hidden}.dl-favicon-frame img{width:80px;height:80px}.dl-fill-log{flex-direction:column;flex:1;min-height:0;display:flex}.dl-event-log{background:var(--surface-0);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-3);font-family:var(--font-mono);font-size:var(--text-sm);flex:1;min-height:12rem;overflow-y:auto}.dl-event{padding:var(--space-2) 0;border-bottom:1px solid var(--border-subtle)}.dl-event:last-child{border-bottom:none;padding-bottom:0}.dl-event:first-child{padding-top:0}.dl-event-time{color:var(--text-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums;margin-bottom:2px}.dl-event-message{color:var(--text-primary);line-height:var(--leading-chat)}.dl-entity{color:var(--accent-highlight);border-bottom:1px dotted var(--accent);cursor:help}.dl-outcome{letter-spacing:.04em;text-transform:uppercase;border-radius:var(--radius-sm);margin-right:var(--space-1);vertical-align:1px;border:1px solid #0000;padding:1px 5px;font-size:.65rem;font-weight:700;display:inline-block}.dl-outcome-win{color:var(--success);background:#34d3991f;border-color:#34d39959}.dl-event-rewards{gap:var(--space-2);margin-top:var(--space-1);font-size:var(--text-xs);flex-wrap:wrap;display:flex}.dl-reward-xp{color:var(--info)}.dl-reward-gt{color:var(--accent-highlight)}.dl-reward-loot{color:var(--text-secondary)}.dl-reward-loot em{color:var(--text-muted);font-style:normal}.dl-battle-narrative{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--text-muted)}.dl-battle-narrative summary{cursor:pointer;color:var(--text-secondary);-webkit-user-select:none;user-select:none}.dl-battle-narrative summary:hover{color:var(--accent)}.dl-battle-line{padding:2px 0 2px var(--space-3);border-left:2px solid var(--border-subtle);color:var(--text-muted);margin-top:2px}.dl-chat-panel{gap:var(--space-2);flex-direction:column;flex:1;min-height:0;display:flex}.dl-chat-tabs{gap:var(--space-1);flex-shrink:0;display:flex}.dl-chat-tab{font-family:inherit;font-size:var(--text-xs);letter-spacing:.03em;text-transform:uppercase;padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-2);color:var(--text-muted);cursor:pointer;align-items:center;gap:var(--space-2);font-weight:600;display:inline-flex;position:relative}.dl-chat-tab:hover{color:var(--text-secondary);border-color:var(--border-strong)}.dl-chat-tab.is-active{color:var(--accent);background:var(--accent-soft);border-color:var(--accent)}.dl-chat-unread{background:var(--accent);min-width:1.1rem;height:1.1rem;color:var(--surface-0);border-radius:2px;place-items:center;padding:0 4px;font-size:.65rem;font-weight:700;line-height:1;display:inline-grid}.dl-chat-log{flex:1;min-height:0}.dl-chat-compose{gap:var(--space-2);padding-top:var(--space-1);flex-shrink:0;display:flex}.dl-chat-input{min-width:0;font-family:inherit;font-size:var(--text-sm);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--surface-0);color:var(--text-primary);flex:1}.dl-chat-input::placeholder{color:var(--text-muted)}.dl-chat-input:focus{border-color:var(--accent);outline:none}.dl-chat-send{font-family:inherit;font-size:var(--text-sm);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--accent);background:var(--accent);color:var(--surface-0);cursor:pointer;flex-shrink:0;font-weight:600}.dl-chat-send:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.dl-chat-msg{padding:var(--space-2) 0;border-bottom:1px solid var(--border-subtle)}.dl-chat-msg:last-child{border-bottom:none;padding-bottom:0}.dl-chat-msg:first-child{padding-top:0}.dl-chat-who{color:var(--accent-highlight);font-weight:600}.dl-chat-sys-line{color:var(--text-muted);font-style:italic}.dl-chat-sys-who{vertical-align:-.1em;align-items:center;display:inline-flex}.dl-chat-sys-who svg{color:var(--accent-highlight);flex-shrink:0;display:block}.dl-beat{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);opacity:0;animation:dl-beat-in var(--dur-slow) var(--ease-out) forwards}.dl-beat:nth-child(2){animation-delay:.35s}.dl-beat:nth-child(3){animation-delay:.7s}.dl-beat.hit{color:var(--warning)}.dl-beat.loot{color:var(--accent-highlight)}@keyframes dl-beat-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dl-ascii{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent);background:var(--surface-0);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-3);white-space:pre;line-height:1.2;overflow-x:auto}.dl-swatches{gap:var(--space-3);flex-wrap:wrap;display:flex}.dl-swatch{width:112px}.dl-swatch-chip{border-radius:var(--radius-md);border:1px solid var(--border-subtle);height:40px;margin-bottom:var(--space-1)}.dl-swatch label{font-size:var(--text-xs);color:var(--text-muted)}.dl-compare{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}@media (width<=720px){.dl-compare{grid-template-columns:1fr}}.dl-compare-box{border:1px dashed var(--border-strong);border-radius:var(--radius-lg);padding:var(--space-3);font-size:var(--text-xs);color:var(--text-muted)}.dl-compare-box.narrow{max-width:400px}.dl-compare-box.wide{max-width:none}.dl-footer-note{margin-top:var(--space-7);padding:var(--space-4) 0 var(--space-7);border-top:1px solid var(--border-subtle);font-size:var(--text-sm);color:var(--text-muted)}