:root{--ink:#151515;--paper:#fffaf0;--canvas:#f4f0e7;--red:#fa0343;--lime:#c9f45b;--muted:#615e57;--round:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Trebuchet MS",sans-serif;--body:"Helvetica Neue",Helvetica,Arial,sans-serif;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--canvas);color:var(--ink);font:17px/1.6 var(--body);-webkit-font-smoothing:antialiased}img{max-width:100%;height:auto;display:block}a{color:inherit}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #20799b;outline-offset:6px}a{text-underline-offset:5px}.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}.skip{position:fixed;top:-100px;left:16px;padding:12px;background:var(--paper);z-index:100}.skip:focus{top:12px}.site-header{background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:space-between;gap:28px;padding:17px max(32px,calc((100vw - 1280px)/2));min-height:88px}.brand{display:block;padding:4px 8px;flex-shrink:0}.brand img{width:240px}.site-header nav{display:flex;gap:32px;align-items:center;font:700 13px var(--round)}nav a{text-decoration:none}nav a:hover{color:var(--lime)}.nav-home{border:1px solid #777;padding:13px 19px;border-radius:99px}.hero{display:grid;grid-template-columns:.92fr 1.2fr;gap:36px;align-items:center;min-height:710px;padding-block:80px 90px;position:relative}.eyebrow{font:700 11px/1.6 var(--body);letter-spacing:.16em;margin:0 0 20px}.status-dot{width:7px;height:7px;background:var(--red);display:inline-block;border-radius:50%;margin-right:7px}.product-name{font:800 24px/1.2 var(--round);margin:0 0 20px}h1,h2,h3{font-family:var(--round);letter-spacing:-.055em;line-height:1.04;margin:0}h1{font-size:clamp(54px,5.9vw,86px);font-weight:900}h1 em{font-style:normal;color:var(--red);position:relative}h1 em:after{content:"";position:absolute;height:5px;background:var(--red);bottom:-7px;left:3px;right:-5px;transform:rotate(-3deg)}.intro{font-size:18px;line-height:1.65;max-width:460px;margin:28px 0}.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}.button{padding:15px 22px;border-radius:9px;font:700 14px var(--round);text-decoration:none;display:inline-flex;align-items:center;gap:15px;transition:transform .18s}.button:hover{transform:translateY(-3px)}.dark{background:var(--ink);color:var(--paper)}.light{background:var(--paper);color:var(--ink)}.text-link{font-size:13px;font-weight:700}.fine{font-size:12px;line-height:1.7;color:var(--muted);margin-top:22px;max-width:410px}.hero-art{position:relative;padding:35px 0;isolation:isolate}.hero-tape{position:relative;z-index:2;transform:rotate(-7deg);filter:drop-shadow(8px 25px 15px #15151522);width:100%}.orbit{position:absolute;z-index:-1;border:1px solid #1515151a;border-radius:50%;width:94%;aspect-ratio:1;top:-12%;left:5%}.orbit-two{width:76%;top:2%;left:14%}.hero-art:before{content:"";position:absolute;width:62%;aspect-ratio:1;border-radius:50%;background:var(--lime);left:18%;top:7%;z-index:-1}.tape-tag{position:absolute;right:0;top:-8%;font:900 15px/1.1 var(--round);background:var(--red);color:white;padding:18px 23px;border:2px solid var(--ink);transform:rotate(8deg);z-index:4;box-shadow:4px 4px var(--ink)}.hero-note{font:700 13px var(--round);text-align:center;margin-top:42px}.hero-note span{font-size:30px;margin-right:10px}.feature-strip{background:var(--lime);border-block:1px solid var(--ink);padding:19px 0}.feature-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:15px;font:800 11px var(--body);letter-spacing:.12em}.feature-strip b{font-size:21px}.motion-section{background:var(--ink);color:var(--paper);padding:92px 0 62px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:55px;margin-bottom:42px}h2{font-size:clamp(34px,4vw,54px);font-weight:850}.section-heading>p{max-width:355px;font-size:16px;margin:0;color:var(--muted)}.motion-section .section-heading>p{color:#c7c4bb}.motion-section .eyebrow{color:var(--lime)}.video-frame{border-radius:20px;background:#262426;border:1px solid #5b5758;overflow:hidden;line-height:0;padding:12px}.video-frame video{display:block;width:100%;max-height:670px;aspect-ratio:16/10;background:#151515;object-fit:contain;border-radius:10px}.media-note{font-size:12px;color:#b5b2aa;margin:18px 0 0}.everyday{padding-block:104px}.everyday-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}.feature-list article{display:flex;gap:22px;padding:25px 0;border-top:1px solid #15151524}.feature-list article:last-child{border-bottom:1px solid #15151524}.number{font:700 12px var(--body);color:var(--red);padding-top:5px}h3{font-size:24px;letter-spacing:-.035em}.feature-list p{margin:10px 0 0;color:var(--muted);font-size:15px}.album-display{margin:0;background:#e6e0d5;padding:18px;border-radius:24px;transform:rotate(2deg)}.album-display figcaption{font-size:12px;padding:18px 12px 6px;display:flex;gap:18px;align-items:center}.album-display figcaption span{font-weight:bold;letter-spacing:.12em}.looks-section{background:#e9e4da;padding:80px 0}.looks-grid{display:grid;grid-template-columns:1.18fr 1fr;align-items:center;gap:85px}.look-preview img{width:100%;filter:drop-shadow(0 16px 13px #0002)}.look-preview p{font-size:12px;text-align:center;color:var(--muted);min-height:38px}.looks-copy>p:not(.eyebrow):not(.fine){color:var(--muted);font-size:16px}.look-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.look-buttons button{border:1px solid #15151566;border-radius:99px;background:transparent;padding:11px 15px;cursor:pointer;font-size:12px;font-weight:bold}.look-buttons button[aria-pressed=true]{color:var(--paper);background:var(--ink);border-color:var(--ink)}.editions{padding-block:100px 85px}.pricing-heading{text-align:center;margin-bottom:46px}.pricing-heading>p:last-child{color:var(--muted)}.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1050px;margin:auto}.price-card{border:1px solid var(--ink);border-radius:20px;padding:32px 36px;display:flex;flex-direction:column}.free{background:var(--paper)}.paid{background:var(--ink);color:var(--paper)}.price-top{display:flex;align-items:center;gap:14px;margin-bottom:27px}.side{font:900 42px/1 var(--round)}.price-top p{font-size:10px;font-weight:800;letter-spacing:.12em}.one-time{background:var(--lime);color:var(--ink);border-radius:4px;padding:5px 8px;font:800 10px var(--body);margin-left:auto;white-space:nowrap}.price-card h3{font-size:28px}.price{font:900 54px/1 var(--round);letter-spacing:-.055em;margin:22px 0}.price span{display:block;font:400 14px/1.5 var(--body);letter-spacing:0;margin-top:12px}.price-card ul{list-style:none;padding:23px 0 8px;margin:0;border-top:1px solid #15151533;font-size:14px;flex:1}.paid ul{border-color:#ffffff40}.price-card li{position:relative;padding:0 0 16px 24px}.price-card li:before{content:"✓";position:absolute;left:0;font-weight:bold;color:var(--red)}.paid li:before{color:var(--lime)}.card-bottom{font-size:13px;font-weight:700;border-top:1px solid #15151533;padding-top:20px;margin:0}.paid .card-bottom{border-color:#ffffff40}.price-note{max-width:870px;margin:26px auto 0;text-align:center;font-size:12px;color:var(--muted)}.details-section{border-top:1px solid #15151533;padding-block:70px 100px;display:grid;grid-template-columns:.8fr 1.2fr;gap:90px}.questions details{border-bottom:1px solid #15151533;padding:18px 0}.questions summary{font:700 17px/1.5 var(--round);cursor:pointer;padding-right:15px}.questions p{font-size:14px;color:var(--muted);margin-bottom:8px}.closing{background:var(--red);color:var(--paper);padding:70px 0}.closing .wrap{position:relative}.closing h2{font-size:clamp(38px,5.5vw,70px)}.closing .button{position:absolute;right:0;bottom:15px}.closing p:last-of-type{margin-bottom:0}footer{padding-block:32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;font-size:12px}footer p{margin:0}footer>div{display:flex;gap:22px}.footer-note{width:100%;color:var(--muted);font-size:11px;max-width:1000px}
@media(min-width:1550px){.hero{min-height:780px}}@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.site-header{padding:16px 24px}.site-header nav{gap:18px}.nav-home{display:none}.hero{gap:22px;padding-top:65px;min-height:660px}.hero h1{font-size:60px}.hero-art{margin-top:40px}.tape-tag{font-size:12px;padding:13px}.everyday-grid,.looks-grid{gap:38px}.price-card{padding:28px}.price-top{gap:10px}.price-top p{letter-spacing:.04em}.details-section{gap:40px}.section-heading{gap:30px}}
@media(max-width:700px){html{scroll-padding-top:20px}.wrap{width:calc(100% - 40px)}.site-header{padding:14px 16px;flex-wrap:wrap;justify-content:center;gap:14px}.site-header nav{width:100%;justify-content:center;padding-bottom:5px}.hero{grid-template-columns:1fr;padding:45px 0 48px;gap:20px}.hero h1{font-size:64px}.hero h1 br:nth-child(2){display:none}.product-name{font-size:23px}.intro{font-size:17px;max-width:100%}.hero-art{margin:22px 8px 0;padding-top:40px}.hero-tape{transform:rotate(-4deg)}.tape-tag{top:-1%;right:5px}.orbit{top:-1%}.hero-note{margin-top:23px}.feature-strip .wrap{flex-wrap:wrap;justify-content:center;font-size:9px;gap:10px 18px}.feature-strip b:nth-of-type(2){display:none}.feature-strip span{width:40%;text-align:center}.motion-section{padding:55px 0 40px}.section-heading{display:block;margin-bottom:28px}.section-heading>p{margin-top:22px;max-width:100%}.video-frame{padding:5px;border-radius:12px}.video-frame video{aspect-ratio:4/3}.everyday{padding-block:60px}.everyday-grid,.looks-grid{grid-template-columns:1fr;gap:38px}.album-display{order:-1;transform:none}.looks-section{padding:55px 0}.looks-copy{order:-1}.editions{padding-block:60px}.price-grid{grid-template-columns:1fr}.price-card{padding:28px}.pricing-heading{text-align:left;margin-bottom:28px}.price-note{text-align:left}.details-section{grid-template-columns:1fr;gap:24px;padding-block:45px 60px}.closing{padding:50px 0}.closing .button{position:static;margin-top:26px}footer{gap:20px}footer>div{flex-wrap:wrap}.hero .fine{max-width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* The supplied recording is portrait: give it a portrait stage. */
.motion-section .wrap{display:grid;grid-template-columns:1fr .82fr;gap:34px 80px;align-items:center}.motion-section .section-heading{display:block;margin:0}.motion-section .section-heading>p{margin-top:27px;max-width:400px}.video-frame{grid-column:2;grid-row:1/3;max-width:480px;justify-self:end;width:100%}.video-frame video{aspect-ratio:952/1438;max-height:none}.media-note{max-width:380px;align-self:start;margin:0}
@media(max-width:700px){.motion-section .wrap{display:block}.video-frame{margin-top:30px;max-width:100%}.media-note{margin-top:18px}.video-frame video{aspect-ratio:952/1438}}

/* Supplied Cassette Thang logo, displayed with its original backdrop. */
.app-logo{width:280px;height:auto;border-radius:14px;margin:0 0 26px}.hero{padding-top:48px}.hero h1{font-size:clamp(48px,5.1vw,74px)}
@media(max-width:700px){.app-logo{width:240px;margin-bottom:24px}.hero h1{font-size:58px}}

.details-logo{width:300px;margin-top:30px}.look-stage{display:grid;isolation:isolate}.look-stage .look-slide{grid-area:1/1;width:100%;opacity:0;transition:opacity 1.1s ease;pointer-events:none}.look-stage .look-slide.is-active{opacity:1}.slideshow-controls{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}.slideshow-controls button{border:1px solid #15151566;background:transparent;border-radius:99px;padding:9px 15px;font-size:12px;font-weight:700;cursor:pointer}.slideshow-controls button:hover{background:var(--ink);color:var(--paper)}#look-counter{font-size:12px;font-variant-numeric:tabular-nums}.look-preview #look-caption{min-height:42px}@media(max-width:700px){.details-logo{width:240px}}

.mixtapes-section{padding-block:80px 0;display:grid;grid-template-columns:1fr 1.1fr;align-items:center;gap:70px}.mixtapes-copy>p:not(.eyebrow){font-size:16px;color:var(--muted)}.mixtapes-section figure{margin:0}.mixtapes-section figcaption{text-align:center;color:var(--muted);font-size:12px;margin-top:16px}.player-guide{margin-top:36px;border-top:1px solid #15151533;padding-top:20px}.player-guide summary{cursor:pointer;font-weight:700}.player-guide img{max-width:900px;margin:24px auto 0}@media(max-width:700px){.mixtapes-section{grid-template-columns:1fr;gap:28px;padding-top:55px}}

/* Updated landscape promo video. */
.motion-section .wrap{display:block}.motion-section .section-heading{display:flex;margin-bottom:36px}.motion-section .section-heading>p{margin-top:0}.video-frame{max-width:none;width:100%;margin:0}.video-frame video{aspect-ratio:16/9;max-height:none}.media-note{max-width:none;margin-top:18px}@media(max-width:700px){.motion-section .section-heading{display:block}.motion-section .section-heading>p{margin-top:20px}.video-frame video{aspect-ratio:16/9}}

/* Feature walkthrough screenshots. */
.feature-tour{padding-top:90px}.feature-tour-heading{max-width:710px;margin-bottom:36px}.feature-tour-heading>p:last-child{color:var(--muted)}
.feature-tour-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.feature-tour-card{overflow:hidden;border:1px solid #15151524;border-radius:22px;background:var(--paper)}
.feature-tour-image{display:flex;flex-direction:column;align-items:center;gap:14px;background:#e7e2d8;padding:24px 18px 16px;text-decoration:none}
.feature-tour-image img{height:420px;width:100%;object-fit:contain;filter:drop-shadow(0 6px 8px #0002)}
.feature-tour-image span{font-size:12px;font-weight:700}.feature-tour-image:hover span{text-decoration:underline}
.feature-tour-copy{padding:24px}.feature-tour-copy .eyebrow{font-size:9px;letter-spacing:.1em;margin-bottom:14px}.feature-tour-copy h3{font-size:27px}.feature-tour-copy>p:last-child{font-size:15px;color:var(--muted);margin-bottom:0}
@media(max-width:1000px){.feature-tour-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.feature-tour{padding-top:55px}.feature-tour-grid{grid-template-columns:1fr}.feature-tour-image img{height:440px}}

/* Prominent, collapsible cassette controls guide. */
.player-guide{margin-top:42px;padding:0;border:0}
.player-guide summary{list-style:none;display:flex;align-items:center;gap:22px;padding:24px 28px;border:2px solid var(--ink);border-radius:20px;background:var(--lime);cursor:pointer;box-shadow:6px 6px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.player-guide summary::-webkit-details-marker{display:none}
.player-guide summary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.player-guide[open] summary{border-radius:20px 20px 0 0;box-shadow:none}
.guide-icon{display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border-radius:50%;background:var(--ink);color:var(--lime);font-size:36px;line-height:1}
.guide-label{display:flex;flex-direction:column;gap:3px;min-width:0}
.guide-eyebrow{font-size:10px;letter-spacing:.16em;font-weight:800}
.guide-label strong{font:900 clamp(22px,2.5vw,32px)/1.1 var(--round);letter-spacing:-.04em}
.guide-description{font-size:14px;font-weight:500}
.guide-action{margin-left:auto;white-space:nowrap;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:99px;font-size:13px;font-weight:800}
.guide-close-label{display:none}.player-guide[open] .guide-open-label{display:none}.player-guide[open] .guide-close-label{display:inline}
.player-guide figure{margin:0;padding:28px;background:var(--canvas);border:2px solid var(--ink);border-top:0;border-radius:0 0 20px 20px}
.player-guide img{width:100%;max-width:900px;margin:0 auto;border-radius:10px}
.player-guide figcaption{text-align:center;color:var(--muted);font-size:13px;margin-top:12px}
@media(max-width:700px){.player-guide summary{gap:14px;padding:20px}.guide-icon{flex-basis:42px;width:42px;height:42px;font-size:27px}.guide-description{font-size:12px}.guide-action{font-size:0;padding:8px 12px}.guide-action>span:last-child{font-size:18px}.player-guide figure{padding:14px}}

/* Free Halloween add-on packs. */
.halloween-section{margin-top:90px;padding:88px 0 95px;background:#201326;color:var(--paper)}
.halloween-heading{display:flex;align-items:end;justify-content:space-between;gap:70px;margin-bottom:42px}
.halloween-heading .eyebrow{color:var(--lime)}
.halloween-heading h2{font-size:clamp(46px,5.2vw,74px)}
.halloween-heading>p{max-width:400px;margin:0 0 4px;color:#e5dfe4;font-size:17px}
.halloween-pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.halloween-pack{overflow:hidden;border:1px solid #ffffff4d;border-radius:25px;background:#302034}
.pack-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:center;padding:25px;min-height:190px;background:#151118}
.pack-preview span{display:grid;place-items:center;aspect-ratio:1;border-radius:15px;background:#403047;overflow:hidden}
.pack-preview img{width:100%;height:100%;object-fit:contain}
.pattern-pack .pack-preview span{background:#49315e}
.sticker-pack .pack-preview span{background:#372339}
.pack-copy{padding:29px 30px 32px}
.pack-kind{margin:0 0 11px;color:var(--lime);font-size:10px;font-weight:800;letter-spacing:.15em}
.pack-copy h3{font-size:clamp(27px,2.7vw,39px);margin:0 0 15px}
.pack-copy>p:not(.pack-kind){margin:0 0 12px;line-height:1.55;color:#e4dee4;font-size:15px}
.pack-copy .pack-compat{color:var(--lime)!important;font-weight:700}
.pack-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:27px}
.pack-download{display:inline-flex;align-items:center;gap:17px;padding:13px 20px;background:var(--lime);border-radius:99px;color:var(--ink);font:800 14px var(--round);text-decoration:none}
.pack-download:hover{background:var(--paper)}
.pack-actions>span{font-size:11px;font-weight:800;letter-spacing:.08em;color:#d6c9d7}
.pack-instructions{margin:28px 0 0;color:#e5dfe4;font-size:14px}
.pack-instructions strong{color:var(--paper)}
@media(max-width:900px){.halloween-heading{display:block}.halloween-heading>p{margin-top:22px;max-width:600px}.halloween-pack-grid{grid-template-columns:1fr}.pack-preview{min-height:0}}
@media(max-width:700px){.halloween-section{margin-top:60px;padding:60px 0}.halloween-heading h2{font-size:clamp(42px,10vw,60px)}.pack-preview{padding:16px;gap:7px}.pack-copy{padding:24px}.pack-actions{align-items:flex-start;flex-direction:column}}
