*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,Helvetica,sans-serif;background-color:#fff;color:#333;line-height:1.4;padding:20px;text-align:center}#coins-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(400px * var(--coin-scale, 1)),1fr));gap:20px;justify-content:center;align-items:center;margin:0 auto 30px;max-width:1200px;padding:0 20px}.coin{width:calc(400px * var(--coin-scale, 1));height:calc(400px * var(--coin-scale, 1));margin:0 auto;cursor:pointer;outline:none;perspective:1000px;transition:transform .3s ease}.coin:hover{transform:scale(1.05)}.coin-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform 2.5s;transform-style:preserve-3d}.coin-face{position:absolute;width:100%;height:100%;border-radius:50%;background-size:cover;background-position:center;background-repeat:no-repeat;backface-visibility:hidden}.coin-front{z-index:2}.coin-back{transform:rotateY(180deg)}.coin.heads .coin-inner{transform:rotateY(0)}.coin.tails .coin-inner{transform:rotateY(180deg)}@keyframes coinFlip{0%{transform:rotateY(0)}25%{transform:rotateY(450deg) scale(1.1)}50%{transform:rotateY(900deg) scale(1.2)}75%{transform:rotateY(1350deg) scale(1.1)}to{transform:rotateY(1800deg)}}.coin.flipping .coin-inner{animation:coinFlip 2.5s ease-in-out}.margin{margin:30px 0}.large{font-size:24px;font-weight:700;text-decoration:underline}#coin-count{margin:20px 0}#coin-count-select{padding:8px 12px;font-size:16px;border:2px solid #999;border-radius:4px;background-color:#fff;cursor:pointer;margin-top:10px}#coin-count-select:hover{border-color:#333}#coin-styles{margin:20px 0}.fun{font-size:14px;font-weight:700;display:block;margin-bottom:10px;letter-spacing:1px}#coin-styles ul{list-style:none;display:flex;justify-content:center;gap:15px;margin-top:10px}.coin-style-option{width:80px;height:80px;cursor:pointer;border:3px solid #999;border-radius:50%;transition:all .2s ease;overflow:hidden;background-color:#f5f5f5}.coin-style-option:hover{transform:scale(1.1);border-color:#333}.coin-style-option.active{border-color:#007bff;border-width:4px;box-shadow:0 0 10px #007bff4d}.coin-style-option img{width:100%;height:100%;object-fit:cover}#flip-history{margin:30px 0;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:20px}#stats-summary{margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #dee2e6}.stats-row{display:flex;justify-content:center;gap:30px;margin-bottom:15px;font-weight:700}.stats-row span{font-size:16px}.clear-btn{background-color:#dc3545;color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:700;transition:background-color .2s ease}.clear-btn:hover{background-color:#c82333}#history-timeline{max-height:300px;overflow-y:auto;border:1px solid #dee2e6;border-radius:4px;background-color:#fff}.history-item{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-bottom:1px solid #f1f3f4}.history-item:last-child{border-bottom:none}.history-item.heads{background-color:#d4edda;border-left:4px solid #28a745}.history-item.tails{background-color:#f8d7da;border-left:4px solid #dc3545}.history-item .result{font-weight:700;font-size:14px}.history-item .time{font-size:12px;color:#666}.no-history{padding:30px;text-align:center;color:#666;font-style:italic}#share{margin:30px 0}#share a{display:inline-block;margin:0 10px;padding:8px 16px;text-decoration:none;color:#fff;font-weight:700;font-size:12px;letter-spacing:1px;border-radius:3px;transition:opacity .2s ease}#share a:hover{opacity:.8}.facebook{background-color:#3b5998}.twitter{background-color:#1da1f2}header{margin:40px 0}header nav ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:10px}header nav a{color:#333;text-decoration:underline;font-size:14px}header nav a:hover{color:#666}.content{background-color:#efefef;border:1px solid #cccccc;padding:30px;margin:30px auto;max-width:800px;text-align:left}.content h1{font-size:28px;margin-bottom:20px;text-align:center;color:#333}.content h2{font-size:24px;margin-bottom:20px;text-align:center;color:#333}.content h3{font-size:18px;margin-bottom:15px;color:#333}.content h4{font-size:16px;font-weight:700;margin:20px 0 10px;color:#333}.content p{margin-bottom:15px;line-height:1.5}.content ul,.content ol{margin:15px 0 15px 30px}.content li{margin-bottom:8px}blockquote{font-style:italic;margin:20px 0;padding-left:20px;border-left:3px solid #ccc;line-height:1.6}.back-to-top{text-align:center;margin-top:30px;padding-top:20px;border-top:1px solid #ccc}.back-to-top a{color:#333;text-decoration:underline;font-weight:700;font-size:14px;letter-spacing:1px}.back-to-top a:hover{color:#666}.faq-item{margin-bottom:25px}.faq-item h4{margin-bottom:10px}.answer{margin-left:0}footer{background-color:#efefef;border:1px solid #cccccc;padding:20px;margin:30px auto;max-width:800px;text-align:center}footer ul{list-style:none;display:flex;justify-content:center;gap:20px;margin-bottom:15px}footer a{color:#333;text-decoration:underline;font-size:14px}footer a:hover{color:#666}.copy{font-size:12px;color:#666;margin-top:10px;text-align:center}a{color:#333;text-decoration:underline}a:hover{color:#666}@media (max-width: 768px){body{padding:10px}#coins-container{grid-template-columns:repeat(auto-fit,minmax(calc(300px * var(--coin-scale, 1)),1fr));gap:15px;padding:0 10px}.coin{width:calc(300px * var(--coin-scale, 1));height:calc(300px * var(--coin-scale, 1))}.content{padding:20px;margin:20px 10px}header nav ul{flex-direction:column;gap:10px}#coin-styles ul{gap:10px}.coin-style-option{width:60px;height:60px}.stats-row{flex-direction:column;gap:10px}#flip-history{padding:15px}#share a{display:block;margin:5px auto;width:120px}footer ul{flex-direction:column;gap:10px}}@media (max-width: 480px){#coins-container{grid-template-columns:repeat(auto-fit,minmax(calc(250px * var(--coin-scale, 1)),1fr));gap:10px}.coin{width:calc(250px * var(--coin-scale, 1));height:calc(250px * var(--coin-scale, 1))}.content{padding:15px}.large{font-size:20px}.coin-style-option{width:50px;height:50px}#coin-styles ul{gap:8px}.stats-row span{font-size:14px}.history-item{padding:8px 10px}.history-item .result{font-size:12px}.history-item .time{font-size:10px}}.version-info{margin:15px 0;font-size:11px;color:#666;text-align:center}.version-info span{font-size:11px}.version-info a{text-decoration:none;color:#666;transition:text-decoration .2s ease}.version-info a:hover{text-decoration:underline;color:#333}