600&family=Inter:wght@400;500;600&display=swap');

        * {
            user-select: none;
            -webkit-user-select: none;
            box-sizing: border-box;
        }

        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #1a2426;
            font-family: 'Inter', 'Noto Serif SC', sans-serif;
        }

        #artCanvas {
            display: block;
            width: 100%;
            height: 100%;
            cursor: pointer;
            touch-action: none;
        }

        /* 玻璃拟态悬浮控制栏 */
        .glass-panel {
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 12px 32px rgba(14, 38, 46, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.9);
            transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .night-mode .glass-panel {
            background: rgba(22, 34, 48, 0.75);
            border: 1px solid rgba(148, 187, 233, 0.25);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.15);
            color: #e2e8f0;
        }

        .ctrl-btn {
            position: relative;
            transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .ctrl-btn:hover {
            transform: translateY(-3px);
        }

        .ctrl-btn:active {
            transform: translateY(0px) scale(0.95);
        }

        .ctrl-btn.active-mode {
            background: linear-gradient(135deg, #fb7185, #f97316);
            color: white !important;
            box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
            border-color: transparent;
        }

        .ctrl-btn.active-toggle {
            background: linear-gradient(135deg, #0ea5e9, #14b8a6);
            color: white !important;
            box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
            border-color: transparent;
        }

        /* 顶部优雅艺术标题 */
        .art-badge {
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
    
html,body{height:100%;height:100dvh}body{font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;color:#29424d}a{color:inherit;text-decoration:none}button{font:inherit}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #ed9252;outline-offset:3px}#artCanvas{position:fixed;inset:0}.fish-header{position:fixed;z-index:2;top:max(16px,env(safe-area-inset-top));left:20px;right:20px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;pointer-events:none}.fish-title{display:flex;gap:18px;align-items:center;padding:13px 18px;border-radius:17px;pointer-events:auto}.fish-back{font-size:11px;white-space:nowrap;display:flex;align-items:center;min-height:40px;color:#537483}.fish-kicker{display:block;font-size:8px;letter-spacing:2px;color:#5e9297}.fish-title h1{font-family:Georgia,"Songti SC",serif;font-size:18px;font-weight:500;margin:7px 0 0;letter-spacing:1px}.fish-count{border-radius:16px;padding:16px;font-size:12px;line-height:1.8}.fish-count strong{font-size:17px;color:#b55e27}.fish-count>span{display:block;font-size:10px;opacity:.6}.fish-controls{position:fixed;z-index:3;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(900px,calc(100% - 32px));border-radius:22px;padding:14px 16px 10px}.fish-controls p{font-size:12px;line-height:1.6;text-align:center;margin:0 0 12px;color:#55747e;min-height:20px}.fish-buttons{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.ctrl-btn{min-height:44px;padding:11px 14px;border:1px solid #fff9;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#ffffff7a;color:#3f5e69;font-size:12px;line-height:1.5;cursor:pointer}.fish-controls>small{display:block;text-align:center;margin-top:10px;font-size:9px;color:#6b9399;line-height:1.5}.night-mode .ctrl-btn{background:#253c50a8;color:#c2d7e6;border-color:#a8c7e92b}.night-mode .fish-back,.night-mode .fish-controls p{color:#b0d4e7}.night-mode .fish-title h1{color:#e1eef7}.night-mode .fish-count strong{color:#ffd3a4}.fish-noscript{position:fixed;inset:30% 15%;z-index:6;border-radius:20px;display:grid;place-items:center;background:#effaf4;padding:25px;text-align:center}
@media(max-width:700px){.fish-header{top:max(10px,env(safe-area-inset-top));left:12px;right:12px;gap:7px}.fish-title{padding:9px 12px;gap:12px;flex:1}.fish-title h1{font-size:15px;line-height:1.5;max-width:220px}.fish-kicker{font-size:7px;letter-spacing:1px}.fish-back{font-size:10px}.fish-count{padding:10px;font-size:9px;border-radius:13px;white-space:nowrap}.fish-count strong{font-size:14px}.fish-count>span{display:none}.fish-controls{width:calc(100% - 20px);bottom:max(10px,env(safe-area-inset-bottom));padding:10px;border-radius:18px}.fish-controls p{font-size:10px;min-height:32px;margin-bottom:8px;line-height:1.6}.fish-buttons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.ctrl-btn{font-size:10px;padding:8px 3px;gap:3px;min-height:40px;border-radius:11px;white-space:normal}.fish-buttons>#btnBubbles{grid-column:span 1}.fish-buttons>#btnPause{grid-column:span 2}.fish-controls>small{font-size:8px;margin-top:7px}.ctrl-btn:hover{transform:none}}
@media(max-width:360px){.fish-title{gap:8px;padding:8px 9px}.fish-title h1{font-size:13px}.fish-back{font-size:9px}.fish-count{padding:8px}.fish-kicker{font-size:6px}.ctrl-btn{font-size:9px}}
@media(prefers-reduced-motion:reduce){.glass-panel,.ctrl-btn{transition:none}.ctrl-btn:hover{transform:none}}