:root { --blue:#168fda; --blue-deep:#086fab; --navy:#0d3e63; --sky:#e4f7ff; --mist:#f4fbff; --line:#cceafa; --yellow:#ffd449; --white:#fff; --muted:#5d7d96; --display:"Fredoka",system-ui,sans-serif; --body:"Nunito",system-ui,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; color:var(--navy); background:var(--mist); font-family:var(--body); font-weight:800; } button,input,select { font:inherit; } a { color:inherit; } button { cursor:pointer; } :focus-visible { outline:3px solid var(--yellow); outline-offset:3px; } .shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; }
.skip-link { position:fixed; z-index:20; top:12px; left:12px; padding:10px 14px; border-radius:11px; color:var(--navy); background:#fff; text-decoration:none; transform:translateY(-160%); } .skip-link:focus { transform:translateY(0); }
.site-header { position:absolute; z-index:5; top:0; right:0; left:0; color:#fff; } .nav-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:23px 0; }.brand { display:inline-flex; align-items:center; gap:10px; color:inherit; font-family:var(--display); font-size:1.2rem; letter-spacing:-.04em; text-decoration:none; }.brand-mark { display:block; width:41px; height:41px; border:3px solid currentColor; border-radius:15px; background:#62cef2 url("mimic-me-avatar.png") center 24% / 225% auto no-repeat; box-shadow:0 4px 0 rgba(5,79,126,.22); transform:rotate(-7deg); }.header-actions { display:flex; align-items:center; gap:17px; }.text-link { font-size:.82rem; text-decoration:none; }.text-link:hover { text-decoration:underline; }.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 16px; border:2px solid var(--blue); border-radius:14px; color:#fff; background:var(--blue); box-shadow:0 4px 0 var(--blue-deep); font-family:var(--display); font-size:.91rem; text-decoration:none; transition:transform .16s ease,box-shadow .16s ease; }.button:hover { transform:translateY(-2px); box-shadow:0 6px 0 var(--blue-deep); }.button:active { transform:translateY(2px); box-shadow:0 2px 0 var(--blue-deep); }
.hero { position:relative; overflow:hidden; color:#fff; background:linear-gradient(140deg,#0877bd 0%,#159bdc 53%,#63d4f3 100%); }.hero::after { position:absolute; right:-120px; bottom:-175px; width:580px; height:580px; border:43px solid rgba(255,255,255,.14); border-radius:50%; content:""; }.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,.78fr); align-items:center; gap:35px; min-height:570px; padding:132px 0 58px; }.hero-copy { max-width:640px; }.eyebrow { display:inline-flex; align-items:center; gap:7px; margin:0 0 15px; padding:7px 11px; border-radius:999px; color:#0872ae; background:#fff; font-size:.72rem; letter-spacing:.035em; }.eyebrow.blue { color:#0872ae; background:#dff5ff; }.hero h1,.section-heading h2,.pack-modal h2 { margin:0; font-family:var(--display); letter-spacing:-.055em; }.hero h1 { max-width:660px; font-size:clamp(3.1rem,5.5vw,5.7rem); line-height:.91; text-shadow:0 5px 0 rgba(4,76,121,.18); }.hero h1 span { color:#e9fbff; }.hero-copy > p:not(.eyebrow) { max-width:545px; margin:19px 0 0; color:rgba(255,255,255,.91); font-size:1rem; line-height:1.55; }.hero-actions { display:flex; flex-wrap:wrap; gap:11px; margin-top:27px; }.button.light { border-color:#fff; color:#0872ae; background:#fff; box-shadow:0 4px 0 rgba(4,78,125,.24); }.button.outline { border-color:rgba(255,255,255,.85); background:rgba(3,115,181,.16); box-shadow:none; }.button.outline:hover { background:rgba(255,255,255,.14); box-shadow:none; }
.hero-art { position:relative; width:min(100%,400px); height:348px; margin:18px auto 0; }.record { position:absolute; top:53px; left:73px; display:grid; width:212px; height:212px; place-items:center; border:12px solid rgba(255,255,255,.8); border-radius:50%; color:#0872ae; background:radial-gradient(circle at 34% 31%,#fff 0 11%,#e4f8ff 12% 50%,#d0f3ff 51%); box-shadow:0 20px 0 rgba(4,81,130,.16),inset 0 0 0 8px rgba(255,255,255,.65); transform:rotate(-8deg); }.record > i { font-size:3.4rem; }.wave { position:absolute; right:-62px; bottom:47px; display:flex; align-items:center; gap:5px; height:37px; }.wave b { display:block; width:7px; height:18px; border-radius:9px; background:var(--yellow); box-shadow:0 2px 0 rgba(102,73,7,.18); }.wave b:nth-child(2) { height:31px; }.wave b:nth-child(3) { height:23px; }.wave b:nth-child(4) { height:36px; }.wave b:nth-child(5) { height:16px; }.sound-card { position:absolute; display:flex; align-items:center; gap:8px; padding:10px 12px; border:3px solid #fff; border-radius:15px; color:#0b74ac; background:#fff; box-shadow:0 5px 0 rgba(4,74,118,.2); font-family:var(--display); font-size:.8rem; }.sound-card i { display:grid; width:27px; height:27px; place-items:center; border-radius:9px; color:#fff; background:#18a0dc; }.card-top { top:0; right:0; transform:rotate(7deg); }.card-mid { right:-8px; bottom:91px; transform:rotate(-6deg); }.card-bottom { bottom:0; left:0; transform:rotate(5deg); }.card-bottom i { color:#0e6d8a; background:var(--yellow); }.hero-orb { position:absolute; border:30px solid rgba(255,255,255,.1); border-radius:50%; }.orb-one { top:115px; left:-150px; width:340px; height:340px; }.orb-two { right:27%; top:-155px; width:260px; height:260px; }
.packs-section { padding:76px 0 92px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:25px; }.section-heading h2 { font-size:clamp(2.25rem,4vw,3.6rem); line-height:.95; }.section-description { margin:11px 0 0; color:var(--muted); font-size:.92rem; }.upload-prompt { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--line); border-radius:17px; color:var(--navy); background:#fff; box-shadow:0 8px 0 #dff3fc; text-decoration:none; transition:transform .16s ease; }.upload-prompt:hover { transform:translateY(-2px); }.upload-prompt > i { margin-left:5px; color:var(--blue); }.upload-prompt strong,.upload-prompt small { display:block; }.upload-prompt strong { font-size:.78rem; }.upload-prompt small { margin-top:2px; color:var(--muted); font-size:.67rem; }.upload-icon { display:grid; width:35px; height:35px; place-items:center; border-radius:11px; color:#fff; background:var(--blue); }.toolbar { display:flex; flex-wrap:wrap; gap:10px; margin:35px 0 20px; }.search-field { display:flex; flex:1 1 330px; align-items:center; gap:10px; min-height:48px; padding:0 14px; border:1px solid var(--line); border-radius:14px; color:#63829a; background:#fff; box-shadow:0 6px 16px rgba(16,106,161,.06); }.search-field input { width:100%; border:0; outline:0; color:var(--navy); background:transparent; font-size:.86rem; font-weight:800; }.search-field input::placeholder { color:#91aebe; }.sort-field { display:flex; align-items:center; gap:8px; padding:0 11px 0 14px; border:1px solid var(--line); border-radius:14px; color:var(--muted); background:#fff; font-size:.76rem; }.sort-field select { min-height:46px; border:0; outline:0; color:var(--navy); background:#fff; font-weight:900; }.status-message { min-height:1.3em; margin:0 0 14px; color:#b34053; font-size:.78rem; }.packs-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,260px)); justify-content:start; gap:18px; }.pack-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 11px 0 #ddf2fc,0 16px 25px rgba(19,108,164,.07); transition:transform .16s ease,box-shadow .16s ease; }.pack-card:hover { transform:translateY(-4px); box-shadow:0 13px 0 #d5effb,0 22px 31px rgba(19,108,164,.13); }.pack-cover { position:relative; display:grid; aspect-ratio:1 / 1; place-items:center; overflow:hidden; border-radius:21px 21px 0 0; color:#0872ae; background:linear-gradient(145deg,#def6ff,#bceafb); }.pack-cover img { width:100%; height:100%; object-fit:contain; padding:7px; border-radius:inherit; }.pack-cover i { font-size:3rem; }.cover-note { position:absolute; right:11px; bottom:10px; display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; color:#075e8f; background:rgba(255,255,255,.88); font-size:.65rem; }.pack-body { display:flex; flex:1; flex-direction:column; padding:17px; }.pack-body h3 { margin:0; overflow:hidden; font-family:var(--display); font-size:1.24rem; letter-spacing:-.035em; text-overflow:ellipsis; white-space:nowrap; }.creator { margin:6px 0 0; color:var(--muted); font-size:.74rem; }.creator i { color:var(--blue); }.pack-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }.tag { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border:1px solid #c7ebfa; border-radius:999px; color:#287295; background:#effaff; font-size:.65rem; }.tag.play { border-color:#cceedd; color:#08785e; background:#e9fbf3; }.view-button { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:17px; padding:10px 12px; border:1px solid #9ddaf4; border-radius:12px; color:#0872ae; background:#f4fcff; font-family:var(--display); font-size:.81rem; transition:background .16s ease,color .16s ease; }.view-button:hover { color:#fff; background:var(--blue); }.loading-card,.empty-card { display:grid; grid-column:1 / -1; min-height:220px; place-items:center; align-content:center; gap:12px; padding:30px; border:1px dashed #b5dfef; border-radius:22px; color:var(--muted); background:#fff; text-align:center; }.loading-card strong,.empty-card strong { color:var(--navy); font-family:var(--display); font-size:1.1rem; }.empty-card span { font-size:.78rem; }.spinner { width:29px; height:29px; border:4px solid #c7edf9; border-top-color:var(--blue); border-radius:50%; animation:spin .8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }
.site-footer { padding:28px 0; color:#50738d; background:#dff3fc; }.footer-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }.footer-brand { color:#0872ae; font-size:1rem; }.site-footer nav { display:flex; flex-wrap:wrap; gap:10px 16px; }.site-footer nav a { font-size:.74rem; text-decoration:none; }.site-footer nav a:hover { color:var(--blue); }
.modal-backdrop { position:fixed; z-index:30; inset:0; display:grid; place-items:center; padding:24px; background:rgba(6,62,99,.58); backdrop-filter:blur(7px); }.modal-backdrop[hidden] { display:none; }.pack-modal { position:relative; width:min(100%,650px); max-height:min(760px,calc(100vh - 48px)); overflow:auto; padding:28px; border:1px solid #b8e7f9; border-radius:25px; background:#fff; box-shadow:0 28px 70px rgba(3,59,98,.34); }.close-button { position:absolute; top:16px; right:16px; display:grid; width:37px; height:37px; place-items:center; border:0; border-radius:12px; color:#5a7d95; background:#edf9ff; font-size:1rem; }.close-button:hover { color:#0872ae; background:#dff5ff; }.modal-head { display:flex; align-items:center; gap:15px; padding-right:46px; }.modal-icon { display:grid; flex:0 0 68px; width:68px; height:68px; place-items:center; overflow:hidden; border:1px solid #bee9fa; border-radius:19px; color:#0872ae; background:#e4f7ff; }.modal-icon img { width:100%; height:100%; object-fit:cover; }.modal-icon i { font-size:1.8rem; }.modal-label { margin:0 0 4px; color:#2e88b2; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; }.pack-modal h2 { font-size:1.8rem; line-height:1; }.modal-head > div:last-child > p:last-child { margin:7px 0 0; color:var(--muted); font-size:.73rem; }.modal-description { margin:22px 0 18px; color:#486c85; font-size:.86rem; line-height:1.55; white-space:pre-wrap; }.clip-list { display:grid; gap:9px; }.clip-row { display:flex; align-items:center; justify-content:space-between; gap:13px; padding:11px 12px; border:1px solid #d3edf8; border-radius:14px; background:#f9fdff; }.clip-row strong,.clip-row small { display:block; }.clip-row strong { max-width:400px; overflow:hidden; color:var(--navy); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }.clip-row small { margin-top:4px; color:var(--muted); font-size:.65rem; }.play-button { display:grid; flex:0 0 36px; width:36px; height:36px; place-items:center; border:0; border-radius:11px; color:#fff; background:var(--blue); }.play-button:hover,.play-button.playing { background:var(--blue-deep); }.play-button:disabled { opacity:.55; cursor:wait; }.modal-actions { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; margin-top:20px; }.modal-upload-link { display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border-radius:13px; color:#0872ae; background:#e8f8ff; font-size:.75rem; text-align:center; text-decoration:none; }.modal-upload-link:hover { background:#d8f3ff; }.report-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:9px 12px; border:1px solid #f1c4ca; border-radius:13px; color:#af3650; background:#fff8f8; font-family:var(--display); font-size:.76rem; }.report-button:hover { border-color:#df8e9b; color:#962b42; background:#fff0f2; }.report-button.secondary { border-color:#cceafa; color:#287295; background:#f4fcff; }.report-button.secondary:hover { color:#0872ae; background:#e8f8ff; }.report-modal { width:min(100%,520px); }.report-pack-name { margin:8px 0 0; color:var(--navy); font-family:var(--display); font-size:1.05rem; }.report-field { display:grid; gap:7px; color:var(--navy); font-size:.78rem; }.report-field select { width:100%; min-height:46px; padding:0 12px; border:1px solid var(--line); border-radius:12px; color:var(--navy); background:#f9fdff; font-size:.82rem; font-weight:800; }.report-field select:focus { outline:3px solid #bfeafb; border-color:var(--blue); }.report-status { min-height:1.3em; margin:12px 0 0; color:#af3650; font-size:.76rem; }.report-status.success { color:#08785e; }.report-login-link { display:inline-flex; align-items:center; gap:7px; margin-top:9px; color:#0872ae; font-size:.76rem; text-decoration:none; }.report-login-link:hover { text-decoration:underline; }.report-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:19px; }.report-actions .button { min-height:40px; padding:9px 13px; }
@media (max-width:850px) { .hero-grid { grid-template-columns:1fr; padding-top:125px; text-align:center; }.hero-copy { margin:auto; }.hero-copy > p:not(.eyebrow) { margin-right:auto; margin-left:auto; }.hero-actions { justify-content:center; }.hero-art { height:280px; margin-top:5px; transform:scale(.86); }.packs-grid { grid-template-columns:repeat(auto-fill,minmax(180px,220px)); }.section-heading { align-items:start; flex-direction:column; }.upload-prompt { width:100%; justify-content:flex-start; }.upload-prompt > i { margin-left:auto; } }
@media (max-width:560px) { .shell { width:min(calc(100% - 30px),540px); }.nav-row { padding:15px 0; }.brand { font-size:1rem; }.brand-mark { width:35px; height:35px; border-radius:13px; }.header-actions { gap:10px; }.text-link { display:none; }.header-actions .button { min-height:38px; padding:8px 11px; border-radius:12px; font-size:.75rem; }.header-actions .button i { display:none; }.hero-grid { min-height:0; padding:103px 0 26px; }.hero h1 { font-size:clamp(3rem,13vw,4.2rem); }.hero-copy > p:not(.eyebrow) { font-size:.91rem; }.hero-actions .button { flex:1 1 160px; }.hero-art { width:330px; height:263px; transform:scale(.78); transform-origin:top center; margin-bottom:-49px; }.packs-section { padding:57px 0 65px; }.section-heading h2 { font-size:2.35rem; }.toolbar { display:grid; margin-top:27px; }.search-field,.sort-field { min-height:47px; }.sort-field { justify-content:space-between; }.packs-grid { grid-template-columns:minmax(0,340px); justify-content:center; gap:16px; }.pack-cover { aspect-ratio:1 / 1; }.footer-row { align-items:start; flex-direction:column; }.site-footer nav { gap:9px 14px; }.pack-modal { padding:22px 17px; border-radius:21px; }.modal-head { gap:11px; }.modal-icon { flex-basis:57px; width:57px; height:57px; border-radius:16px; }.pack-modal h2 { font-size:1.45rem; }.modal-description { margin-top:18px; }.clip-row strong { max-width:210px; }.modal-backdrop { padding:12px; }.modal-actions { grid-template-columns:1fr; }.report-actions { flex-direction:column-reverse; }.report-actions .button,.report-button.secondary { width:100%; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }