/* White, quiet branding. The illustration and the characters carry the color. */
.header{height:auto;display:grid;grid-template-columns:1fr auto;gap:0;padding:0 5%;border-bottom:0}.header .brand{grid-row:1;grid-column:1;justify-self:start;height:82px;gap:17px}.header .account{grid-row:1;grid-column:2;min-height:82px;gap:13px}.header .brand-mark{display:block;width:39px;height:39px;flex:none;transform-origin:center;transition:transform .4s cubic-bezier(.2,.8,.2,1)}.brand-mark>svg{width:100%;height:100%}.brand:hover .brand-mark,.brand:focus-visible .brand-mark{transform:scale(1.35) rotate(-5deg)}.vein-flex{transform-box:fill-box;transform-origin:center;transition:transform .35s}.brand:hover .vein-flex,.brand:focus-visible .vein-flex{animation:vein-breathe 1.3s ease-in-out infinite}@keyframes vein-breathe{0%,100%{transform:scale(1)}38%{transform:scale(1.14,.86)}75%{transform:scale(.94,1.14)}}.jellyfish-avatar{width:40px;height:37px;object-fit:contain}.header-lower{grid-row:2;grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:30px;height:61px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}.header nav{position:static;transform:none;height:auto;gap:42px}.header nav a{font-size:13px;padding:18px 0}.header nav a:after{bottom:9px}.header-search{display:flex;align-items:center;width:235px;border-bottom:1px solid #d6d6d6;height:36px;gap:10px}.header-search input{border:0;outline:0;background:transparent;width:100%;min-width:0;padding:7px 0;font-size:11px;border-radius:0}.header-search:focus-within{border-color:#111}.header-search button{padding:5px 0 5px 8px;flex:none;width:28px;height:32px}.header-search svg{width:19px;height:19px}.header-search input::placeholder{color:#999}.hero.refined-hero{grid-template-columns:47% 53%;margin:0 6%;height:calc(100svh - 143px);max-height:795px;min-height:650px;gap:0}.refined-hero .hero-copy{padding:0 0 36px 60px;position:relative}.hero-main-logo{display:block;width:128px;height:86px;object-fit:contain;margin:0 0 18px -5px}.refined-hero h1{font-size:clamp(74px,8vw,122px);margin-bottom:13px}.refined-hero .wordmark{font-size:clamp(28px,3vw,45px);margin-bottom:30px;letter-spacing:-2px}.refined-hero .hero-bottom{bottom:22px;left:60px}.record-section.hero-record{margin:0;display:block;border:0;min-height:0;height:100%;align-self:stretch;outline-offset:-15px}.hero-record .record-scene{height:100%;min-height:620px}.hero-record .record-floor{bottom:24px;left:0;width:100%;height:40px}.gramophone-trigger{position:absolute;bottom:40px;left:calc(50% - 170px);width:340px;height:340px;padding:0;z-index:1;border:0;background:transparent;transition:transform .5s var(--ease);border-radius:16px}.gramophone-trigger:hover{transform:translateY(-3px)}.gramophone-art{display:block;width:100%;height:100%;object-fit:contain;user-select:none}.hero-record.dragging{background:transparent;outline:2px dashed #b5d8e9}.hero-record .record-bubble{border:0;background:none;cursor:crosshair;overflow:visible;will-change:transform;z-index:2}.hero-record .record-bubble:after{display:none}.bubble-shell{position:absolute;inset:0;border:1.25px solid #31363b;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff0 50%,#e5f4fc44);transition:background .2s;pointer-events:none}.bubble-shell:before{content:"";position:absolute;left:21%;top:16%;width:17%;height:14%;border-left:1px solid #c1d6df;border-top:1px solid #c1d6df;border-radius:100% 0 0 0;transform:rotate(8deg)}.record-bubble:hover .bubble-shell{background:#e8f5fb66}.is-burst .bubble-shell{animation:bubble-shatter .68s ease-out forwards}@keyframes bubble-shatter{0%{transform:scale(1)}12%{transform:scale(1.12,.77)}26%{transform:scale(.82,1.12)}42%{transform:scale(1.16);opacity:0}100%{transform:scale(1.3);opacity:0}}.pop-ring{position:absolute;inset:0;border:1px solid #9fc8d8;border-radius:50%;opacity:0;pointer-events:none;animation:water-ring .62s ease-out forwards}.ring-two{animation-delay:.1s;border-color:#d9e7ec}@keyframes water-ring{10%{opacity:.8}100%{transform:scale(1.85);opacity:0}}.splash-drop{position:absolute;top:50%;left:50%;width:4px;height:7px;border-radius:70% 70% 50% 50%;background:#a8d3e5;opacity:0;transform:rotate(var(--a)) translateY(-8px);transform-origin:0 0;pointer-events:none;animation:water-splash .62s var(--delay) cubic-bezier(.1,.6,.4,1) forwards}@keyframes water-splash{12%{opacity:1}70%{opacity:.7}100%{transform:rotate(var(--a)) translateY(calc(-1 * var(--d) - 32px)) scale(.2);opacity:0}}.pop-spark{position:absolute;top:50%;left:50%;font-size:11px;font-weight:400;color:#96c8dc;pointer-events:none;opacity:0;animation:water-spark .6s ease-out forwards;transform:rotate(var(--a)) translateX(6px)}@keyframes water-spark{20%{opacity:.9}100%{transform:rotate(var(--a)) translateX(50px) scale(.15);opacity:0}}.reborn .bubble-shell{animation:bubble-reborn .5s cubic-bezier(.2,.9,.3,1.2) both}@keyframes bubble-reborn{0%{transform:scale(.05);opacity:0}60%{transform:scale(1.09);opacity:.8}100%{transform:scale(1);opacity:1}}.music-panel .record-hint{max-width:none}.music-panel .record-import{margin:19px 0 30px}.music-panel .player-controls>button{min-height:37px;padding:0;margin:0}.music-panel .music-queue button{min-height:25px}.music-panel>h2{margin-right:15px}.music-panel .track-line button{min-height:30px}.music-panel label[for=music-volume]{margin:0;font-size:10px}.music-panel .volume-line{margin-top:20px}.account-avatar img{width:100%;height:auto}.carousel-art{position:relative}.carousel-art>button:first-child{padding:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.carousel-art #carousel-fish{display:block;width:82%;transition:opacity .18s,transform .35s var(--ease)}#carousel-fish.changing{opacity:0;transform:translateX(-13px)}#carousel-fish>svg{width:100%;height:auto}.carousel-art .carousel-pause{position:absolute;right:14px;top:14px;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:#fff9}.carousel-pause>svg{width:13px;height:13px}.carousel-caption>div{display:flex;gap:16px}.carousel-caption>div>button{font-size:21px;padding:3px 0 3px 5px;min-width:25px}.carousel-art:hover #carousel-fish:not(.changing){transform:rotate(-3deg)}
.pond-page,.search-page{min-height:calc(100svh - 245px);padding-bottom:60px}.pond-page .page-heading,.search-page .page-heading{padding-top:39px}.pond-filter{margin:0 4.4% 28px;display:flex;justify-content:space-between;align-items:center;gap:20px}.pond-filter>div{display:flex;gap:28px}.pond-filter button{font-size:13px;color:#888;padding:8px 0 11px;border-bottom:2px solid transparent}.pond-filter button.active{font-weight:700;border-color:#111;color:#111}.pond-filter>span{font-size:11px;color:#999}.pond-grid,.search-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 24px;margin:0 4.4%}.pond-card{min-width:0}.pond-picture{width:100%;aspect-ratio:1.25;display:flex;align-items:center;justify-content:center;padding:0;background:#f6f6f6;overflow:hidden}.pond-picture>svg{width:85%;height:90%;transition:transform .4s var(--ease)}.pond-picture:hover>svg{transform:rotate(-3deg) scale(1.02)}.pond-card-info{display:flex;justify-content:space-between;align-items:center;padding-top:17px;gap:15px}.pond-card-info h2{font-size:15px;margin:0 0 7px;font-weight:700}.pond-card-info>div>span{font-size:11px;color:#888}.pond-card-info small{font-size:10px;margin-left:9px;color:#aaa}.like-button{display:flex;align-items:center;gap:7px;padding:10px 0 10px 10px;font-size:11px;flex:none;color:#777}.like-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;transition:fill .2s,transform .2s}.like-button[aria-pressed=true]{color:#d35c72}.like-button[aria-pressed=true] svg{fill:#f395af;stroke:#d35c72;transform:scale(1.08)}.pond-empty{text-align:center;padding:75px 20px}.pond-empty p{font-size:14px;margin:0 0 25px;color:#888}.pond-caption{font-size:14px;line-height:1.8;margin:18px 0 25px}.search-result{text-align:left;padding:0}.search-result>div{aspect-ratio:1.4;display:flex;align-items:center;justify-content:center;background:#f6f6f6}.search-result>div>svg{width:83%;height:90%;transition:transform .35s}.search-result:hover>div>svg{transform:translateY(-3px)}.search-result>span{display:flex;align-items:center;justify-content:space-between;padding:17px 0;font-size:14px;font-weight:700;gap:10px}.search-result small{font-size:11px;color:#888;font-weight:400}.search-suggestions{display:flex;gap:26px;margin:25px 4.4% 60px}.search-suggestions a{font-size:14px;border-bottom:1px solid #111;padding-bottom:7px}#pond-form select{width:100%;height:47px;border:1px solid #ccc;background:white;padding:10px;font:inherit;font-size:14px;border-radius:0;margin-bottom:23px}
@media(min-width:1600px){.hero.refined-hero{max-width:1440px;margin:auto}.refined-hero .hero-copy{padding-left:90px}.gramophone-trigger{width:380px;height:380px;left:calc(50% - 190px)}}
@media(max-width:1000px){.header nav{gap:28px}.header-search{width:195px}.hero.refined-hero{min-height:640px;margin:0 5%;grid-template-columns:45% 55%}.refined-hero .hero-copy{padding-left:25px}.refined-hero h1{font-size:80px}.refined-hero .hero-bottom{left:25px}.hero-main-logo{width:112px;height:80px}.gramophone-trigger{width:295px;height:295px;left:calc(50% - 147.5px)}.pond-grid,.search-grid{gap:28px 18px}}
@media(max-width:700px){.header{padding:0 5%}.header .brand,.header .account{height:70px;min-height:70px}.header .brand>.brand-mark{display:block;width:34px;height:34px}.header .brand>.brand-word{display:none}.jellyfish-avatar{width:34px;height:32px}.header-lower{height:54px;gap:9px}.header nav{gap:20px;justify-content:space-between;flex:1}.header nav a{font-size:12px;padding:15px 0;white-space:nowrap}.header nav a:after{bottom:7px}.header-search{width:27px;flex:none;border-color:transparent;gap:0}.header-search input{width:0;opacity:0;padding:0}.header-search button{width:27px;padding-left:4px}.header-search:focus-within{position:absolute;inset:7px 0 0;width:100%;background:white;border-bottom:1px solid #111;z-index:2;padding-left:4px;gap:10px}.header-search:focus-within input{width:100%;opacity:1;padding:7px 0}.hero.refined-hero{height:auto;max-height:none;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto 520px;margin:0 7%;padding-top:28px}.refined-hero .hero-copy{padding:13px 0 0 18px;z-index:2}.hero-main-logo{width:90px;height:59px;margin-bottom:12px}.refined-hero h1{font-size:clamp(65px,17vw,96px);margin-bottom:8px}.refined-hero .wordmark{font-size:25px;letter-spacing:-1.5px;margin-bottom:22px}.refined-hero .hero-bottom{left:18px;bottom:9px}.hero-record .record-scene{height:520px;min-height:0}.record-section.hero-record{margin-top:-15px;height:520px}.gramophone-trigger{width:265px;height:265px;left:calc(50% - 132.5px);bottom:35px}.hero-record .record-floor{bottom:20px}.refined-hero .scroll-hint{font-size:9px}.refined-hero .scroll-hint span{height:15px}.explore{padding-top:26px}.pond-grid,.search-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px;margin:0 5%}.pond-filter{margin:0 5% 22px;gap:10px}.pond-filter>div{gap:20px}.pond-filter button{font-size:12px}.pond-filter>span{font-size:9px;max-width:100px;text-align:right;line-height:1.5}.pond-page .page-heading,.search-page .page-heading{padding-top:28px}.pond-page .page-heading .btn{padding:0 14px;gap:15px;min-height:44px;font-size:12px}.pond-card-info{align-items:start;padding-top:12px;gap:4px}.pond-card-info h2{font-size:12px;margin-bottom:5px}.pond-card-info>div>span{font-size:9px}.pond-card-info small{display:block;font-size:8px;margin:4px 0 0}.like-button{gap:4px;padding:0;font-size:10px}.like-button svg{width:15px;height:15px}.search-result>span{display:block;font-size:12px;padding:12px 0}.search-result small{display:block;margin-top:5px;font-size:10px}.search-suggestions{margin:20px 5% 50px;gap:22px}.search-suggestions a{font-size:12px}.pond-page,.search-page{min-height:calc(100svh - 218px);padding-bottom:40px}.carousel-art .carousel-pause{width:31px;height:31px}}
@media(max-width:360px){.header nav{gap:13px}.hero.refined-hero{grid-template-rows:auto 505px}.hero-record .record-scene,.record-section.hero-record{height:505px}.gramophone-trigger{width:240px;height:240px;left:calc(50% - 120px)}.hero-copy .hero-main-logo{height:54px}}
@media(prefers-reduced-motion:reduce){.brand:hover .vein-flex,.brand:focus-visible .vein-flex{animation:none}.hero-record .record-bubble{will-change:auto}.is-burst .bubble-shell{opacity:0}.pop-ring,.splash-drop,.pop-spark{display:none}}