.practice-welcome{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;padding:30px 0 48px}
.welcome-copy h1{font-size:44px;line-height:1.12;margin:20px 0;letter-spacing:-1.3px}
.welcome-copy>p{color:#aaa;max-width:460px;font-size:16px;line-height:1.65}
.welcome-actions{display:flex;gap:12px;margin-top:26px}
.welcome-copy .welcome-detail,.welcome-detail{font-size:12px;color:#999}
.welcome-guide{padding:28px}
.welcome-guide ol{list-style:none;counter-reset:steps;padding:0;margin:24px 0}
.welcome-guide li{counter-increment:steps;position:relative;padding:0 0 22px 34px}
.welcome-guide li:last-child{padding-bottom:0}
.welcome-guide li:before{content:'0' counter(steps);position:absolute;left:0;top:3px;color:#d4a84b;font:11px 'Space Mono',monospace}
.welcome-guide strong,.welcome-guide li span{display:block}
.welcome-guide strong{font-size:15px;margin-bottom:6px}
.welcome-guide li span{font-size:13px;color:#aaa;line-height:1.6}
.first-visit #practiceView>:not(.practice-welcome){display:none!important}
.first-visit .transport{display:none}
.first-visit .site-footer{padding-bottom:32px}
@media(max-width:760px){.practice-welcome{grid-template-columns:1fr;gap:24px;padding:8px 0 24px}.welcome-copy h1{font-size:34px}.welcome-actions{flex-wrap:wrap}.welcome-guide{padding:20px}}
.console-actions{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.console-actions button{font-size:12px;white-space:nowrap}
.console-actions #export{margin:0;background:#d4a84b;color:#17130b;border-color:#d4a84b}
#uploadView .upload-panel{max-width:none}
#uploadView .split-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#uploadView .split-models label{margin:0;align-items:flex-start;flex-wrap:wrap;padding:16px}
#uploadView .split-models label>span:nth-child(2){flex:1;min-width:120px}
#uploadView .split-models small{margin-top:6px;line-height:1.5}
#uploadView .drop-preview{padding:20px}
@media(max-width:760px){.console-actions{margin:8px 0 0;width:100%;justify-content:flex-start}.console-actions #export{width:auto}.console-actions button{flex:1}#uploadView .split-models{grid-template-columns:1fr}}

.song-heading .console-actions{gap:10px}
.song-heading .console-actions button{font-family:Archivo,sans-serif;font-size:14px;font-weight:600;line-height:1.25;min-height:46px;padding:12px 18px;border-radius:9px;box-shadow:0 2px 5px #0003;transition:background .15s,box-shadow .15s}
.song-heading .console-actions button:hover:not(:disabled){box-shadow:0 3px 12px #0005,inset 0 0 0 1px #ffffff35}
.song-heading .console-actions .primary{border:1px solid #56ded0}
.song-heading .console-actions #export{border:1px solid #e3bf6b}

/* Solid action colours retain readable ink on hover and keyboard focus. */
button.primary:hover:not(:disabled),button.primary:focus-visible{background:#63e2d2;border-color:#63e2d2;color:#071512}
.song-heading .console-actions{gap:12px}
.song-heading .console-actions button{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:Archivo,sans-serif;font-size:15px;font-weight:600;line-height:1.2;min-height:48px;padding:13px 20px;border-radius:10px;box-shadow:0 3px 8px #0004;transition:background .15s,border-color .15s,box-shadow .15s}
.song-heading .console-actions .new-split::before{content:'';width:16px;height:16px;flex-shrink:0;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.song-heading .console-actions .primary::before{content:'';width:18px;height:18px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m-5-5 5 5 5-5M4 16v5h16v-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.song-heading .console-actions .new-split{background:#202523;border-color:#46524d;color:#f0f3ef}
.song-heading .console-actions .new-split:hover{background:#303d37;border-color:#71867c;color:#fff}
.song-heading .console-actions .primary{background:#142c28;color:#8cdace;border-color:#37665e}
.song-heading .console-actions .primary:hover,.song-heading .console-actions .primary:focus-visible{background:#1d3933;color:#b0eee3;border-color:#568f81}
.song-heading .console-actions #export{background:#2b2518;color:#e0c17b;border-color:#6c5930}
.song-heading .console-actions #export:hover,.song-heading .console-actions #export:focus-visible{background:#39301d;color:#f0d89d;border-color:#927942}
@media(max-width:480px){.song-heading .console-actions{gap:8px}.song-heading .console-actions button{font-size:14px;padding:12px 14px}}

.song-heading .console-actions{gap:9px}
.song-heading .console-actions button{min-height:39px;padding:10px 15px;font-size:13px;gap:7px;border-radius:8px}
.song-heading .console-actions .new-split{margin-left:5px}

.song-heading .console-actions .primary::before,.song-heading .console-actions #export::before{width:16px;height:16px;flex-shrink:0}
.song-heading .console-actions #export::before{content:'';background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15V3m-5 5 5-5 5 5M4 16v5h16v-5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media(pointer:coarse){.song-heading .console-actions button{min-height:44px}}

/* Keep the song heading independent from its actions at phone widths. */
@media(max-width:760px){
 .song-heading{display:flex;flex-direction:column;align-items:stretch;gap:16px}
 .song-heading .song-copy{width:100%;min-width:0}
 .song-heading .song-copy h1{overflow-wrap:anywhere}
 .song-heading .console-actions{display:flex;position:static;width:100%;margin:0;flex-wrap:wrap;gap:8px}
 .song-heading .console-actions button{flex:1 1 auto;min-height:44px;max-width:100%}
 .song-heading .console-actions .new-split{margin-left:0}
 #practicePanel .adjustments{grid-template-columns:repeat(2,minmax(0,1fr))}
 #practicePanel .adjust-card{min-width:0}
}
@media(max-width:440px){#practicePanel>.panel-heading{flex-wrap:wrap}}

#practicePanel .adjustments{grid-template-columns:repeat(2,minmax(0,1fr))}
#practicePanel .adjust-card{min-width:0}
@media(max-width:760px){
 .song-heading .console-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .song-heading .console-actions button{width:100%;min-width:0;padding-inline:8px}
 .song-heading .console-actions .new-split{grid-column:1/-1}
}
@media(max-width:440px){
 #practicePanel .number-control{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 #practicePanel .number-control output{grid-row:1;grid-column:1/-1;text-align:center;line-height:1.2}
 #practicePanel .number-control button{grid-row:2;width:100%;min-height:44px}
 #practicePanel .control-title{padding:0;gap:2px;font-size:12px}
 #practicePanel .control-title .text-btn{padding-inline:2px;font-size:11px}
 .song-heading .console-actions button{font-size:12px;gap:5px}
}

.action-label-compact{display:none}
@media(max-width:760px){
 .song-heading{gap:12px}
 .song-heading .console-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .song-heading .console-actions .new-split{grid-column:auto}
 .song-heading .console-actions button{padding:8px 6px;gap:5px;font-size:12px;min-height:44px}
 .console-actions .action-label-full{display:none}
 .console-actions .action-label-compact{display:inline}
}

.count-row{flex-wrap:wrap}
.count-row .song-bpm{display:flex;align-items:center;gap:8px;font-size:12px}
#countInBpm{width:85px;min-height:44px;padding:8px;background:#191815;color:var(--text);border:1px solid #39342a;border-radius:8px}
.count-row .tap-tempo{min-height:44px;font-size:12px;background:#191815;color:#e0c17b;border-color:#6c5930}
#practicePanel .count-row .tempo-hint{flex-basis:100%;max-width:none;display:block;margin:0;font-size:11px;line-height:1.5}

/* Translucent action surfaces echo the main navigation tabs. */
.song-heading .console-actions button{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.song-heading .console-actions .primary{background:rgba(30,91,78,.30)}
.song-heading .console-actions .primary:hover,.song-heading .console-actions .primary:focus-visible{background:rgba(35,108,91,.45)}
.song-heading .console-actions #export{background:rgba(112,86,30,.26)}
.song-heading .console-actions #export:hover,.song-heading .console-actions #export:focus-visible{background:rgba(130,99,33,.42)}
.song-heading .console-actions .new-split{background:rgba(43,53,48,.48)}
.song-heading .console-actions .new-split:hover{background:rgba(57,77,65,.65)}

@media(max-width:760px){
 .song-heading .console-actions button{flex-direction:column;justify-content:center;gap:6px;padding:9px 5px;min-height:62px;font-size:12px;line-height:1.25;text-align:center;white-space:normal}
 .console-actions .action-label-full{display:inline}
 .console-actions .action-label-compact{display:none}
 .song-heading .console-actions .new-split .action-label-full{display:none}
 .song-heading .console-actions .new-split .action-label-compact{display:inline}
}

@media(min-width:761px){
 .song-heading .console-actions{align-items:center}
 .song-heading .console-actions button{height:44px;min-height:44px;box-sizing:border-box;margin-block:0}
 .song-heading .console-actions .share-song{height:44px;min-height:44px}
}

/* Consistent controls and less repeated chrome. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.site-nav button{border:1px solid #45584e}
.site-nav button[aria-current=page]{border-color:#338f7d}
#practicePanel .section-heading{gap:10px;flex-wrap:wrap}
#practicePanel .section-heading .pro{margin-left:auto;font-size:9px}
.mixer-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}
.mixer-footer .console-wave-toggle{margin:0}
#practicePanel #countIn{appearance:none;min-width:100px;min-height:40px;padding:9px 34px 9px 12px;line-height:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23c2d1c8' stroke-width='1.5'/%3E%3C/svg%3E");background-position:right 10px center;background-size:16px;background-repeat:no-repeat}
#practicePanel #countInBpm{appearance:textfield;-moz-appearance:textfield;width:92px;min-height:40px;padding:9px 10px;line-height:20px;text-align:center}
#countInBpm::-webkit-inner-spin-button,#countInBpm::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#practicePanel .tap-tempo{min-height:40px;padding:9px 12px;line-height:20px}
.site-footer{box-sizing:border-box;padding-inline:20px;gap:12px}
.footer-wordmark{display:inline-flex;align-items:center;vertical-align:middle;gap:0}
.footer-wordmark svg{flex:none;margin-right:7px;width:22px;height:22px}
@media(min-width:761px){.song-heading .console-actions button,.song-heading .console-actions .share-song{height:38px;min-height:38px;padding-top:8px;padding-bottom:8px}}
@media(pointer:coarse){#practicePanel #countIn,#practicePanel #countInBpm,#practicePanel .tap-tempo,.song-heading .console-actions button,.song-heading .console-actions .share-song{min-height:44px}}

/* One outlined console strip per channel, with its waveform below its controls. */
.mix #stems .stem{border:1px solid #344039;border-radius:7px;padding:8px;margin-top:8px;column-gap:6px;row-gap:4px;background:rgba(18,25,21,.3)}
.mix #stems .stem-top,.mix #stems .fader{grid-row:1}
.mix #stems .channel-meter{position:relative;grid-column:2;grid-row:2;left:auto;right:auto;bottom:auto;width:calc(100% - 44px);margin:0;height:3px}
.mix #stems.show-waves .channel-wave{grid-column:1/-1;grid-row:3;margin:5px 0 0}
@media(max-width:760px){
 .mix #stems .stem-top{grid-column:1;grid-row:1}
 .mix #stems .fader{grid-column:1;grid-row:2}
 .mix #stems .channel-meter{grid-column:1;grid-row:3}
 .mix #stems.show-waves .channel-wave{grid-row:4}
}

.demo-intro{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin-top:8px;color:#91a89e;font-size:13px}
.demo-intro .demo-start{margin:0;padding:6px 0;min-height:36px;border:0;background:transparent;color:#70d5bf;font-size:13px;text-decoration:underline;text-underline-offset:4px}
.demo-intro .demo-start:hover{color:#c1f3e5}

.player #wave{margin-top:38px}
#regionLabel{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:18px}
.song-heading .console-actions button.is-working:disabled{opacity:1;cursor:progress}
.song-heading .console-actions button.is-working::before{content:'';box-sizing:border-box;width:16px;height:16px;flex:none;background:none;mask:none;-webkit-mask:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:button-working .8s linear infinite}
@keyframes button-working{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.song-heading .console-actions button.is-working::before{animation:none}}

/* Reserve the same comfortable arrow inset on every native selector. */
.page-view select,#accountDialog select,#flowDialog select,#practicePanel #countIn{appearance:none;-webkit-appearance:none;padding:10px 36px 10px 12px;min-height:44px;line-height:20px;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23c2d1c8' stroke-width='1.5'/%3E%3C/svg%3E");background-position:right 12px center;background-size:16px;background-repeat:no-repeat}
#mixPanel #instrument{min-width:110px;max-width:160px;padding-right:36px}

.player #wave,.mix #stems .channel-wave{cursor:text}

/* Keep keyboard focus visible without the oversized halo. */
body button:focus-visible,body input:focus-visible,body select:focus-visible,body a:focus-visible{outline-width:1px;outline-offset:2px}
#practicePanel .count-row{justify-content:flex-start;gap:8px 12px}
#practicePanel .count-row>div{flex:none}
#practicePanel #countIn{width:92px;min-width:92px;min-height:36px;padding-top:7px;padding-bottom:7px}
#practicePanel #countInBpm{width:80px;min-height:36px;padding:7px 8px}
#practicePanel .tap-tempo{min-height:36px;padding:7px 10px}
#practicePanel .count-row .song-bpm{gap:6px}
@media(pointer:coarse){#practicePanel #countIn,#practicePanel #countInBpm,#practicePanel .tap-tempo{min-height:44px}}

/* Centre channel names and switches against the fader and its meter. */
.mix #stems .stem{padding-left:12px;padding-right:12px}
.mix #stems .stem-top{margin:0;align-items:center}
.mix #stems .stem-top button{display:inline-flex;align-items:center;justify-content:center;line-height:1}
@media(min-width:761px){.mix #stems .stem-top{grid-row:1 / span 2;align-self:center}}
.site-footer .footer-meta{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px}
.site-footer .footer-wordmark{display:inline-block;position:relative;padding-left:29px;line-height:1.4}
.site-footer .footer-wordmark svg{position:absolute;left:0;top:50%;transform:translateY(-50%);margin:0}
.site-footer .footer-detail{display:inline-flex;align-items:baseline;gap:12px;margin:0;padding:0}
.site-footer .footer-detail::before{content:"·";margin:0}
#practicePanel .count-row{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:8px 16px;padding-top:20px}
#practicePanel .count-row .tempo-fields{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;grid-column:1;grid-row:1}
#practicePanel .count-row .tempo-hint{grid-column:1;grid-row:2}
#practicePanel .count-row .tap-tempo{grid-column:2;grid-row:1 / span 2;align-self:center;justify-self:end;width:76px;height:76px;min-height:76px;border-radius:50%;padding:8px;line-height:1.25;font-size:12px;box-shadow:0 0 0 1px #d4a84b14,0 0 18px #d4a84b24;transition:box-shadow .15s,border-color .15s}
/* Tap tempo is the one control here you hit in time with the music, so it gets a bigger target (76px, was 64)
   and the faintest gold glow to mark it out. The glow lifts a little under a pointer or a press. Hover is
   asked for only where a pointer can hover: on a touch screen it sticks after a tap and the pad stays lit. */
#practicePanel .count-row .tap-tempo:active{box-shadow:0 0 0 1px #d4a84b2e,0 0 24px #d4a84b3d;border-color:#8a7240}
@media(hover:hover){#practicePanel .count-row .tap-tempo:hover{box-shadow:0 0 0 1px #d4a84b2e,0 0 24px #d4a84b3d;border-color:#8a7240}}
#practicePanel>.preview-note:empty{display:none}
@media(max-width:760px){#practicePanel .count-row{padding-top:16px}.tempo-fields>div{flex-basis:100%}}
.library-loading{display:flex;align-items:center;gap:12px;min-height:64px;color:#a8c1b8}
.library-loading-bars{display:flex;align-items:center;gap:3px;height:24px}
.library-loading-bars i{display:block;width:3px;height:18px;border-radius:2px;background:#2dd4bf;animation:library-loading-bar .9s ease-in-out infinite alternate}
.library-loading-bars i:nth-child(2){animation-delay:-.6s}.library-loading-bars i:nth-child(3){animation-delay:-.3s}.library-loading-bars i:nth-child(4){animation-delay:-.75s}
@keyframes library-loading-bar{from{transform:scaleY(.3);opacity:.5}to{transform:scaleY(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.library-loading-bars i{animation:none}}
#splitProgress~button[data-page=practice]{margin-top:12px}

#practicePanel .count-row .song-bpm{gap:12px}
#practicePanel #countInBpm.tempo-updated{animation:tempo-value-pulse .4s ease-out}
@keyframes tempo-value-pulse{0%{background:#574526;box-shadow:0 0 0 2px #d4a84b80}100%{background:#191815;box-shadow:0 0 0 0 #d4a84b00}}
@media(prefers-reduced-motion:reduce){#practicePanel #countInBpm.tempo-updated{animation:none;border-color:#e0c17b}}

.mix #stems .stem-top button{border-color:#8c713a}
.mix #stems .stem-top button:hover,.mix #stems .stem-top button:focus-visible{border-color:#e0c17b}
.mix #stems .stem-top button[aria-pressed=true]{border-color:#d4a84b}

/* Shared page rhythm: keep tab headings and supporting copy on the same baselines. */
main.page-view{padding-top:48px}
.page-view .page-intro,#songsView .page-intro{margin:0 0 28px;max-width:none}
.page-view .page-intro .eyebrow,#songsView .page-intro .eyebrow,#practiceView .breadcrumb{display:block;font-size:10px;line-height:16px;letter-spacing:1.8px;margin:0 0 12px}
.page-view .page-intro h1,#practiceView .song-copy h1{font-size:32px;line-height:1.2;margin:0 0 16px}
.page-view .page-intro>p,#practiceView .song-copy>p{font-size:14px;line-height:1.5;margin:0;color:#aaa}
@media(max-width:760px){
 main.page-view{padding-top:24px}
 .page-view .page-intro h1,#practiceView .song-copy h1{font-size:28px}
}

.timeline-view-controls{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin:12px 0 0;min-height:36px}
.timeline-view-controls button{font-size:12px;padding:6px 10px;min-height:36px;border-color:#756038;color:#e0c17b}
.loop-selection-status{margin-right:auto;font-size:12px;color:#acaaa2}
.export-scope{display:grid;gap:8px;margin-top:18px;font-size:14px}
.export-scope select{width:100%;min-width:0}
.song-title-row,.song-copy,.now-playing{min-width:0}
.song-copy h1{overflow-wrap:anywhere}
#flowDialog,#accountDialog{max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box}
@media(max-width:760px){.timeline-view-controls button{min-height:44px}.timeline-view-controls{margin-top:8px}.loop-selection-status{flex-basis:100%}}
/* Scrolling that reaches the end of the console stays in the console instead of moving the page behind the frame. */
html{overscroll-behavior-y:contain}

/* Separation picker: three tiles read as one comparison. Each has ONE headline (the mode name); the stem count is a quiet label above it, the stems are plain text, and quality, speed and price sit on rows at the same height in every tile so the eye compares sideways. No times in seconds: they depend on the song. */
#uploadView .split-models{gap:14px}
#uploadView .split-models label.model-card{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:22px 22px 18px;position:relative;border-radius:14px;transition:border-color .15s,background .15s}
#uploadView .split-models label.model-card>span:nth-child(2){flex:none;min-width:0}
.split-models label.model-card input{position:absolute;opacity:0!important;pointer-events:none}
.model-card:has(input:focus-visible){outline:2px solid #2dd4bf;outline-offset:2px}
.model-head{display:flex;align-items:center;justify-content:space-between;height:18px}
.model-count{font:10px/1 'Space Mono',monospace;letter-spacing:1.4px;text-transform:uppercase;color:#2dd4bf}
.model-check{width:18px;height:18px;border-radius:50%;border:1.5px solid #3a4642;box-sizing:border-box;position:relative;transition:background .15s,border-color .15s}
.model-card:has(input:checked) .model-check{background:#2dd4bf;border-color:#2dd4bf}
.model-card:has(input:checked) .model-check::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #0a0a0a;border-width:0 2px 2px 0;transform:rotate(45deg)}
.model-card strong{font:600 21px/1.15 Montserrat,sans-serif;letter-spacing:-.2px;color:#f4f8f6;margin-top:12px}
#uploadView .split-models .model-card small{margin:8px 0 0;font-size:13px;line-height:1.5;color:#98a8a2;min-height:3em}
.model-list{font:13px/1.4 Archivo,sans-serif;color:#dfe8e4;margin-top:18px;padding-top:16px;border-top:1px solid #ffffff10}
.model-list b{font-weight:500;color:#f5c451}
.model-meters{display:grid;gap:9px;margin-top:16px}
.model-meter{display:flex;align-items:center;justify-content:space-between;font:12px Archivo,sans-serif;color:#98a8a2}
.model-meter em{font-style:normal}
.model-bars{display:flex;gap:4px}
.model-bars i{display:block;width:22px;height:3px;border-radius:2px;background:#2b3532}
.model-bars i.on{background:#2dd4bf}
.model-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;margin-top:auto;padding-top:16px}
.model-meters+.model-price{border-top:1px solid #ffffff10;margin-top:18px}
.split-models .model-card .pro,.split-models .model-card .free-tag{margin:0;padding:0;border:0;background:none;border-radius:0;font:10px/1.4 'Space Mono',monospace;letter-spacing:1.2px;white-space:nowrap}
.split-models .model-card .free-tag{color:#2dd4bf}.split-models .model-card .pro{color:#f5c451}
.model-foot{font:12px Archivo,sans-serif;color:#98a8a2}
.model-foot[hidden]{display:none}
/* The top rung is the offer, so it looks like one even before it is chosen. */
.split-models label.model-pro{border-color:#d4a84b55;background:#d4a84b08}
.split-models label.model-pro:has(input:checked){border-color:#f5c451;background:#d4a84b12}
.model-pro .model-count{color:#f5c451}
.model-pro .model-bars i.on{background:#f5c451}
.model-pro:has(input:checked) .model-check{background:#f5c451;border-color:#f5c451}
/* Once a mode is part of the account (Pro, trial, a held credit) the card stops selling and reads as owned. */
.model-card.owned .model-foot{color:#8cdace}
@media(max-width:760px){
 #uploadView .split-models label.model-card{padding:16px 16px 14px}
 #uploadView .split-models .model-card small{display:none}
 .model-card strong{font-size:18px;margin-top:8px}
 .model-list{margin-top:10px;padding-top:0;border-top:0;color:#b9c6c1}
 .model-meters{grid-template-columns:1fr 1fr;gap:8px 20px;margin-top:12px}
 .model-bars i{width:16px}
 .model-meters+.model-price{margin-top:12px;padding-top:12px}
}
/* Side by side, the three cards share one set of rows, so every title, description, divider, stem
   list, meter and price line sits at the same height whatever each card's text runs to. Without
   this each card laid out its own rows: Full Separation's third line of description and second
   line of stems pushed its dividers and meters below the other two. Browsers without subgrid keep
   the stacked-flex layout above. */
@supports (grid-template-rows:subgrid){
 @media(min-width:761px){
  #uploadView .split-models label.model-card{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:0;align-content:start}
  #uploadView .split-models .model-card small{min-height:0}
  .model-price{margin-top:0;align-self:start}
  .model-meters+.model-price{margin-top:18px}
 }
}
/* Nothing left this month: the card steps back, and a tap opens the offer. The price line keeps full strength so the reason stays readable. */
.split-models label.model-card.spent{border-style:dashed}
.split-models label.model-card.spent:has(input:checked){border-color:#2a2a2a;background:#161616}
.model-card.spent>*:not(.model-price):not(input){opacity:.4}
.model-card.spent .model-check{visibility:hidden}
.model-card.spent .free-tag{color:#c9cfcc}
/* Two-statement headline: same voice, the second one quieter. */
#uploadView .page-intro h1 .hero-second{display:block;margin-top:.12em;color:#5eead4;font-size:.78em;font-weight:600;letter-spacing:-.2px}
#uploadView .page-intro p{max-width:none}
/* On a phone the sentence drops its first half, which the headline and tiles already say. */
@media(max-width:760px){#uploadView .page-intro .intro-lead{display:none}}