/* Frolicking Nicky: the study (/hub/, English only), Nicky's private learning hub.
   The landing page is only Nicky's painting, filling the whole screen: no header, no footer, no words.
   Each object in it is traced as a link; hovering gives it a faint glow and writes its subject, a click opens its page.
   Topic pages use the study palette Nicky loves: deep purple and candle-yellow (plus cream for reading),
   all in Cormorant Garamond. No emoji, no hover labels (Nicky wants it elegant). */
@font-face{font-family:'Arnold Boecklin';src:url('/assets/fonts/arnold-boecklin-extrabold.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
:root{--st-night:#150e1d;--st-purple:#2b1e38;--st-plum:#3a2a4c;--st-yellow:#f3d995;--st-cream:#efe0bf;--st-soft:#c9b9d6;--st-line:#f3d99540}
*{box-sizing:border-box}
html,body{margin:0;background:var(--st-night);color:var(--st-cream);font:400 19px/1.55 'Cormorant Garamond',Georgia,serif}
.fn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* The room: the painting covers the screen. Wider than tall: it fills the width and trims top and bottom.
   Portrait phones: it fills the height and you swipe sideways (it opens in the middle). */
body:not(.fn-study-open){overflow:hidden}
.fn-room{position:fixed;inset:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain}
.fn-room::-webkit-scrollbar{display:none}
.fn-room-art{display:block;height:100%;min-width:100%;width:auto;aspect-ratio:1536/1024}
.fn-paint-spot{cursor:pointer;outline:none}
/* Hover: a faint candle glow over the object, and its subject written in Arnold Böcklin (Nicky's choice).
   No outline, no emoji, no tooltip. Uses Maurizio Loreti's freely distributable ExtraBold implementation. */
.fn-paint-spot polygon{fill:#ffe7a8;fill-opacity:0;stroke:none;filter:url(#fn-glow);transition:fill-opacity .5s ease}
.fn-paint-spot:hover polygon,.fn-paint-spot:focus-visible polygon{fill-opacity:.34}
.fn-paint-word{font:800 46px 'Arnold Boecklin','Arnold Böcklin','Cormorant Garamond',Georgia,serif;font-style:normal;letter-spacing:.02em;fill:#f3d995;filter:url(#fn-word-glow);opacity:0;pointer-events:none;transition:opacity .5s ease,transform .5s ease;transform:translateY(8px);transform-box:fill-box}
.fn-paint-spot:hover .fn-paint-word,.fn-paint-spot:focus-visible .fn-paint-word{opacity:1;transform:none}
/* Touch screens have no hover: each object breathes a faint glow so it's clear what can be tapped */
@media(hover:none){
  .fn-paint-spot polygon{animation:fn-breathe 3.6s ease-in-out infinite}
  .fn-paint-spot:nth-of-type(3n) polygon{animation-delay:-1.2s}.fn-paint-spot:nth-of-type(3n+1) polygon{animation-delay:-2.4s}
}
@keyframes fn-breathe{50%{fill-opacity:.2}}
@media(prefers-reduced-motion:reduce){.fn-paint-spot polygon{animation:none!important}.fn-paint-word{transition:none;transform:none}}

/* Topic pages: a deep purple sheet with candle-yellow ink */
.fn-study-main{max-width:1120px;margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 20px 60px}
.fn-study-view{background:linear-gradient(160deg,var(--st-purple),#1f1529 70%);border:1px solid var(--st-line);border-radius:16px;padding:30px 40px 44px;box-shadow:0 30px 80px #00000099,inset 0 0 120px #f3d9950a}
.fn-study-view:not([hidden]){animation:st-open .5s ease both}
@keyframes st-open{from{opacity:0;transform:translateY(14px)}}
@media(prefers-reduced-motion:reduce){.fn-study-view:not([hidden]){animation:none}}
.fn-study-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 22px}
.fn-study-back{color:var(--st-yellow);text-decoration:none;font:italic 500 1.25rem 'Cormorant Garamond',Georgia,serif;letter-spacing:.02em}
.fn-study-back:hover{text-decoration:underline}
.fn-study-lang{color:var(--st-soft);text-decoration:none;font-size:.8rem;letter-spacing:.18em;border:1px solid var(--st-line);border-radius:99px;padding:3px 12px}
.fn-study-lang:hover{color:var(--st-yellow);border-color:var(--st-yellow)}
.fn-study-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px}
.fn-study-view h2{font:800 clamp(2.4rem,6vw,3.8rem)/1.05 'Arnold Boecklin','Arnold Böcklin','Cormorant Garamond',Georgia,serif;letter-spacing:.01em;margin:0;color:var(--st-yellow)}
.fn-study-count{margin:0;color:var(--st-yellow);font:italic 400 1.2rem 'Cormorant Garamond',Georgia,serif;white-space:nowrap}
.fn-study-why{color:var(--st-soft);max-width:660px;margin:10px 0 30px;font-style:italic}
.fn-study-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:46px}
.fn-study-label{font:600 .78rem 'Cormorant Garamond',Georgia,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--st-yellow);margin:0 0 14px;padding-bottom:7px;border-bottom:1px solid var(--st-line)}
.fn-study-path{list-style:none;margin:0;padding:0}
.fn-study-path li{display:flex;align-items:flex-start;gap:8px;padding:12px 0;border-top:1px dashed #f3d99526}
.fn-study-path li:first-child{border-top:0;padding-top:0}
.fn-study-step{display:flex;gap:12px;align-items:flex-start;cursor:pointer;flex:1;min-width:0}
.fn-study-step input{flex:none;appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:6px 0 0;border:1px solid var(--st-yellow);border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center;transition:background .25s}
.fn-study-step input::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--st-night);transform:scale(0);transition:transform .25s}
.fn-study-step input:checked{background:var(--st-yellow)}
.fn-study-step input:checked::after{transform:scale(1)}
.fn-study-step input:focus-visible{outline:2px solid var(--st-yellow);outline-offset:3px}
.fn-study-step-text strong{display:block;font-weight:600;font-size:1.12rem;color:var(--st-cream);overflow-wrap:anywhere}
.fn-study-step-text small{display:block;color:var(--st-soft);font-size:1rem;line-height:1.45;font-style:italic}
.fn-study-path li.is-done strong{color:var(--st-soft);text-decoration:line-through;text-decoration-color:var(--st-yellow);text-decoration-thickness:2px}
.fn-study-x{flex:none;background:none;border:0;color:var(--st-soft);font-size:1.2rem;line-height:1;padding:2px 6px;cursor:pointer}
.fn-study-x:hover{color:var(--st-yellow)}
.fn-study-add,.fn-study-new{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.fn-study-new input{flex:1 1 220px}
.fn-study textarea,.fn-study input[type=text]{width:100%;min-width:0;background:#1a1224;color:var(--st-cream);border:1px solid var(--st-line);border-radius:10px;padding:10px 12px;font:400 18px/1.5 'Cormorant Garamond',Georgia,serif}
.fn-study-add input[type=text]{flex:1 1 180px;width:auto}
.fn-study input::placeholder,.fn-study textarea::placeholder{color:#c9b9d680}
.fn-study textarea{min-height:200px;resize:vertical;background:#1a1224 repeating-linear-gradient(#0000 0 29px,#f3d99522 29px 30px);font:italic 400 1.2rem/30px 'Cormorant Garamond',Georgia,serif;padding:4px 14px}
.fn-study textarea:focus,.fn-study input[type=text]:focus{outline:2px solid var(--st-yellow);outline-offset:1px}
.fn-study-btn{flex:none;background:var(--st-yellow);color:var(--st-night);border:0;border-radius:99px;padding:9px 24px;cursor:pointer;font:600 1rem 'Cormorant Garamond',Georgia,serif;letter-spacing:.08em}
.fn-study-btn:hover{background:#fff0c2}
.fn-study-shelf{list-style:none;margin:0 0 32px;padding:0}
.fn-study-shelf li{padding:10px 0;border-top:1px dashed #f3d99526;font-size:.95rem}
.fn-study-shelf li:first-child{border-top:0;padding-top:0}
.fn-study-shelf a{color:var(--st-yellow);text-decoration:none;border-bottom:1px solid #f3d99555}
.fn-study-shelf a:hover{border-bottom-color:var(--st-yellow)}
.fn-study-shelf small{display:block;color:var(--st-soft)}
.fn-study-kind{display:inline-block;margin-right:8px;font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--st-yellow);border:1px solid #f3d99566;border-radius:99px;padding:1px 8px;vertical-align:1px}
.fn-study-saved{min-height:1.4em;margin:4px 0 0;font-size:.8rem;color:var(--st-soft)}
.fn-study-remove{margin-top:16px;background:none;border:0;padding:0;color:var(--st-soft);text-decoration:underline;cursor:pointer;font:italic 1rem 'Cormorant Garamond',Georgia,serif}
.fn-study-mine{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.fn-study-mine a{display:inline-block;padding:7px 16px;border:1px solid #f3d99566;border-radius:99px;color:var(--st-yellow);text-decoration:none}
.fn-study-mine a:hover{background:var(--st-yellow);color:var(--st-night)}
@media(max-width:760px){
  .fn-study-main{padding:max(14px,env(safe-area-inset-top)) 12px 40px}
  .fn-study-view{padding:22px 18px 32px}
  .fn-study-grid{grid-template-columns:1fr;gap:30px}
}

/* A light room breeze: local copies preserve the painting's own flames, paper and smoke.
   All layers share its SVG coordinates and stay behind the object links. */
.fn-room-atmosphere{pointer-events:none}
.fn-flame{transform-box:view-box;animation:fn-flame-flicker 1.7s ease-in-out infinite;transform-origin:614px 433px}
.fn-flame-two{transform-origin:648px 461px;animation-duration:2.1s;animation-delay:-.8s}
@keyframes fn-flame-flicker{0%,100%{transform:skewX(-1deg) scaleY(.98);filter:brightness(1)}22%{transform:skewX(2deg) scaleY(1.05);filter:brightness(1.14)}47%{transform:skewX(-3deg) scaleY(.94);filter:brightness(.91)}71%{transform:skewX(1deg) scaleY(1.03);filter:brightness(1.08)}}
.fn-candle-halo{animation:fn-candle-shimmer 2.7s ease-in-out infinite}
.fn-candle-halo-two{animation-duration:3.3s;animation-delay:-1.6s}
@keyframes fn-candle-shimmer{0%,100%{opacity:.55}33%{opacity:.9}61%{opacity:.4}83%{opacity:.75}}
/* Separate textured leaves pivot at the binding; their outer edges visibly lift. */
.fn-page-lift{transform-box:view-box;transform-origin:1088px 882px;animation:fn-page-left-lift 7s ease-in-out infinite}
.fn-page-right{transform-origin:1057px 803px;animation:fn-page-right-lift 8.5s ease-in-out infinite;animation-delay:-2s}
@keyframes fn-page-left-lift{0%,18%,100%{transform:none}48%{transform:rotate(1.8deg) skewX(-.35deg)}72%{transform:rotate(.5deg)}}
@keyframes fn-page-right-lift{0%,22%,100%{transform:none}54%{transform:rotate(-2.2deg) skewX(.4deg)}78%{transform:rotate(-.6deg)}}
/* Wisps rise along the plume rather than reversing direction; upper smoke fades away. */
.fn-smoke-ribbon{stroke-dasharray:48 32;animation:fn-smoke-rise 5s linear infinite}
.fn-smoke-ribbon-1{stroke-dasharray:32 48;animation-duration:6s;animation-delay:-2s}
.fn-smoke-ribbon-2{stroke-dasharray:22 58;animation-duration:7s;animation-delay:-4s}
@keyframes fn-smoke-rise{from{stroke-dashoffset:0}to{stroke-dashoffset:-80}}
@media(prefers-reduced-motion:reduce){.fn-room-atmosphere{display:none}.fn-room-atmosphere *{animation:none!important}}

/* Lesson reading pages: quiet, single-column notes. */
.fn-study-lesson-link{color:var(--st-yellow);text-decoration:underline;text-decoration-color:#f3d99566;text-underline-offset:5px}
.fn-study-lesson-link:hover{text-decoration-color:var(--st-yellow)}
.fn-study-lesson-link:focus-visible{outline:2px solid var(--st-yellow);outline-offset:5px;border-radius:2px}
.fn-lesson{max-width:820px;margin:0 auto;padding:36px 48px 48px}
.fn-lesson-number{font:500 .85rem/1.5 Georgia,serif;letter-spacing:.08em;color:var(--st-soft);margin:0 0 10px}
.fn-lesson-notes{font:400 19px/1.85 Georgia,serif;color:var(--st-cream);overflow-wrap:anywhere;margin-top:36px}
.fn-lesson-notes ul{padding-left:1.2em;margin:0}
.fn-lesson-notes li{padding-left:.3em;margin:0 0 1.2em}
.fn-lesson-notes li::marker{color:var(--st-soft);font-size:.7em}
.fn-lesson-notes h3{font:600 1.4rem/1.4 'Cormorant Garamond',Georgia,serif;color:var(--st-yellow);margin:2em 0 .8em}
.fn-lesson-footer{border-top:1px solid var(--st-line);padding-top:24px;margin-top:36px}
@media(max-width:760px){.fn-lesson{padding:24px 20px 32px}.fn-lesson-notes{font-size:17px;line-height:1.85}.fn-lesson h2{overflow-wrap:anywhere}}

/* Warm paper with purple ink; annotation margin stays outside the reading measure. */
body.fn-lesson-open{background:#faeac0}
.fn-lesson{max-width:1120px;background:#faeac0;color:var(--st-purple);border-color:#2b1e3833;box-shadow:none}
.fn-lesson h2,.fn-lesson .fn-study-back,.fn-lesson-number,.fn-lesson-notes,.fn-lesson-notes li::marker{color:var(--st-purple)}
.fn-lesson-notes h3{font:800 1.4rem/1.4 'Arnold Boecklin',Georgia,serif;color:var(--st-purple)}
.fn-lesson-footer{border-color:#2b1e3840}
.fn-lesson-workspace{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:42px;align-items:stretch;margin-top:32px}
.fn-lesson-notes{margin-top:0}
.fn-lesson-margin{position:relative;border-left:1px solid #2b1e3833;padding-left:18px;cursor:text;min-height:240px;font:14px/1.5 Georgia,serif}
.fn-margin-hint,.fn-annotation-status{color:#4d3b59;font:13px/1.5 Georgia,serif;margin:12px 0}
.fn-margin-card{position:absolute;left:18px;right:0;border:1px solid #2b1e3840;border-radius:8px;background:#fff3ce;padding:12px;cursor:default}
.fn-margin-card blockquote{margin:0 0 10px;padding-left:8px;border-left:2px solid #826395;color:#594067;font-size:12px;max-height:90px;overflow:auto}
.fn-lesson .fn-margin-card textarea{display:block;width:100%;resize:vertical;min-height:84px;padding:0;border:0;border-radius:0;background:transparent;color:var(--st-purple);font:15px/1.6 Georgia,serif}
.fn-lesson .fn-margin-card textarea::placeholder{color:#685874}
.fn-lesson .fn-margin-card textarea:focus{outline:2px solid #826395;outline-offset:4px}
.fn-note-remove,.fn-add-margin-note{background:transparent;color:var(--st-purple);border:1px solid #2b1e3855;border-radius:5px;padding:5px 9px;cursor:pointer;font:13px/1.4 Georgia,serif}
.fn-note-remove{margin-top:8px;font-size:12px}
.fn-text-highlight{background:#c2a3d2;color:var(--st-purple);border-radius:2px;cursor:pointer}
.fn-text-highlight:focus-visible{outline:2px solid var(--st-purple)}
.fn-lesson-notes ::selection{background:#b88bca;color:#21142e}
.fn-highlight-toolbar{position:fixed;z-index:20;display:flex;gap:6px;padding:6px;background:var(--st-purple);border-radius:7px;box-shadow:0 4px 18px #150e1d44}
.fn-highlight-toolbar button{border:1px solid #f3d99566;background:transparent;color:var(--st-yellow);padding:8px 10px;border-radius:4px;font:14px Georgia,serif;cursor:pointer}
.fn-highlight-toolbar button:focus-visible{outline:2px solid var(--st-yellow)}
@media(max-width:760px){.fn-lesson-workspace{grid-template-columns:minmax(0,1fr);gap:28px}.fn-lesson-margin{min-height:0!important;border-left:0;border-top:1px solid #2b1e3840;padding:20px 0 0}.fn-margin-card{position:relative;left:auto;right:auto;top:auto!important;margin:16px 0}.fn-lesson h2{font-size:clamp(2rem,9vw,3rem)}}

.fn-highlight-mode{font:15px/1.4 Georgia,serif;color:var(--st-purple);background:transparent;border:1px solid #2b1e3855;border-radius:6px;padding:7px 12px;cursor:pointer}
.fn-highlight-mode[aria-pressed=true]{background:var(--st-purple);color:#faeac0}
.fn-highlight-mode:focus-visible{outline:2px solid var(--st-purple);outline-offset:3px}
.fn-highlighter-active .fn-lesson-notes{cursor:crosshair}

/* Object details share the painting coordinates and never intercept its links. */
.fn-object-effects{pointer-events:none}
.fn-flower-zone{cursor:default}
.fn-flower-bob{transform-box:view-box;transform-origin:230px 605px;animation:fn-flower-bob 7s ease-in-out infinite}
.fn-blossoms{transform-origin:795px 602px;animation-duration:8.5s;animation-delay:-3s}
@keyframes fn-flower-bob{0%,100%{transform:rotate(-.08deg)}50%{transform:rotate(.15deg) translateY(-.25px)}}
.fn-room-art:has(.fn-flower-zone:hover) .fn-lilies,.fn-room-art:has([data-spot="silver-age"]:is(:hover,:focus-visible)) .fn-blossoms{filter:brightness(1.035)}
@keyframes fn-flower-sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(1.1deg) translateY(-2px)}}
.fn-string-vibration,.fn-petals,.fn-embers,.fn-liquid-ripples,.fn-crystal-pulse{opacity:0;transition:opacity .5s ease}
.fn-room-art:has([data-spot="opera"]:is(:hover,:focus-visible)) .fn-string-vibration{opacity:.45;animation:fn-strings .12s linear infinite}
@keyframes fn-strings{0%,100%{transform:translateY(-.7px)}50%{transform:translateY(.7px)}}
.fn-statue-shimmer,.fn-horse-glint,.fn-page-glint{opacity:0}
.fn-room-art:has([data-spot="silver-age"]:is(:hover,:focus-visible)) .fn-statue-shimmer{animation:fn-statue-shine 3.8s ease-in-out infinite}
@keyframes fn-statue-shine{0%{opacity:0;transform:translateX(-50px)}20%,65%{opacity:.35}100%{opacity:0;transform:translateX(190px)}}
.fn-room-art:has([data-spot="silver-age"]:is(:hover,:focus-visible)) .fn-petals{opacity:.8}
.fn-petal{opacity:0;animation:fn-petal-fall 5.2s linear infinite;animation-delay:var(--delay);animation-play-state:paused;transform-box:fill-box;transform-origin:center}
.fn-room-art:has([data-spot="silver-age"]:is(:hover,:focus-visible)) .fn-petal{animation-play-state:running}
@keyframes fn-petal-fall{0%{opacity:0;transform:translate(0,0) rotate(0deg)}12%{opacity:.8}80%{opacity:.55}100%{opacity:0;transform:translate(var(--drift),145px) rotate(220deg)}}
.fn-book-hover{transform-box:view-box;transform-origin:301px 755px;transition:transform 1.3s ease}
.fn-room-art:has([data-spot="quotes"]:is(:hover,:focus-visible)) .fn-book-hover{transform:translateY(-4px) rotate(-1deg)}
.fn-bust-smile{opacity:0;transition:opacity 1.2s ease}
.fn-room-art:has([data-spot="french"]:is(:hover,:focus-visible)) .fn-bust-smile{opacity:1}
.fn-room-art:has([data-spot="hittite"]:is(:hover,:focus-visible)) .fn-horse-glint{animation:fn-bronze-shine 3s ease-in-out infinite}
@keyframes fn-bronze-shine{0%{opacity:0;transform:translateX(0)}25%,65%{opacity:.6}100%{opacity:0;transform:translateX(120px)}}
.fn-room-art:has([data-spot="avestan"]:is(:hover,:focus-visible)) .fn-embers{opacity:.9}
.fn-ember{animation:fn-ember-rise 3.8s ease-out infinite;animation-delay:var(--delay);animation-play-state:paused}
.fn-room-art:has([data-spot="avestan"]:is(:hover,:focus-visible)) .fn-ember{animation-play-state:running}
@keyframes fn-ember-rise{0%{opacity:0;transform:translate(0,0)}15%{opacity:.9}100%{opacity:0;transform:translate(var(--drift),-85px)}}
.fn-room-art:has([data-spot="pie"]:is(:hover,:focus-visible)) .fn-liquid-ripples{opacity:.95}
.fn-ripple{transform-box:fill-box;transform-origin:center;animation:fn-ripple 2.4s linear infinite;animation-play-state:paused}
.fn-ripple-two{animation-delay:-.8s}
.fn-ripple-three{animation-delay:-1.6s}
.fn-room-art:has([data-spot="pie"]:is(:hover,:focus-visible)) .fn-ripple{animation-play-state:running}
@keyframes fn-ripple{0%{transform:scale(.12);opacity:0}18%{opacity:.95}75%{opacity:.75}100%{transform:scale(1.04);opacity:0}}
.fn-absinthe-glimmer{transform-box:fill-box;transform-origin:center;animation:fn-liquid-glimmer 3s ease-in-out infinite;animation-play-state:paused;opacity:.5}
.fn-room-art:has([data-spot="pie"]:is(:hover,:focus-visible)) .fn-absinthe-glimmer{animation-play-state:running}
@keyframes fn-liquid-glimmer{0%,100%{transform:translateY(-1px) scaleX(.9);opacity:.35}50%{transform:translateY(1px) scaleX(1);opacity:.85}}
.fn-room-art:has([data-spot="new"]:is(:hover,:focus-visible)) .fn-crystal-pulse{animation:fn-facet-light 3.2s ease-in-out infinite}
@keyframes fn-facet-light{0%,100%{opacity:.06}50%{opacity:.38}}
@media(prefers-reduced-motion:reduce){.fn-object-effects{display:none}.fn-object-effects *{animation:none!important;transition:none!important}}

/* Keep reading tools within reach while moving through long lessons. */
.fn-lesson>.fn-study-bar{position:sticky;top:0;z-index:10;background:#faeac0;padding:12px 0;border-bottom:1px solid #2b1e3826;flex-wrap:wrap}
.fn-reading-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fn-highlight-colours{display:flex;gap:8px;align-items:center}
.fn-highlight-colour{width:24px;height:24px;border:1px solid #2b1e3866;border-radius:50%;cursor:pointer;padding:0}
.fn-highlight-colour[aria-pressed=true]{outline:2px solid var(--st-purple);outline-offset:3px}
.fn-highlight-colour:focus-visible{outline:3px solid var(--st-purple);outline-offset:3px}
@media(max-width:760px){.fn-lesson>.fn-study-bar{gap:12px;padding:10px 0}.fn-reading-tools{gap:9px}.fn-highlight-colours{gap:7px}.fn-highlight-colour{width:25px;height:25px}.fn-lesson>.fn-study-bar>.fn-study-back{font-size:1.05rem}}

/* Vocabulary (Russian and French): the word on one side, English on the other. Veil either side to test yourself;
   a veiled word is a soft candlelit mist until tapped. Shown words can be corrected in place. */
.fn-vocab{margin-top:44px}
.fn-vocab-page .fn-vocab{margin-top:0}
.fn-vocab-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 20px;border-bottom:1px solid var(--st-line);margin-bottom:14px;padding-bottom:10px}
.fn-vocab-head .fn-study-label{border:0;margin:0;padding:0}
.fn-vocab-modes{display:flex;flex-wrap:wrap;gap:8px}
.fn-vocab-mode{background:none;border:1px solid #f3d99566;border-radius:99px;color:var(--st-yellow);padding:4px 14px;cursor:pointer;font:italic 500 1rem 'Cormorant Garamond',Georgia,serif}
.fn-vocab-mode:hover,.fn-vocab-mode[aria-pressed=true]{background:var(--st-yellow);color:var(--st-night)}
.fn-vocab-mode:focus-visible{outline:2px solid var(--st-yellow);outline-offset:2px}
.fn-vocab-list{list-style:none;margin:0;padding:0}
.fn-vocab-row{display:grid;grid-template-columns:1fr auto 1fr 28px;gap:20px;align-items:center;padding:9px 0;border-top:1px dashed #f3d99526}
.fn-vocab-cols{border:0;padding:0 0 4px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--st-soft)}
.fn-vocab-cell{display:block;min-width:0;overflow-wrap:anywhere;font:500 1.25rem/1.4 'Cormorant Garamond',Georgia,serif;color:var(--st-cream);border-radius:6px;padding:2px 4px;margin:-2px -4px}
.fn-vocab-row .fn-vocab-cell:first-child{color:var(--st-yellow);font-weight:600}
.fn-vocab-cell[contenteditable]:focus{outline:1px solid #f3d99566;background:#1a1224}
button.fn-vocab-cell{background:none;border:0;text-align:left;cursor:pointer;transition:filter .4s ease,opacity .4s ease}
button.fn-vocab-cell.is-veiled{filter:blur(7px);opacity:.55;user-select:none}
button.fn-vocab-cell:focus-visible{outline:1px solid var(--st-yellow)}
.fn-vocab-add input[type=text]{flex:1 1 160px}
@media(prefers-reduced-motion:reduce){button.fn-vocab-cell{transition:none}}
@media(max-width:760px){.fn-vocab-row{gap:12px}.fn-vocab-cell{font-size:1.12rem}}
/* Match the bronze light to the horse, rather than the surrounding hotspot. */
.fn-paint-spot[data-spot="hittite"] polygon{filter:none;clip-path:url(#fn-horse)}
.fn-paint-spot[data-spot="hittite"]:is(:hover,:focus-visible) polygon{fill-opacity:.17}
.fn-flower-bob{transition:filter .6s ease}
/* This historical font has a very wide space glyph; keep ordinary single spaces. */
.fn-paint-word,.fn-study-view h2,.fn-lesson-notes h3{word-spacing:-.38em}
/* Nicky's golden quill (her picture, background removed); the hotspot is the nib */
body.fn-study{cursor:url('/assets/quill-cursor-48.png') 0 39,auto;cursor:image-set(url('/assets/quill-cursor-48.png') 1x,url('/assets/quill-cursor-96.png') 2x) 0 39,auto}
.fn-study a,.fn-study button,.fn-study .fn-paint-spot,.fn-study .fn-flower-zone{cursor:url('/assets/quill-cursor-48.png') 0 39,pointer;cursor:image-set(url('/assets/quill-cursor-48.png') 1x,url('/assets/quill-cursor-96.png') 2x) 0 39,pointer}
.fn-study input,.fn-study textarea,.fn-lesson-notes{cursor:text}
.fn-highlighter-active .fn-lesson-notes{cursor:crosshair}

/* French notes (imported from Nicky's Notion page), read like the Silver Age lessons.
   Each subject is a page on the French path. Her grammar tables keep their rows and columns; wide ones scroll sideways inside their own frame on phones. */
.fn-lesson-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.fn-lesson-table{overflow-x:auto;margin:0 0 1.6em;border:1px solid #2b1e3833;border-radius:8px}
.fn-lesson-table table{border-collapse:collapse;width:100%;font:16px/1.5 Georgia,serif}
.fn-lesson-table th,.fn-lesson-table td{text-align:left;vertical-align:top;padding:7px 12px;border-bottom:1px solid #2b1e3822}
.fn-lesson-table th{font-weight:600;background:#2b1e380d}
.fn-lesson-table tr:last-child td{border-bottom:0}
.fn-lesson-link a{color:var(--st-purple);text-underline-offset:4px}
@media(max-width:760px){.fn-lesson-table table{font-size:14px;width:max-content;min-width:100%}}

/* Personal lesson writing uses the same warm paper as reading. */
.fn-personal-lessons{margin-top:30px;padding-top:20px;border-top:1px solid var(--st-line)}
.fn-personal-lessons .fn-editor-actions{justify-content:space-between}
.fn-personal-lessons .fn-highlight-mode{color:var(--st-yellow);border-color:#f3d99566}
.fn-personal-lessons .fn-study-label{border:0;margin:0;padding:0}
.fn-editor-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fn-personal-lesson-list{list-style:none;padding:0}
.fn-personal-lesson-list li{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0}
.fn-lesson-editor{max-width:960px}
.fn-editor-form{display:grid;gap:18px;margin-top:24px}
.fn-editor-label{display:grid;gap:7px;font:15px/1.5 Georgia,serif;color:var(--st-purple)}
.fn-study .fn-editor-form input,.fn-editor-form select{width:100%;background:#fff7df;color:var(--st-purple);font:18px/1.5 Georgia,serif;border:1px solid #2b1e3855;border-radius:6px;padding:10px 12px}
.fn-study .fn-editor-form input::placeholder{color:#746078}
.fn-study .fn-editor-writing{width:100%;min-height:440px;resize:vertical;background:#fff7df;color:var(--st-purple);font:18px/1.8 Georgia,serif;border:1px solid #2b1e3855;border-radius:6px;padding:18px}
.fn-study .fn-editor-writing::placeholder{color:#746078}
.fn-editor-status{font:14px/1.6 Georgia,serif;color:#5b4467}
.fn-editor-form :is(input,select,textarea):focus-visible{outline:2px solid #70547d;outline-offset:3px}
.fn-editor-form>.fn-editor-actions:last-child{position:sticky;bottom:0;background:#faeac0;padding:12px 0;border-top:1px solid #2b1e3826}
@media(max-width:760px){.fn-study .fn-editor-writing{padding:12px;font-size:17px;min-height:360px}.fn-personal-lesson-list li{align-items:flex-start}.fn-personal-lesson-list a{overflow-wrap:anywhere}}

body.fn-lesson-open{min-height:100vh}
html:has(body.fn-lesson-open){background:#faeac0}
/* Vocab quiz: one word at a time; Nicky types the translation, Check shows the answer in candle-yellow. */
.fn-quiz{padding:8px 0 4px}
.fn-quiz-progress{margin:0 0 10px;color:var(--st-soft);font-style:italic}
.fn-quiz-q{margin:0 0 16px;font:600 clamp(1.7rem,4.5vw,2.4rem)/1.2 'Cormorant Garamond',Georgia,serif;color:var(--st-yellow);overflow-wrap:anywhere}
.fn-quiz-answer{margin:0 0 18px}
.fn-quiz-answer input[type=text]{font-size:1.25rem}
.fn-quiz-answer input:disabled{opacity:.7}
.fn-quiz-result{min-height:1px}
.fn-quiz-verdict{margin:0 0 4px;color:var(--st-soft);font-style:italic}
.fn-quiz-solution{margin:0 0 18px;font:600 1.5rem/1.3 'Cormorant Garamond',Georgia,serif;color:var(--st-cream);overflow-wrap:anywhere}
.fn-quiz-result .fn-vocab-modes{align-items:center}
.fn-listen{font-size:1rem;display:inline-flex;align-items:center;justify-content:center;background:none;border:0;padding:2px;color:var(--st-yellow);opacity:.75;cursor:pointer;line-height:1;vertical-align:middle;transition:opacity .3s ease,filter .3s ease}
.fn-listen:hover{opacity:1;filter:drop-shadow(0 0 6px #f3d99599)}
.fn-listen:focus-visible{outline:1px solid var(--st-yellow);outline-offset:2px}
.fn-listen svg{display:block}
.fn-quiz-q .fn-listen,.fn-quiz-solution .fn-listen{font-size:1.1rem}
.fn-lesson-quiz .fn-listen{color:var(--st-purple)}
.fn-cyr-keys{flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.fn-cyr-row{display:flex;flex-wrap:wrap;gap:4px}
.fn-cyr-row:nth-child(2){margin-left:14px}.fn-cyr-row:nth-child(3){margin-left:28px}
.fn-cyr-key{width:30px;height:30px;padding:0;background:#f3d9950d;border:1px solid #f3d99533;border-radius:7px;color:var(--st-cream);cursor:pointer;font:500 1.05rem/1 'Cormorant Garamond',Georgia,serif}
.fn-cyr-key:hover{background:var(--st-yellow);color:var(--st-night)}
.fn-lesson-quiz .fn-cyr-key{background:transparent;border-color:#2b1e3840;color:var(--st-purple)}
.fn-lesson-quiz .fn-cyr-key:hover{background:var(--st-purple);color:#faeac0}
@media(prefers-reduced-motion:reduce){.fn-listen{transition:none}}
.fn-quiz-missed{list-style:none;margin:0 0 22px;padding:0}
.fn-quiz-missed li{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:8px 0;border-top:1px dashed #f3d99526;font-size:1.15rem}
.fn-quiz-missed li span:first-child{color:var(--st-yellow);font-weight:600}

/* The quiz at the end of a lesson, in purple ink on the lesson paper */
.fn-lesson-quiz{max-width:760px;border-top:1px solid #2b1e3840;margin-top:36px;padding-top:24px}
.fn-lesson.fn-quiz-only .fn-lesson-workspace{display:none}
.fn-lesson.fn-quiz-only .fn-lesson-quiz{border-top:0;margin-top:8px;padding-top:0}
.fn-quiz-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fn-lesson-quiz h3{font:800 1.4rem/1.4 'Arnold Boecklin',Georgia,serif;color:var(--st-purple);margin:0 0 6px;word-spacing:-.38em}
.fn-lesson-quiz .fn-quiz-progress,.fn-lesson-quiz .fn-quiz-verdict{color:#2b1e38b3}
.fn-lesson-quiz .fn-quiz-q{font-size:clamp(1.4rem,3.6vw,1.9rem);color:var(--st-purple)}
.fn-lesson-quiz .fn-quiz-solution{color:var(--st-purple);margin-bottom:8px}
.fn-lesson-quiz .fn-quiz-result .fn-vocab-modes{margin-top:12px}
.fn-lesson-quiz input[type=text]{background:transparent;color:var(--st-purple);border-color:#2b1e3855}
.fn-lesson-quiz input::placeholder{color:#2b1e3880}
.fn-lesson-quiz input[type=text]:focus{outline-color:var(--st-purple)}
.fn-lesson-quiz .fn-study-btn{background:var(--st-purple);color:#faeac0}
.fn-lesson-quiz .fn-study-btn:hover{background:#45325a}
.fn-lesson-quiz .fn-study-btn:disabled{opacity:.5;cursor:default}
.fn-lesson-quiz .fn-quiz-missed li{border-color:#2b1e3826}
.fn-lesson-quiz .fn-quiz-missed li span:first-child{color:var(--st-purple)}
.fn-publish-dialog{max-width:560px;width:calc(100% - 32px);max-height:85vh;overflow:auto;border:1px solid #2b1e3855;border-radius:12px;background:#faeac0;color:var(--st-purple);padding:26px;font:16px/1.7 Georgia,serif}
.fn-publish-dialog::backdrop{background:#150e1dbb}
.fn-publish-dialog h3{font:800 1.7rem/1.3 'Arnold Boecklin',Georgia,serif;margin:0 0 18px}
.fn-publish-dialog a{color:var(--st-purple)}
.fn-publish-dialog label{display:grid;gap:6px;margin:14px 0}
.fn-publish-dialog input{width:100%;padding:10px;font:16px Georgia,serif;background:#fff7df;color:var(--st-purple);border:1px solid #2b1e3866;border-radius:5px}
.fn-publish-dialog details{margin:18px 0}
.fn-publish-dialog summary{cursor:pointer}
.fn-personal-status{font:12px/1.4 Georgia,serif;color:var(--st-soft);white-space:nowrap}

.fn-pie-course-notes{margin-bottom:32px}

/* Pictures in Nicky's own lessons */
.fn-editor-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 12px}
.fn-editor-thumbs:empty{display:none}
.fn-editor-thumbs img{height:64px;width:auto;border-radius:4px;border:1px solid #2b1e3833}
.fn-lesson-figure{margin:1.4em 0}
.fn-lesson-figure img{display:block;max-width:100%;height:auto;border-radius:6px;border:1px solid #2b1e3833}

.fn-course-diagram img{width:100%;max-width:420px}


/* A horizontal halo lifts above the Tocharian figure and dissolves. */
.fn-tocharian-light{opacity:0;transition:opacity .3s ease;pointer-events:none}
.fn-tocharian-halo{opacity:0;transform-origin:1038px 135px}
.fn-room-art:has([data-spot="tocharian"]:is(:hover,:focus-visible)) .fn-tocharian-light{opacity:1}
.fn-room-art:has([data-spot="tocharian"]:is(:hover,:focus-visible)) .fn-tocharian-halo{animation:fn-tocharian-rise 3.2s ease-out infinite}
@keyframes fn-tocharian-rise{0%{opacity:0;transform:translateY(0) scale(1)}15%{opacity:.85}70%{opacity:.35}100%{opacity:0;transform:translateY(-55px) scale(1.18)}}
@media(prefers-reduced-motion:reduce){.fn-tocharian-light{transition:none}.fn-tocharian-halo{animation:none!important;opacity:.55}}

.fn-linguistics-page{transform-origin:1080px 890px;transition:transform 1s ease-in-out}
.fn-room-art:has([data-spot="linguistics"]:is(:hover,:focus-visible)) .fn-linguistics-page{transform:translateY(-3px) rotate(-.45deg)}
@media(prefers-reduced-motion:reduce){.fn-linguistics-page{transition:none;transform:none!important}}
/* Nicky's own lessons: same look as the path rows (cream semi-bold title, italic note, dashed rule) */
.fn-personal-lesson-list li{border-top:1px dashed #f3d99526;padding:12px 0}
.fn-personal-lesson-list li:first-child{border-top:0}
.fn-personal-lesson-list .fn-study-lesson-link{font-weight:600;font-size:1.12rem;color:var(--st-cream)}
.fn-personal-lesson-list .fn-personal-status{font:italic 1rem/1.45 'Cormorant Garamond',Georgia,serif}

/* Sync between devices, on the crystal's page */
.fn-sync{margin-top:40px;max-width:660px}
.fn-sync-why{color:var(--st-soft);font-style:italic;margin:0 0 12px}
.fn-sync-how{margin:0 0 6px;color:var(--st-cream)}
.fn-sync-how summary{color:var(--st-yellow);font-style:italic;cursor:pointer}
.fn-sync-how ol{margin:8px 0 0;padding-left:1.3em}
.fn-sync-how li{margin:4px 0}
.fn-sync-how a{color:var(--st-yellow);text-decoration:none;border-bottom:1px solid #f3d99555}
.fn-sync input[type=password]{flex:1 1 220px;min-width:0;background:#1a1224;color:var(--st-cream);border:1px solid var(--st-line);border-radius:10px;padding:10px 12px;font:400 18px/1.5 'Cormorant Garamond',Georgia,serif}
.fn-sync input[type=password]:focus{outline:2px solid var(--st-yellow);outline-offset:1px}
.fn-sync .fn-vocab-modes{margin-bottom:4px}
/* Quotes (#quotes, the three books; quotes.js): her books by genre, A to Z; each opens a notes page (ids quote-…) */
.fn-quotes-genre{margin:0 0 6px}
.fn-quotes-genre[open]{margin-bottom:30px}
.fn-quotes-genre>summary{list-style:none;cursor:inherit;display:flex;align-items:baseline;gap:14px;padding:14px 0 9px;margin:0}
.fn-quotes-genre>summary::-webkit-details-marker{display:none}
.fn-quotes-genre>summary::before{content:'';flex:none;width:7px;height:7px;border:solid currentColor;border-width:0 1px 1px 0;transform:translateY(-3px) rotate(-45deg);transition:transform .25s ease}
.fn-quotes-genre[open]>summary::before{transform:translateY(-5px) rotate(45deg)}
.fn-quotes-genre>summary:hover{text-shadow:0 0 12px rgba(243,217,149,.45)}
.fn-quotes-n{margin-left:auto;font:italic 400 1rem 'Cormorant Garamond',Georgia,serif;letter-spacing:0;text-transform:none;color:var(--st-cream,#efe0bf);opacity:.7}
.fn-quotes-genre[open]>summary{margin-bottom:14px}
.fn-quotes-books{list-style:none;margin:0;padding:0;columns:2 280px;column-gap:44px}
.fn-quotes-books li{break-inside:avoid;margin:0 0 4px}
.fn-quotes-book{display:block;padding:7px 0;text-decoration:none;border-bottom:1px solid #f3d9951f}
.fn-quotes-title{display:block;color:var(--st-cream);font-size:1.15rem;line-height:1.3;transition:color .3s}
.fn-quotes-author{display:block;color:var(--st-soft);font-style:italic;font-size:.95rem}
.fn-quotes-book:hover .fn-quotes-title,.fn-quotes-book:focus-visible .fn-quotes-title{color:var(--st-yellow)}
.fn-quotes-book:focus-visible{outline:2px solid var(--st-yellow);outline-offset:3px;border-radius:2px}
article.fn-lesson[id^="quote-"] .fn-lesson-notes p{white-space:pre-line;font-style:italic}
article.fn-lesson[id^="quote-"] .fn-lesson-notes p+p{margin-top:1.1em}
/* Whole poems on a book page (tools/quote-poems.json): original beside the Italian, one stanza per row; stacked on phones */
article.fn-lesson[id^="quote-"] .fn-lesson-table table{table-layout:fixed}
article.fn-lesson[id^="quote-"] .fn-lesson-table td{white-space:pre-line;font-style:italic}
@media(max-width:760px){article.fn-lesson[id^="quote-"] .fn-lesson-table table{width:100%;min-width:0;font-size:15px}
article.fn-lesson[id^="quote-"] .fn-lesson-table tr:first-child{display:none}
article.fn-lesson[id^="quote-"] .fn-lesson-table td{display:block;width:auto;border-bottom:0}
article.fn-lesson[id^="quote-"] .fn-lesson-table td+td{padding-top:0;opacity:.78;border-bottom:1px solid #2b1e3822}}
/* Blok (lesson 3): poems line by line, Russian beside the slides' English; stacked on phones */
article#silver-age-blok .fn-lesson-table table{table-layout:fixed}
article#silver-age-blok .fn-lesson-table td{font-style:italic;padding-top:2px;padding-bottom:2px;border-bottom:0}
@media(max-width:760px){article#silver-age-blok .fn-lesson-table :is(table,tbody,tr){display:block;width:100%;min-width:0;font-size:15px}
article#silver-age-blok .fn-lesson-table td{display:block;width:auto}
article#silver-age-blok .fn-lesson-table td+td{padding-top:0;padding-bottom:8px;opacity:.78}}
/* By heart (assets/by-heart.js): a poem's room, one stanza at a time; read, fade to first letters, recite */
.fn-heart-open{margin:-4px 0 20px}
/* Every quote can be learned by heart too: a small quiet link under it */
article.fn-lesson[id^="quote-"] .fn-lesson-notes p.fn-heart-quote{margin:.15em 0 0;font-style:normal;font-size:.82em;letter-spacing:.04em}
.fn-heart-quote a{color:inherit;opacity:.55;text-decoration:none;border-bottom:1px solid currentColor}
.fn-heart-quote a:hover,.fn-heart-quote a:focus-visible{opacity:1}
.fn-heart-open a{display:inline-block;text-decoration:none}
.fn-heart-langs{margin:0 0 16px;align-items:center}
.fn-heart-langs-label{color:var(--st-soft);font-style:italic;margin-right:4px}
.fn-heart-all{font-size:1rem}
.fn-heart-actions{margin:0 0 26px}
.fn-heart-stage:empty{display:none}
.fn-heart-stage{margin:0 0 34px;padding:22px 26px;border:1px solid var(--st-line);border-radius:12px;background:#150e1d66}
.fn-heart-step{margin:0 0 14px;color:var(--st-soft);font-style:italic}
.fn-heart-verse{margin:0 0 18px;font:500 clamp(1.25rem,3vw,1.5rem)/1.55 'Cormorant Garamond',Georgia,serif;color:var(--st-cream)}
.fn-heart-line{margin:0}
#heart-laus-veneris .fn-heart-line:nth-child(3){padding-left:1.4em} /* the unrhymed third line of Swinburne's quatrains */
.fn-heart-word.is-faded{color:#c9b9d699;letter-spacing:.06em;cursor:pointer;border-radius:3px}
.fn-heart-word.is-faded:hover,.fn-heart-word.is-faded:focus-visible{color:var(--st-yellow);outline:none}
.fn-heart-word.is-said{color:var(--st-yellow)}
.fn-heart-word.is-missed{color:var(--st-cream);text-decoration:underline;text-decoration-color:#e8a0a0;text-decoration-thickness:2px;text-underline-offset:4px}
.fn-heart-translation{margin:0 0 20px;white-space:pre-line;color:var(--st-soft);font-style:italic;font-size:1rem;line-height:1.55}
.fn-heart-cue{margin:0 0 12px;color:var(--st-soft);font-style:italic}
.fn-heart-help .fn-heart-verse{font-size:1.1rem;margin-bottom:10px}
.fn-heart-form textarea{display:block;margin:0 0 12px;font-size:1.2rem;line-height:1.55;resize:vertical}
.fn-heart-map{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.fn-heart-dot{width:34px;height:34px;border-radius:50%;border:1px solid #f3d99555;background:transparent;color:var(--st-soft);font:500 .8rem Georgia,serif;cursor:pointer;padding:0}
.fn-heart-dot:hover,.fn-heart-dot:focus-visible{border-color:var(--st-yellow);color:var(--st-yellow);outline:none}
.fn-heart-dot[data-step="1"]{background:#f3d99526;color:var(--st-cream)}
.fn-heart-dot[data-step="2"]{background:#f3d99540;color:var(--st-cream)}
.fn-heart-dot[data-step="3"]{background:#f3d99566;color:var(--st-night)}
.fn-heart-dot[data-step="4"],.fn-heart-dot[data-step="5"]{background:var(--st-yellow);color:var(--st-night)}
.fn-heart-dot[data-due]{box-shadow:0 0 0 2px var(--st-night),0 0 0 3px #e8a0a0}
.fn-heart-shelf{margin:0 0 34px}
.fn-heart-hint{margin:-4px 0 12px;font-style:italic;color:var(--st-soft)}
.fn-quotes-book[data-due] .fn-quotes-author{color:var(--st-yellow)}
@media(max-width:760px){.fn-heart-stage{padding:16px 14px}}

/* Quotes: search and "Surprise me" (quotes.js); the quote you land on glows for a moment */
.fn-quotes-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 26px}
.fn-quotes-tools input{flex:1 1 220px;min-width:0;font:inherit;font-size:1.1rem;padding:8px 14px;border-radius:999px;background:transparent;color:var(--st-cream);border:1px solid #f3d99555}
.fn-quotes-tools input::placeholder{color:#efe0bf80}
.fn-quotes-tools input:focus{outline:none;border-color:var(--st-yellow);box-shadow:0 0 10px #f3d99533}
.fn-quotes-found{margin:0 0 30px}
.is-searching .fn-heart-shelf{display:none}
.fn-quotes-tools input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.fn-quotes-hits{list-style:none;margin:0;padding:0}
.fn-quotes-hit{display:block;text-decoration:none;color:inherit;padding:10px 0;border-bottom:1px solid #f3d99522}
.fn-quotes-hit:hover .fn-quotes-snippet{color:var(--st-yellow)}
.fn-quotes-snippet{display:block;font-style:italic;color:var(--st-cream);transition:color .3s ease}
.fn-quotes-snippet mark{background:none;color:var(--st-yellow);font-style:normal;border-bottom:1px solid currentColor}
@keyframes fn-quote-found{0%,40%{background:#f3d99566}100%{background:transparent}}
article.fn-lesson .fn-quote-found{animation:fn-quote-found 2.6s ease-out;border-radius:4px}
/* Reading aloud (by-heart.js): on the light book pages the speaker is drawn in purple */
article.fn-lesson .fn-heart-quote .fn-listen,article.fn-lesson .fn-heart-open .fn-listen{color:var(--st-purple);margin-left:6px}
.fn-heart-step .fn-listen{margin-left:4px}
.fn-heart-verse>.fn-listen{float:right}
/* Today (today.js) */
.fn-today-link{margin-left:auto}
.fn-study-bar .fn-today-link~.fn-today-link{display:none}
.fn-today-none{font-style:italic;color:var(--st-soft)}
@media(prefers-reduced-motion:reduce){article.fn-lesson .fn-quote-found{animation:none;background:#f3d99544}.fn-quotes-snippet{transition:none}}
@media(prefers-reduced-motion:reduce){.fn-quotes-genre>summary::before{transition:none}}
/* Irregular verbs (#french-verbs, french-verbs.js): each verb a drop-down with its tense tables, then typed tests */
.fn-verbs-tenses{margin:0 0 14px}
.fn-verbs .fn-vocab-head+.fn-quiz+.fn-study-saved{margin:0 0 8px}
.fn-verbs .fn-vocab-modes .fn-study-btn{padding:5px 20px}
.fn-verbs-list{margin-top:28px;border-top:1px solid var(--st-line)}
.fn-verb{border-bottom:1px solid var(--st-line)}
.fn-verb>summary{list-style:none;cursor:inherit;display:flex;align-items:baseline;gap:14px;padding:12px 0}
.fn-verb>summary::-webkit-details-marker{display:none}
.fn-verb>summary::before{content:'';flex:none;width:7px;height:7px;border:solid var(--st-yellow);border-width:0 1px 1px 0;transform:translateY(-3px) rotate(-45deg);transition:transform .25s ease}
.fn-verb[open]>summary::before{transform:translateY(-5px) rotate(45deg)}
.fn-verb-inf{font:600 1.35rem 'Cormorant Garamond',Georgia,serif;color:var(--st-yellow)}
.fn-verb-en{font-style:italic;color:var(--st-soft)}
.fn-verb>summary:hover .fn-verb-inf{text-shadow:0 0 12px rgba(243,217,149,.45)}
.fn-verb-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 34px;padding:6px 0 18px 21px}
.fn-verb-tense-name{margin:0 0 6px;font:italic 500 1.05rem 'Cormorant Garamond',Georgia,serif;color:var(--st-yellow);border-bottom:1px dashed #f3d99540;padding-bottom:4px}
.fn-verb-tense ol{list-style:none;margin:0;padding:0}
.fn-verb-tense li{padding:1px 0;font-size:1.05rem}
.fn-verb-who{color:var(--st-soft);font-style:italic}
.fn-verb-form{color:var(--st-cream)}
.fn-verb .fn-vocab-modes{padding:0 0 18px 21px}
.fn-verbs-cue{margin:-6px 0 16px;font-size:1.2rem;color:var(--st-cream)}
.fn-verbs-cue em{color:var(--st-yellow)}
.fn-verbs-fill{display:grid;gap:10px;margin:0 0 14px;max-width:520px}
.fn-quiz-q .fn-verb-en{font:italic 400 1.1rem 'Cormorant Garamond',Georgia,serif;margin-left:6px}
.fn-verbs-line{display:grid;grid-template-columns:6.8em 1fr;align-items:center;gap:10px}
.fn-verbs-line input[type=text]{font-size:1.15rem;width:auto;min-width:0}
.fn-verbs-line input:disabled{opacity:.75}
.fn-verbs-line.is-right input{border-color:#b9d79a}
.fn-verbs-line.is-wrong input{border-color:#e39a8f}
.fn-verbs-fix{grid-column:2;margin-top:-4px;color:var(--st-yellow);font-style:italic}
.fn-verbs-fill .fn-vocab-modes{margin-top:6px}
@media(max-width:520px){.fn-verbs-line{grid-template-columns:5.6em 1fr}.fn-verb-tables{padding-left:0}.fn-verb .fn-vocab-modes{padding-left:0}}
@media(prefers-reduced-motion:reduce){.fn-verb>summary::before{transition:none}}