*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#7c3aed,#a78bfa,#c4b5fd);min-height:100vh;padding-top:72px;padding-bottom:2rem;color:#1f2937}.top-nav{position:fixed;top:0;left:0;right:0;z-index:100;background:#ffffffeb;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid #e5e7eb;padding:12px 20px}.nav-container{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.nav-logo{display:flex;align-items:center;text-decoration:none;color:#1f2937;font-weight:600;font-size:18px}.nav-logo img{width:32px;height:32px;border-radius:50%;margin-right:8px}.nav-links{display:flex;gap:20px}.nav-link{color:#6b7280;text-decoration:none;font-size:14px}.nav-link:hover{color:#7c3aed}.container{max-width:420px;margin:0 auto;padding:0 1rem}.app-header{text-align:center;margin-bottom:1.5rem}.app-title{font-size:2rem;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.15);margin-bottom:.25rem}.app-description{font-size:1rem;color:#ffffffe6}.mode-switcher{width:min(100%,300px);margin:0 auto 1.75rem;padding:6px;display:grid;grid-template-columns:repeat(2,1fr);gap:6px;border-radius:999px;background:#ffffff2e;border:1px solid rgba(255,255,255,.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 32px #4c1d952e}.mode-option{border:none;border-radius:999px;padding:.8rem .9rem;background:transparent;color:#ffffffd6;font-size:.95rem;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}.mode-option:hover{color:#fff}.mode-option.active{background:#fffffff0;color:#6d28d9;box-shadow:0 10px 24px #ffffff3d}.mode-option:focus-visible{outline:2px solid rgba(255,255,255,.9);outline-offset:2px}.dice-section{position:relative;display:flex;align-items:center;justify-content:center;min-height:200px;margin-bottom:1.5rem}.dice-wrap{border:none;padding:0;background:none;cursor:pointer;border-radius:20px;line-height:0;transition:transform .15s ease}.dice-wrap:hover:not(:disabled){transform:scale(1.05)}.dice-wrap:active:not(:disabled){transform:scale(.98)}.dice-wrap:disabled{cursor:not-allowed;transform:none}.dice-wrap:focus{outline:none}.dice-wrap:focus-visible .dice{box-shadow:0 0 0 4px #fffc}.dice-wrap:focus-visible .dice-3d-canvas{box-shadow:0 0 0 4px #ffffff73;border-radius:28px}.dice{width:120px;height:120px;background:linear-gradient(145deg,#fff,#f3f4f6);border-radius:20px;box-shadow:0 8px 24px #00000026,inset 0 1px #ffffffe6;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center;padding:12px;transition:transform .1s ease-out,box-shadow .2s ease}.dice .dot{width:18px;height:18px;border-radius:50%;background:#4f46e5;opacity:0;transition:opacity .15s ease}.dice[data-face="1"] .dot:nth-child(5){opacity:1}.dice[data-face="2"] .dot:nth-child(1),.dice[data-face="2"] .dot:nth-child(9){opacity:1}.dice[data-face="3"] .dot:nth-child(1),.dice[data-face="3"] .dot:nth-child(5),.dice[data-face="3"] .dot:nth-child(9){opacity:1}.dice[data-face="4"] .dot:nth-child(1),.dice[data-face="4"] .dot:nth-child(3),.dice[data-face="4"] .dot:nth-child(7),.dice[data-face="4"] .dot:nth-child(9){opacity:1}.dice[data-face="5"] .dot:nth-child(1),.dice[data-face="5"] .dot:nth-child(3),.dice[data-face="5"] .dot:nth-child(5),.dice[data-face="5"] .dot:nth-child(7),.dice[data-face="5"] .dot:nth-child(9){opacity:1}.dice[data-face="6"] .dot:nth-child(1),.dice[data-face="6"] .dot:nth-child(3),.dice[data-face="6"] .dot:nth-child(4),.dice[data-face="6"] .dot:nth-child(6),.dice[data-face="6"] .dot:nth-child(7),.dice[data-face="6"] .dot:nth-child(9){opacity:1}.dice-scene{width:180px;height:180px;display:grid;place-items:center}.dice-3d-canvas{width:180px;height:180px;display:block;background:transparent;filter:drop-shadow(0 18px 28px rgba(49,46,129,.28))}.dice.rolling{animation:diceRoll .9s ease-out forwards}@keyframes diceRoll{0%{transform:rotate(0) scale(1)}25%{transform:rotate(90deg) scale(1.08)}50%{transform:rotate(200deg) scale(1.05)}75%{transform:rotate(300deg) scale(1.02)}to{transform:rotate(360deg) scale(1)}}.dice.reveal{animation:revealGlow .5s ease-out forwards}.dice-3d-canvas.reveal{animation:revealPop3d .45s ease-out forwards}@keyframes revealGlow{0%{box-shadow:0 8px 24px #00000026}50%{box-shadow:0 0 0 8px #fde04780,0 8px 24px #00000026;transform:scale(1.08)}to{box-shadow:0 8px 28px #0003;transform:scale(1)}}@keyframes revealPop3d{0%{filter:drop-shadow(0 18px 20px rgba(49,46,129,.28))}50%{filter:drop-shadow(0 0 18px rgba(250,204,21,.5)) drop-shadow(0 22px 28px rgba(79,70,229,.36))}to{filter:drop-shadow(0 20px 24px rgba(49,46,129,.32))}}.hidden{display:none!important}.result-section{text-align:center;margin-bottom:1.5rem}.result-section.show{display:block}.result-label{font-size:.875rem;color:#ffffffe6;margin-bottom:.25rem}.result-value{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:.5rem}@media (max-width: 480px){.app-title{font-size:1.75rem}.mode-switcher{width:100%;margin-bottom:1.5rem}.dice{width:100px;height:100px;padding:10px}.dice .dot{width:14px;height:14px}.dice-scene,.dice-3d-canvas{width:148px;height:148px}}