/* The QuairOne hero: a header on its own, then the drawing from edge to edge. */
@font-face { font-family: Hand; src: url(caveat.woff2) format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: HandSC; src: url(fonts/hand-sc.woff2?v=2) format("woff2"); font-display: swap; }
@font-face { font-family: HandTC; src: url(fonts/hand-tc.woff2?v=2) format("woff2"); font-display: swap; }
@font-face { font-family: HandJA; src: url(fonts/hand-ja.woff2?v=2) format("woff2"); font-display: swap; }
@font-face { font-family: HandKO; src: url(fonts/hand-ko.woff2?v=2) format("woff2"); font-display: swap; }
/* Latin stays in Caveat in every language; the rest of the line falls to that script's handwriting. */
:root { --hand: Hand, cursive; --h: 66px; --l: 44px; --s: 40px; }
:root:lang(zh-CN) { --hand: Hand, HandSC, cursive; --h: 50px; --l: 36px; --s: 32px; }
:root:lang(zh-TW) { --hand: Hand, HandTC, cursive; --h: 46px; --l: 32px; --s: 29px; }
:root:lang(ja) { --hand: Hand, HandJA, cursive; --h: 46px; --l: 32px; --s: 29px; }
:root:lang(ko) { --hand: Hand, HandKO, cursive; --h: 66px; --l: 48px; --s: 44px; }
/* the longer Latin headlines must clear the first node */
:root:lang(es), :root:lang(fr), :root:lang(de) { --h: 52px; }
@font-face { font-family: BrandHand; src: url(klee-brand.woff2) format("woff2"); font-display: swap; }
html:has(body.v4) { height: auto; overflow: auto; }
body.v4 { display: flex; flex-direction: column; height: auto; min-height: 100dvh; background: #fbf3e2; color: #23291f; overflow-x: hidden; }
.v4 .q-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(8px, .85vw, 16px) clamp(14px, 2.6vw, 52px); }
.v4 .brand { display: flex; align-items: center; gap: .45em; padding: 0; background: none; color: #1f4a35; text-decoration: none; font: 400 clamp(22px, 1.95vw, 36px)/1 BrandHand, cursive; -webkit-text-stroke: .03em currentColor; }
.v4 .brand img { width: 1.5em; height: 1.5em; display: block; }
/* the buttons are part of the drawing: ink, on rough hand-drawn frames, under the desk */
.v4 .go { flex: 1 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6vw 1.6vw; padding: .4vw 2.6vw 1vw; }
.v4 .launch, .v4 .dl, .v4 .tourgo { margin: 0; padding: .24em .85em .3em; border-radius: 0; font: 600 clamp(15px, 2.05vw, 42px)/1.1 var(--hand); text-decoration: none; white-space: nowrap; background: none; box-shadow: none; transition: transform .15s; }
.v4 .launch { color: #fbf3e2; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M3 7C30 3 70 5 97 3C99 12 98 26 97 35C70 38 30 35 3 37C1 27 2 16 3 7Z' fill='%231f4a35' stroke='%231f4a35' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.v4 .dl { color: #1f4a35; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M3 7C30 3 70 5 97 3C99 12 98 26 97 35C70 38 30 35 3 37C1 27 2 16 3 7Z' fill='%23fbf3e2' stroke='%231f4a35' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.v4 .tourgo { color: #1f4a35; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M3 7C30 3 70 5 97 3C99 12 98 26 97 35C70 38 30 35 3 37C1 27 2 16 3 7Z' fill='%23fbf3e2' stroke='%231f4a35' stroke-width='2' vector-effect='non-scaling-stroke' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.v4 .launch:hover, .v4 .dl:hover, .v4 .tourgo:hover { filter: none; transform: rotate(-.8deg) scale(1.03); }
.v4 .launch:focus-visible, .v4 .dl:focus-visible, .v4 .tourgo:focus-visible, .v4 .brand:focus-visible { outline: 2px solid #1f4a35; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .v4 .launch, .v4 .dl, .v4 .tourgo { transition: none; } .v4 .launch:hover, .v4 .dl:hover, .v4 .tourgo:hover { transform: none; } }
.v4 .scene { flex: none; position: relative; width: 100%; aspect-ratio: 2016 / 864; overflow: hidden; }
.v4 .scene img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-mask-image: linear-gradient(transparent, #000 3%, #000 94%, transparent); mask-image: linear-gradient(transparent, #000 3%, #000 94%, transparent); }
.v4 #over { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#over text { font-family: var(--hand); fill: #2c332a; font-weight: 500; }
#over .hd { font-size: var(--h); font-weight: 600; fill: #23291f; }
#over .lb { font-size: var(--l); }
#over .lg { font-size: var(--s); }
/* Yomogi's line is thin: a hair of stroke keeps it readable over the drawing */
:root:lang(ja) #over text { stroke: #2c332a; stroke-width: .7px; }
:root:lang(ja) #over .g { stroke: #4f6f33; }
:root:lang(ja) #over .a { stroke: #a8680c; }
#over .g { fill: #4f6f33; }
#over .a { fill: #a8680c; }
#over .doclink { cursor: pointer; text-decoration: underline; text-underline-offset: .12em; font-weight: 700; }
#over .doclink:hover tspan { fill: #1f4a35; }
#over .doclink:focus-visible { outline: 2px solid #1f4a35; outline-offset: 2px; }
.ring { fill: none; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring 4.2s ease-out infinite; }
@keyframes ring { 0% { transform: scale(.55); opacity: .8; } 75%, 100% { transform: scale(2.5); opacity: 0; } }
.flow { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 13; animation: flow 2.8s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -64; } }
@media (prefers-reduced-motion: reduce) { .ring, .flow { animation: none; } .ring { opacity: 0; } }

/* the language switch: same hand as the buttons */
.v4 .langs { position: relative; }
.v4 .lang-btn { font-size: clamp(14px, 1.45vw, 28px); cursor: pointer; }
.v4 .lang-menu { position: absolute; z-index: 4; right: 0; top: calc(100% + 6px); display: grid; min-width: 11em; padding: 6px; background: #fbf3e2; border: 1.5px solid #1f4a35; border-radius: 3px 9px 4px 8px; font-size: clamp(18px, 1.5vw, 28px); }
.v4 .lang-menu[hidden] { display: none; }
.v4 .lang-menu button { padding: .25em .6em; text-align: left; color: #1f4a35; background: none; font: 500 1em/1.25 Hand, HandSC, HandTC, HandJA, HandKO, cursive; cursor: pointer; }
.v4 .lang-menu button:hover, .v4 .lang-menu button:focus-visible { background: rgba(31, 74, 53, .1); outline: none; }
.v4 .lang-menu button[aria-current=true] { font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
/* the feedback note: a sheet of lined paper, a little askew */
.v4 .note { width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 26px 30px 18px; border: 1.5px solid #1f4a35; border-radius: 10px 11px 10px 9px; color: #23291f; background: #fbf3e2; transform: rotate(-.5deg); box-shadow: 5px 7px 0 rgba(31, 74, 53, .16); font: 500 24px/1.25 var(--hand); }
.v4 .note::backdrop { background: rgba(35, 41, 31, .32); }
.v4 .note h2 { margin: 0 0 12px; font: 600 40px/1.1 var(--hand); color: #1f4a35; }
.v4 .note label { display: block; margin-bottom: 12px; }
.v4 .note label span { display: block; }
.v4 .note textarea, .v4 .note input { display: block; width: 100%; padding: 2px 4px; border: 0; border-bottom: 1.5px solid #1f4a35; border-radius: 0; color: #23291f; background: transparent; font: 500 26px/34px var(--hand); outline: none; resize: vertical; }
.v4 .note textarea { background: repeating-linear-gradient(transparent 0 33px, rgba(31, 74, 53, .3) 33px 34px); background-attachment: local; }
.v4 .note textarea:focus, .v4 .note input:focus { border-bottom-width: 2.5px; background-color: rgba(31, 74, 53, .05); }
.v4 .note-say { min-height: 1.25em; margin: 0 0 12px; color: #8a5208; }
.v4 .note-say:empty { display: none; }
.v4 .note-go { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.v4 .note .launch, .v4 .note .dl { font-size: 26px; cursor: pointer; }
.v4 .note small { display: block; margin-top: 12px; font-size: 19px; color: #555b50; }
@media (prefers-reduced-motion: reduce) { .v4 .note { transform: none; } }