Download style.css from TuneJury/landing: direct link, hf CLI and curl.
- Browser
- Download file 32 kB
-
https://huggingface.co/spaces/TuneJury/landing/resolve/main/style.css
- Command line
-
hf download hf://spaces/TuneJury/landing/style.css
-
curl -L -o style.css https://huggingface.co/spaces/TuneJury/landing/resolve/main/style.css
32 kB
| @font-face{font-family:DM;src:url('assets/dm-sans.woff') format('woff');font-weight:100 1000;font-display:swap}@font-face{font-family:Caveat;src:url('assets/caveat.woff') format('woff');font-weight:400 700;font-display:swap} | |
| :root{--ink:#303638;--muted:#60676a;--orange:#e75025;--line:#dedfdb;--paper:#f8f7f3;--soft:#fff3ec;--radius:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;color:var(--ink);background:#fff;font-family:DM,Arial,sans-serif;font-size:20px;line-height:1.55;font-weight:420}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3,h4{line-height:1.12;font-weight:560;letter-spacing:-.045em;text-wrap:balance}h1{font-size:clamp(64px,6.9vw,102px);font-weight:560;line-height:1.04}h1 span{color:var(--orange)}h2{font-size:clamp(36px,4.2vw,60px)}h3{font-size:30px}h4{font-size:26px}p{max-width:70ch;text-wrap:pretty}a{color:inherit;text-underline-offset:5px}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #247bb5;outline-offset:5px}img{max-width:100%;height:auto;display:block}button{color:var(--ink)}.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}.skip{position:fixed;top:-80px;left:16px;z-index:100;background:#fff;padding:12px}.skip:focus{top:10px}.header{position:sticky;top:0;background:#ffffffed;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);z-index:20}.nav{height:84px;display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:12px;font-size:27px;font-weight:650;text-decoration:none;letter-spacing:-1px}.brand img{width:48px;height:35px}.nav nav{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:550}.nav a{text-decoration:none}.nav nav a:not(.button):hover,.text-link:hover{color:var(--orange)}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:8px;padding:15px 23px;text-decoration:none;font-weight:550;font-size:17px;line-height:1.3;min-height:48px}.button:hover{background:var(--orange);border-color:var(--orange)}.button.small,.outline.small{font-size:15px;min-height:42px;padding:10px 17px}.outline{background:transparent;border:1px solid #a7abaa;border-radius:7px}.text-link{font-weight:550;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}.actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap}.hero{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:45px;padding-block:66px 54px;min-height:650px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:650;margin-bottom:22px;color:var(--muted)}.hero .eyebrow{color:var(--orange)}.hero .intro{font-size:24px;font-weight:500;line-height:1.4;margin:27px 0 14px;max-width:450px}.body-large{font-size:20px;color:var(--muted);max-width:480px}.hero .actions{margin-top:30px}.hero-art img{width:410px;margin:auto}.hero-art figcaption{text-align:center;margin-top:4px}.hand{font-family:Caveat,cursive;font-size:38px;font-weight:500;color:var(--orange);line-height:1.15}.video-link{display:flex;gap:9px;align-items:center;padding:0;background:none;border:0;font-size:16px;margin-top:23px}.video-link span{color:var(--muted);margin-left:4px}.video-link:hover{text-decoration:underline}.research-strip{padding:24px 0 28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.paper-title{font-size:18px;font-weight:550;max-width:none}.authors{font-size:16px;line-height:1.7;color:var(--muted);margin:9px 0;max-width:none}.research-links{display:flex;gap:24px;font-size:16px;font-weight:550}.section{padding-block:90px;scroll-margin-top:20px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:30px}.section-aside{font-size:20px;color:var(--muted);padding-bottom:4px;flex-shrink:0}.tabs{display:flex;border-bottom:1px solid var(--line);gap:28px;margin:38px 0 0}.tabs button{border:0;background:none;padding:14px 0 16px;font-weight:550;font-size:17px;position:relative;color:var(--muted)}.tabs button[aria-selected=true]{color:var(--ink)}.tabs button[aria-selected=true]:after{content:'';height:3px;background:var(--orange);position:absolute;bottom:-1px;left:0;right:0}.example-intro{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:36px;padding:28px 0 20px}.example-intro p{font-size:20px;color:var(--muted);margin:14px 0}.meta{font-size:16px;color:var(--muted);font-weight:450}.pick-art{width:340px;justify-self:center}.prompt{background:var(--paper);padding:18px 22px;border-radius:10px;margin:0 0 24px}.prompt summary{font-size:16px;font-weight:550;color:var(--muted);cursor:pointer}.prompt p{font-size:20px;margin-top:10px;max-width:100ch}.player-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.track{padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:white}.track.selected{border-color:#e8a58e;background:#fffaf7}.track-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.badge{font-size:12px;font-weight:650;border-radius:4px;padding:5px 9px;color:#a83412;background:#ffe8db;white-space:nowrap}.badge.neutral{background:#eef0ef;color:#60676a}.score-line{display:flex;align-items:baseline;justify-content:space-between;gap:18px;margin:15px 0 22px}.score-line span{font-size:16px;color:var(--muted)}.score-line strong{font-size:42px;font-weight:500;color:var(--orange);font-variant-numeric:tabular-nums;letter-spacing:-2px}.track audio{width:100%;height:42px;display:block}audio{max-width:100%;accent-color:var(--orange)}.note{font-size:16px;color:var(--muted);line-height:1.6;margin-top:16px;max-width:95ch}.credit{font-size:16px;color:var(--muted);margin-top:14px}.section-foot{border-top:1px solid var(--line);padding-top:24px;margin-top:30px;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:16px}.section-foot p{color:var(--muted)}.section-foot a{white-space:nowrap}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.how-section{background:var(--paper)}.how-art{background:#fff;border-radius:20px;padding:24px 8px}.how-section h2{font-size:clamp(34px,3.4vw,49px)}.how-section h2+p{margin-top:22px;color:var(--muted)}.pipeline{margin:27px 0 0;padding:0;list-style:none}.pipeline li{display:flex;gap:18px;border-top:1px solid var(--line);padding:17px 0}.pipeline p{font-size:20px;color:var(--muted);margin-top:5px}.pipeline strong{font-size:20px;font-weight:550}.step{font-size:12px;color:var(--orange);padding-top:5px;font-weight:600}.people-layout{gap:42px}.people-layout h2+p{margin-top:24px;color:var(--muted)}.training-number{margin-top:30px;display:flex;flex-direction:column}.training-number strong{font-size:70px;color:var(--orange);line-height:1.1;letter-spacing:-4px;font-weight:500}.training-number span{font-size:16px;margin-top:10px}.people-art{width:100%}.mixbar{display:flex;gap:3px;height:14px;border-radius:3px;overflow:hidden;margin-top:45px}.dataset-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:22px}.dataset-legend a{display:grid;grid-template-columns:10px 1fr;gap:3px 10px;text-decoration:none;font-size:16px}.dataset-legend a:hover{text-decoration:underline}.dataset-legend i{width:9px;height:9px;display:block;border-radius:50%;margin-top:8px}.dataset-legend b{grid-column:2;font-weight:450;color:var(--muted);font-size:15px}.results-section{background:#fff6ef}.results-grid{display:grid;grid-template-columns:.95fr 1fr;gap:110px;align-items:center}.results-grid h2+p{margin:25px 0;color:var(--muted);max-width:38ch}.results-grid a{font-size:16px}.result-number{font-size:116px;line-height:1;color:var(--orange);letter-spacing:-7px;font-weight:520}.result-number span{font-size:.67em}.result-desc{font-size:20px;margin:15px 0 30px}.result-desc strong{font-weight:600}.compare-row{display:flex;justify-content:space-between;font-size:15px;margin-top:16px}.compare-row b{font-weight:550}.bar{height:8px;background:#ebdfd7;margin-top:8px;border-radius:2px;overflow:hidden}.bar span{display:block;height:100%;background:var(--orange)}.bar.gray span{background:#9ca6aa}.muted{color:var(--muted)}.filter-small{width:250px}.explorer-intro{max-width:65ch;margin-bottom:30px;font-size:20px;color:var(--muted)}.explorer{border:1px solid var(--line);border-radius:var(--radius);padding:30px}.explorer-controls{display:flex;justify-content:space-between;gap:40px;align-items:start;margin-bottom:35px}.explorer-controls h3{font-size:25px}.explorer-controls p{font-size:16px;color:var(--muted);margin-top:9px}.range-control{width:38%;min-width:260px}.range-control label{font-size:16px;display:flex;justify-content:space-between;gap:20px}.range-control output{color:var(--orange);font-variant-numeric:tabular-nums;font-weight:650}.range-control input{width:100%;accent-color:var(--orange);margin:14px 0 0;cursor:pointer;min-height:24px}.range-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}.chart-heading,.dist-row{display:grid;grid-template-columns:195px 1fr 100px;gap:24px;align-items:center}.chart-heading{font-size:12px;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--line)}.chart-heading>span:last-child{text-align:right}.gray-key:before,.orange-key:before{content:'';display:inline-block;width:8px;height:8px;border-radius:2px;background:#d5dadd;margin:0 6px 0 12px}.orange-key:before{background:#ef997b}.dist-row{padding-top:18px}.dist-name{font-size:16px;font-weight:500;line-height:1.25}.dist-name small{display:block;font-size:12px;color:var(--muted);margin-top:5px;font-weight:400}.dist-viz{height:55px;position:relative}.dist-viz svg{width:100%;height:100%;overflow:visible}.dist-dot{position:absolute;bottom:8px;width:24px;height:24px;transform:translateX(-50%);border:5px solid white;border-radius:50%;padding:0;background:#626e74;box-shadow:0 0 0 1px #879094}.dist-dot:hover,.dist-dot[aria-pressed=true]{background:var(--orange);box-shadow:0 0 0 2px var(--orange)}.dist-pct{text-align:right;font-size:17px;font-variant-numeric:tabular-nums}.axis{display:flex;justify-content:space-between;padding-left:219px;padding-right:124px;margin-top:14px;font-size:12px;color:var(--muted)}.explorer-bottom{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:16px;color:var(--muted)}#example-status{display:block;color:var(--orange);font-size:16px;margin-top:3px}.method-note{margin-top:25px;border-top:1px solid var(--line);padding-top:22px}.method-note summary{font-size:16px;cursor:pointer;font-weight:550}.method-note p{font-size:16px;max-width:none;color:var(--muted);margin:15px 0}.research-section{background:var(--paper)}.research-intro{margin:24px 0 35px;color:var(--muted);max-width:67ch}.research-detail{border-top:1px solid #d1d4ce}.research-detail:last-child{border-bottom:1px solid #d1d4ce}.research-detail summary{cursor:pointer;padding:25px 28px 25px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;list-style:none;position:relative;font-size:21px;font-weight:500;letter-spacing:-.5px}.research-detail summary::-webkit-details-marker{display:none}.research-detail summary:after{content:'+';position:absolute;right:0;font-size:26px;font-weight:400;color:var(--orange)}.research-detail[open] summary:after{content:'−'}.detail-tag{font-size:13px;letter-spacing:0;font-weight:400;color:var(--muted);padding-right:20px;white-space:nowrap}.research-inner{padding:0 0 30px}.research-inner p{margin:0 0 20px;font-size:20px}.research-inner h3{font-size:23px;margin-bottom:12px}.mini-case{padding:20px 0;border-top:1px solid var(--line)}.mini-pair{display:grid;grid-template-columns:1fr 1fr;gap:26px}.mini-pair label{font-size:16px;font-weight:500}.mini-pair audio{display:block;width:100%;margin-top:12px;height:40px}.closing{display:flex;justify-content:space-between;align-items:center;gap:60px;padding-block:75px}.closing .hand{margin-bottom:18px}.closing h2{font-size:65px}.closing p:not(.hand){margin:25px 0;color:var(--muted)}.closing img{width:290px;margin-right:50px}.footer{border-top:1px solid var(--line);padding:30px 0 40px;display:flex;align-items:start;gap:30px;justify-content:space-between}.footer .brand{font-size:21px}.footer .brand img{width:36px;height:28px}.footer p{font-size:16px;max-width:380px;color:var(--muted)}.footer>div{display:flex;gap:18px;font-size:16px}.footer p span{display:inline-block;margin-top:6px}dialog{width:min(1050px,94vw);padding:20px;border:0;border-radius:14px;color:var(--ink);box-shadow:0 30px 100px #0005}dialog::backdrop{background:#202526c7}.modal-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.modal-heading h2{font-size:24px}video{display:block;width:100%;max-height:76vh;border-radius:5px;background:#000}[hidden]{display:none} | |
| @media(min-width:1500px){.hero{padding-block:76px 70px}} | |
| @media(max-width:1000px){.wrap{width:calc(100% - 64px)}.nav nav{gap:20px}.nav nav a[href='#how']{display:none}.hero{gap:25px;min-height:590px}.hero-art img{width:350px}.hero .intro{font-size:21px}.hero .actions{gap:20px}.hero h1{font-size:76px}.two-col{gap:38px}.results-grid{gap:55px}.chart-heading,.dist-row{grid-template-columns:165px 1fr 80px;gap:18px}.axis{padding-left:183px;padding-right:98px}.section-foot{align-items:start}.section-aside{max-width:26ch;flex-shrink:1}.closing img{margin-right:0}.detail-tag{display:none}.footer{flex-wrap:wrap}} | |
| @media(max-width:700px){html{scroll-padding-top:80px}body{font-size:18px}.wrap{width:calc(100% - 40px)}.nav{height:70px;gap:12px}.brand{font-size:23px;gap:8px}.brand img{width:38px;height:29px}.nav nav{gap:0}.nav nav>a:not(.button){display:none}.nav .button.small{font-size:13px;padding:10px 12px;min-height:40px}.hero{grid-template-columns:1fr;gap:30px;padding-block:44px 35px;min-height:0}.hero h1{font-size:clamp(47px,15vw,62px);letter-spacing:-3px}.eyebrow{font-size:11px;letter-spacing:.1em;margin-bottom:18px}.hero .intro{font-size:22px;max-width:310px;margin-top:23px}.body-large{font-size:18px;max-width:35ch}.hero .actions{gap:16px;margin-top:24px}.button{font-size:15px;padding:14px 17px}.hero .text-link{font-size:15px}.video-link{font-size:15px;gap:7px}.video-link span{font-size:15px}.hero-art{justify-self:center}.hero-art img{width:250px}.hand{font-size:32px}.hero-art figcaption{margin-top:8px}.research-strip{padding-block:22px}.paper-title{font-size:16px;line-height:1.45}.authors{font-size:15px;line-height:1.75}.research-links{gap:18px;flex-wrap:wrap;font-size:15px}.section{padding-block:58px}.section-top{display:block;margin-bottom:24px}.section-aside{margin-top:20px;max-width:100%;font-size:18px}.section-aside br{display:none}h2{font-size:39px}h3{font-size:27px}h4{font-size:24px}.tabs{gap:23px;margin-top:25px}.tabs button{font-size:14px;padding:14px 0}.example-intro{grid-template-columns:1fr;gap:8px;padding-block:25px 20px}.example-intro p{font-size:18px;margin-block:12px}.meta{font-size:15px}.pick-art{width:260px;margin-top:15px}.prompt{padding:15px 17px}.prompt p{font-size:18px;line-height:1.6}.player-grid{grid-template-columns:1fr;gap:16px}.track{padding:20px}.score-line strong{font-size:40px}.score-line span{font-size:15px}.note{font-size:15px}.section-foot{flex-direction:column;gap:17px;font-size:15px}.section-foot a{white-space:normal}.two-col{grid-template-columns:1fr;gap:30px}.how-art{grid-row:2;padding:16px}.how-section h2{font-size:39px}.pipeline li{padding:15px 0}.people-layout h2+p{font-size:16px}.people-art{width:100%;max-width:430px;margin:auto}.training-number strong{font-size:65px}.mixbar{margin-top:32px}.dataset-legend{grid-template-columns:1fr 1fr;row-gap:19px}.dataset-legend a{font-size:15px}.results-grid{grid-template-columns:1fr;gap:35px}.results-grid h2 br{display:none}.results-grid h2+p{max-width:100%;margin-block:18px}.result-number{font-size:100px;letter-spacing:-5px}.result-desc{font-size:18px}.filter-small{width:220px;margin:24px auto 0}.explorer-intro{font-size:18px}.explorer{padding:20px 16px}.explorer-controls{display:block;margin-bottom:28px}.explorer-controls h3{font-size:24px}.range-control{width:100%;min-width:0;margin-top:25px}.chart-heading{display:flex;justify-content:space-between;font-size:11px}.chart-heading>span:nth-child(2){display:none}.dist-row{grid-template-columns:1fr 65px;gap:7px 12px;padding-top:22px}.dist-name{font-size:15px;display:flex;justify-content:space-between;align-items:baseline;gap:10px;grid-column:1}.dist-name small{font-size:11px;margin-top:0}.dist-pct{grid-column:2;grid-row:1;font-size:15px}.dist-viz{grid-column:1 / -1;height:50px}.axis{padding:0;margin-top:15px;font-size:11px}.explorer-bottom{font-size:15px;align-items:start;gap:12px}.outline.small{font-size:12px;padding:8px 10px;white-space:nowrap}.method-note summary{font-size:15px;line-height:1.5}.method-note p{font-size:15px}.research-detail summary{font-size:19px;line-height:1.35;padding-block:22px}.research-intro{font-size:16px}.mini-pair{grid-template-columns:1fr;gap:20px}.closing{display:grid;grid-template-columns:1fr;gap:30px}.closing h2{font-size:48px}.closing img{width:220px;justify-self:center}.closing p:not(.hand){font-size:18px}.closing .actions{gap:20px}.footer{gap:22px}.footer p{max-width:none;font-size:15px}.footer>div{gap:24px}.modal-heading h2{font-size:21px}dialog{padding:12px}.explorer .dist-pct{grid-row:auto}.dist-row{position:relative}.dist-row .dist-pct{position:absolute;right:0;top:22px}.dist-row .dist-name{grid-column:1/-1;padding-right:73px}} | |
| @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}@media print{.header{position:static}.button,.video-link,audio,video{display:none}details>div,details>p{display:block}.section{padding-block:35px}body{font-size:13px}} | |
| .axis{position:relative;height:20px;padding:0;margin-left:219px;margin-right:124px}.axis span{position:absolute;transform:translateX(-50%)}.axis span:first-child{transform:none}.axis span:last-child{transform:translateX(-100%)} | |
| @media(max-width:1000px){.axis{margin-left:183px;margin-right:98px}} | |
| @media(max-width:700px){.axis{margin-left:0;margin-right:0}.hero{padding-top:35px}.hero-art img{width:230px}} | |
| video{aspect-ratio:16/9;object-fit:contain} | |
| /* Sentence-case section labels and deliberate phrase grouping. */ | |
| .eyebrow{font-size:17px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.4;margin-bottom:16px} | |
| .hero .eyebrow{color:var(--muted)} | |
| .hero .intro{max-width:none;text-wrap:balance} | |
| .hero .intro span,.hero .body-large span,.reward-heading h2 span{display:block} | |
| .hero .body-large{max-width:none;font-size:20px;text-wrap:pretty} | |
| h2,h3,h4,.section-aside,.reward-lead,.reward-method>p{text-wrap:balance} | |
| p,.authors{orphans:2;widows:2;text-wrap:pretty} | |
| .reward-section{background:#fff} | |
| .reward-heading{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:42px;margin-bottom:40px} | |
| .reward-heading h2{font-size:clamp(36px,3.5vw,49px);line-height:1.12;letter-spacing:-1.8px} | |
| .reward-lead{font-size:20px;line-height:1.6;color:var(--muted);margin:24px 0 20px;max-width:49ch} | |
| .reward-heading figure{margin:0} | |
| .reward-heading img{display:block;width:100%;height:auto} | |
| .reward-heading figcaption{text-align:center;color:var(--orange);font-size:32px;margin-top:-8px} | |
| .reward-methods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} | |
| .reward-method{min-width:0;padding:25px 22px 23px;background:var(--paper);border-radius:16px;display:flex;flex-direction:column} | |
| .reward-method .method-label{font-size:15px;font-weight:500;color:var(--orange);margin:0 0 12px;text-wrap:initial} | |
| .reward-method h3{font-size:29px;letter-spacing:-.9px;line-height:1.2;margin-bottom:17px;text-wrap:initial} | |
| .reward-method>p:not(.method-label):not(.method-flow){font-size:20px;line-height:1.6;color:var(--muted);min-height:104px} | |
| .reward-method .method-flow{font-size:16px;font-weight:500;display:flex;justify-content:space-between;gap:7px;align-items:center;margin:22px 0 26px;padding-bottom:21px;border-bottom:1px solid var(--line);white-space:nowrap} | |
| .method-flow span{color:var(--orange)} | |
| .reward-example h4{font-size:16px;font-weight:550;letter-spacing:0;line-height:1.4;margin-bottom:20px;min-height:23px;text-wrap:initial} | |
| .reward-example label{display:block;font-size:16px;color:var(--muted);margin-bottom:17px} | |
| .reward-example label strong{float:right;font-weight:600;color:var(--orange);font-variant-numeric:tabular-nums} | |
| .reward-example audio{display:block;width:100%;height:40px;margin-top:8px} | |
| .reward-example details{border-top:1px solid var(--line);padding-top:14px;font-size:16px;color:var(--muted)} | |
| .reward-example summary{cursor:pointer;font-size:16px} | |
| .reward-example details p{margin-top:12px;line-height:1.6} | |
| .reward-context{font-size:16px;color:var(--muted);line-height:1.6;max-width:100ch;margin-top:24px} | |
| @media(min-width:701px) and (max-width:1050px){.nav nav a[href='#results']{display:none}.hero .body-large span{display:inline}.hero .body-large span+span:before{content:' '}.hero .intro span{white-space:nowrap}.hero .intro{font-size:20px}.reward-methods{gap:14px}.reward-method{padding:22px 16px}.reward-method h3{font-size:24px}.reward-method .method-flow{font-size:13px;gap:4px}.reward-method>p:not(.method-label):not(.method-flow){min-height:154px}.reward-example h4{min-height:45px}} | |
| @media(max-width:700px){.eyebrow{font-size:16px;letter-spacing:0;margin-bottom:16px}.hero .intro{font-size:21px;max-width:none}.hero .intro span{white-space:nowrap}.hero .body-large{font-size:18px;max-width:none}.hero .body-large span{display:inline}.hero .body-large span+span:before{content:' '}.hero .body-large{text-wrap:balance}.reward-heading{grid-template-columns:1fr;gap:20px;margin-bottom:28px}.reward-heading h2{font-size:36px;letter-spacing:-1.1px}.reward-heading h2 span{display:inline}.reward-heading h2 span+span:before{content:' '}.reward-lead{font-size:18px;margin:20px 0 18px}.reward-heading figure{max-width:450px;margin:0 auto}.reward-heading figcaption{font-size:29px;margin-top:-5px}.reward-methods{grid-template-columns:1fr;gap:20px}.reward-method{padding:25px}.reward-method h3{font-size:29px}.reward-method>p:not(.method-label):not(.method-flow){min-height:0;text-wrap:pretty}.reward-example h4{min-height:0}.reward-context{font-size:15px}.reward-method .method-flow{margin:20px 0 22px}} | |
| @media(max-width:359px){.hero .intro{font-size:18px}.reward-heading h2{font-size:32px}.reward-method{padding:20px}.reward-method .method-flow{font-size:14px}} | |
| .hero h1>.hero-line{color:var(--ink);white-space:nowrap} | |
| @media(min-width:701px) and (max-width:1000px){.hero h1{font-size:clamp(48px,7.3vw,72px)}} | |
| .hero .body-large .hero-clause{display:inline-block}.hero .body-large .hero-conclusion{display:block}.hero .body-large span+span:before{content:none} | |
| @media(max-width:700px){.hero .body-large{text-wrap:initial}.hero .body-large .hero-clause{display:block}.hero .body-large .hero-conclusion{white-space:nowrap;font-size:inherit}} | |
| @media(max-width:700px){.reward-heading h2 span{display:block}.reward-heading h2 span+span:before{content:none}} | |
| .authors span{white-space:nowrap} | |
| .reward-section{padding-block:64px 72px}.reward-heading img{aspect-ratio:1.9;object-fit:cover;object-position:center}.reward-heading figcaption{margin-top:4px} | |
| @media(max-width:700px){.reward-section{padding-block:52px}.reward-heading figcaption{margin-top:10px}} | |
| /* Matched illustration stage across the three reward-model cards. */ | |
| .method-art{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain;margin:1px auto 20px}.reward-method>p:not(.method-label):not(.method-flow){min-height:104px}.reward-method .method-flow{margin-top:16px} | |
| @media(min-width:701px) and (max-width:1050px){.reward-methods{grid-template-columns:1fr}.reward-method{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;padding:28px}.reward-method .method-label,.reward-method h3,.reward-method>p,.reward-example{grid-column:1}.reward-method .method-art{grid-column:2;grid-row:1/5;align-self:center;margin:0}.reward-method>p:not(.method-label):not(.method-flow){min-height:0}.reward-method .method-flow{font-size:15px}.reward-example{grid-column:1/-1}.reward-example h4{min-height:0}} | |
| @media(max-width:700px){.method-art{max-width:390px;margin:0 auto 20px}.reward-method>p:not(.method-label):not(.method-flow){min-height:0}} | |
| /* Keep supporting text readable on small screens. */ | |
| @media screen and (max-width:700px){ | |
| #example-status,.credit,.explorer-controls p,.footer>div,.mini-pair label,.prompt summary,.reward-example details,.reward-example label,.reward-example summary{font-size:15px} | |
| .pipeline p,.pipeline strong,.research-inner p,.reward-method>p:not(.method-label):not(.method-flow){font-size:18px} | |
| } | |
| /* Keep comparison steps compact and audio controls proportionate to the card. */ | |
| @media screen{ | |
| .reward-method .method-label{font-size:16px} | |
| .reward-method .method-flow{justify-content:flex-start;gap:12px;width:fit-content;max-width:100%;flex-wrap:wrap;white-space:normal;border-bottom:0;padding-bottom:0;font-size:17px;margin:16px 0 22px} | |
| .reward-example h4{font-size:18px;min-height:0;margin-bottom:14px} | |
| .reward-example label{font-size:18px;max-width:460px;min-width:0;margin-bottom:18px} | |
| .reward-example audio{min-width:0} | |
| } | |
| @media screen and (min-width:801px) and (max-width:1050px){ | |
| .reward-example{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-items:start} | |
| .reward-example h4,.reward-example details{grid-column:1/-1} | |
| } | |
| @media screen and (max-width:700px){ | |
| .reward-method .method-flow{font-size:16px;gap:10px} | |
| .reward-example h4{font-size:17px} | |
| .reward-example label{font-size:16px} | |
| } | |
| /* Final CTA: live typography retained; playable example and responsive artwork. */ | |
| .closing-with-card{display:grid;position:relative;grid-template-columns:minmax(0,1.15fr) minmax(170px,.6fr) minmax(370px,1fr);grid-template-rows:auto auto;gap:0 24px;align-items:center} | |
| .closing-with-card .closing-intro{grid-column:1;grid-row:1;align-self:end;min-width:0} | |
| .closing-with-card .closing-body{grid-column:1;grid-row:2;align-self:start;min-width:0} | |
| .closing-with-card h2{font-size:65px;text-wrap:balance} | |
| .closing-with-card .hand{text-wrap:balance} | |
| .closing-with-card .closing-body p{margin:22px 0 0;text-wrap:pretty} | |
| .closing-with-card .closing-body .closing-detail{margin-top:12px} | |
| .closing-with-card .closing-body .actions{margin-top:28px;gap:20px} | |
| .closing-with-card .closing-art{grid-column:2;grid-row:1 / 3;margin:0;min-width:0;align-self:center} | |
| .closing-with-card .closing-art img{width:100%;height:auto;margin:0;max-width:none} | |
| .closing-with-card .audio-card-preview{grid-column:3;grid-row:1 / 3;background:white;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 12px 35px #3036380c;min-width:0;align-self:center} | |
| .closing-with-card .audio-card-preview p{margin:0;color:var(--muted)} | |
| .audio-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px;font-size:16px;line-height:1.4} | |
| .example-label{font-weight:600;color:var(--ink)}.card-format{font-size:14px;background:#f3f3ef;padding:5px 8px;border-radius:6px;white-space:nowrap;color:var(--muted)} | |
| .audio-card-score{display:flex;align-items:baseline;justify-content:space-between;gap:10px;white-space:nowrap}.audio-card-score>span{font-size:20px;font-weight:650}.audio-card-score strong{font-size:42px;line-height:1.1;letter-spacing:-1.8px;color:var(--orange);font-weight:700;font-variant-numeric:tabular-nums} | |
| .closing-with-card p.audio-card-model{font-size:16px;margin-top:10px} | |
| .audio-card-track{background:var(--paper);border-radius:12px;padding:18px 16px 16px;margin-top:24px}.audio-card-track h3{font-size:28px;letter-spacing:-.6px;line-height:1.2} | |
| .closing-with-card .audio-card-track p{font-size:16px;margin-top:6px}.audio-card-range{display:flex;justify-content:space-between;gap:6px 12px;font-size:16px;color:var(--muted);margin:18px 0 12px;flex-wrap:wrap}.audio-card-range>span:last-child{white-space:nowrap;color:var(--ink)} | |
| .audio-card-track audio{display:block;width:100%;height:44px}.closing-with-card p.audio-card-caption{font-size:18px;line-height:1.55;margin:20px 0;text-wrap:pretty} | |
| .audio-card-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:16px}.card-download{font-weight:550;text-decoration:none;border:1px solid var(--line);border-radius:7px;padding:10px;white-space:nowrap}.card-download:hover{border-color:var(--orange);color:var(--orange)} | |
| .closing-with-card p.audio-card-credit{font-size:15px;line-height:1.5;margin-top:18px;color:var(--muted);text-wrap:pretty} | |
| @media(min-width:701px) and (max-width:1180px){.closing-with-card{grid-template-columns:minmax(0,1fr) minmax(360px,1fr);gap:0 36px}.closing-with-card .closing-art{grid-column:1;grid-row:3;width:170px;justify-self:center;margin-top:30px}.closing-with-card .audio-card-preview{grid-column:2;grid-row:1 / 4}.closing-with-card h2{font-size:65px}.closing-with-card h2 br{display:none}} | |
| @media(max-width:800px) and (min-width:701px){.closing-with-card{grid-template-columns:minmax(0,1fr);gap:24px}.closing-with-card .closing-intro,.closing-with-card .closing-body{grid-column:1;grid-row:auto}.closing-with-card .closing-art{position:absolute;grid-area:auto;right:0;top:80px;width:140px;margin:0}.closing-with-card .audio-card-preview{grid-column:1;grid-row:auto;max-width:480px;width:100%;justify-self:center}.closing-with-card .closing-intro{padding-right:150px}} | |
| @media(max-width:700px){.closing-with-card{grid-template-columns:minmax(0,1fr);gap:0;padding-block:58px}.closing-with-card .closing-intro,.closing-with-card .closing-body{grid-column:1;grid-row:auto}.closing-with-card .closing-intro .hand{padding-right:112px;min-height:100px;margin-bottom:18px}.closing-with-card h2{font-size:48px;text-wrap:balance}.closing-with-card .closing-art{position:absolute;grid-area:auto;right:0;top:58px;width:100px;margin:0}.closing-with-card .closing-art img{width:100%}.closing-with-card .audio-card-preview{grid-column:1;grid-row:auto;max-width:480px;width:100%;justify-self:center;margin-top:34px;padding:22px 20px}.closing-with-card .closing-body p{font-size:18px}.closing-with-card .audio-card-preview p{font-size:15px}.closing-with-card p.audio-card-caption{font-size:18px}.audio-card-top,.audio-card-actions,.audio-card-range{font-size:15px}.audio-card-score>span{font-size:19px}.audio-card-score strong{font-size:40px}.card-format{font-size:13px}.audio-card-track{padding:16px 14px}.closing-with-card .closing-body .actions{margin-top:24px}} | |
| @media(max-width:370px){.closing-with-card .audio-card-preview{padding:20px 16px}.audio-card-score{gap:8px}.audio-card-score strong{font-size:32px}.audio-card-score>span{font-size:16px}.audio-card-top{gap:8px;flex-direction:column;align-items:flex-start}.card-format{font-size:12px}.closing-with-card h2{font-size:48px}.closing-with-card h2 br{display:none}} | |
| /* News banner + shared pill (added with news.html) */ | |
| .new-pill{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--orange);border-radius:999px;padding:3px 9px;vertical-align:middle;line-height:1.4} | |
| .news-banner-bar{background:var(--soft);border-bottom:1px solid #f6d9ca} | |
| .news-banner{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding-block:11px;font-size:16px;text-decoration:none;color:var(--ink);text-align:center} | |
| .news-banner-text{font-weight:600} | |
| .news-banner-link{color:var(--orange);font-weight:600} | |
| .news-banner:hover .news-banner-link{text-decoration:underline;text-underline-offset:4px} | |
| @media(max-width:700px){.news-banner{font-size:14px;gap:8px;padding-block:9px}} | |
| @media(min-width:701px) and (max-width:1180px){.nav nav a.nav-news{display:inline}} | |