* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        html, body {
            overflow-x: hidden;
        }
        
        body {
            min-height: 100vh;
            background: linear-gradient(180deg, #1a1a1a 0%, #2d2418 50%, #1a1612 100%);
            background-attachment: fixed;
            font-family: Georgia, 'Times New Roman', serif;
            color: #d4c4a8;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px 16px;
            padding-bottom: 40px;
        }
        
        header {
            text-align: center;
            margin-bottom: 24px;
        }
        
        .ornament {
            color: #8b6914;
            font-size: 18px;
            letter-spacing: 6px;
            opacity: 0.7;
        }
        
        h1 {
            font-family: Georgia, serif;
            font-size: 26px;
            color: #c9a227;
            text-shadow: 
                0 0 10px rgba(201, 162, 39, 0.5),
                0 2px 4px rgba(0, 0, 0, 0.8);
            letter-spacing: 2px;
            margin: 8px 0;
            line-height: 1.2;
        }
        
        .subtitle {
            font-style: italic;
            color: #9a8b6f;
            font-size: 14px;
        }
        
        .alchemist-panel {
            background: linear-gradient(135deg, rgba(45, 36, 24, 0.95) 0%, rgba(30, 25, 18, 0.98) 100%);
            border: 2px solid #5c4a2a;
            border-radius: 12px;
            padding: 20px 16px;
            margin-bottom: 20px;
            position: relative;
            box-shadow: 
                inset 0 0 30px rgba(0, 0, 0, 0.5),
                0 10px 40px rgba(0, 0, 0, 0.6);
        }
        
        .alchemist-panel::before {
            content: '';
            position: absolute;
            top: 6px;
            left: 6px;
            right: 6px;
            bottom: 6px;
            border: 1px solid rgba(139, 105, 20, 0.3);
            border-radius: 8px;
            pointer-events: none;
        }
        
        .input-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .input-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .input-group.full-width {
            grid-column: 1 / -1;
        }
        
        label {
            font-family: Georgia, serif;
            font-size: 11px;
            color: #b8a070;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }
        
        input[type="number"], select {
            background: linear-gradient(180deg, #1a1510 0%, #252015 100%);
            border: 1px solid #5c4a2a;
            color: #e8d5a3;
            padding: 14px 12px;
            font-family: Georgia, serif;
            font-size: 18px;
            width: 100%;
            text-align: center;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c9a227' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            padding-right: 36px;
        }
        
        input:focus, select:focus {
            outline: none;
            border-color: #c9a227;
            box-shadow: 0 0 15px rgba(201, 162, 39, 0.3);
        }
        
        .modifier-row {
            display: flex;
            gap: 8px;
        }
        
        .modifier-row select {
            width: 70px;
            flex-shrink: 0;
            padding-right: 28px;
        }
        
        .modifier-row input {
            flex: 1;
        }
        
        .dice-display {
            font-family: Georgia, serif;
            font-size: 36px;
            color: #c9a227;
            text-align: center;
            padding: 12px;
            text-shadow: 0 0 20px rgba(201, 162, 39, 0.5);
        }
        
        .roll-button {
            width: 100%;
            padding: 18px 24px;
            margin-top: 16px;
            font-family: Georgia, serif;
            font-size: 20px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: #1a1612;
            background: linear-gradient(180deg, #d4a843 0%, #c9a227 50%, #a8861d 100%);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 
                0 4px 15px rgba(201, 162, 39, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
            transition: all 0.3s ease;
        }
        
        .roll-button:active {
            transform: translateY(2px);
            box-shadow: 
                0 2px 10px rgba(201, 162, 39, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }
        
        .result-panel {
            display: none;
            text-align: center;
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .result-panel.visible {
            display: block;
        }
        
        .result-label {
            font-family: Georgia, serif;
            font-size: 14px;
            color: #8b7355;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 8px;
        }
        
        .result-value {
            font-family: Georgia, serif;
            font-size: 64px;
            color: #c9a227;
            text-shadow: 
                0 0 30px rgba(201, 162, 39, 0.8),
                0 0 60px rgba(201, 162, 39, 0.4);
            line-height: 1;
        }
        
        .result-breakdown {
            display: none;
            font-size: 16px;
            color: #9a8b6f;
            margin-top: 12px;
            padding: 12px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 6px;
            font-style: italic;
            word-break: break-all;
        }
        
        .result-breakdown.visible {
            display: block;
        }
        
        .dice-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 16px;
            padding: 10px 16px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid #5c4a2a;
            border-radius: 6px;
            cursor: pointer;
            color: #9a8b6f;
            font-size: 13px;
            transition: all 0.2s ease;
        }
        
        .dice-toggle:hover {
            background: rgba(0, 0, 0, 0.4);
            border-color: #8b6914;
            color: #c9a227;
        }
        
        .dice-toggle .arrow {
            transition: transform 0.2s ease;
        }
        
        .dice-toggle.expanded .arrow {
            transform: rotate(180deg);
        }
        
        .dice-individual {
            display: none;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid rgba(92, 74, 42, 0.3);
        }
        
        .dice-individual.visible {
            display: flex;
        }
        
        .die-result {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid #5c4a2a;
            border-radius: 6px;
            font-family: Georgia, serif;
            font-size: 16px;
            color: #e8d5a3;
        }
        
        .divider {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, #5c4a2a 20%, #8b6914 50%, #5c4a2a 80%, transparent 100%);
            margin: 20px 0;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        
        .stat-box {
            text-align: center;
            padding: 12px 8px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            border: 1px solid rgba(92, 74, 42, 0.5);
        }
        
        .stat-box.accent {
            border-color: rgba(86, 180, 156, 0.6);
            background: rgba(86, 180, 156, 0.1);
        }
        
        .stat-label {
            font-size: 10px;
            color: #8b7355;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 4px;
        }
        
        .stat-box.accent .stat-label {
            color: #56b49c;
        }
        
        .stat-value {
            font-family: Georgia, serif;
            font-size: 20px;
            color: #c9a227;
        }
        
        .stat-box.accent .stat-value {
            color: #7dd4bc;
        }
        
        .chart-container {
            position: relative;
            width: 100%;
            margin-top: 16px;
        }
        
        .chart-title {
            font-family: Georgia, serif;
            text-align: center;
            color: #b8a070;
            margin-bottom: 12px;
            font-size: 13px;
            letter-spacing: 2px;
        }
        
        #chartCanvas {
            width: 100%;
            height: 280px;
            display: block;
        }
        
        .chart-legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 12px;
            font-size: 11px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .legend-color {
            width: 14px;
            height: 14px;
            border-radius: 3px;
        }
        
        .legend-color.normal {
            background: rgba(201, 162, 39, 0.7);
            border: 1px solid rgba(201, 162, 39, 1);
        }
        
        .legend-color.stddev {
            background: rgba(86, 180, 156, 0.7);
            border: 1px solid rgba(86, 180, 156, 1);
        }
        
        .legend-color.roll {
            background: rgba(255, 107, 107, 0.9);
            border: 1px solid rgba(255, 107, 107, 1);
        }
        
        footer {
            text-align: center;
            margin-top: 24px;
            padding-bottom: 20px;
            color: #5c4a2a;
            font-style: italic;
            font-size: 13px;
        }