@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;600;700;800&family=Baloo+2:wght@600;700;800&display=swap";
.showcase{background:linear-gradient(135deg,#f5e6d3 0%,#e8d4b8 100%);min-height:100vh;padding:48px 16px}.showcase-container{max-width:1200px;margin:0 auto}.showcase-header{text-align:center;background:#fff;border:5px solid #3d2e1f;border-radius:32px;margin-bottom:64px;padding:48px 24px;box-shadow:0 8px #3d2e1f,0 0 0 4px #3d2e1f}.heading-hero{color:#2b2d42;margin:0 0 16px;font-family:Fredoka,Comic Sans MS,cursive;font-size:clamp(36px,8vw,64px);font-weight:700;line-height:1.1}.text-large{color:#5a5c6e;margin:0;font-family:Nunito,sans-serif;font-size:clamp(18px,3vw,24px);line-height:1.5}.showcase-section{background:#fff;border:4px solid #3d2e1f;border-radius:24px;margin-bottom:64px;padding:32px;box-shadow:0 6px #3d2e1f,0 0 0 4px #3d2e1f}.heading-xl{color:#2b2d42;border-bottom:3px solid #d4c4ae;margin:0 0 32px;padding-bottom:16px;font-family:Fredoka,cursive;font-size:clamp(28px,5vw,42px);font-weight:700}.heading-2xl{color:#2b2d42;margin:0;font-family:Fredoka,cursive;font-size:48px;font-weight:700}.heading-lg{color:#2b2d42;margin:0 0 16px;font-family:Fredoka,cursive;font-size:28px;font-weight:700}.text-base{color:#2b2d42;margin:0;font-family:Nunito,sans-serif;font-size:18px;line-height:1.6}.color-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;display:grid}.color-card{background:#fff;border:3px solid #3d2e1f;border-radius:16px;transition:all .2s cubic-bezier(.34,1.56,.64,1);overflow:hidden;box-shadow:0 4px #3d2e1f,0 0 0 3px #3d2e1f}.color-card:hover{transform:translateY(-4px);box-shadow:0 6px #3d2e1f,0 0 0 3px #3d2e1f}.color-swatch{border-bottom:3px solid #3d2e1f;height:120px}.color-info{flex-direction:column;gap:4px;padding:16px;display:flex}.color-name{color:#2b2d42;font-family:Fredoka,cursive;font-size:18px;font-weight:600}.color-hex{color:#5a5c6e;font-family:Courier New,monospace;font-size:14px}.typo-stack{flex-direction:column;gap:32px;display:flex}.typo-sample{background:#f5e6d3;border:3px solid #d4c4ae;border-radius:12px;flex-direction:column;gap:8px;padding:24px;display:flex}.typo-meta{color:#8d8f9e;font-family:Courier New,monospace;font-size:14px}.button-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;display:grid}.button-primary{color:#fff;cursor:pointer;background:#457b9d;border:4px solid #3d2e1f;border-radius:24px;min-height:64px;padding:16px 32px;font-family:Fredoka,cursive;font-size:22px;font-weight:700;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px #3d2e1f,0 0 0 3px #3d2e1f}.button-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px #3d2e1f,0 0 0 3px #3d2e1f}.button-primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 3px #3d2e1f,inset 0 2px 4px #0000001a}.button-primary:disabled{opacity:.5;cursor:not-allowed}.button-secondary{color:#2b2d42;cursor:pointer;background:#fff;border:4px solid #3d2e1f;border-radius:24px;min-height:64px;padding:16px 32px;font-family:Fredoka,cursive;font-size:22px;font-weight:700;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px #3d2e1f,0 0 0 3px #3d2e1f}.button-secondary:hover{transform:translateY(-2px);box-shadow:0 6px #3d2e1f,0 0 0 3px #3d2e1f}.button-secondary:active{transform:translateY(2px);box-shadow:0 0 0 3px #3d2e1f,inset 0 2px 4px #0000001a}.button-character{color:#fff;cursor:pointer;border:4px solid #3d2e1f;border-radius:20px;min-height:64px;padding:16px 24px;font-family:Fredoka,cursive;font-size:20px;font-weight:700;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px #3d2e1f,0 0 0 3px #3d2e1f}.button-sorceress{background:#e63946}.button-knight{background:#457b9d}.button-ranger{background:#06a77d}.button-bard{background:#ffb703}.button-character:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 6px #3d2e1f,0 0 0 3px #3d2e1f}.button-character:active{transform:translateY(2px);box-shadow:0 0 0 3px #3d2e1f,inset 0 2px 4px #0000001a}.button-small{color:#fff;cursor:pointer;background:#457b9d;border:3px solid #3d2e1f;border-radius:12px;padding:12px 24px;font-family:Nunito,sans-serif;font-size:16px;font-weight:600;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 3px #3d2e1f,0 0 0 2px #3d2e1f}.button-small:hover:not(:disabled){transform:translateY(-2px)}.button-small:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 2px #3d2e1f}.button-small:disabled{opacity:.5;cursor:not-allowed}.card-grid-demo{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;display:grid}.card{background:#fff;border:4px solid #3d2e1f;border-radius:16px;padding:24px;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px #3d2e1f,0 0 0 3px #3d2e1f}.card:hover{transform:translateY(-4px);box-shadow:0 6px #3d2e1f,0 0 0 3px #3d2e1f}.card-character{background:linear-gradient(135deg,#f5e6d3 0%,#e8d4b8 100%);border:5px solid #3d2e1f;border-radius:24px;padding:32px;transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative;box-shadow:0 6px #3d2e1f,0 0 0 4px #3d2e1f}.card-character:hover{transform:translateY(-4px);box-shadow:0 8px #3d2e1f,0 0 0 4px #3d2e1f}.skill-badges{flex-wrap:wrap;gap:12px;margin-top:20px;display:flex}.hearts-container{background:#fff;border:4px solid #3d2e1f;border-radius:9999px;gap:16px;width:fit-content;margin:0 auto 24px;padding:16px 24px;display:flex;box-shadow:0 4px #3d2e1f,0 0 0 3px #3d2e1f}.heart{cursor:pointer;font-size:48px;transition:all .3s;animation:1.5s ease-in-out infinite heartbeat}.heart:hover{transform:scale(1.2)}.heart.lost{opacity:.3;filter:grayscale();animation:none;transform:scale(.9)}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.dice-demo{flex-direction:column;align-items:center;gap:32px;display:flex}.dice-roll{text-align:center;background:linear-gradient(135deg,#e63946 0%,#ff6b35 100%);border:5px solid #3d2e1f;border-radius:24px;padding:32px 48px;animation:.4s cubic-bezier(.34,1.56,.64,1) diceAppear;box-shadow:0 6px #3d2e1f,0 0 0 4px #3d2e1f}.dice-roll.rolling .dice-number{animation:.6s cubic-bezier(.34,1.56,.64,1) infinite diceRoll}@keyframes diceAppear{0%{opacity:0;transform:scale(.8)rotate(-10deg)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes diceRoll{0%,to{transform:rotate(0)scale(1)}25%{transform:rotate(90deg)scale(1.1)}50%{transform:rotate(180deg)scale(1.2)}75%{transform:rotate(270deg)scale(1.1)}}.dice-number{color:#fff;text-shadow:0 3px #3d2e1f,0 6px 12px #0000004d;margin-bottom:8px;font-family:Fredoka,cursive;font-size:80px;font-weight:800;line-height:1}.dice-label{color:#fff;text-shadow:0 2px 4px #0003;font-family:Fredoka,cursive;font-size:24px;font-weight:700}.form-demo{flex-direction:column;gap:24px;max-width:600px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-label{color:#2b2d42;font-family:Fredoka,cursive;font-size:20px;font-weight:600}.input-text,.input-select,.input-textarea{background:#fff;border:3px solid #3d2e1f;border-radius:12px;padding:16px 20px;font-family:Nunito,sans-serif;font-size:18px;transition:all .2s;box-shadow:inset 0 2px 6px #0000001a}.input-text:focus,.input-select:focus,.input-textarea:focus{border-color:#457b9d;outline:none;box-shadow:inset 0 2px 6px #0000001a,0 0 0 4px #457b9d33}.input-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%233D2E1F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-position:right 20px center;background-repeat:no-repeat;padding-right:48px}.badge-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;display:grid}.skill-badge{background:#fff;border:3px solid #3d2e1f;border-radius:9999px;align-items:center;gap:12px;padding:12px 20px;transition:all .2s cubic-bezier(.34,1.56,.64,1);display:flex;box-shadow:0 3px #3d2e1f,0 0 0 2px #3d2e1f}.skill-badge:hover{transform:translateY(-2px);box-shadow:0 5px #3d2e1f,0 0 0 2px #3d2e1f}.skill-icon{font-size:32px;line-height:1}.skill-name{color:#2b2d42;flex:1;font-family:Fredoka,cursive;font-size:18px;font-weight:700}.skill-value{color:#fff;border:3px solid #3d2e1f;border-radius:9999px;justify-content:center;align-items:center;min-width:36px;height:36px;font-family:Fredoka,cursive;font-size:20px;font-weight:800;display:flex}.skill-value-0{background:#6c757d}.skill-value-1{background:#ffb703}.skill-value-2{background:#06a77d}.skill-value-3{background:#e63946}.shadow-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px;display:grid}.shadow-example{background:#fff;border:3px solid #3d2e1f;border-radius:16px;justify-content:center;align-items:center;height:120px;display:flex}.shadow-label{color:#2b2d42;font-family:Fredoka,cursive;font-size:18px;font-weight:600}.shadow-sm{box-shadow:0 2px #3d2e1f,0 0 0 2px #3d2e1f}.shadow-md{box-shadow:0 4px #3d2e1f,0 0 0 3px #3d2e1f}.shadow-lg{box-shadow:0 6px #3d2e1f,0 0 0 4px #3d2e1f}.shadow-xl{box-shadow:0 8px #3d2e1f,0 0 0 4px #3d2e1f}.animation-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:32px;display:grid}.animation-example{justify-content:center;align-items:center;min-height:120px;display:flex}.animation-box{color:#fff;background:#457b9d;border:3px solid #3d2e1f;border-radius:16px;padding:20px 32px;font-family:Fredoka,cursive;font-size:18px;font-weight:700;box-shadow:0 4px #3d2e1f,0 0 0 3px #3d2e1f}.bounce-animation .animation-box{animation:1s ease-in-out infinite bounce}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.wiggle-animation .animation-box{animation:1s ease-in-out infinite wiggle}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.celebrate-animation .animation-box{animation:1.2s cubic-bezier(.34,1.56,.64,1) infinite celebrate}@keyframes celebrate{0%{transform:scale(1)rotate(0)}25%{transform:scale(1.2)rotate(-5deg)}50%{transform:scale(1.3)rotate(5deg)}75%{transform:scale(1.2)rotate(-3deg)}to{transform:scale(1)rotate(0)}}.pulse-animation .animation-box{animation:1.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 4px #3d2e1f,0 0 0 3px #3d2e1f}50%{transform:scale(1.1);box-shadow:0 6px #3d2e1f,0 0 0 3px #3d2e1f,0 0 0 8px #457b9d4d}}.component-demo{background:#f5e6d3;border:3px solid #d4c4ae;border-radius:16px;margin-bottom:24px;padding:32px}.demo-controls{justify-content:center;gap:16px;margin-top:24px;display:flex}@media (max-width:768px){.showcase{padding:24px 12px}.showcase-section{padding:20px}.color-grid,.button-grid,.badge-grid,.shadow-grid,.animation-grid,.card-grid-demo{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}