/
Featured
Allen Pan · Spotify
Notes
Appearance
Theme
Dark Mode
Access Required
Enter your access code to continue.
/* ════════════════════════════════ SHELL ════════════════════════════════ */ #layout{display:flex;flex-direction:column;height:100vh;height:100dvh;position:relative;z-index:1;} #site-header{flex-shrink:0;padding:16px 24px 12px;z-index:10;position:relative;} /* Footer: push up above home indicator + browser chrome on mobile */ #site-footer{ flex-shrink:0; padding:10px 24px 12px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); z-index:10;position:relative; } /* Dock: position relative inside layout so it doesn't fight browser chrome */ #dock-container{ flex-shrink:0; display:flex;flex-direction:column;align-items:center; position:relative;z-index:700; padding:6px 0 max(6px, env(safe-area-inset-bottom)); pointer-events:none; } .site-name{font-weight:700;font-size:20px;letter-spacing:-0.01em;line-height:1;margin-bottom:7px;} .site-sub{font-size:12px;margin-bottom:10px;} .site-sub{font-size:12px;font-weight:400;margin-bottom:8px;} .color-bar{display:flex;height:7px;margin-bottom:8px;} .color-bar span{flex:1;} .site-date{font-size:11px;font-style:normal;font-weight:400;margin-bottom:3px;} .byline{font-size:11px;font-weight:400;margin-bottom:13px;} .header-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px;} .view-toggle{display:flex;gap:4px;align-items:center;} .theme-toggle{display:flex;gap:4px;flex-wrap:wrap;align-items:center;} .theme-btn{font-size:10px;font-weight:600;letter-spacing:.03em;border-radius:14px;padding:3px 11px;cursor:pointer;border:1px solid transparent;transition:all .2s;white-space:nowrap;font-family:inherit;} .mode-switch{display:flex;align-items:center;gap:6px;cursor:pointer;margin-left:auto;flex-shrink:0;user-select:none;} .mode-pill{width:36px;height:21px;border-radius:11px;position:relative;transition:background .3s;flex-shrink:0;} .mode-thumb{position:absolute;width:17px;height:17px;border-radius:50%;top:2px;left:2px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .3s var(--ease);display:flex;align-items:center;justify-content:center;font-size:9px;line-height:1;} [data-mode="dark"] .mode-thumb{transform:translateX(15px);} /* ── CONVEYOR BELT ── */ #scroll-pane{flex:1;overflow-y:scroll;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;position:relative;z-index:1;-webkit-overflow-scrolling:touch;} #scroll-pane::-webkit-scrollbar{display:none;} #album-list{padding:0 24px;} .album-row{height:var(--item-h);display:flex;align-items:center;gap:10px;overflow:visible;cursor:pointer;} .album-row-text{display:inline-block;font-size:var(--scroll-fs);font-weight:400;text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:3px;letter-spacing:-0.02em;white-space:nowrap;transform-origin:left center;pointer-events:none;transition:color .3s;will-change:transform,opacity;} .album-row:hover .album-row-text{opacity:0.35!important;} .type-pill{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:10px;flex-shrink:0;pointer-events:none;opacity:0;transition:opacity .5s ease;background:rgba(0,0,0,.08);color:rgba(0,0,0,.45);align-self:center;margin-top:2px;} [data-mode="dark"] .type-pill{background:rgba(255,255,255,.1);color:rgba(255,255,255,.4);} .type-pill.scrolling{opacity:.38;transition:opacity .15s ease;} .album-row:hover .type-pill{opacity:.60;} .lock-pill{background:rgba(255,149,0,.12);color:rgba(180,80,0,.75);} [data-mode="dark"] .lock-pill{background:rgba(255,149,0,.15);color:rgba(255,180,60,.7);} /* top-bounce: brief elastic nudge on the list when wrapping at top */ @keyframes topBounce{ 0%{transform:translateY(0);} 30%{transform:translateY(10px);} 65%{transform:translateY(-4px);} 100%{transform:translateY(0);} } #album-list.top-bounce{animation:topBounce 380ms cubic-bezier(0.34,1.56,0.64,1);} /* ── FOOTER ── */ .footer-row{display:flex;gap:16px;align-items:center;} .footer-link{font-size:12px;font-weight:400;line-height:1;user-select:none;text-decoration:none;transition:opacity .15s;} .footer-link:hover{opacity:.6;} .footer-copy{font-size:11px;font-weight:400;margin-left:auto;} /* ════════════════════════════════ ALBUM / POST PAGES ════════════════════════════════ */ #page-album{display:none;flex-direction:column;height:100vh;} #page-album.show{display:flex;} .album-topbar{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:11px 20px;} .album-topbar-right{margin-left:auto;flex-shrink:0;display:flex;align-items:center;gap:2px;} .topbar-icon-btn{background:none;border:none;cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:inherit;opacity:.55;transition:opacity .15s,background .15s;-webkit-appearance:none;} .topbar-icon-btn:hover{opacity:1;background:rgba(128,128,128,.1);} .topbar-icon-btn:active{opacity:.7;} .back-btn{font-size:13px;font-weight:400;background:none;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:0;font-family:inherit;flex-shrink:0;} .album-topbar-title{font-size:14px;font-weight:600;} .album-topbar-meta{font-size:12px;font-weight:400;} #album-scroll{flex:1;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;} #album-scroll.hl-mode{overflow-y:scroll;} /* ── GALLERY VIEW ── */ .media-grid{display:grid;gap:3px;padding-bottom:120px;grid-template-columns:repeat(3,1fr);} @media(min-width:600px){.media-grid{grid-template-columns:repeat(4,1fr);gap:4px;}} @media(min-width:1024px){.media-grid{grid-template-columns:repeat(5,1fr);gap:4px;}} /* single tile definition */ .media-tile{position:relative;aspect-ratio:1;cursor:pointer;overflow:hidden;background:rgba(128,128,128,.08);} .media-tile img,.media-tile video{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .2s;} /* tile skeleton shimmer */ .tile-placeholder{ position:absolute;inset:0; background:linear-gradient(90deg,rgba(128,128,128,.08) 25%,rgba(128,128,128,.18) 50%,rgba(128,128,128,.08) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; } @keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}} .tile-type-badge{ position:absolute;bottom:6px;right:6px; background:rgba(0,0,0,.45);color:#fff; font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px; letter-spacing:.04em;text-transform:uppercase;pointer-events:none; } /* captions */ .tile-cap{ position:absolute;bottom:0;left:0;right:0; padding:28px 10px 9px; background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.2) 55%,transparent 100%); color:#fff;font-size:12px;line-height:1.45;font-weight:400;letter-spacing:.01em; opacity:0;transition:opacity .22s ease;z-index:3; } .media-tile:hover .tile-cap{opacity:1;} .media-tile.cap-show .tile-cap{opacity:1;} .video-badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.55);color:#fff;font-size:9px;letter-spacing:.06em;text-transform:uppercase;padding:2px 6px;border-radius:4px;pointer-events:none;} .gallery-header{padding:20px 20px 12px;} .gallery-description{font-size:14px;line-height:1.6;opacity:.6;max-width:560px;} /* ── BLOG VIEW ── */ .blog-container{max-width:680px;margin:0 auto;padding:40px 24px 120px;color:inherit;} .blog-cover{width:100%;margin-bottom:36px;border-radius:12px;overflow:hidden;} .blog-cover img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover;} .blog-title{font-size:clamp(26px,5vw,44px);font-weight:700;letter-spacing:-.025em;line-height:1.08;margin-bottom:18px;color:inherit;} .blog-intro{font-size:17px;line-height:1.75;opacity:.65;margin-bottom:36px;font-weight:400;color:inherit;} .blog-divider{width:40px;height:2px;border-radius:1px;margin:40px 0;opacity:.18;} .blog-text-block{font-size:16px;line-height:1.78;margin-bottom:32px;opacity:.88;color:inherit;white-space:pre-wrap;} .blog-subheader-block{font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:40px 0 16px;color:inherit;} .blog-quote-block{margin:36px 0;padding:4px 0 4px 20px;border-left:3px solid currentColor;font-size:20px;font-style:italic;line-height:1.55;opacity:.75;color:inherit;} .blog-media-block{margin-bottom:40px;} .blog-media-block img,.blog-media-block video{width:100%;border-radius:10px;display:block;} .blog-media-block video{background:transparent;} .blog-img-caption{font-size:13px;opacity:.5;margin-top:10px;text-align:center;line-height:1.5;color:inherit;} .blog-embed-block{margin:0 auto 40px;border-radius:10px;overflow:visible;display:flex;flex-direction:column;align-items:center;width:100%;} .blog-embed-block.embed-small{max-width:min(320px,100%)!important;} .blog-embed-block.embed-medium{max-width:100%!important;width:100%!important;} .blog-embed-block.embed-large{max-width:100%!important;width:100%!important;} .blog-embed-block iframe{width:100%;border:none;border-radius:8px;display:block;} .blog-embed-block .instagram-media{margin:0 auto!important;min-width:0!important;width:100%!important;box-sizing:border-box!important;} /* don't force 16/9 on all embeds — audio/spotify have fixed heights */ .blog-embed-block iframe{width:100%;border:none;display:block;} .blog-embed-block.video-embed{display:block;}.blog-embed-block.video-embed iframe{aspect-ratio:16/9;} /* ════════════════════════════════ HIGHLIGHTS — parallax canvas ════════════════════════════════ */ .hl-scroll-space{position:relative;} .hl-stage{position:sticky;top:0;height:100%;overflow:hidden;touch-action:pan-x;} #album-scroll.hl-mode{overflow-y:scroll;scrollbar-width:none;} #album-scroll.hl-mode::-webkit-scrollbar{display:none;} @media(max-width:767px){ #album-scroll.hl-mode{overflow:hidden;} .hl-scroll-space{height:100% !important;} } /* edge fades — subtle hint */ .hl-stage::before,.hl-stage::after{content:'';position:absolute;top:0;bottom:0;z-index:20;pointer-events:none;} .hl-stage::before{left:0;width:clamp(24px,5vw,72px);} .hl-stage::after{right:0;width:clamp(24px,5vw,72px);} .hl-stage::before{background:linear-gradient(to right,var(--hl-fade,#000) 0%,transparent 100%);} .hl-stage::after{background:linear-gradient(to left,var(--hl-fade,#000) 0%,transparent 100%);} .hl-world{position:absolute;height:100%;left:0;top:0;will-change:transform;} /* card — no overflow hidden so caption is visible below */ .hl-card-wrap{position:absolute;cursor:pointer;} .hl-card{ overflow:hidden; box-shadow:0 6px 28px rgba(0,0,0,.28),0 1px 6px rgba(0,0,0,.18); transition:box-shadow .3s; border-radius:3px; /* sharp bezels */ } .hl-card:hover{box-shadow:0 12px 48px rgba(0,0,0,.4),0 3px 12px rgba(0,0,0,.25);} /* media fills card width, height auto = natural proportions */ .hl-card img,.hl-card video{ display:block; width:100%; height:auto; pointer-events:none; } /* caption below card — theme-aware container */ .hl-caption{ margin-top:7px; padding:4px 6px; border-radius:3px; font-size:10px; letter-spacing:.04em; line-height:1.4; width:100%; text-align:center; display:block; box-sizing:border-box; } [data-mode="light"] .hl-caption{background:rgba(0,0,0,.06);color:rgba(0,0,0,.6);} [data-mode="dark"] .hl-caption{background:rgba(255,255,255,.08);color:rgba(255,255,255,.55);} .hl-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.3;z-index:25;pointer-events:none;animation:hlhint 2.5s ease-out forwards;} @keyframes hlhint{0%,60%{opacity:.3;}100%{opacity:0;}} /* theme fade colors */ [data-theme="classic"][data-mode="light"] .hl-stage{--hl-fade:#c0c0c0;} [data-theme="classic"][data-mode="dark"] .hl-stage{--hl-fade:#1c1c1c;} [data-theme="ios1"][data-mode="light"] .hl-stage{--hl-fade:#efeff4;} [data-theme="ios1"][data-mode="dark"] .hl-stage{--hl-fade:#0a0e1a;} [data-theme="minimal"][data-mode="light"] .hl-stage{--hl-fade:#f2f2f7;} [data-theme="minimal"][data-mode="dark"] .hl-stage{--hl-fade:#000;} [data-theme="liquid"][data-mode="light"] .hl-stage{--hl-fade:#f0f0f8;} [data-theme="liquid"][data-mode="dark"] .hl-stage{--hl-fade:#08080f;} /* skeleton */ .skeleton{background:linear-gradient(90deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.06) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;aspect-ratio:1;} @keyframes lbspin{to{transform:rotate(360deg);}} /* ════════════════════════════════ LIGHTBOX — custom fullscreen viewer ════════════════════════════════ */ .lb{ display:none; position:fixed;inset:0; background:#0a0a0a; z-index:800; flex-direction:column; } .lb.open{display:flex;} /* media area */ .lb-media{ flex:1; display:flex;align-items:center;justify-content:center; position:relative;overflow:hidden; } .lb-media img{ max-width:100%;max-height:100%; object-fit:contain;display:block; user-select:none;-webkit-user-select:none; transition:opacity .18s ease; } .lb-media video{max-width:100%;max-height:100%;display:block;} /* desktop — don't fill the whole screen */ @media(min-width:768px){ .lb-media img{max-width:72vw;max-height:78vh;} .lb-media video{max-width:72vw;max-height:78vh;} } /* invisible tap zones — left/right 33% */ .lb-zone{ position:absolute;top:0;bottom:0;width:33%; cursor:pointer;z-index:4; } .lb-zone-prev{left:0;} .lb-zone-next{right:0;} /* top chrome */ .lb-top{ position:absolute;top:0;left:0;right:0; display:flex;align-items:center;justify-content:space-between; padding:18px 20px;z-index:10; /* subtle gradient so buttons are readable over bright images */ background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 100%); } .lb-counter{ font-size:11px;font-weight:400;letter-spacing:.08em; color:rgba(255,255,255,.32); font-variant-numeric:tabular-nums; text-transform:lowercase; } .lb-close{ background:none;border:none; color:rgba(255,255,255,.32); font-size:11px;font-weight:400;letter-spacing:.08em; cursor:pointer;font-family:inherit; padding:4px 0; transition:color .15s; text-transform:lowercase; } .lb-close:hover{color:rgba(255,255,255,.75);} /* bottom chrome */ .lb-bottom{ position:absolute;bottom:0;left:0;right:0; display:flex;align-items:flex-end;justify-content:space-between; padding:18px 20px calc(18px + env(safe-area-inset-bottom)); z-index:10; background:linear-gradient(0deg,rgba(0,0,0,.35) 0%,transparent 100%); } .lb-cap{ font-size:12px;font-weight:400;letter-spacing:.01em; color:rgba(255,255,255,.45); flex:1; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; padding-right:16px;font-style:italic; } .lb-dl{ background:none;border:none; color:rgba(255,255,255,.32); font-size:11px;font-weight:400;letter-spacing:.08em; cursor:pointer;font-family:inherit; padding:4px 0;flex-shrink:0; transition:color .15s; text-transform:lowercase; } .lb-dl:hover{color:rgba(255,255,255,.75);} /* desktop arrow buttons — invisible until hover */ .lb-arrow{ position:absolute;top:50%;transform:translateY(-50%); background:none;border:none; color:transparent; font-size:22px;cursor:pointer; padding:24px 18px;z-index:5; transition:color .2s; line-height:1; } .lb-arrow-prev{left:0;} .lb-arrow-next{right:0;} .lb:hover .lb-arrow{color:rgba(255,255,255,.16);} .lb-arrow:hover{color:rgba(255,255,255,.72)!important;} @media(max-width:767px){.lb-arrow{display:none;}} /* ─── DOCK SHELF THEMES ─── */ [data-theme="classic"][data-mode="light"] .dock-pill{background:#666;} [data-theme="classic"][data-mode="dark"] .dock-pill{background:#555;} [data-theme="classic"][data-mode="light"] #dock-shelf{background:linear-gradient(180deg,#ddd,#bbb);border:1.5px solid #888;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 8px 24px rgba(0,0,0,.3);border-radius:8px;} [data-theme="classic"][data-mode="dark"] #dock-shelf{background:linear-gradient(180deg,#2c2c2c,#1a1a1a);border:1.5px solid #080808;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 8px 24px rgba(0,0,0,.55);border-radius:8px;} [data-theme="ios1"][data-mode="light"] .dock-pill{background:rgba(255,255,255,.7);} [data-theme="ios1"][data-mode="dark"] .dock-pill{background:rgba(100,150,200,.5);} [data-theme="ios1"][data-mode="light"] #dock-shelf{background:linear-gradient(180deg,rgba(190,210,235,.88),rgba(140,170,210,.94));border:1px solid rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 12px 36px rgba(0,0,0,.22);border-radius:22px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);} [data-theme="ios1"][data-mode="dark"] #dock-shelf{background:linear-gradient(180deg,rgba(20,38,60,.9),rgba(8,18,30,.96));border:1px solid rgba(100,150,200,.18);box-shadow:0 1px 0 rgba(100,150,200,.1) inset,0 12px 36px rgba(0,0,0,.45);border-radius:22px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);} [data-theme="minimal"][data-mode="light"] .dock-pill{background:#9e9ea2;} [data-theme="minimal"][data-mode="dark"] .dock-pill{background:#3a3a3c;} [data-theme="minimal"][data-mode="light"] #dock-shelf{background:rgba(218,218,222,.92);border:.5px solid rgba(0,0,0,.18);box-shadow:0 4px 32px rgba(0,0,0,.22);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-radius:22px;} [data-theme="minimal"][data-mode="dark"] #dock-shelf{background:rgba(30,30,32,.75);border:.5px solid rgba(255,255,255,.07);box-shadow:0 4px 32px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-radius:22px;} [data-theme="liquid"][data-mode="light"] .dock-pill{background:rgba(0,0,0,.18);} [data-theme="liquid"][data-mode="dark"] .dock-pill{background:rgba(255,255,255,.28);} [data-theme="liquid"][data-mode="light"] #dock-shelf{background:rgba(255,255,255,.32);border:.5px solid rgba(255,255,255,.78);box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 12px 48px rgba(0,0,0,.10);-webkit-backdrop-filter:blur(48px) saturate(220%) brightness(110%);backdrop-filter:blur(48px) saturate(220%) brightness(110%);} [data-theme="liquid"][data-mode="dark"] #dock-shelf{background:rgba(255,255,255,.09);border:.5px solid rgba(255,255,255,.2);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 12px 48px rgba(0,0,0,.28);-webkit-backdrop-filter:blur(48px) saturate(200%);backdrop-filter:blur(48px) saturate(200%);} /* ════════════════════════════════ APPLE DOCK — sits above footer, auto-sized ════════════════════════════════ */ .dock-pill{width:36px;height:4px;border-radius:2px;pointer-events:all;cursor:pointer;opacity:.3;transition:opacity .2s,width .2s;flex-shrink:0;} .dock-pill:hover{opacity:.55;width:52px;} #dock-shelf{ position:absolute;bottom:calc(100% + 2px); pointer-events:all; display:flex;align-items:center;justify-content:center; gap:14px;padding:11px 18px 13px;border-radius:24px; /* auto-width: sizes to however many icons are inside */ width:max-content; transform:translateY(10px);opacity:0;visibility:hidden; transition:transform .38s cubic-bezier(0.34,1.18,0.64,1),opacity .22s ease,visibility 0s .22s; } #dock-shelf.open{ transform:translateY(0);opacity:1;visibility:visible; transition:transform .38s cubic-bezier(0.34,1.18,0.64,1),opacity .22s ease,visibility 0s; } .dock-app{display:flex;flex-direction:column;align-items:center;cursor:pointer;} /* no bounce — subtle scale only, stays within dock */ .dock-app:hover .dock-icon-face{transform:scale(1.08);} .dock-icon-face{ width:52px;height:52px;border-radius:14px; position:relative;overflow:hidden; transition:transform .18s cubic-bezier(0.34,1.56,.64,1),box-shadow .18s; flex-shrink:0; } /* no labels */ /* ─── ICON DEFINITIONS — Black & White ─── */ .icon-music{background:linear-gradient(175deg,#2a2a2a,#111);box-shadow:0 2px 8px rgba(0,0,0,.4);} .icon-music::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M68 20v41.5c0 4.2-3.4 7.5-7.5 7.5S53 65.7 53 61.5s3.4-7.5 7.5-7.5c1.3 0 2.5.3 3.5.9V32L37 39v33c0 4.2-3.4 7.5-7.5 7.5S22 76.2 22 72s3.4-7.5 7.5-7.5c1.3 0 2.5.3 3.5.9V28l35-8z' fill='white' opacity='.95'/%3E%3C/svg%3E") center/68% no-repeat;} .icon-mail{background:linear-gradient(175deg,#2a2a2a,#111);box-shadow:0 2px 8px rgba(0,0,0,.4);} .icon-mail::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='10' y='25' width='80' height='55' rx='9' fill='white' opacity='.18'/%3E%3Crect x='10' y='25' width='80' height='55' rx='9' fill='none' stroke='white' stroke-width='5' opacity='.9'/%3E%3Cpath d='M10 35l40 30 40-30' fill='none' stroke='white' stroke-width='5' stroke-linecap='round' stroke-linejoin='round' opacity='.9'/%3E%3C/svg%3E") center/72% no-repeat;} .icon-notes{background:linear-gradient(175deg,#2a2a2a,#111);box-shadow:0 2px 8px rgba(0,0,0,.4);} .icon-notes::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='20' y='16' width='60' height='68' rx='7' fill='white' opacity='.88'/%3E%3Cline x1='32' y1='36' x2='68' y2='36' stroke='rgba(0,0,0,.5)' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='32' y1='50' x2='68' y2='50' stroke='rgba(0,0,0,.5)' stroke-width='4.5' stroke-linecap='round'/%3E%3Cline x1='32' y1='64' x2='54' y2='64' stroke='rgba(0,0,0,.5)' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center/72% no-repeat;} /* Media icon — dark with play symbol */ .icon-media{background:linear-gradient(175deg,#2a2a2a,#111);box-shadow:0 2px 8px rgba(0,0,0,.4);} .icon-media::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='12' y='22' width='76' height='56' rx='10' fill='none' stroke='white' stroke-width='5' opacity='.6'/%3E%3Cpolygon points='40,34 40,66 68,50' fill='white' opacity='.88'/%3E%3C/svg%3E") center/72% no-repeat;} /* Settings icon — silver/grey gear */ .icon-settings{background:linear-gradient(175deg,#2a2a2a,#111);box-shadow:0 2px 8px rgba(0,0,0,.4);} .icon-settings::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 62a12 12 0 1 1 0-24 12 12 0 0 1 0 24zm28.5-8.8l5.3-3.1a2 2 0 0 0 .7-2.7l-6-10.4a2 2 0 0 0-2.7-.7l-5.6 3.2a22 22 0 0 0-5.2-3l-.8-6.4A2 2 0 0 0 62.2 29H50.2a2 2 0 0 0-2 1.7l-.8 6.4a22 22 0 0 0-5.2 3l-5.6-3.2a2 2 0 0 0-2.7.7l-6 10.4a2 2 0 0 0 .7 2.7l5.3 3.1a22 22 0 0 0 0 6l-5.3 3.1a2 2 0 0 0-.7 2.7l6 10.4a2 2 0 0 0 2.7.7l5.6-3.2a22 22 0 0 0 5.2 3l.8 6.4a2 2 0 0 0 2 1.7h12a2 2 0 0 0 2-1.7l.8-6.4a22 22 0 0 0 5.2-3l5.6 3.2a2 2 0 0 0 2.7-.7l6-10.4a2 2 0 0 0-.7-2.7l-5.3-3.1a22 22 0 0 0 0-6z' fill='white' opacity='.92'/%3E%3C/svg%3E") center/72% no-repeat;} /* ── SETTINGS MINI PLAYER ── */ #settings-player{ position:fixed;bottom:130px;left:50%;transform:translateX(-50%); width:min(240px,80vw);border-radius:16px;overflow:hidden; z-index:750;display:none;cursor:default;user-select:none; } #settings-player.open{display:block;animation:playerPop .28s cubic-bezier(0.34,1.2,0.64,1);} #settings-player.dragging{transform:none!important;animation:none!important;} .settings-player-body{padding:14px 14px 16px;display:flex;flex-direction:column;gap:10px;} .settings-player-label{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.38;margin-bottom:2px;} .settings-theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;} .settings-theme-btn{font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:11px;font-weight:500;padding:7px 6px;border-radius:8px;border:1px solid rgba(128,128,128,.2);background:rgba(128,128,128,.1);cursor:pointer;text-align:center;transition:all .15s;color:inherit;-webkit-appearance:none;} .settings-theme-btn.active{background:rgba(0,122,255,.15);border-color:rgba(0,122,255,.4);color:#007AFF;font-weight:600;} .settings-mode-row{display:flex;align-items:center;justify-content:space-between;} .settings-mode-label{font-size:13px;font-weight:500;} /* theme preview dots next to each button */ .settings-theme-btn::before{display:block;font-size:16px;margin-bottom:2px;} /* ─── CLASSIC icon overrides ─── */ [data-theme="classic"] .dock-icon-face{border-radius:5px;} /* Dock icons: unified black & white across all themes */ [data-mode="light"] .dock-icon-face[class*="icon-"]{background:linear-gradient(175deg,#e8e8e8,#d0d0d0)!important;box-shadow:0 2px 6px rgba(0,0,0,.15)!important;} [data-mode="dark"] .dock-icon-face[class*="icon-"]{background:linear-gradient(175deg,#2a2a2a,#111)!important;box-shadow:0 2px 6px rgba(0,0,0,.4)!important;} [data-theme="liquid"] .dock-icon-face{border-radius:16px;} [data-theme="liquid"][data-mode="light"] .icon-music{background:rgba(220,50,100,.52);border:.5px solid rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 4px 16px rgba(200,30,80,.2);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);} [data-theme="liquid"][data-mode="dark"] .icon-music{background:rgba(200,40,90,.42);border:.5px solid rgba(255,255,255,.22);box-shadow:0 1px 0 rgba(255,255,255,.22) inset;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);} [data-theme="liquid"][data-mode="light"] .icon-mail{background:rgba(30,130,255,.52);border:.5px solid rgba(255,255,255,.7);box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 4px 16px rgba(0,100,255,.2);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);} [data-theme="liquid"][data-mode="dark"] .icon-mail{background:rgba(10,110,255,.42);border:.5px solid rgba(255,255,255,.22);box-shadow:0 1px 0 rgba(255,255,255,.22) inset;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);} /* ════════════════════════════════ MAC MINI PLAYER — music ════════════════════════════════ */ #music-player{position:fixed;bottom:130px;left:50%;transform:translateX(-50%);width:min(300px,86vw);border-radius:16px;overflow:hidden;z-index:750;display:none;cursor:default;user-select:none;} #music-player.open{display:block;} @keyframes playerPop{from{transform:translateX(-50%) scale(.9) translateY(8px);opacity:0;}to{transform:translateX(-50%) scale(1) translateY(0);opacity:1;}} @keyframes playerMinimize{from{transform:translateX(-50%) scale(1);opacity:1;}to{transform:translateX(-50%) scale(0.1) translateY(80px);opacity:0;}} #music-player.open{animation:playerPop .28s cubic-bezier(0.34,1.2,0.64,1);} #music-player.minimizing{animation:playerMinimize .32s cubic-bezier(0.4,0,1,1) forwards!important;} #music-player.dragging{transform:none!important;animation:none!important;} /* ── NOTES PLAYER ── */ #notes-player{ position:fixed;bottom:130px;left:50%;transform:translateX(-50%); width:min(280px,82vw);border-radius:16px;overflow:hidden; z-index:750;display:none;cursor:default;user-select:none; } #notes-player.open{display:block;} #notes-player.open{animation:playerPop .28s cubic-bezier(0.34,1.2,0.64,1);} #notes-player.dragging{transform:none!important;animation:none!important;} .notes-body{padding:16px 18px 20px;min-height:80px;max-height:260px;overflow-y:auto;} .notes-text{font-size:15px;line-height:1.65;white-space:pre-wrap;word-break:break-word;} .notes-empty{font-size:13px;opacity:.35;font-style:italic;} /* compact toggle for settings player */ .ios-toggle-sm{width:40px;height:24px;border-radius:12px;background:#c7c7cc;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0;border:none;-webkit-appearance:none;padding:0;} .ios-toggle-sm.on{background:#34C759;} .ios-toggle-sm-knob{position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:2px;left:2px;box-shadow:0 1px 4px rgba(0,0,0,.22);transition:transform .2s cubic-bezier(.34,1.56,.64,1);pointer-events:none;} .ios-toggle-sm.on .ios-toggle-sm-knob{transform:translateX(16px);} .notes-text{font-size:15px;line-height:1.65;white-space:pre-wrap;word-break:break-word;} .notes-empty{font-size:13px;opacity:.35;font-style:italic;} /* ── MEDIA OVERLAY (pinned featured media) ── */ #media-overlay{display:none;} /* replaced by media-player mini window */ /* Media mini player */ #media-player{ position:fixed;bottom:130px;left:50%; transform:translateX(-50%); width:min(260px,80vw);border-radius:16px;overflow:hidden; z-index:750;display:none;cursor:default;user-select:none; } #media-player.open{display:block;animation:playerPop .28s cubic-bezier(0.34,1.2,0.64,1);} #media-player.dragging{transform:none!important;animation:none!important;} /* player window chrome shared */ .player-bar{display:flex;align-items:center;padding:10px 12px 8px;cursor:grab;flex-shrink:0;} .player-bar:active{cursor:grabbing;} .traffic-lights{display:flex;gap:7px;align-items:center;flex-shrink:0;} .tl{width:12px;height:12px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;position:relative;transition:filter .1s;-webkit-appearance:none;} .tl:hover{filter:brightness(.78);} .tl.red{background:#FF5F57;}.tl.yellow{background:#FFBD2E;}.tl.green{background:#28C840;} .traffic-lights:hover .tl::after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:900;color:rgba(0,0,0,.45);} .traffic-lights:hover .tl.red::after{content:'✕';} .traffic-lights:hover .tl.yellow::after{content:'—';} .traffic-lights:hover .tl.green::after{content:'⤢';} .player-title-text{flex:1;text-align:center;font-size:11px;font-weight:600;opacity:.5;padding-right:36px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .player-body{height:152px;display:block;overflow:hidden;} .player-body iframe{width:100%;height:152px;border:none;display:block;margin:0;padding:0;} /* ─── Player themes ─── */ [data-theme="classic"][data-mode="light"] #music-player,[data-theme="classic"][data-mode="light"] #notes-player,[data-theme="classic"][data-mode="light"] #settings-player,#media-player{box-shadow:0 0 0 1.5px #888,0 12px 32px rgba(0,0,0,.28);background:#d4d4d4;} [data-theme="classic"][data-mode="dark"] #music-player,[data-theme="classic"][data-mode="dark"] #notes-player,[data-theme="classic"][data-mode="dark"] #settings-player,#media-player{box-shadow:0 0 0 1.5px #1a1a1a,0 12px 32px rgba(0,0,0,.55);background:#242424;} [data-theme="classic"][data-mode="light"] .player-bar{background:linear-gradient(180deg,#e8e8e8 0%,#d2d2d2 100%);border-bottom:1px solid #aaa;} [data-theme="classic"][data-mode="dark"] .player-bar{background:linear-gradient(180deg,#2c2c2c 0%,#1e1e1e 100%);border-bottom:1px solid #0a0a0a;} [data-theme="classic"][data-mode="light"] .player-title-text,[data-theme="classic"][data-mode="light"] .notes-text,[data-theme="classic"][data-mode="light"] .settings-player-body{color:#000;} [data-theme="classic"][data-mode="dark"] .player-title-text,[data-theme="classic"][data-mode="dark"] .notes-text,[data-theme="classic"][data-mode="dark"] .settings-player-body{color:#ccc;} [data-theme="ios1"][data-mode="light"] #music-player,[data-theme="ios1"][data-mode="light"] #notes-player,[data-theme="ios1"][data-mode="light"] #settings-player,#media-player{box-shadow:0 12px 36px rgba(0,0,0,.22);background:#efeff4;} [data-theme="ios1"][data-mode="dark"] #music-player,[data-theme="ios1"][data-mode="dark"] #notes-player,[data-theme="ios1"][data-mode="dark"] #settings-player,#media-player{box-shadow:0 12px 36px rgba(0,0,0,.5);background:#0d1520;} [data-theme="ios1"][data-mode="light"] .player-bar{background:linear-gradient(180deg,#7caac8 0%,#4a6d98 100%);border-bottom:1px solid #2a4d78;} [data-theme="ios1"][data-mode="dark"] .player-bar{background:linear-gradient(180deg,#1a2838 0%,#0e1828 100%);border-bottom:1px solid #020a12;} [data-theme="ios1"] .player-title-text,[data-theme="ios1"] .notes-text,[data-theme="ios1"] .settings-player-body{color:#fff;} [data-theme="minimal"][data-mode="light"] #music-player,[data-theme="minimal"][data-mode="light"] #notes-player,[data-theme="minimal"][data-mode="light"] #settings-player,#media-player{box-shadow:0 12px 40px rgba(0,0,0,.12);background:#fff;} [data-theme="minimal"][data-mode="dark"] #music-player,[data-theme="minimal"][data-mode="dark"] #notes-player,[data-theme="minimal"][data-mode="dark"] #settings-player,#media-player{box-shadow:0 12px 40px rgba(0,0,0,.45);background:#1c1c1e;} [data-theme="minimal"][data-mode="light"] .player-bar{background:#f2f2f7;border-bottom:.5px solid #c6c6c8;} [data-theme="minimal"][data-mode="dark"] .player-bar{background:#2c2c2e;border-bottom:.5px solid #3a3a3c;} [data-theme="minimal"][data-mode="light"] .player-title-text,[data-theme="minimal"][data-mode="light"] .notes-text,[data-theme="minimal"][data-mode="light"] .settings-player-body{color:#000;} [data-theme="minimal"][data-mode="dark"] .player-title-text,[data-theme="minimal"][data-mode="dark"] .notes-text,[data-theme="minimal"][data-mode="dark"] .settings-player-body{color:#fff;} [data-theme="liquid"][data-mode="light"] #music-player,[data-theme="liquid"][data-mode="light"] #notes-player,[data-theme="liquid"][data-mode="light"] #settings-player,#media-player{box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 16px 56px rgba(0,0,0,.12);background:#f8f8fc;} [data-theme="liquid"][data-mode="dark"] #music-player,[data-theme="liquid"][data-mode="dark"] #notes-player,[data-theme="liquid"][data-mode="dark"] #settings-player,#media-player{box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 16px 56px rgba(0,0,0,.38);background:#18181e;} [data-theme="liquid"][data-mode="light"] .player-bar{background:rgba(245,245,250,.98);border-bottom:.5px solid rgba(0,0,0,.08);} [data-theme="liquid"][data-mode="dark"] .player-bar{background:rgba(28,28,36,.98);border-bottom:.5px solid rgba(255,255,255,.1);} [data-theme="liquid"][data-mode="light"] .player-title-text,[data-theme="liquid"][data-mode="light"] .notes-text,[data-theme="liquid"][data-mode="light"] .settings-player-body{color:#000;} [data-theme="liquid"][data-mode="dark"] .player-title-text,[data-theme="liquid"][data-mode="dark"] .notes-text,[data-theme="liquid"][data-mode="dark"] .settings-player-body{color:#fff;} /* notes body bg */ [data-theme="minimal"][data-mode="light"] .notes-body{background:#fff;} [data-theme="minimal"][data-mode="dark"] .notes-body{background:#1c1c1e;} [data-theme="liquid"][data-mode="light"] .notes-body{background:#f8f8fc;} [data-theme="liquid"][data-mode="dark"] .notes-body{background:#18181e;} /* ════════════════════════════════ THEMES — CLASSIC MAC ════════════════════════════════ */ [data-theme="classic"][data-mode="light"]{background-color:#c0c0c0;background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.16) 0,rgba(255,255,255,.16) 1px,transparent 1px,transparent 4px);color:#000;} [data-theme="classic"][data-mode="dark"]{background-color:#1c1c1c;background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 4px);color:#d8d8d8;} [data-theme="classic"][data-mode="light"] #site-header{background:linear-gradient(180deg,#e8e8e8 0%,#d0d0d0 48%,#c4c4c4 50%,#b8b8b8 100%);border-bottom:2px solid #7a7a7a;box-shadow:0 1px 0 rgba(255,255,255,.65) inset,0 2px 6px rgba(0,0,0,.22);} [data-theme="classic"][data-mode="dark"] #site-header{background:linear-gradient(180deg,#2e2e2e 0%,#1c1c1c 48%,#141414 50%,#0e0e0e 100%);border-bottom:2px solid #0a0a0a;box-shadow:0 1px 0 rgba(255,255,255,.06) inset;} [data-theme="classic"][data-mode="light"] #site-footer{background:linear-gradient(180deg,#c8c8c8 0%,#b8b8b8 100%);border-top:2px solid #7a7a7a;} [data-theme="classic"][data-mode="dark"] #site-footer{background:linear-gradient(180deg,#1c1c1c 0%,#141414 100%);border-top:2px solid #0a0a0a;} [data-theme="classic"] #scroll-pane{background:transparent;} [data-theme="classic"][data-mode="light"] .site-name{color:#000;text-shadow:0 1px 0 rgba(255,255,255,.55);}[data-theme="classic"][data-mode="dark"] .site-name{color:#e8e8e8;} [data-theme="classic"][data-mode="light"] .site-sub{color:#333;}[data-theme="classic"][data-mode="dark"] .site-sub{color:#909090;} [data-theme="classic"][data-mode="light"] .site-date{color:#555;font-weight:700;}[data-theme="classic"][data-mode="dark"] .site-date{color:#707070;} [data-theme="classic"][data-mode="light"] .byline{color:#555;}[data-theme="classic"][data-mode="dark"] .byline{color:#707070;} [data-theme="classic"] .color-bar{height:9px;gap:0;} [data-theme="classic"] .c1{background:#78B833;}[data-theme="classic"] .c2{background:#F9D52D;}[data-theme="classic"] .c3{background:#F78C1A;}[data-theme="classic"] .c4{background:#DB3226;}[data-theme="classic"] .c5{background:#9B3B97;display:block;} [data-theme="classic"][data-mode="light"] .album-row-text{color:#000;font-weight:700;}[data-theme="classic"][data-mode="dark"] .album-row-text{color:#d0d0d0;text-decoration:none;} [data-theme="classic"][data-mode="light"] .footer-link{color:#444;}[data-theme="classic"][data-mode="dark"] .footer-link{color:#707070;}[data-theme="classic"] .footer-copy{color:#888;} [data-theme="classic"][data-mode="light"] .theme-btn{background:linear-gradient(180deg,#e8e8e8 0%,#c8c8c8 100%);color:#000;border:1px solid #808080;border-radius:3px;box-shadow:0 1px 0 rgba(255,255,255,.65) inset;} [data-theme="classic"][data-mode="light"] .theme-btn.active{background:linear-gradient(180deg,#9ab8d4 0%,#6a8eb0 100%);color:#fff;border-color:#3a6090;} [data-theme="classic"][data-mode="dark"] .theme-btn{background:linear-gradient(180deg,#2a2a2a 0%,#1a1a1a 100%);color:#c0c0c0;border:1px solid #404040;border-radius:3px;} [data-theme="classic"][data-mode="dark"] .theme-btn.active{background:linear-gradient(180deg,#9ab8d4 0%,#6a8eb0 100%);color:#fff;border-color:#3a6090;} [data-theme="classic"][data-mode="light"] .mode-pill{background:#999;border-radius:2px;}[data-theme="classic"][data-mode="dark"] .mode-pill{background:#505050;border-radius:2px;} [data-theme="classic"][data-mode="light"] .back-btn{color:#00238a;}[data-theme="classic"][data-mode="dark"] .back-btn{color:#9ab8d4;} [data-theme="classic"][data-mode="light"] .album-topbar{background:linear-gradient(180deg,#d8d8d8 0%,#c0c0c0 100%);border-bottom:2px solid #7a7a7a;}[data-theme="classic"][data-mode="dark"] .album-topbar{background:linear-gradient(180deg,#2a2a2a 0%,#1a1a1a 100%);border-bottom:2px solid #0a0a0a;} [data-theme="classic"][data-mode="light"] .album-topbar-title{color:#000;}[data-theme="classic"][data-mode="dark"] .album-topbar-title{color:#e8e8e8;} [data-theme="classic"][data-mode="light"] .album-topbar-meta{color:#555;}[data-theme="classic"][data-mode="dark"] .album-topbar-meta{color:#909090;} [data-theme="classic"][data-mode="light"] #album-scroll{background:#c0c0c0;}[data-theme="classic"][data-mode="dark"] #album-scroll{background:#1c1c1c;} [data-theme="classic"][data-mode="light"] .blog-divider{background:#000;}[data-theme="classic"][data-mode="dark"] .blog-divider{background:#d0d0d0;} /* ── iOS 1 ── */ [data-theme="ios1"][data-mode="light"]{background:#efeff4;color:#000;}[data-theme="ios1"][data-mode="dark"]{background:#0a0e1a;color:#fff;} [data-theme="ios1"][data-mode="light"] #site-header{background:linear-gradient(180deg,#8cabc8 0%,#6a8db8 48%,#5a7da8 50%,#4a6d98 100%);border-bottom:1px solid #2a4d78;box-shadow:0 1px 0 rgba(255,255,255,.26) inset,0 2px 8px rgba(0,0,0,.18);} [data-theme="ios1"][data-mode="dark"] #site-header{background:linear-gradient(180deg,#1a2a3e 0%,#0e1a2e 48%,#081420 50%,#040e18 100%);border-bottom:1px solid #020a12;} [data-theme="ios1"][data-mode="light"] #site-footer{background:linear-gradient(180deg,#7a9ab8 0%,#5a7a98 100%);border-top:1px solid #2a4d78;}[data-theme="ios1"][data-mode="dark"] #site-footer{background:linear-gradient(180deg,#0e1828 0%,#080f1a 100%);border-top:1px solid #020a12;} [data-theme="ios1"] #scroll-pane{background:transparent;} [data-theme="ios1"][data-mode="light"] .site-name{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.35);}[data-theme="ios1"][data-mode="dark"] .site-name{color:#a8c8e8;} [data-theme="ios1"][data-mode="light"] .site-sub{color:rgba(255,255,255,.7);}[data-theme="ios1"][data-mode="dark"] .site-sub{color:rgba(100,150,200,.58);} [data-theme="ios1"][data-mode="light"] .site-date{color:rgba(255,255,255,.62);}[data-theme="ios1"][data-mode="dark"] .site-date{color:rgba(80,130,190,.52);} [data-theme="ios1"][data-mode="light"] .byline{color:rgba(255,255,255,.55);}[data-theme="ios1"][data-mode="dark"] .byline{color:rgba(80,130,190,.48);} [data-theme="ios1"] .color-bar{height:6px;gap:1px;}[data-theme="ios1"] .c1{background:#4CD964;}[data-theme="ios1"] .c2{background:#007AFF;}[data-theme="ios1"] .c3{background:#FF9500;}[data-theme="ios1"] .c4{background:#FF3B30;}[data-theme="ios1"] .c5{display:none;} [data-theme="ios1"][data-mode="light"] .album-row-text{color:#1c1c1e;text-decoration:none;}[data-theme="ios1"][data-mode="dark"] .album-row-text{color:#a8c8e8;text-decoration:none;} [data-theme="ios1"][data-mode="light"] .footer-link{color:rgba(255,255,255,.6);}[data-theme="ios1"][data-mode="dark"] .footer-link{color:rgba(80,130,190,.48);}[data-theme="ios1"] .footer-copy{color:rgba(100,150,200,.3);} [data-theme="ios1"][data-mode="light"] .theme-btn{background:rgba(0,0,0,.1);color:rgba(255,255,255,.88);border-color:rgba(0,0,0,.18);}[data-theme="ios1"][data-mode="light"] .theme-btn.active{background:rgba(0,0,0,.3);color:#fff;} [data-theme="ios1"][data-mode="dark"] .theme-btn{background:rgba(100,150,200,.08);color:rgba(100,160,220,.5);border-color:rgba(100,150,200,.1);}[data-theme="ios1"][data-mode="dark"] .theme-btn.active{background:rgba(100,150,200,.2);color:#a8d8ff;} [data-theme="ios1"][data-mode="light"] .mode-pill{background:rgba(0,0,0,.18);}[data-theme="ios1"][data-mode="dark"] .mode-pill{background:#34C759;} [data-theme="ios1"][data-mode="light"] .back-btn{color:#fff;}[data-theme="ios1"][data-mode="dark"] .back-btn{color:#5AC8FA;} [data-theme="ios1"][data-mode="light"] .album-topbar{background:linear-gradient(180deg,#8cabc8 0%,#4a6d98 100%);border-bottom:1px solid #2a4d78;}[data-theme="ios1"][data-mode="dark"] .album-topbar{background:linear-gradient(180deg,#121e2e 0%,#080f1a 100%);border-bottom:1px solid #020a12;} [data-theme="ios1"][data-mode="light"] .album-topbar-title{color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,.3);}[data-theme="ios1"][data-mode="dark"] .album-topbar-title{color:#a8c8e8;} [data-theme="ios1"][data-mode="light"] .album-topbar-meta{color:rgba(255,255,255,.68);}[data-theme="ios1"][data-mode="dark"] .album-topbar-meta{color:rgba(80,130,190,.55);} [data-theme="ios1"][data-mode="light"] #album-scroll{background:#efeff4;}[data-theme="ios1"][data-mode="dark"] #album-scroll{background:#0a0e1a;} [data-theme="ios1"][data-mode="light"] .blog-divider{background:#1c1c1e;}[data-theme="ios1"][data-mode="dark"] .blog-divider{background:#a8c8e8;} /* ── iOS 14+ ── */ [data-theme="minimal"][data-mode="light"]{background:#f2f2f7;color:#000;}[data-theme="minimal"][data-mode="dark"]{background:#000;color:#fff;} [data-theme="minimal"][data-mode="light"] #site-header{background:#f2f2f7;border-bottom:.5px solid #c6c6c8;}[data-theme="minimal"][data-mode="dark"] #site-header{background:#000;border-bottom:.5px solid #3a3a3c;} [data-theme="minimal"][data-mode="light"] #site-footer{background:#f2f2f7;border-top:.5px solid #c6c6c8;}[data-theme="minimal"][data-mode="dark"] #site-footer{background:#000;border-top:.5px solid #3a3a3c;} [data-theme="minimal"] #scroll-pane{background:transparent;} [data-theme="minimal"][data-mode="light"] .site-name{color:#000;}[data-theme="minimal"][data-mode="dark"] .site-name{color:#fff;} [data-theme="minimal"][data-mode="light"] .site-sub{color:#8e8e93;}[data-theme="minimal"][data-mode="dark"] .site-sub{color:#636366;} [data-theme="minimal"][data-mode="light"] .site-date{color:#8e8e93;}[data-theme="minimal"][data-mode="dark"] .site-date{color:#636366;} [data-theme="minimal"][data-mode="light"] .byline{color:#8e8e93;}[data-theme="minimal"][data-mode="dark"] .byline{color:#636366;} [data-theme="minimal"] .color-bar{display:none;} [data-theme="minimal"][data-mode="light"] .album-row-text{color:#000;text-decoration:none;font-weight:300;}[data-theme="minimal"][data-mode="dark"] .album-row-text{color:#fff;text-decoration:none;font-weight:300;} [data-theme="minimal"][data-mode="light"] .footer-link{color:#aeaeb2;}[data-theme="minimal"][data-mode="dark"] .footer-link{color:#48484a;}[data-theme="minimal"] .footer-copy{color:#636366;} [data-theme="minimal"] .theme-btn{border-radius:10px;font-weight:500;} [data-theme="minimal"][data-mode="light"] .theme-btn{background:#fff;color:#8e8e93;border-color:#e5e5ea;box-shadow:0 1px 3px rgba(0,0,0,.07);}[data-theme="minimal"][data-mode="light"] .theme-btn.active{background:#007AFF;color:#fff;border-color:#007AFF;} [data-theme="minimal"][data-mode="dark"] .theme-btn{background:#1c1c1e;color:#636366;border-color:#3a3a3c;}[data-theme="minimal"][data-mode="dark"] .theme-btn.active{background:#0A84FF;color:#fff;border-color:#0A84FF;} body[data-theme="minimal"][data-mode="light"] .mode-pill{background:#e5e5ea!important;}body[data-theme="minimal"][data-mode="dark"] .mode-pill{background:#34C759!important;} [data-theme="minimal"][data-mode="light"] .back-btn{color:#007AFF;}[data-theme="minimal"][data-mode="dark"] .back-btn{color:#0A84FF;} [data-theme="minimal"][data-mode="light"] .album-topbar{background:#f2f2f7;border-bottom:.5px solid #c6c6c8;}[data-theme="minimal"][data-mode="dark"] .album-topbar{background:#000;border-bottom:.5px solid #3a3a3c;} [data-theme="minimal"][data-mode="light"] .album-topbar-title{color:#000;}[data-theme="minimal"][data-mode="dark"] .album-topbar-title{color:#fff;} [data-theme="minimal"][data-mode="light"] .album-topbar-meta{color:#8e8e93;}[data-theme="minimal"][data-mode="dark"] .album-topbar-meta{color:#636366;} [data-theme="minimal"][data-mode="light"] #album-scroll{background:#f2f2f7;}[data-theme="minimal"][data-mode="dark"] #album-scroll{background:#000;} [data-theme="minimal"][data-mode="light"] .blog-divider{background:#000;}[data-theme="minimal"][data-mode="dark"] .blog-divider{background:#fff;} /* ── LIQUID GLASS ── */ [data-theme="liquid"][data-mode="light"]{background:#f0f0f8;}[data-theme="liquid"][data-mode="dark"]{background:#08080f;} [data-theme="liquid"] #site-header{-webkit-backdrop-filter:blur(44px) saturate(200%) brightness(106%);backdrop-filter:blur(44px) saturate(200%) brightness(106%);} [data-theme="liquid"][data-mode="light"] #site-header{background:rgba(255,255,255,.55);border-bottom:.5px solid rgba(255,255,255,.8);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 16px rgba(0,0,0,.06);} [data-theme="liquid"][data-mode="dark"] #site-header{background:rgba(8,8,20,.62);border-bottom:.5px solid rgba(255,255,255,.12);} [data-theme="liquid"] #scroll-pane{background:transparent;} [data-theme="liquid"] #site-footer{-webkit-backdrop-filter:blur(36px) saturate(190%) brightness(103%);backdrop-filter:blur(36px) saturate(190%) brightness(103%);} [data-theme="liquid"][data-mode="light"] #site-footer{background:rgba(255,255,255,.5);border-top:.5px solid rgba(255,255,255,.7);}[data-theme="liquid"][data-mode="dark"] #site-footer{background:rgba(8,8,20,.6);border-top:.5px solid rgba(255,255,255,.1);} [data-theme="liquid"][data-mode="light"] .site-name{color:#000;letter-spacing:-.02em;}[data-theme="liquid"][data-mode="dark"] .site-name{color:#fff;letter-spacing:-.02em;} [data-theme="liquid"][data-mode="light"] .site-sub{color:rgba(0,0,0,.42);}[data-theme="liquid"][data-mode="dark"] .site-sub{color:rgba(255,255,255,.36);} [data-theme="liquid"][data-mode="light"] .site-date{color:rgba(0,0,0,.38);}[data-theme="liquid"][data-mode="dark"] .site-date{color:rgba(255,255,255,.32);} [data-theme="liquid"][data-mode="light"] .byline{color:rgba(0,0,0,.38);}[data-theme="liquid"][data-mode="dark"] .byline{color:rgba(255,255,255,.32);} [data-theme="liquid"] .color-bar{height:2px;gap:0;border-radius:2px;overflow:hidden;} [data-theme="liquid"] .c1{background:linear-gradient(90deg,#a0b8ff,#d0a0ff);}[data-theme="liquid"] .c2{background:linear-gradient(90deg,#d0a0ff,#ffa0d0);}[data-theme="liquid"] .c3{background:linear-gradient(90deg,#ffa0d0,#a0d0ff);}[data-theme="liquid"] .c4{display:none;}[data-theme="liquid"] .c5{display:none;} [data-theme="liquid"][data-mode="light"] .album-row-text{color:rgba(0,0,0,.88);text-decoration:none;font-weight:200;letter-spacing:-.025em;}[data-theme="liquid"][data-mode="dark"] .album-row-text{color:rgba(255,255,255,.92);text-decoration:none;font-weight:200;letter-spacing:-.025em;} [data-theme="liquid"][data-mode="light"] .footer-link{color:rgba(0,0,0,.3);}[data-theme="liquid"][data-mode="dark"] .footer-link{color:rgba(255,255,255,.26);}[data-theme="liquid"] .footer-copy{color:rgba(128,128,150,.3);} [data-theme="liquid"] .theme-btn{border-radius:10px;font-weight:500;} [data-theme="liquid"][data-mode="light"] .theme-btn{background:rgba(255,255,255,.35);color:rgba(0,0,0,.45);border-color:rgba(255,255,255,.6);}[data-theme="liquid"][data-mode="light"] .theme-btn.active{background:rgba(255,255,255,.7);color:#000;border-color:rgba(255,255,255,.85);} [data-theme="liquid"][data-mode="dark"] .theme-btn{background:rgba(255,255,255,.07);color:rgba(255,255,255,.35);border-color:rgba(255,255,255,.1);}[data-theme="liquid"][data-mode="dark"] .theme-btn.active{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3);} body[data-theme="liquid"][data-mode="light"] .mode-pill{background:rgba(0,0,0,.12);border:.5px solid rgba(255,255,255,.5);}body[data-theme="liquid"][data-mode="dark"] .mode-pill{background:#34C759!important;} [data-theme="liquid"][data-mode="light"] .back-btn{color:rgba(0,0,0,.65);}[data-theme="liquid"][data-mode="dark"] .back-btn{color:rgba(255,255,255,.72);} [data-theme="liquid"][data-mode="light"] .album-topbar{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(40px) saturate(200%);backdrop-filter:blur(40px) saturate(200%);border-bottom:.5px solid rgba(255,255,255,.7);} [data-theme="liquid"][data-mode="dark"] .album-topbar{background:rgba(8,8,20,.62);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);border-bottom:.5px solid rgba(255,255,255,.1);} [data-theme="liquid"][data-mode="light"] .album-topbar-title{color:#000;}[data-theme="liquid"][data-mode="dark"] .album-topbar-title{color:#fff;} [data-theme="liquid"][data-mode="light"] .album-topbar-meta{color:rgba(0,0,0,.35);}[data-theme="liquid"][data-mode="dark"] .album-topbar-meta{color:rgba(255,255,255,.3);} [data-theme="liquid"] #album-scroll{background:transparent;} [data-theme="liquid"][data-mode="light"] .blog-divider{background:#000;}[data-theme="liquid"][data-mode="dark"] .blog-divider{background:#fff;} /* ── VIP LOCK OVERLAY ── */ #vip-overlay{ display:none; position:fixed; top:0;left:0;right:0;bottom:0; width:100%;height:100%; z-index:9999; background-color:#f2f2f7 !important; align-items:center; justify-content:center; padding:20px; box-sizing:border-box; } #vip-overlay.open{display:flex;} [data-mode="dark"] #vip-overlay{background-color:#111 !important;} /* remove per-theme overrides that may conflict */ #vip-card{background:var(--card-bg,#fff);border-radius:20px;padding:36px 28px;width:100%;max-width:340px;box-shadow:0 4px 32px rgba(0,0,0,.12);} [data-mode="dark"] #vip-card{background:#1c1c1e;} .vip-logo{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.35;margin-bottom:18px;} .vip-title{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px;} .vip-sub{font-size:15px;opacity:.45;margin-bottom:22px;} .vip-cancel{display:block;width:100%;margin-top:10px;padding:12px;background:none;border:none;font-family:inherit;font-size:15px;color:inherit;opacity:.4;cursor:pointer;text-align:center;-webkit-appearance:none;} .vip-cancel:hover{opacity:.7;} #vip-card.flash{animation:cardflash .7s ease-out forwards;} @keyframes cardflash{0%{box-shadow:0 0 0 2px rgba(255,59,48,.85),0 4px 24px rgba(255,59,48,.25);}40%{box-shadow:0 0 0 2px rgba(255,59,48,.5),0 4px 24px rgba(255,59,48,.12);}100%{box-shadow:0 4px 32px rgba(0,0,0,.12);}} /* sys-input reuse on frontend */ .sys-input{width:100%;padding:14px 16px;border-radius:12px;border:none;background:rgba(0,0,0,.06);font-family:inherit;font-size:16px;color:inherit;outline:none;margin-bottom:10px;-webkit-appearance:none;transition:box-shadow .2s;} .sys-input:focus{box-shadow:0 0 0 2px #007AFF;} [data-mode="dark"] .sys-input{background:rgba(255,255,255,.1);color:#fff;} .sys-btn{width:100%;padding:15px;border-radius:12px;border:none;background:#007AFF;color:#fff;font-family:inherit;font-size:17px;font-weight:600;cursor:pointer;-webkit-appearance:none;transition:opacity .15s;} .sys-btn:active{opacity:.75;} /* ── BASIC — minimal, no decoration ── */ [data-theme="basic"][data-mode="light"]{background:#fff;color:#000;} [data-theme="basic"][data-mode="dark"]{background:#000;color:#fff;} [data-theme="basic"] #site-header{background:inherit;border-bottom:none;} [data-theme="basic"] #site-footer{background:inherit;border-top:none;} [data-theme="basic"] #scroll-pane{background:transparent;} [data-theme="basic"] .color-bar{display:none;} [data-theme="basic"] .site-name{font-size:var(--scroll-fs);font-weight:700;letter-spacing:-.01em;font-style:normal;} [data-theme="basic"] .site-sub{font-size:13px;opacity:.5;font-style:normal;letter-spacing:0;} [data-theme="basic"] .site-date{font-size:11px;opacity:.4;font-style:normal;} [data-theme="basic"] .byline{font-size:11px;opacity:.4;font-style:normal;} [data-theme="basic"] .album-row-text{font-style:normal;font-weight:400;text-decoration:none;} [data-theme="basic"] .footer-copy{opacity:.3;font-style:normal;} [data-theme="basic"][data-mode="light"] .footer-link{color:#000;} [data-theme="basic"][data-mode="dark"] .footer-link{color:#fff;} [data-theme="basic"][data-mode="light"] .back-btn{color:#000;} [data-theme="basic"][data-mode="dark"] .back-btn{color:#fff;} [data-theme="basic"][data-mode="light"] .album-topbar{background:#fff;border-bottom:.5px solid rgba(0,0,0,.12);} [data-theme="basic"][data-mode="dark"] .album-topbar{background:#000;border-bottom:.5px solid rgba(255,255,255,.12);} [data-theme="basic"][data-mode="light"] #album-scroll{background:#fff;} [data-theme="basic"][data-mode="dark"] #album-scroll{background:#000;} [data-theme="basic"][data-mode="light"] .blog-divider{background:#000;} [data-theme="basic"][data-mode="dark"] .blog-divider{background:#fff;} [data-theme="basic"] .hl-stage{--hl-fade:#fff;} [data-theme="basic"][data-mode="dark"] .hl-stage{--hl-fade:#000;} /* Basic players */ [data-theme="basic"][data-mode="light"] #music-player, [data-theme="basic"][data-mode="light"] #notes-player, [data-theme="basic"][data-mode="light"] #settings-player{background:#fff;box-shadow:0 2px 24px rgba(0,0,0,.12);} [data-theme="basic"][data-mode="dark"] #music-player, [data-theme="basic"][data-mode="dark"] #notes-player, [data-theme="basic"][data-mode="dark"] #settings-player{background:#111;box-shadow:0 2px 24px rgba(0,0,0,.6);} [data-theme="basic"][data-mode="light"] .player-bar{background:#f7f7f7;border-bottom:.5px solid rgba(0,0,0,.08);} [data-theme="basic"][data-mode="dark"] .player-bar{background:#1a1a1a;border-bottom:.5px solid rgba(255,255,255,.08);} [data-theme="basic"] .notes-text,[data-theme="basic"] .settings-player-body{color:inherit;} [data-theme="basic"][data-mode="light"] .notes-body{background:#fff;} [data-theme="basic"][data-mode="dark"] .notes-body{background:#111;} /* ── CARD IMAGE LOADING BAR ── */ .blog-card-view #album-list, .gallery-card-view #album-list{ padding:20px 20px 80px!important; display:flex!important; flex-direction:column!important; gap:0!important; transform:none!important; animation:none!important; width:100%!important; box-sizing:border-box!important; position:static!important; } #card-pane{ display:none; flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; } /* Desktop: constrain card width and center */ @media(min-width:700px){ #card-pane{ display:none; /* overridden inline when active */ } #card-pane > .preview-card{ max-width:640px; margin-left:auto; margin-right:auto; } #card-pane{ padding:0 20px; box-sizing:border-box; } } /* Card base — visible by default, entrance animation on first view */ .preview-card{ border-radius:18px; overflow:hidden; margin-bottom:20px; background:rgba(128,128,128,.06); border:.5px solid rgba(128,128,128,.1); cursor:pointer; opacity:1; transform:none; transition:transform .15s ease; } .preview-card:active{transform:scale(.985);} /* Only apply entrance animation when explicitly given the class */ .preview-card.entrance{ animation:cardEntrance .4s cubic-bezier(0.34,1.1,0.64,1) forwards; } @keyframes cardEntrance{ from{opacity:0;transform:scale(.94) translateY(12px);} to{opacity:1;transform:scale(1) translateY(0);} } .preview-card-cover{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:rgba(128,128,128,.1);} .preview-card-body{padding:16px 18px 18px;} .preview-card-title{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-bottom:6px;} .preview-card-desc{font-size:14px;opacity:.5;line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .preview-card-meta{font-size:11px;opacity:.3;letter-spacing:.03em;text-transform:uppercase;} /* Gallery strip */ .gallery-card-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;} .gallery-card-strip .strip-cell{aspect-ratio:1;overflow:hidden;background:rgba(128,128,128,.12);} .gallery-card-strip .strip-cell img, .gallery-card-strip .strip-cell video{width:100%;height:100%;object-fit:cover;display:block;} .folder-drill .album-row{transition:justify-content .2s;} /* ── PNG SCROLL BLOCK ── */ .png-scroll-block{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;margin-bottom:32px;border-radius:4px;user-select:none;} .png-scroll-frame{position:absolute;inset:0;} .png-scroll-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .5s cubic-bezier(0.4,0,0.2,1);} .png-scroll-frame img.ps-active{opacity:1;} .png-scroll-hint{position:absolute;bottom:10px;right:12px;font-size:10px;opacity:.3;letter-spacing:.04em;pointer-events:none;} .folder-drill.align-right .album-row{flex-direction:row-reverse!important;justify-content:flex-start!important;} .folder-drill.align-right .album-row-text{text-align:right!important;} .folder-drill.align-center .album-row{justify-content:center!important;} .folder-drill.align-center .album-row-text{text-align:center!important;margin:0 auto!important;} .az-view.align-right .album-row{flex-direction:row-reverse!important;justify-content:flex-start!important;} .az-view.align-right .album-row-text{text-align:right!important;} .az-view.align-center .album-row{justify-content:center!important;} .az-view.align-center .album-row-text{text-align:center!important;margin:0 auto!important;} #scroll-pane{overflow:hidden;} @keyframes viewSwitch{from{opacity:0;transform:scale(.97) translateY(4px);}to{opacity:1;transform:scale(1) translateY(0);}} .view-switch-in{animation:viewSwitch .22s cubic-bezier(0.34,1.1,0.64,1) forwards;} .folder-slide-out{animation:slideOutLeft .28s cubic-bezier(0.4,0,0.2,1) forwards;} .folder-slide-in{animation:slideInRight .28s cubic-bezier(0.4,0,0.2,1) forwards;} .folder-slide-back-out{animation:slideOutRight .28s cubic-bezier(0.4,0,0.2,1) forwards;} .folder-slide-back-in{animation:slideInLeft .28s cubic-bezier(0.4,0,0.2,1) forwards;} @keyframes slideOutLeft{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(-18%);}} @keyframes slideInRight{from{opacity:0;transform:translateX(22%);}to{opacity:1;transform:translateX(0);}} @keyframes slideOutRight{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(22%);}} @keyframes slideInLeft{from{opacity:0;transform:translateX(-18%);}to{opacity:1;transform:translateX(0);}} /* ── STICKER VISIBILITY ── */ .hide-type-pill .type-pill:not(.lock-pill){display:none;} .hide-lock-pill .lock-pill{display:none;} .folder-header-row{height:var(--item-h);display:flex;align-items:center;gap:10px;cursor:default;opacity:.45;} .folder-header-row .folder-header-label{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;} .folder-header-row .folder-header-count{font-size:9px;font-weight:500;opacity:.6;margin-left:4px;} .view-btn{font-family:inherit;font-size:11px;font-weight:500;padding:5px 12px;border-radius:20px;border:1px solid rgba(128,128,128,.2);background:transparent;cursor:pointer;color:inherit;opacity:.45;transition:opacity .15s,background .15s;-webkit-appearance:none;} .view-btn.active{opacity:1;background:rgba(128,128,128,.12);} /* ── AUDIO TILE ── */ .audio-tile-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;padding:0;background:rgba(0,0,0,.04);} [data-mode="dark"] .audio-tile-wrap{background:rgba(255,255,255,.04);} .audio-tile-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;} .audio-tile-icon{opacity:.15;} .audio-tile-player{position:relative;z-index:2;padding:10px 10px 12px;background:linear-gradient(0deg,rgba(0,0,0,.5) 0%,transparent 100%);} .audio-tile-title{font-size:9px;font-weight:600;letter-spacing:.04em;color:#fff;opacity:.7;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .audio-tile-bar{display:flex;align-items:center;gap:6px;} .audio-tile-play{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.9);border:none;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;transition:transform .1s;} .audio-tile-play:active{transform:scale(.88);} .audio-tile-play svg{display:block;} .audio-tile-scrub{flex:1;-webkit-appearance:none;appearance:none;height:3px;border-radius:2px;background:rgba(255,255,255,.3);cursor:pointer;outline:none;} .audio-tile-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:#fff;cursor:pointer;} .audio-tile-time{font-size:8px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;flex-shrink:0;min-width:24px;text-align:right;} .audio-block{margin-bottom:32px;border-radius:14px;padding:16px;background:rgba(128,128,128,.06);border:1px solid rgba(128,128,128,.1);} .audio-block-label{font-size:11px;font-weight:600;opacity:.4;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;} .audio-waveform-canvas{width:100%;height:52px;display:block;cursor:pointer;border-radius:3px;} .audio-controls{display:flex;align-items:center;gap:10px;margin-top:8px;} .audio-play-btn{width:30px;height:30px;border-radius:50%;border:none;background:rgba(128,128,128,.15);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;-webkit-appearance:none;transition:background .15s;} .audio-play-btn:hover{background:rgba(128,128,128,.25);} .audio-time{font-size:11px;font-variant-numeric:tabular-nums;opacity:.4;flex-shrink:0;min-width:36px;} .audio-scrubber{flex:1;cursor:pointer;height:3px;accent-color:currentColor;}
/
Featured
Allen Pan · Spotify
Notes
Appearance
Theme
Dark Mode
Access Required
Enter your access code to continue.