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 1em;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .2rem .7rem}
.search-row > *:nth-child(3){flex: 1}
.search-row > a img{height: 3rem; margin-right: .5em}
@media (hover: none){
.search-row{
margin-top: .4em;
& > a{flex-basis: 100%; text-align: center; & img{ height: 2rem }}
}
}
#quote{display: none}
body.fullscreen{
& .search-row{max-width: 68ch !important; margin: auto}
& .search-row > a{
margin-bottom: 2.6em !important;
& img{
height: min(30vh, 30vw) !important;
margin-top: 3rem}
}
& .flex-break{display: block !important; flex-basis: 100% !important}
& #quote{
display: block; margin: 2em auto auto; max-width: min(84ch, 90vw); width: max-content;
text-align: right; color: #69c; font-size: .8em; font-weight: bold;
& q{
font-weight: lighter; font-size:1.7em; font-style: italic;
display:inline-block; border-bottom: 1px solid #69c}
}
}
.amp{
font-size: 1.3em;
margin: 0 .2em;
font-style: italic;
font-family:
"Libre Baskerville", "Playfair Display", "Blackadder ITC", "Garamond", "Zapfino", "Hoefler Text",
"Monotype Corsiva", "Palatino Linotype", "Apple Chancery", "French Script MT", "Lucida Handwriting",
"Goudy Old Style", "Warnock Pro", "TeX Gyre Pagella", "Palladio URW", "Rage Italic", "Athelas",
"Baskerville Old Face", "Dancing Script", serif}
.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}
& :where(h1){margin-block: .7em; font-size: 2em} 
& h2{margin-top: 3rem; border-bottom: 1px solid silver; font-weight: 400}
h2:target + p a{background: pink;font-weight: bold;padding: 0 .5em} 
& 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 (hover: hover){ &{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: 25pt; text-decoration: none !important; border: none; color: #59f !important; background: transparent !important}
.ai-summary{ padding: 1rem 0 1em 6px; font-size: 13pt}
@media (hover: hover){ .ai-summary{ max-width: 61rem }}
.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 (hover: hover){.image-strip{max-width: 59rem}}
@media (hover: none){
.image-strip{
grid-template-columns: repeat(4, 1fr)}
}
.collapsed{
position: relative;
cursor: pointer;
height: 40ch;
overflow: hidden;
z-index: 0;
&::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: 0; 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{
font: 17px/1 courier, monospace;
block-size: 1.45em;
display: grid;
place-items: center;
border: 1px solid #2F6C99;
background: #cde;
border-radius: 2px;
cursor: pointer;
list-style: none;
user-select: none;
position: relative;
bottom: 2px;
padding: 0 .7em;
color: #2F6C99;
font-weight: bold;
&:focus-visible{outline:2px solid;outline-offset:2px}
&::marker{ content: '' } &::-webkit-details-marker{ display: none }
& span span{font-weight: normal; margin: .1em}
}
&[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{
float: right;
position: sticky;
top: .5rem;
right: .5rem;
padding: .25rem .5rem;
z-index: 1;
background: #ec8;
border-radius: 40%;
block-size: 2.3em;
& > *,
& > :where(img, svg){ display: none }
&::after{content: "×"; color: #533; border: 1px solid #333; background: #fdd; border-radius: 40%; font-size: 2em; height: 1em; width: 1em; display: inline-grid;place-items: center;letter-spacing: 0px}
&:hover::after{background: pink; color: maroon}
}
}
}
.gsc-cursor-page{vertical-align: middle; margin-right: 1.6rem !important; &:last-child{margin-right: 0 !important}}
@media (hover: none){
.gsc-cursor-box{text-align: center !important}
div.gsc-cursor-page{
display: none !important;
&:has(+ & + .gsc-cursor-current-page),
&:has(+ .gsc-cursor-current-page),
&.gsc-cursor-current-page,
&.gsc-cursor-current-page + &,
&.gsc-cursor-current-page + & + &,
&:nth-of-type(1).gsc-cursor-current-page + & + & + &,
&:nth-of-type(1).gsc-cursor-current-page + & + & + & + &,
&:nth-of-type(2).gsc-cursor-current-page + & + & + &
{display: inline-block !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 (hover: none){
.gsc-control-cse{padding: 1em 0 !important}
}
.gsc-refinementHeader:where(:nth-last-of-type(1), :nth-last-of-type(2)){color: #7ad !important}
.gsc-cursor{user-select: none !important}
.gsc-cursor-box{margin: 10px 0 0 !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}
}
main .gsc-selected-option-container{
background-color: transparent;
border: none;
box-shadow: none;
color: #444;
cursor: default;
font-size: 11px;
font-weight: bold;
height: 18px;
line-height: 27px;
max-width: 90%;
min-width: 0;
padding: 0 11px 0 6px;
position: relative;
text-align: center}
.gsc-option-menu-container, .gsc-orderby-container{cursor: pointer}
.gsc-orderby-label{font-size: 120% !important}
.gsc-option-menu-item{ padding: 0 13px !important}
.gsc-above-wrapper-area{max-width: 790px !important}
.gsc-option-checkbox-checked{
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path d='M6.75012 12.1274L3.62262 8.99988L2.55762 10.0574L6.75012 14.2499L15.7501 5.24988L14.6926 4.19238L6.75012 12.1274Z' fill='%23636363'/></svg>") center no-repeat;
width: 1em;
height: 1em;
margin-right: 1em}