/* BY TRICHY, FOR TRICHY - "The Board".
 *
 * The painting is never dimmed. Not once. Every word instead sits on a solid object
 * placed over it: a cream slab for the asking, a cream strip for each answer, an ink
 * chip for the small print. Contrast is guaranteed by construction, so the image can
 * stay at full strength and the type stays perfectly readable.
 *
 * Answers are tiles that show the place they mean. Choosing one throws that painting
 * across the whole screen.
 */

:root{
  --cream:#F7F3E9;
  --cream-2:#EDE6D6;
  --ink:#12100D;
  --ink-2:rgba(18,16,13,.72);
  --ink-3:rgba(18,16,13,.50);
  --red:#A32B1F;
  --gold:#E0A030;
  --line:rgba(18,16,13,.14);
  --pad:clamp(1.1rem,2.6vw,2.6rem);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --tam:'Noto Serif Tamil',serif;
  --ease:cubic-bezier(.16,.84,.28,1);
  --ease-spring:cubic-bezier(.175,.885,.32,1.275);

  /* Liquid Glass. Light materials so the painting shows through and ink text
     still clears 4.5:1 against whatever is behind it. */
  --glass-thick:rgba(255,255,255,.46);
  --glass:rgba(255,255,255,.36);
  --glass-thin:rgba(255,255,255,.24);
  --glass-dark:rgba(22,19,15,.42);
  --glass-edge:1px solid rgba(255,255,255,.46);
  --glass-edge-dark:1px solid rgba(255,255,255,.20);
  --blur-thick:blur(56px) saturate(190%);
  --blur:blur(40px) saturate(180%);
  --blur-thin:blur(22px) saturate(165%);

  /* concentricity: inner radius + padding = outer radius */
  --r-lg:22px; --r-md:14px; --r-sm:10px; --r-pill:9999px;
}

/* One material class, so every glass surface behaves identically and there is a
   single solid fallback for browsers and phones without backdrop-filter. */
.glass{background:var(--glass);border:var(--glass-edge);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.glass-thick{background:var(--glass-thick);border:var(--glass-edge);
  -webkit-backdrop-filter:var(--blur-thick);backdrop-filter:var(--blur-thick)}
.glass-dark{background:var(--glass-dark);border:var(--glass-edge-dark);color:var(--cream);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.glass-thick{background:var(--cream)}
  .glass-dark{background:var(--ink)}
}
html[lang="ta"]{ --serif:'Noto Serif Tamil','Cormorant Garamond',serif; --sans:'Noto Sans Tamil','Inter',sans-serif; }

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#0d0b09;color:var(--cream);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}

/* ---------------------------------------------------------------- the place */
#art{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0d0b09}
#art .layer{position:absolute;inset:0;background-size:cover;background-position:center 46%;
  opacity:0;transition:opacity .8s var(--ease),transform 18s linear;transform:scale(1.04)}
#art .layer.on{opacity:1;transform:scale(1)}
#art .wash{position:absolute;inset:0;background:#14110c}
#art .grain{position:absolute;inset:0;opacity:.05;pointer-events:none;mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,250,235,.6) .5px,transparent .6px);background-size:3px 3px}
/* the ONLY veil, and it is barely there. Just enough to seat the objects. */
#scrim{display:none}
.seam{display:none}

/* The name of the place, written on the painting itself. Top right, in a hand.
   A soft blurred shade sits behind it so it always reads, without turning into
   another UI chip. */
#placename{
  position:fixed;z-index:3;pointer-events:none;
  top:clamp(4.6rem,9vh,6.4rem);right:var(--pad);
  width:max-content;max-width:min(46vw,520px);text-align:right;
  font-family:'Caveat',cursive;font-weight:600;
  font-size:clamp(2rem,4.2vw,3.6rem);line-height:1.05;
  color:#FFF8EA;text-shadow:0 1px 3px rgba(0,0,0,.85), 0 3px 18px rgba(0,0,0,.7);
  opacity:0;transform:translateY(-6px) rotate(-1.4deg);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
#placename::before{
  content:'';position:absolute;inset:-55% -22%;z-index:-1;
  background:radial-gradient(closest-side, rgba(8,6,4,.88), rgba(8,6,4,.56) 58%, rgba(8,6,4,0) 100%);
  filter:blur(9px);
}
#placename.on{opacity:1;transform:translateY(0) rotate(-1.4deg)}
@media (max-width:759px){
  #placename{top:auto;bottom:calc(4.6rem + env(safe-area-inset-bottom));right:var(--pad);
    left:auto;width:max-content;max-width:calc(100vw - (2 * var(--pad)));
    font-size:clamp(1.7rem,8vw,2.4rem)}
  #placename::before{inset:-70% -10%;
    background:radial-gradient(closest-side, rgba(8,6,4,.95), rgba(8,6,4,.72) 55%, rgba(8,6,4,0) 100%);
    filter:blur(12px)}
}

/* ---------------------------------------------------------------- frame */
.app{position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column}

.topbar{
  display:flex;align-items:center;gap:.6rem;padding:var(--pad) var(--pad) 0;
  flex-wrap:nowrap;min-width:0;
}
.mark{min-width:0;flex-shrink:1}
.mark b,.mark span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mark{
  display:inline-flex;flex-direction:column;gap:.1rem;
  background:rgba(22,19,15,.58);color:var(--cream);padding:.5rem .9rem;
  border:var(--glass-edge-dark);border-radius:var(--r-md);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
}
.mark b{font-family:var(--serif);font-weight:700;font-size:1.02rem;line-height:1.05;
  letter-spacing:-.005em;white-space:nowrap}
.mark span{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;opacity:.92}
html[lang="ta"] .mark span{letter-spacing:.04em;text-transform:none;font-size:.68rem}

.track{flex:1 1 auto;min-width:60px;height:6px;position:relative;border-radius:var(--r-pill);
  background:rgba(22,19,15,.42);border:var(--glass-edge-dark);overflow:hidden;
  -webkit-backdrop-filter:var(--blur-thin);backdrop-filter:var(--blur-thin)}
.track i{position:absolute;inset:0;width:0;border-radius:var(--r-pill);
  background:var(--cream);transition:width .7s var(--ease)}
.step{background:rgba(22,19,15,.62);color:var(--cream);padding:.4rem .7rem;font-size:.68rem;
  letter-spacing:.16em;font-variant-numeric:tabular-nums;border:var(--glass-edge-dark);
  border-radius:var(--r-sm);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.langtoggle{display:inline-flex;background:var(--glass-dark);padding:3px;
  border:var(--glass-edge-dark);border-radius:var(--r-pill);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)}
.langtoggle button{min-height:38px;display:inline-flex;align-items:center;
  padding:.42rem .95rem;font-size:.76rem;color:rgba(247,243,233,.82);
  border-radius:var(--r-pill);
  transition:background .25s var(--ease),color .25s var(--ease),transform .1s var(--ease)}
.langtoggle button:active{transform:scale(.97)}
.langtoggle button[aria-pressed="true"]{background:var(--cream);color:var(--ink);font-weight:600}

/* the chapter strip, four solid chips */
.chapters{display:flex;gap:.3rem;padding:.7rem var(--pad) 0;flex-wrap:wrap}
.chapters li{background:rgba(22,19,15,.76);color:rgba(247,243,233,.94);
  padding:.38rem .72rem;font-size:.68rem;letter-spacing:.02em;display:flex;gap:.45rem;
  border:var(--glass-edge-dark);border-radius:var(--r-pill);
  -webkit-backdrop-filter:var(--blur-thin);backdrop-filter:var(--blur-thin);
  transition:background .4s var(--ease),color .4s var(--ease)}
.chapters li .n{opacity:.6;font-variant-numeric:tabular-nums}
.chapters li.done{color:rgba(247,243,233,.9)}
.chapters li.now{background:var(--cream);color:var(--ink);font-weight:600;border-color:transparent}
.chapters li.now .n{opacity:.7}

/* ---------------------------------------------------------------- the asking */
.qwrap{flex:1;min-height:0;display:flex;align-items:flex-start;justify-content:flex-start;
  overflow-y:auto;overflow-x:hidden;
  padding:clamp(.7rem,1.6vw,1.2rem) var(--pad) var(--pad);
  scrollbar-width:none}
.qwrap::-webkit-scrollbar{width:0;height:0}
.app{height:100dvh;overflow:hidden}
.q{width:100%;max-width:min(100%,540px)}
.q[data-anim="in"]{animation:qin .5s var(--ease) backwards}
.q[data-anim="out"]{animation:qout .22s var(--ease) forwards}
@keyframes qin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes qout{from{opacity:1}to{opacity:0}}

/* the slab: a solid cream card the question is printed on */
.qhead{width:100%;background:var(--glass-thick);border:var(--glass-edge);border-radius:var(--r-lg);
  -webkit-backdrop-filter:var(--blur-thick);backdrop-filter:var(--blur-thick);
  color:var(--ink);display:block;max-width:540px;
  padding:clamp(.8rem,1.5vw,1.1rem) clamp(.9rem,1.7vw,1.3rem);margin-bottom:.5rem;
  box-shadow:0 12px 40px -22px rgba(0,0,0,.55)}
h1.qt{font-family:var(--serif);font-weight:700;color:var(--ink);
  font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.04;letter-spacing:-.018em}
html[lang="ta"] h1.qt{font-size:clamp(1.25rem,2.5vw,2rem);line-height:1.36;letter-spacing:0}
.qhelp{margin-top:.5rem;font-size:.84rem;color:var(--ink-2);line-height:1.5}
.eyebrow{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
html[lang="ta"] .eyebrow{letter-spacing:.04em;text-transform:none;font-size:.74rem}

/* ---------------------------------------------------------------- the tiles */
.opts{display:grid;grid-template-columns:1fr;gap:.3rem;max-width:540px}
.opt{
  position:relative;display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;
  min-height:46px;padding:.48rem .72rem;
  background:var(--glass-thick);border:var(--glass-edge);border-radius:var(--r-md);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  color:var(--ink);box-shadow:0 8px 26px -20px rgba(0,0,0,.6);
  transition:background .18s var(--ease),transform .12s var(--ease),box-shadow .18s var(--ease);
}
.opt:hover{background:rgba(255,255,255,.82);box-shadow:0 14px 32px -18px rgba(0,0,0,.7)}
.opt:active{transform:scale(.985)}
.opt .key{
  flex:none;min-width:1.45rem;height:1.45rem;border-radius:var(--r-sm);
  background:rgba(22,19,15,.88);color:var(--cream);
  display:grid;place-items:center;font-size:.68rem;font-weight:700;
  font-variant-numeric:tabular-nums;transition:background .18s var(--ease),color .18s var(--ease);
}
.opt .lb{display:flex;flex-direction:column;gap:.08rem;min-width:0}
.opt .lb b{font-weight:600;font-size:.9rem;line-height:1.22;letter-spacing:-.004em}
html[lang="ta"] .opt .lb b{font-size:.88rem;line-height:1.36}
.opt .lb i{font-style:normal;font-size:.74rem;line-height:1.3;color:var(--ink-3)}
.opt[aria-pressed="true"]{background:var(--red);color:#fff;border-color:transparent}
.opt[aria-pressed="true"] .key{background:rgba(255,255,255,.22);color:#fff}
.opt[aria-pressed="true"] .lb i{color:rgba(255,255,255,.88)}

/* ---------------------------------------------------------------- panels */
.panel{width:100%;background:var(--glass-thick);border:var(--glass-edge);border-radius:var(--r-lg);
  -webkit-backdrop-filter:var(--blur-thick);backdrop-filter:var(--blur-thick);
  color:var(--ink);padding:clamp(1rem,2vw,1.5rem);max-width:540px;
  box-shadow:0 12px 40px -22px rgba(0,0,0,.55)}
.areafind{width:100%;padding:.6rem .8rem;margin-bottom:.7rem;
  border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.72);
  color:var(--ink);font-size:.88rem;outline:none;-webkit-appearance:none}
.areafind::placeholder{color:var(--ink-3)}
.areafind:focus{border-color:var(--red)}
.arealist{max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain;
  margin:0 -.2rem .5rem;padding:0 .2rem;scrollbar-width:thin}
.grouphead{font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:.5rem 0 .35rem}
.grouphead:first-child{margin-top:0}
html[lang="ta"] .grouphead{letter-spacing:.04em;text-transform:none;font-size:.72rem}
.nohit{font-size:.8rem;color:var(--ink-2);margin-bottom:.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.5rem}
.chip{min-height:36px;padding:.42rem .84rem;border:1px solid var(--line);font-size:.82rem;
  color:var(--ink);background:rgba(255,255,255,.90);border-radius:var(--r-pill);
  transition:all .18s var(--ease)}
.chip:hover{border-color:var(--ink);}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}

.field{width:100%;padding:.7rem 0;border:0;border-bottom:2px solid var(--line);background:none;
  font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.6rem);line-height:1.35;
  resize:none;outline:none;color:var(--ink)}
html[lang="ta"] .field{font-size:clamp(1rem,1.7vw,1.28rem)}
.field::placeholder{color:var(--ink-3)}
.field:focus{border-bottom-color:var(--red)}
.sentence{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem}
.sentence .pre{font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.6rem);color:var(--ink-2);white-space:nowrap}
html[lang="ta"] .sentence .pre{font-size:clamp(1rem,1.7vw,1.28rem);white-space:normal}
.sentence .field{flex:1;min-width:11rem}
.count{margin-top:.4rem;font-size:.7rem;color:var(--ink-3);font-variant-numeric:tabular-nums}

.tel{display:flex;align-items:baseline;gap:.5rem;border-bottom:2px solid var(--line)}
.tel:focus-within{border-bottom-color:var(--red)}
.tel span{font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.6rem);color:var(--ink-3)}
.tel input{flex:1;border:0;background:none;outline:none;padding:.7rem 0;color:var(--ink);
  font-family:var(--serif);font-size:clamp(1.2rem,2.1vw,1.6rem);letter-spacing:.05em}
.perks{margin-top:1.1rem;display:grid;gap:.4rem}
.perks li{display:flex;gap:.6rem;font-size:.84rem;color:var(--ink-2);line-height:1.45}
.perks li::before{content:'';flex:none;width:.4rem;height:.4rem;background:var(--red);margin-top:.45rem}
.err{color:var(--red);font-size:.83rem;margin-top:.7rem;font-weight:600}

/* ---------------------------------------------------------------- actions */
.actions{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;flex-wrap:wrap;
  position:sticky;bottom:0;z-index:4;
  padding:.55rem 0 .2rem;
}
.next{min-height:44px;padding:.72rem 1.8rem;background:var(--red);color:#fff;
  font-size:.88rem;font-weight:700;letter-spacing:.01em;border-radius:var(--r-pill);
  box-shadow:0 8px 24px -12px rgba(163,43,31,.9);
  transition:background .22s var(--ease),transform .1s var(--ease)}
.next:hover:not(:disabled){background:#8d2417}
.next:active:not(:disabled){transform:scale(.97)}
.next:disabled{background:rgba(22,19,15,.62);color:rgba(255,255,255,.86);
  box-shadow:none;cursor:not-allowed;
  -webkit-backdrop-filter:var(--blur-thin);backdrop-filter:var(--blur-thin)}
.back,.skip{min-height:44px;display:inline-flex;align-items:center;
  padding:.72rem 1.2rem;background:rgba(22,19,15,.70);color:var(--cream);font-size:.84rem;
  border:var(--glass-edge-dark);border-radius:var(--r-pill);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:background .22s var(--ease),transform .1s var(--ease)}
.back:hover,.skip:hover{background:rgba(22,19,15,.86)}
.back:active,.skip:active{transform:scale(.97)}
.skip{margin-left:auto}
.hint{background:rgba(22,19,15,.72);color:rgba(247,243,233,.96);padding:.5rem .8rem;
  font-size:.7rem;letter-spacing:.04em;border:var(--glass-edge-dark);border-radius:var(--r-pill);
  -webkit-backdrop-filter:var(--blur-thin);backdrop-filter:var(--blur-thin)}

/* ---------------------------------------------------------------- intro */
.intro{max-width:min(100%,620px)}
.introslab{background:var(--glass-thick);border:var(--glass-edge);border-radius:var(--r-lg);
  -webkit-backdrop-filter:var(--blur-thick);backdrop-filter:var(--blur-thick);
  color:var(--ink);display:block;max-width:620px;
  padding:clamp(1.2rem,2.6vw,2rem);box-shadow:0 16px 50px -26px rgba(0,0,0,.6)}
.introslab h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.9rem);
  line-height:1;letter-spacing:-.028em;margin-top:.6rem;color:var(--ink)}
html[lang="ta"] .introslab h1{font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.22;letter-spacing:0}
.introslab .lede{font-family:var(--serif);font-size:clamp(1.08rem,1.9vw,1.42rem);line-height:1.44;
  color:var(--ink-2);margin-top:1rem;max-width:46ch}
html[lang="ta"] .introslab .lede{font-size:clamp(.95rem,1.5vw,1.16rem);line-height:1.6}
.meta{display:flex;gap:1.6rem;margin-top:1.3rem;flex-wrap:wrap}
.meta div{display:flex;flex-direction:column;gap:.16rem}
.meta b{font-family:var(--serif);font-size:1.7rem;font-weight:700;line-height:1;color:var(--red)}

/* ---------------------------------------------------------------- result */
.stamp{display:inline-block;background:rgba(22,19,15,.72);color:var(--cream);
  border:var(--glass-edge-dark);border-radius:var(--r-pill);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  padding:.42rem .85rem;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:.6rem}
html[lang="ta"] .stamp{letter-spacing:.03em;text-transform:none;font-size:.76rem}
.result{max-width:min(100%,620px);width:100%}
.card{background:rgba(255,255,255,.62);border:var(--glass-edge);border-radius:var(--r-lg);
  -webkit-backdrop-filter:var(--blur-thick);backdrop-filter:var(--blur-thick);
  color:var(--ink);overflow:hidden;box-shadow:0 16px 50px -26px rgba(0,0,0,.6)}
.card .top{padding:clamp(1.2rem,2.6vw,2rem);border-bottom:2px solid var(--ink)}
.card .type{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4.4vw,3.2rem);
  line-height:1.02;letter-spacing:-.022em;margin-top:.35rem;color:#5E1710}
html[lang="ta"] .card .type{font-size:clamp(1.35rem,2.8vw,2.1rem);line-height:1.26;letter-spacing:0}
.card .blurb{font-size:.92rem;color:var(--ink-2);line-height:1.58;margin-top:.8rem;max-width:46ch}
.card .rows{display:grid;grid-template-columns:1fr 1fr}
.card .rows div{padding:.9rem clamp(1.2rem,2.6vw,2rem);border-bottom:1px solid var(--line)}
.card .rows div:nth-child(odd){border-right:1px solid var(--line)}
.card .rows b{display:block;font-size:.92rem;font-weight:600;margin-top:.24rem}
.card .quote{padding:clamp(1.2rem,2.6vw,2rem)}
.card .quote p{font-family:var(--serif);font-size:clamp(1.12rem,2.1vw,1.55rem);line-height:1.36;margin-top:.45rem}
.share{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.share a{min-height:44px;display:inline-flex;align-items:center;
  padding:.74rem 1.4rem;background:rgba(22,19,15,.70);color:var(--cream);font-size:.85rem;
  text-decoration:none;border:var(--glass-edge-dark);border-radius:var(--r-pill);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  transition:background .22s var(--ease),transform .1s var(--ease)}
.share a:active{transform:scale(.97)}
.share a.primary{background:var(--red);color:#fff;font-weight:700}
.share a:hover{background:#2b2620}
.share a.primary:hover{background:#9e2d21}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1023px){

  .qwrap{align-items:flex-start}
}
@media (max-width:480px){
  /* on the narrowest phones the bar wraps rather than pushing the language toggle
     off the edge of a clipped app */
  .topbar{flex-wrap:wrap}
  .track{order:3;flex:1 1 100%;min-width:0}
  .mark{flex:1 1 auto}
}
@media (max-width:759px){
  .opts{grid-template-columns:1fr}
  /* thumb-sized on a phone, per the 44pt minimum */
  .langtoggle button{min-height:44px;padding:.5rem 1.05rem;font-size:.8rem}
  :root{}
  .topbar{gap:.5rem}
  .mark b{font-size:.92rem}
  .chapters li{font-size:.62rem;padding:.3rem .5rem}
  .qwrap{padding-bottom:5.6rem}
  /* a dozen blurred surfaces at once is real GPU cost on mid range Android, which is
     most of this audience. The tiles go solid, the big glass stays. */
  /* the result card is the payoff and it is read at arm's length on a phone,
     so it gets a firmer material than the rest of the glass */
  .card{background:rgba(255,255,255,.80)}
  .opt,.chapters li,.hint{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .opt{background:var(--cream)}
  .opt:hover{background:var(--cream)}
  .opt[aria-pressed="true"]{background:var(--red)}
  .chapters li{background:rgba(22,19,15,.90)}
  .actions{position:fixed;left:0;right:0;bottom:0;z-index:6;margin:0;gap:.4rem;
    padding:.6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
    background:var(--glass-dark);border-top:var(--glass-edge-dark);
    -webkit-backdrop-filter:var(--blur-thick);backdrop-filter:var(--blur-thick)}
  .next{flex:1;text-align:center;padding:.88rem 1rem}
  .hint{display:none}
  .card .rows{grid-template-columns:1fr}
  .card .rows div:nth-child(odd){border-right:0}
  .sentence{display:block}
  .sentence .pre{display:block;margin-bottom:.15rem;white-space:normal}
  .sentence .field{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  #art .layer{transform:none !important}
}