@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-primary: #0d0d0f;--bg-secondary: #141418;--bg-card: #1a1a1f;--bg-elevated: #222228;--accent-primary: #ff6b2c;--accent-secondary: #ff8c42;--accent-glow: rgba(255, 107, 44, .4);--accent-subtle: rgba(255, 107, 44, .15);--text-primary: #f5f5f7;--text-secondary: #a1a1a6;--text-muted: #6e6e73;--border-subtle: rgba(255, 255, 255, .08);--border-medium: rgba(255, 255, 255, .12);--dice-bg: linear-gradient(145deg, #1f1f24, #28282f);--dice-pip: var(--accent-primary);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 4px 20px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 40px rgba(0, 0, 0, .5);--shadow-glow: 0 0 30px var(--accent-glow);--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-medium: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--radius-sm: 6px;--radius-md: 12px;--radius-lg: 20px;--radius-xl: 28px}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:0;left:0;right:0;height:60vh;background:radial-gradient(ellipse 80% 50% at 50% -20%,var(--accent-subtle),transparent);pointer-events:none;z-index:-1}.app-container{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:24px}.main-card{max-width:860px;width:100%;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.title{margin:0;font-size:clamp(2rem,5vw,3rem);font-weight:700;background:linear-gradient(135deg,var(--text-primary) 0%,var(--accent-secondary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.header-title-section{display:flex;flex-direction:column;gap:4px}.header-presents{font-size:11px;font-weight:500;color:var(--text-muted);opacity:.6;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}.version{font-size:9px;font-weight:400;color:var(--text-muted);opacity:.4;letter-spacing:.03em;text-transform:uppercase}.btn{padding:12px 24px;font-size:15px;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);font-family:inherit}.btn-primary{background:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);color:#fff;box-shadow:0 4px 15px var(--accent-glow)}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 25px var(--accent-glow)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-medium)}.btn-secondary:hover:not(:disabled){background:var(--accent-subtle);border-color:var(--accent-primary);color:var(--accent-primary)}.btn-secondary:disabled{opacity:.5;cursor:not-allowed}.btn-icon{padding:12px;font-size:20px;background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-medium);min-width:auto}.btn-icon:hover{background:var(--accent-subtle);border-color:var(--accent-primary);transform:scale(1.05)}.dice-section-3d{margin-top:32px;display:flex;gap:60px;justify-content:center;flex-wrap:wrap;perspective:800px;padding:45px 20px}.dice-3d-container{width:80px;height:80px;perspective:600px;position:relative}.dice-3d-cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(var(--final-x, 0deg)) rotateY(var(--final-y, 0deg));transition:transform .4s cubic-bezier(.34,1.56,.64,1)}.dice-3d-cube.tumbling{animation:tumble 1.2s cubic-bezier(.25,.46,.45,.94)}@keyframes tumble{0%{transform:rotateX(0) rotateY(0) rotate(0)}20%{transform:rotateX(180deg) rotateY(90deg) rotate(45deg)}40%{transform:rotateX(360deg) rotateY(180deg) rotate(-30deg)}60%{transform:rotateX(540deg) rotateY(270deg) rotate(60deg)}80%{transform:rotateX(720deg) rotateY(360deg) rotate(-15deg)}to{transform:rotateX(var(--final-x, 0deg)) rotateY(var(--final-y, 0deg)) rotate(0)}}.dice-face{position:absolute;width:80px;height:80px;background:linear-gradient(145deg,#2a2a32,#1a1a1f);border:2px solid #3a3a44;border-radius:12px;box-shadow:inset 0 2px 4px #ffffff0d,inset 0 -2px 4px #0000004d,0 4px 20px #00000080;backface-visibility:visible;display:flex;align-items:center;justify-content:center}.dice-face.front{transform:translateZ(40px)}.dice-face.back{transform:rotateY(180deg) translateZ(40px)}.dice-face.right{transform:rotateY(90deg) translateZ(40px)}.dice-face.left{transform:rotateY(-90deg) translateZ(40px)}.dice-face.top{transform:rotateX(90deg) translateZ(40px)}.dice-face.bottom{transform:rotateX(-90deg) translateZ(40px)}.die-face-3d{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:60px;height:60px;gap:2px}.pip{width:14px;height:14px;border-radius:50%;margin:auto;opacity:0;transition:opacity .2s}.pip.visible{opacity:1;background:radial-gradient(circle at 30% 30%,#ff8c42,#ff6b2c);box-shadow:0 0 8px #ff6b2ccc,0 0 16px #ff6b2c80,inset 0 -2px 4px #0000004d}.dice-flashing .pip.visible{animation:pip-flash .3s ease-in-out}@keyframes pip-flash{0%,to{box-shadow:0 0 8px #ff6b2ccc,0 0 16px #ff6b2c80,inset 0 -2px 4px #0000004d}50%{box-shadow:0 0 20px #ff6b2c,0 0 40px #ff6b2ccc,0 0 60px #ff6b2c99,inset 0 -2px 4px #0000004d}}.dice-highlighted .dice-3d-cube{transform:scale(1.15);transition:transform .2s ease-out}.dice-lock-icon{position:absolute;top:-8px;right:-8px;font-size:20px;cursor:pointer;background:var(--bg-primary);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000004d;transition:transform .2s ease;z-index:10}.dice-lock-icon:hover{transform:scale(1.15)}.readouts-section{margin-top:32px;display:flex;flex-direction:column;gap:16px}.readouts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}.readout-card{background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:16px;transition:all var(--transition-fast);display:flex;flex-direction:column}.readout-card:hover{border-color:var(--border-medium)}.readout-label{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle);text-align:center}.readout-value{font-size:18px;font-weight:600;color:var(--text-primary)}.readout-value.accent{color:var(--accent-primary)}.readout-description{font-size:13px;color:var(--text-secondary);margin-top:16px;line-height:1.5}.dice-result-card{display:flex;flex-direction:column;text-align:center}.dice-result-content{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px}.dice-result-card .pattern-icon-wrapper{margin:0;display:flex;flex-direction:column;align-items:center}.dice-result-card .pattern-icon{width:80px;height:80px}.pattern-type-label{font-size:14px;font-weight:600;color:var(--accent-secondary);text-transform:capitalize;margin-top:8px}.dice-result-card .readout-value{font-size:24px}.sum-overlay-card{text-align:center;padding:24px;display:flex;flex-direction:column}.sum-overlay-card .sum-value{flex:1;display:flex;align-items:center;justify-content:center}.sum-value{font-size:72px;font-weight:800;line-height:1;margin:16px 0;transition:all var(--transition-fast)}.sum-value-clickable{cursor:pointer}.sum-value-clickable:hover{transform:scale(1.05);text-shadow:0 0 20px currentColor}.sum-value.normal{color:var(--text-primary)}.sum-value.underpowered{color:#6b7280}.sum-value.overpowered{color:#166534}.overlay-callout{display:inline-block;padding:8px 20px;border-radius:var(--radius-md);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-top:8px}.overlay-callout.underpowered{background:#6366f133;color:#a5b4fc}.overlay-callout.overpowered{background:#22c55e33;color:#86efac}.overlay-details{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:8px}.overlay-name{font-size:20px;font-weight:700;color:var(--accent-primary);margin-top:8px}.overlay-effect{font-size:14px;color:var(--text-secondary);max-width:400px;line-height:1.5}.pattern-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--accent-subtle);border-radius:var(--radius-sm);font-weight:600;transition:all var(--transition-fast)}.pattern-badge-clickable{cursor:pointer}.pattern-badge-clickable:hover{background:var(--accent-primary);color:var(--bg-primary);transform:scale(1.05)}.pattern-card{text-align:center;display:flex;flex-direction:column}.pattern-card .readout-value,.pattern-card .readout-description{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.pattern-icon-wrapper{display:flex;justify-content:center;align-items:center;margin:16px 0}.pattern-icon{width:120px;height:120px;object-fit:contain;border-radius:var(--radius-md);animation:fadeInScale .4s ease-out;transition:transform var(--transition-fast)}.pattern-icon-clickable{cursor:pointer}.pattern-icon-clickable:hover .pattern-icon{transform:scale(1.1)}.pattern-icon-clickable:active .pattern-icon{transform:scale(1.05)}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.overlay-badge{display:inline-block;padding:4px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}.overlay-badge.normal{background:#ffffff1a;color:var(--text-secondary)}.overlay-badge.underpowered{background:#6366f133;color:#a5b4fc}.overlay-badge.overpowered{background:#22c55e33;color:#86efac}.phrase-section{margin-top:32px}.phrase-box{position:relative;padding:24px;background:linear-gradient(135deg,var(--bg-elevated) 0%,var(--bg-secondary) 100%);border:1px solid var(--border-medium);border-radius:var(--radius-lg);overflow:hidden}.phrase-box:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary),var(--accent-primary));background-size:200% 100%;animation:shimmer 3s linear infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.phrase-text{font-size:clamp(1.1rem,3vw,1.35rem);font-weight:500;line-height:1.6;color:var(--text-primary)}.phrase-placeholder{color:var(--text-muted);font-style:italic;text-align:center}.prompt-table{display:flex;flex-direction:column;gap:16px}.prompt-row{display:flex;align-items:center;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--border-subtle)}.prompt-row:last-child{border-bottom:none;padding-bottom:0}.lock-button{background:transparent;border:none;font-size:16px;cursor:pointer;padding:4px;opacity:.5;transition:opacity .2s ease,transform .2s ease;margin-left:auto}.lock-button:hover{opacity:1;transform:scale(1.1)}.lock-button.locked{opacity:1}.prompt-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);min-width:80px;flex-shrink:0;transition:color .2s ease}.prompt-label-highlighted{color:var(--text-primary)!important}.prompt-value{font-size:18px;font-weight:600;color:var(--accent-primary)}.prompt-modifier{display:flex;flex-direction:column;gap:4px}.modifier-name{font-size:16px;font-weight:700}.modifier-row.normal .modifier-name,.modifier-row.normal .prompt-label{color:var(--text-primary)}.modifier-row.underpowered .modifier-name,.modifier-row.underpowered .prompt-label{color:#6b7280}.modifier-row.overpowered .modifier-name,.modifier-row.overpowered .prompt-label{color:#166534}.modifier-effect{font-size:13px;color:var(--text-secondary);font-style:italic}.modifier-none{font-size:16px;font-weight:600;color:var(--text-muted)}.ai-section{margin-top:24px}.ai-section-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.limit-reached-message{margin-top:12px;padding:16px;background:#ff6b2c1a;border:1px solid rgba(255,107,44,.3);border-radius:var(--radius-md);text-align:center;font-size:14px;color:var(--text-primary)}.ai-response{margin-top:16px;padding:24px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-md);font-size:15px;line-height:1.7;color:var(--text-secondary)}.ai-response.error{border-color:#ef4444;color:#fca5a5}.ai-response h1,.ai-response h2,.ai-response h3{color:var(--text-primary);margin:0 0 12px;line-height:1.3}.ai-response h1{font-size:24px;font-weight:700}.ai-response h2{font-size:20px;font-weight:700}.ai-response h3{font-size:18px;font-weight:600}.ai-response p{margin:0 0 16px;color:var(--text-secondary)}.ai-response p:last-child{margin-bottom:0}.ai-response .ai-label{color:var(--accent-primary);font-weight:700}.ai-response .ai-emphasis{color:var(--text-primary);font-weight:700}.ai-response ul,.ai-response ol{margin:0 0 16px;padding-left:24px}.ai-response li{margin-bottom:8px;color:var(--text-secondary)}.ai-response li:last-child{margin-bottom:0}.ai-response code{background:var(--bg-elevated);padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:14px;color:var(--accent-secondary)}.ai-response pre{background:var(--bg-elevated);padding:16px;border-radius:var(--radius-sm);overflow-x:auto;margin:0 0 16px}.ai-response pre code{background:none;padding:0}.footer{margin-top:32px;padding-top:24px;border-top:1px solid var(--border-subtle)}.footer p{margin:0;font-size:13px;color:var(--text-muted);text-align:center}.footer a{color:var(--accent-secondary);text-decoration:none;transition:color var(--transition-fast)}.footer a:hover{color:var(--accent-primary);text-decoration:underline}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite;margin-right:8px}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 640px){.app-container{padding:16px}.main-card{padding:20px;border-radius:var(--radius-lg)}.header{flex-direction:column;align-items:stretch;text-align:center}.dice-section-3d{gap:16px}.dice-3d-container,.dice-face{width:70px;height:70px}.dice-face.front{transform:translateZ(35px)}.dice-face.back{transform:rotateY(180deg) translateZ(35px)}.dice-face.right{transform:rotateY(90deg) translateZ(35px)}.dice-face.left{transform:rotateY(-90deg) translateZ(35px)}.dice-face.top{transform:rotateX(90deg) translateZ(35px)}.dice-face.bottom{transform:rotateX(-90deg) translateZ(35px)}.die-face-3d{width:52px;height:52px}.pip{width:12px;height:12px}.readouts-row{grid-template-columns:1fr}.sum-value{font-size:56px}.dice-result-content{flex-direction:column;align-items:flex-start}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:var(--bg-card);border:1px solid var(--border-medium);border-radius:var(--radius-xl);padding:32px;max-width:500px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal-title{margin:0 0 8px;font-size:24px;font-weight:700;color:var(--text-primary)}.modal-subtitle{margin:0 0 24px;font-size:14px;color:var(--text-secondary)}.modal-fields{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.modal-field{display:flex;flex-direction:column;gap:6px}.modal-field-inline{flex-direction:row;align-items:center;gap:12px}.modal-field-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);display:flex;align-items:center;gap:8px}.dice-emoji{font-size:45px;line-height:1;flex-shrink:0}.modal-field-input{padding:10px 14px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:15px;font-family:inherit;transition:all var(--transition-fast);flex:1}.modal-field-input:focus{outline:none;border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-subtle)}.modal-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}.prompt-label-editable{cursor:pointer;transition:color var(--transition-fast)}.prompt-label-editable:hover{color:var(--accent-primary)}.modal-content-wide{max-width:700px}.probability-summary{display:flex;gap:12px;margin-bottom:32px}.probability-band{flex:1;padding:16px;border-radius:var(--radius-md);text-align:center}.probability-band-up{background:#6366f126;border:1px solid rgba(99,102,241,.3)}.probability-band-normal{background:#ffffff0d;border:1px solid var(--border-medium)}.probability-band-op{background:#22c55e26;border:1px solid rgba(34,197,94,.3)}.probability-band-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:8px}.probability-band-value{font-size:32px;font-weight:700;color:var(--text-primary)}.probability-chart{display:flex;align-items:flex-end;justify-content:space-between;height:200px;gap:4px;padding:20px;background:var(--bg-secondary);border-radius:var(--radius-md);margin-bottom:24px}.probability-bar-container{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}.probability-bar{width:100%;min-height:2px;border-radius:4px 4px 0 0;transition:all var(--transition-fast);margin-top:auto}.probability-bar-up{background:linear-gradient(to top,#6366f1,#818cf8)}.probability-bar-normal{background:linear-gradient(to top,var(--text-muted),var(--text-secondary))}.probability-bar-op{background:linear-gradient(to top,#22c55e,#4ade80)}.probability-bar:hover{opacity:.8;transform:scaleY(1.05)}.probability-label{margin-top:8px;font-size:11px;font-weight:600;color:var(--text-muted)}.archetype-modal-header{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:24px}.archetype-modal-image{width:200px;height:200px;object-fit:cover;border-radius:var(--radius-lg);border:2px solid var(--border-medium)}.archetype-modal-description{font-size:16px;line-height:1.6;color:var(--text-secondary);margin:0 0 24px;text-align:center}.about-modal-content{margin-bottom:24px}.about-modal-content p{font-size:15px;line-height:1.7;color:var(--text-secondary);margin:0 0 16px}.about-modal-content p:last-child{margin-bottom:0}