:root{
--bg:#fffff8;
--green:#234b3d;
--orange:#9a4f12;
--red:#7d2f2a;
--terracotta:#9b4f3f;
}

*{box-sizing:border-box}

html{
scroll-behavior:smooth;
font-size:75%;
}

body{
margin:0;
background:var(--bg);
color:var(--green);
font-family:"DejaVu Sans", Arial, sans-serif;
font-size:1.1rem;
line-height:1.62;
}

main{
width:min(920px, calc(100% - 40px));
margin:0 auto;
padding:64px 0 88px;
}
header{
margin-bottom:64px;
}
h1{
margin:0 0 10px;
font-size:clamp(2rem, 5vw, 4.25rem);
line-height:1;
font-weight:800;
letter-spacing:-0.04em;
color:var(--orange);
}

h1 a{
color:inherit;
text-decoration:none;
}
h1 a:hover,
h1 a:focus,
h1 a:active
.tagline{
margin:0;
max-width:760px;
font-size:clamp(1.05rem, 2.2vw, 1.45rem);
color:var(--green);
}
section{
margin:0 0 56px;
}
h2{
margin:0 0 18px;
font-size:clamp(1.55rem, 3vw, 2.35rem);
line-height:1.12;
font-weight:800;
letter-spacing:-0.02em;
color:var(--terracotta);
}

section:nth-of-type(4n+1) h2{color:var(--terracotta)}
section:nth-of-type(4n+2) h2{color:var(--red)}
section:nth-of-type(4n+3) h2{color:var(--orange)}
section:nth-of-type(4n) h2{color:var(--green)}

p{
margin:0 0 1em;
font-size:clamp(1.05rem, 2.2vw, 1.45rem);
}

.section-more{
margin:0;
}
.section-more summary{
color:var(--orange);
font-weight:800;
cursor:pointer;
margin:0 0 1em;
}
.section-more summary:hover,
.section-more summary:focus,
.section-more summary:active

.menu-bar{
margin:0 0 64px;
}
.menu-bar a,
.up-link a{
color:var(--orange);
font-weight:800;
text-decoration:none;
}
.menu-bar a{
margin-right:18px;
}
.menu-bar a:hover,
.menu-bar a:focus,
.menu-bar a:active,
.up-link a:hover,
.up-link a:focus,
.up-link a:active

.image-viewer{
margin:0 0 64px;
}
.image-viewer-stage{
width:100%;
height:clamp(190px, 38vw, 400px);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.image-viewer img{
display:block;
width:auto;
height:auto;
max-width:77%;
max-height:77%;
object-fit:contain;
cursor:pointer;
}
.image-viewer-instruction{
margin:10px 0 0;
text-align:center;
font-size:clamp(11px, 1.2vw, 13px);
}
.image-viewer-instruction a{
color:var(--orange);
font-weight:800;
text-decoration:none;
}
.image-viewer-instruction a:hover,
.image-viewer-instruction a:focus,
.image-viewer-instruction a:active

.index-text{
max-width:820px;
margin:0 auto;
text-align:center;
}
.index-text p{
margin:0 0 1.2em;
font-size:13px;
}
.global-index .menu-bar{
margin:0 0 32px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px 18px;
text-align:center;
}
.global-index .menu-bar a{
margin-right:0;
}

.messages{
min-height:220px;
margin:0 0 28px;
}

.message{
padding:18px 0;
border-top:1px solid rgba(35,75,61,.22);
white-space:pre-wrap;
overflow-wrap:anywhere;
font-size:clamp(1.05rem, 2.2vw, 1.45rem);
font-weight:800;
}

.message:last-child{
border-bottom:1px solid rgba(35,75,61,.22);
}

.message.helper{
font-size:calc(1em + 6px);
}
.message.helper a{
color:var(--orange);
font-weight:800;
text-decoration:none;
}
.message.helper a:hover,
.message.helper a:focus,
.message.helper a:active

.lingo-line{
margin-left:0;
padding-left:0;
text-indent:0;
}
.message.helper p:last-child{
margin-bottom:0;
}

.here-gap{
display:inline-block;
width:3.5em;
}
.language-links{
white-space:nowrap;
overflow-x:auto;
}
.who{
display:block;
margin-bottom:7px;
font-weight:800;
letter-spacing:-0.01em;
}
.message.human .who{color:var(--orange)}
.message.ai .who{color:var(--red)}

.message.ai > div{
line-height:normal;
}

.influence-note{
display:block;
margin-top:6px;
font-size:.84rem;
color:var(--green);
opacity:.78;
}
.influence-note a{
color:var(--orange);
font-weight:800;
text-decoration:none;
}
.influence-note a:hover,
.influence-note a:focus,
.influence-note a:active
.strands{
display:block;
margin-top:10px;
font-size:.84rem;
color:var(--green);
opacity:.68;
}

textarea{
display:block;
width:100%;
min-height:132px;
resize:vertical;
padding:14px 0;
border:0;
border-radius:0;
outline:none;
background:transparent;
color:forestgreen;
font-family:inherit;
font-size:clamp(1.05rem, 2.2vw, 1.45rem);
}

textarea::placeholder{
color:forestgreen;
opacity:.72;
}
.controls{
display:flex;
align-items:center;
gap:18px;
margin-top:16px;
}
button{
appearance:none;
border:0;
padding:0;
background:transparent;
color:var(--orange);
font:inherit;
font-weight:900;
cursor:pointer;
}
button:hover,
button:focus,
button:active
button:disabled{
opacity:.45;
cursor:default;
}
.status{
font-size:.88rem;
opacity:.72;
}
.note{
margin-top:32px;
font-size:.9rem;
max-width:760px;
}
.error{color:var(--red)}
@media (max-width:640px){
main{width:min(100% - 28px, 920px); padding-top:40px}
header{margin-bottom:48px}
section{margin-bottom:44px}
.controls{align-items:flex-start; flex-direction:column; gap:8px}
}