:root{
--ink:#1f1b2d;
--muted:#5b566a;
--line:#8c8398;
--fox:#d9580a;
--fox_deep:#b4460a;
--fox_wash:#ffe3cf;
--page:#fbf6ef;
--field:#f1e6d9;
--paper:#fff;
--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{
box-sizing:border-box;
border-radius:0;
box-shadow:none;
}
html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}
body{
margin:0;
background:var(--page);
color:var(--ink);
font-family:var(--font);
font-size:18px;
line-height:1.6;
}
body>*{
box-sizing:content-box;
max-width:680px;
margin-left:auto;
margin-right:auto;
padding-left:20px;
padding-right:20px;
}
a{
color:inherit;
text-decoration:none;
}
a:hover{
text-decoration:underline;
text-decoration-color:var(--fox);
text-decoration-thickness:2px;
text-underline-offset:3px;
}
::selection{
background:var(--fox_wash);
}
:focus-visible{
outline:3px solid var(--fox);
outline-offset:3px;
}
h1,
h2{
line-height:1.2;
margin:0;
}
h1{
font-size:44px;
font-weight:800;
letter-spacing:-.025em;
}
h1 em{
font-style:normal;
color:var(--fox_deep);
}
h2{
font-size:26px;
}
p{
margin:0;
}
.sr-only{
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip:rect(0 0 0 0);
white-space:nowrap;
border:0;
}
.site-head{
display:flex;
flex-wrap:wrap;
align-items:center;
justify-content:space-between;
gap:12px 32px;
padding-top:28px;
padding-bottom:28px;
}
.brand{
display:inline-flex;
align-items:center;
gap:10px;
font-size:22px;
font-weight:700;
}
.brand svg{
width:40px;
height:40px;
flex:none;
}
.brand:hover{
text-decoration:none;
}
.brand:hover span{
text-decoration:underline;
text-decoration-color:var(--fox);
text-decoration-thickness:2px;
text-underline-offset:3px;
}
.site-foot a[aria-current]{
text-decoration:underline;
text-decoration-color:var(--fox);
text-decoration-thickness:2px;
text-underline-offset:6px;
}
.page p a{
color:var(--fox_deep);
font-weight:600;
}
.page{
padding-top:40px;
padding-bottom:48px;
}
.page>*+*{
margin-top:24px;
}
.page>h1+*{
margin-top:16px;
}
.lead{
font-size:20px;
color:var(--muted);
}
.fetch{
display:flex;
margin-top:36px;
}
.fetch-input{
display:block;
flex:1;
min-width:0;
margin:0;
padding:18px 20px;
border:0;
background:var(--field);
color:var(--ink);
font:inherit;
font-size:20px;
line-height:1.4;
-webkit-appearance:none;
appearance:none;
}
.fetch-input::placeholder{
color:var(--muted);
opacity:1;
font-size:20px;
}
.fetch-input:focus{
outline:0;
background:var(--paper);
}
.fetch-input:disabled{
color:var(--muted);
}
button{
font:inherit;
font-size:18px;
font-weight:700;
line-height:1.2;
margin:0;
padding:18px 24px;
border:0;
background:var(--fox_deep);
color:#fff;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
}
button:hover{
background:var(--ink);
}
button:disabled{
background:var(--line);
cursor:default;
}
.fetch-button{
flex:none;
}
.sources{
margin-top:14px;
color:var(--muted);
font-size:16px;
}
.status:empty{
display:none;
}
.status{
display:flex;
align-items:center;
gap:14px;
font-size:18px;
}
.spinner{
width:32px;
height:32px;
flex:none;
animation:spin .9s linear infinite;
}
.spinner circle{
fill:none;
stroke:var(--fox);
stroke-width:5;
stroke-linecap:butt;
stroke-dasharray:80 200;
}
@keyframes spin{
to{
transform:rotate(360deg);
}
}
@media (prefers-reduced-motion:reduce){
.spinner{
animation-duration:2.4s;
}
}
.result{
margin-top:48px;
padding:32px;
background:var(--paper);
}
.result-title{
overflow-wrap:anywhere;
}
.result-meta{
margin-top:8px;
color:var(--muted);
font-size:17px;
}
.result-actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px 24px;
margin-top:20px;
}
.copy{
min-width:120px;
}
.download{
font-size:18px;
font-weight:700;
color:var(--fox_deep);
}
.transcript{
margin-top:32px;
overflow-wrap:break-word;
}
.transcript p+p{
margin-top:1.1em;
}
.steps{
margin:32px 0 0;
padding:0;
list-style:none;
counter-reset:step;
}
.steps li{
position:relative;
padding-left:64px;
counter-increment:step;
}
.steps li::before{
content:counter(step);
position:absolute;
left:0;
top:0;
width:44px;
height:44px;
border-radius:50%;
background:var(--fox_wash);
color:var(--fox_deep);
font-size:22px;
font-weight:800;
line-height:44px;
text-align:center;
}
.steps li+li{
margin-top:28px;
}
.steps h2{
padding-top:8px;
font-size:22px;
}
.steps p{
margin-top:6px;
}
.site-foot{
display:flex;
flex-wrap:wrap;
gap:8px 24px;
padding-bottom:40px;
font-size:16px;
color:var(--muted);
}
@media (max-width:560px){
h1{
font-size:34px;
}
.lead{
font-size:19px;
}
.page{
padding-top:24px;
}
.site-head{
padding-top:20px;
padding-bottom:12px;
}
.fetch{
flex-direction:column;
}
.fetch-button{
margin-top:12px;
}
.result{
margin-left:-20px;
margin-right:-20px;
padding:24px 20px;
}
}