/* The playground's three demos: each a screen laid out on the app's 390 by 844 design frame, scaled to its phone. */
.demo { width: 300px; }
.demo .phone { position: relative; border-radius: 40px; background: #14171B; padding: 8px; box-shadow: 0 22px 40px rgba(58,52,44,.22), 0 6px 0 #07080A; }
.dwrap { position: relative; border-radius: 32px; overflow: hidden; aspect-ratio: 390 / 844; background: var(--snow); }
.ds { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform-origin: 0 0; overflow: hidden; background: #FDFDFF; direction: ltr;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.ds img { -webkit-user-drag: none; pointer-events: none; }
.ds * { box-sizing: border-box; }
.ds[dir="rtl"] { direction: rtl; }
.ds[dir="rtl"] .q-head, .ds[dir="rtl"] .q-top { direction: ltr; }

/* ---------------------------------------------------------------- the game */
.g-glow { position: absolute; inset: 0; z-index: 30; pointer-events: none; border-radius: 0; opacity: 0;
  box-shadow: inset 0 0 44px 10px rgba(255,176,32,.7); }
.g-glow.red { box-shadow: inset 0 0 44px 10px rgba(255,75,75,.7); }
.g-score { position: absolute; left: 22px; top: 22px; height: 38px; padding: 0 9px 0 13px; border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 2px #E1E5E8, 0 3px 0 #C5CBD0; display: flex; align-items: center; gap: 6px; font: 800 19px/1 'ArtimoSans'; color: #20252C; z-index: 5; }
.g-score img { width: 22px; height: 23px; }
.g-pause { position: absolute; right: 22px; top: 21px; width: 42px; z-index: 5; }
.g-streak { position: absolute; left: 195px; top: 40px; width: 0; height: 0; z-index: 6; }
.g-num { position: absolute; left: 0; top: 0; height: 54px; transform: translate(-50%, -50%); }
.g-num.pop { animation: gpop .38s cubic-bezier(.3,1.6,.5,1); }
.g-num.shake { animation: gshake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes gpop { from { transform: translate(-50%, -50%) scale(1.35); } to { transform: translate(-50%, -50%) scale(1); } }
@keyframes gshake { 20%, 60% { transform: translate(calc(-50% - 6px), -50%); } 40%, 80% { transform: translate(calc(-50% + 6px), -50%); } }
.g-fan { position: absolute; left: 0; top: 0; }
.g-fan img { position: absolute; left: -15px; top: -17px; width: 30px; height: 34px; object-fit: contain; transition: transform .35s cubic-bezier(.3,1.4,.5,1), opacity .3s; }
.g-fan img.drop { transition: transform .5s cubic-bezier(.5,0,.8,.6), opacity .45s; opacity: 0; }
.g-queue { position: absolute; left: 81px; top: 76px; height: 34px; width: 228px; overflow: hidden; z-index: 4; }
.g-qtrack { display: flex; gap: 0; transition: transform .35s cubic-bezier(.3,.7,.3,1); }
.g-qtrack img { flex: none; width: 32px; height: 32px; margin-right: 10px; }
.g-piece { position: absolute; left: 0; top: 0; width: 210px; height: 267px; z-index: 8; will-change: transform; transform-origin: 105px 160px; }
.g-piece img { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-piece .t { opacity: 0; transition: opacity .12s; }
.g-piece.on .t { opacity: 1; }
.g-col { position: absolute; top: 560px; bottom: 0; width: 120px; z-index: 12; cursor: pointer; }
.g-tray { position: absolute; width: 104px; height: 42px; top: 760px; border-radius: 20px; z-index: 2; }
.g-case { position: absolute; width: 54px; height: 79px; top: 638px; border-radius: 14px; z-index: 3; transform-origin: 50% 100%; }
.g-case::after { content: ''; position: absolute; inset: 0; border-radius: 14px;
  background: linear-gradient(118deg, rgba(255,255,255,0) 12%, rgba(255,255,255,.62) 20%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 70%, rgba(255,255,255,.3) 78%, rgba(255,255,255,0) 86%); }
.g-case.squash { animation: gsquash .4s cubic-bezier(.3,1.5,.5,1); }
@keyframes gsquash { 0% { transform: scale(1, 1); } 30% { transform: scale(1.04, .94); } 100% { transform: scale(1, 1); } }
.g-card { position: absolute; left: 8px; top: 25px; width: 38px; height: 42px; border-radius: 8px; background: #fff; display: grid; place-items: center; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.g-card.on { opacity: 1; transform: none; }
.g-card img { width: 30px; height: 32px; object-fit: contain; }
.g-card.edge { top: 20.5px; transform: scale(.96); opacity: 0; }
.g-card.edge.on { opacity: 1; transform: scale(.96); }
.g-co { position: absolute; width: 84px; top: 690px; z-index: 4; }
.g-co .co { position: relative; width: 100%; }
.g-co .co.shake { animation: gshake2 .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes gshake2 { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.g-sign { position: absolute; width: 26px; height: 26px; top: 606px; z-index: 5; opacity: 0; }
.g-sign.go { animation: gsign .9s cubic-bezier(.3,.7,.3,1); }
@keyframes gsign { 0% { opacity: 0; transform: translateY(16px) scale(.6); } 25% { opacity: 1; transform: translateY(0) scale(1.08); } 45% { transform: translateY(-2px) scale(1); } 100% { opacity: 0; transform: translateY(-10px) scale(1); } }
.g-veil { position: absolute; inset: 0; z-index: 20; background: #3A3E45; opacity: 0; pointer-events: none; transition: opacity .25s; }
.g-veil.on { opacity: .82; }
.g-moment { position: absolute; left: 195px; top: 380px; width: 0; height: 0; z-index: 22; pointer-events: none; }
.g-moment .big { position: absolute; left: 0; top: 0; height: 156px; transform: translate(-50%, -50%) scale(.3); opacity: 0; }
.g-moment.on .big { animation: gbig 1.6s cubic-bezier(.3,1.4,.5,1) forwards; }
@keyframes gbig { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 30% { transform: translate(-50%, -50%) scale(1); } 82% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.85); } }
.g-ring { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.g-moment.on .g-ring { animation: gspin 1.6s linear forwards; }
@keyframes gspin { from { transform: rotate(0); } to { transform: rotate(140deg); } }
.g-ring img { position: absolute; left: -17px; top: -19px; width: 34px; height: 38px; object-fit: contain; opacity: 0; }
.g-moment.on .g-ring img { animation: gorbit 1.6s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes gorbit { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-20px) rotate(calc(-1 * var(--a))); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-118px) rotate(calc(-1 * var(--a))); } }
.g-moment.on .g-ring img { transform: rotate(var(--a)) translateY(-118px) rotate(calc(-1 * var(--a))); }
.g-line { position: absolute; left: 30px; right: 30px; top: 330px; z-index: 23; text-align: center; font: 800 30px/1.35 'ArtimoSans'; color: #fff; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .4s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.g-line.on { opacity: 1; transform: none; }
.d-start { position: absolute; z-index: 40; left: 50%; top: 380px; height: 64px; padding: 0 44px; margin: 0; transform: translateX(-50%); border-radius: 18px; border: 0;
  background: var(--amber); box-shadow: 0 6px 0 var(--amber-deep); font: 800 24px/1 'ArtimoSans'; color: var(--ink); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 12px; transition: opacity .25s, transform .1s, box-shadow .1s; }
.d-start svg { width: 20px; height: 22px; }
.d-start:active { transform: translateX(-50%) translateY(6px); box-shadow: 0 0 0 var(--amber-deep); }
.d-start.gone { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- the gloss ask */
.q-top { position: absolute; left: 22px; right: 22px; top: 22px; height: 40px; display: flex; align-items: center; gap: 12px; }
.q-bar { flex: 1; height: 14px; border-radius: 99px; background: #E5E7EA; overflow: hidden; position: relative; margin-left: 26px; }
.q-bar i { position: absolute; inset: 0; background: var(--amber); border-radius: 99px; transform-origin: left center; transform: scaleX(.04); transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.q-top img { width: 40px; flex: none; }
.q-ask { position: absolute; top: 74px; left: 22px; right: 22px; font: 600 15px/1.3 'ArtimoSans'; color: #4A5058; }
.ds[dir="rtl"] .q-ask, .q-ask[dir="rtl"] { text-align: right; }
.q-head { position: absolute; top: 104px; left: 22px; font: 800 23px/1.2 'ArtimoSans'; color: var(--ink); padding-bottom: 6px; background-image: radial-gradient(circle, #9AA1A9 1.1px, transparent 1.4px); background-size: 6px 3px; background-repeat: repeat-x; background-position: 0 100%; }
.q-grid { position: absolute; left: 22px; right: 22px; top: 160px; display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.q-card { position: relative; height: 205px; border-radius: 16px; background: #F3F4F6; box-shadow: inset 0 0 0 2px #E1E5E8, 0 4px 0 #C5CBD0; display: grid; justify-items: center; align-content: center; gap: 10px; cursor: pointer;
  transition: background-color .15s, box-shadow .15s, opacity .25s, transform .1s; }
.q-card img { width: 132px; height: 128px; object-fit: contain; }
.q-card span { font: 700 17px/1.2 'ArtimoSans'; color: #20252C; }
.q-card:active { transform: translateY(3px); }
.q-card.right { background: #FFF4D6; box-shadow: inset 0 0 0 2.5px var(--amber), 0 4px 0 var(--amber-deep); }
.q-card.right span { color: var(--amber-ink); }
.q-card.wrong { background: #FFE6E6; box-shadow: inset 0 0 0 2.5px #FF4B4B, 0 4px 0 #E03B3B; }
.q-card.wrong span { color: #D93636; }
.q-card.faded { opacity: .45; }
.q-grid.out .q-card { opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.q-idk { position: absolute; top: 688px; left: 0; right: 0; text-align: center; font: 700 16px/1 'ArtimoSans'; color: #747B82; cursor: pointer; padding: 10px 0; }
.q-banner { position: absolute; left: 0; right: 0; bottom: 0; height: 168px; background: #FFF4D6; transform: translateY(100%); transition: transform .32s cubic-bezier(.3,.7,.3,1); z-index: 3; }
.q-banner.on { transform: none; }
.q-banner.miss { background: #F0F1F4; }
.q-banner .t { position: absolute; top: 22px; left: 26px; right: 26px; display: flex; align-items: center; gap: 10px; font: 800 22px/1.2 'ArtimoSans'; color: var(--amber-ink); }
.q-banner.miss .t { color: #4A5058; }
.q-banner .s { position: absolute; top: 56px; left: 26px; right: 26px; font: 600 15px/1.3 'ArtimoSans'; color: #4A5058; }
.ds[dir="rtl"] .q-banner .t, .ds[dir="rtl"] .q-ask { flex-direction: row; }
.q-btn { position: absolute; left: 22px; right: 22px; top: 762px; height: 54px; border-radius: 15px; border: 0; z-index: 4; cursor: pointer;
  font: 800 19px/1 'ArtimoSans'; background: #E5E7EA; color: #9AA1A9; box-shadow: 0 4px 0 #CACDD2; transition: background-color .15s, color .15s, box-shadow .15s, transform .1s; }
.q-btn.on { background: var(--amber); color: var(--ink); box-shadow: 0 4px 0 var(--amber-deep); }
.q-btn.on:active { transform: translateY(4px); box-shadow: 0 0 0 var(--amber-deep); }

/* ---------------------------------------------------------------- the book */
.b-reveal { position: absolute; inset: 0; transition: transform .45s cubic-bezier(.5,0,.3,1), opacity .35s; }
.b-reveal.up { transform: translateY(-120px); opacity: 0; pointer-events: none; }
.b-disc { position: absolute; left: 106px; top: 112px; width: 178px; height: 178px; border-radius: 50%; background: #F0F1F4; cursor: pointer; }
.b-disc::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--amber); opacity: 0; }
.b-disc.ask::after { animation: bring 1.8s ease-out infinite; }
@keyframes bring { 0% { opacity: .7; transform: scale(.94); } 70%, 100% { opacity: 0; transform: scale(1.12); } }
.b-pic { position: absolute; left: 50%; top: 50%; width: 140px; height: 150px; margin: -75px 0 0 -70px; }
.b-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.b-pic .ink { opacity: 0; }
.b-pic.shown .ink { opacity: 1; } .b-pic.shown .blank { opacity: 0; }
.b-pic.flip { animation: bflip .42s cubic-bezier(.3,.7,.3,1); }
@keyframes bflip { 0% { transform: scaleX(1); } 45% { transform: scaleX(.02); } 100% { transform: scaleX(1); } }
.b-head { position: absolute; left: 0; right: 0; top: 312px; text-align: center; font: 800 30px/1 'ArtimoSans'; color: var(--ink); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .35s cubic-bezier(.3,1.4,.5,1); }
.b-head.on { opacity: 1; transform: none; }
.b-gloss { position: absolute; left: 22px; right: 22px; top: 372px; height: 66px; border-radius: 16px; background: #FFF6DC; box-shadow: inset 0 0 0 2px #F5DFA0; display: grid; place-items: center; font: 800 26px/1 'ArtimoSans'; color: var(--ink); opacity: 0; transform: scale(.9); transition: opacity .25s .12s, transform .4s .12s cubic-bezier(.3,1.5,.5,1); }
.b-gloss.on { opacity: 1; transform: none; }
.b-brain { position: absolute; left: 50%; top: 350px; width: 42px; height: 42px; margin-left: -21px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #F5C75A; display: grid; place-items: center; z-index: 2; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .45s cubic-bezier(.3,1.7,.5,1); }
.b-brain img { width: 26px; height: 21px; }
.b-brain.on { opacity: 1; transform: none; }
.b-page { position: absolute; left: 0; right: 0; top: 70px; height: 600px; transform: translateY(820px); transition: transform .5s cubic-bezier(.3,.7,.3,1); }
.b-page.on { transform: none; }
.b-page .pg-img { position: absolute; left: 16px; top: 0; width: 358px; height: 566px; }
.b-page .slot { position: absolute; left: 16px; top: 0; width: 358px; height: 566px; opacity: 0; transform-origin: var(--ox) var(--oy); }
.b-page .slot.on { opacity: 1; animation: bset .45s cubic-bezier(.3,1.55,.5,1); }
@keyframes bset { from { transform: scale(1.35) rotate(-6deg); } to { transform: scale(1) rotate(0); } }
.b-fly { position: absolute; z-index: 10; width: 140px; height: 150px; object-fit: contain; pointer-events: none; will-change: transform; }
.b-btns { position: absolute; left: 22px; right: 22px; top: 762px; display: flex; gap: 12px; }
.b-btns .q-btn { position: static; flex: 1; }
.b-snd { width: 54px; height: 54px; flex: none; border-radius: 15px; background: #fff; box-shadow: inset 0 0 0 2px #E1E5E8, 0 4px 0 #C5CBD0; display: grid; place-items: center; color: #4A5058; }

/* The playground's page. */
.play-sec { padding: 46px 0 0; }
.play-row { display: grid; gap: 20px; justify-items: center; }
.play-row .feat-text { gap: 10px; }
.demo-media { position: relative; isolation: isolate; display: flex; justify-content: center; width: 100%; }
.demo-media::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: 330px; height: 330px; margin: -165px 0 0 -165px; border-radius: 50%; background: var(--disc, var(--amber-wash)); }
.play-hero { padding: 10px 0 0; text-align: center; }
.play-hero .h1 { margin: 6px auto 0; }
.back { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--ash), 0 3px 0 var(--ash-deep); font: 700 15px/1 'ArtimoSans'; color: var(--ink); text-decoration: none; }
html[dir="rtl"] .back svg { transform: scaleX(-1); }
@media (min-width: 1000px) {
  .demo { width: 340px; }
  .play-sec { padding-top: 100px; }
  .play-row { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; justify-items: stretch; max-width: 1080px; margin: 0 auto; }
  .play-row.rev > .demo-media { order: -1; }
  .demo-media::before { width: 540px; height: 540px; margin: -270px 0 0 -270px; }
  .play-hero { padding-top: 40px; }
}
.g-qtrack img:first-child { opacity: 0; }