html.dark-theme{filter: invert(100%) hue-rotate(180deg)}
body{background: white}
.flex-break{display: none; flex-basis:0; height:0; margin:0; padding:0}
.search-row{
max-width: 80ch;
margin: 1em 1em -1em 2em;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .7rem}
@media (max-width: 700px){
.search-row{ margin-left: 1em}
}
.search-row > *:nth-child(3){flex: 1}
#quote{display: none}
body.fullscreen{
& .search-row{max-width: 90ch !important; margin: auto}
& .search-row > a img{height: min(30vh,30vw) !important; margin-top:3rem}
& .flex-break{display: block !important; flex-basis: 100% !important}
& #quote{
display: block; margin: auto; margin-top: 2em; max-width: min(84ch, 90vw); width: max-content;
text-align: right; color: #8ac; font-size: .8em; font-weight: bold;
& q{
font-weight: lighter; font-size:1.7em; font-style: italic;
display:inline-block; border-bottom: 1px solid #8ac}
}
}
.settings fieldset{
display: inline-block;
border: 6px double black;
& legend{
padding: 0 .5em;
font-weight: bold;
&:before{
content: '⚙︎';
font-size: 2em;
margin-right: .2em;
vertical-align: middle;
position: relative;
top: -2px}
}
}
details.info{
--bg: #ffe;
border-radius: 1em;
&[open]{background: var(--bg) !important}
& :where(samp, kbd, code){white-space: nowrap; background: #eee; border: 1px solid darkgray; border-radius: 5px; padding: 1px 4px}
& article{
& :where(p, td, ul){line-height: 1.8em}
& a{color:#15c}
& a:hover{color:#37e}
& a:visited{color:#329}
& a:active{color:#400}
}
& h1{border-bottom: 3px solid silver; font-weight: 400}
& h2{margin-top: 3rem; border-bottom: 1px solid silver; font-weight: 400}
& table{
border-spacing: 0;
display: block; overflow-x: auto; 
& th, td{padding: .2em .4em}
& td{vertical-align: baseline}
& tr:nth-of-type(2n){background: #08050008}
& caption{caption-side: bottom; font-size: small; margin: 1rem 0; text-align: left; max-width: 80vw; position: sticky; left: 0}
& tr td:nth-child(2) a{ text-decoration: none}
& thead tr th{ padding: .5rem 0}
& tbody tr th:not([colspan]){ text-align: left; border-bottom: 2px solid gray }
}
.reviews{
list-style-type: none;
padding: 0;
display: flex;
gap: 3rem;
font-style: oblique;
align-items: center;
& li{display: inline-block; border: 6px double teal; padding: .6rem .9rem}
@media (min-width: 700px){ &{margin: 2rem 4rem} }
}
}
body:has(details.info[open]){
overflow: hidden;
& :where(.search-results, .search-row > a:first-child, .search-row search){filter: blur(.5rem)}
}
.aps-next{font-size: 20pt; text-decoration: none !important; border: none; color: #59f !important}
.ai-summary{ padding: 1rem 0 .5em 6px; font-size: 15pt}
.favicon{margin-right: 6px; position:relative; top: 2px}
.hidden{display: none !important}
.image-strip{
display: flex;
gap: .4em;
align-items: start;
margin-bottom: 1em;
overflow-x: auto;
scrollbar-width: none;
& img{
width: 100%;
max-height: 7em;
flex: max-content;
object-fit: contain;
&:hover{filter: brightness(1.1)}
}
}
@media (min-width: 700px){.image-strip{max-width: 140ch}}
@media (max-width: 700px){
.image-strip{
grid-template-columns: repeat(4, 1fr)}
}
.collapsed{
position: relative;
cursor: pointer;
height: 300px;
overflow: hidden;
&::before{
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 2em;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .5));
border-bottom: 1px solid #444;
pointer-events: none}
&::after{
content: attr(title);
font-weight: bold;
position: absolute; bottom: 0em; left: 50%; transform: translateX(-50%);
padding: .2em 1em;
background: var(--bg, #ffe);
border: 1px solid #999;
border-bottom: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-shadow: -6px -5px 5px rgba(0, 0, 0, .15), 6px -5px 5px rgba(0, 0, 0, .15)}
}
details.info{
position: relative;
z-index: 0;
max-width: 100ch;
margin: auto;
& > summary{display: inline-block; cursor: pointer; user-select: none}
& > summary::marker{ content: '' } & > summary::-webkit-details-marker{ display: none }
&[open]{
position: fixed;
inset: 1em;
background: white;
border: 1px solid grey;
box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
padding: 1.5em;
overflow: auto;
z-index: 9999;
& > summary{
position: absolute;
top: .5rem;
right: .5rem;
padding: .25rem .5rem;
font-size: 1.3rem;
line-height: 1;
&:focus{outline: 2px solid Highlight}
& > *,
& > img{ display: none }
&::after{content: "×"; border: 1px solid #333; border-radius: 20%; font-size: 2em; height: 1em; width: 1em; display: inline-grid;place-items: center}
&:hover::after{border: 1px solid black; background: #fdd}
}
}
}
.gsc-cursor-page{vertical-align: middle; margin-right: 1.6rem !important}
.gcsc-find-more-on-google-root, .gcsc-find-more-on-google,
a:has(.gcsc-find-more-on-google),
.gcsc-more-maybe-branding-root{display: none !important}
input.gsc-input{background: white !important}
@media (max-width: 700px){
.gsc-control-cse{padding: 1em 0 !important}
}
.gsc-refinementHeader:where(:nth-last-of-type(1), :nth-last-of-type(2)){color: #8ac !important}
.gsc-cursor{user-select: none !important}
.i-mag{display: none}
.fullscreen .i-mag{
display: block;
position:absolute; margin-left:-.5em; top:50%; transform:translateY(-50%);
width:2em; height:100%; background-repeat:no-repeat; background-position:center;
background-image:url("data:image/svg+xml,%3csvg width='19' height='19' viewBox='0 0 19 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8 0.75C12.0041 0.75 15.25 3.99594 15.25 8C15.25 9.7319 14.6427 11.3219 13.6295 12.5688L18.5303 17.4697C18.8232 17.7626 18.8232 18.2374 18.5303 18.5303C18.2641 18.7966 17.8474 18.8208 17.5538 18.6029L17.4697 18.5303L12.5688 13.6295C11.3219 14.6427 9.7319 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8C0.75 3.99594 3.99594 0.75 8 0.75ZM8 2.25C4.82436 2.25 2.25 4.82436 2.25 8C2.25 11.1756 4.82436 13.75 8 13.75C11.1756 13.75 13.75 11.1756 13.75 8C13.75 4.82436 11.1756 2.25 8 2.25Z' fill='%23bbc'/%3e%3c/svg%3e");
& + input{box-sizing:border-box; padding-left: 1.5em !important}
}
.i-mic{
position:absolute; right:1em; top:50%; transform:translateY(-50%);
width:2em; border:0; cursor:pointer; background: transparent;
& svg{width:22px;height:22px;display:block;fill:#778}
&:hover svg{fill:#27e}
}
@media (max-width: 700px){ body:not(.fullscreen) .i-mic{display: none} }