.tb{--tb-ink:#10082e;--tb-gold:#ffd84a;--tb-paper:#fff8e7;--tb-paper-edge:#f6e8c8;--font-display:"Lilita One", "Fredoka", "Rubik Variable", system-ui, sans-serif;z-index:10;padding:max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));flex-direction:column;gap:10px;display:flex;position:fixed;inset:0;overflow:hidden}.tb-top,.tb-book{z-index:1;position:relative}.tb-top{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;display:grid}.tb-close{white-space:nowrap;font-family:var(--font-display);color:#fff;box-shadow:0 0 0 2.5px var(--tb-ink), 0 3px 0 2.5px var(--tb-ink), inset 0 2px 0 #ffffff2e;background:linear-gradient(#2a1d6e,#1a1150);border-radius:999px;justify-self:start;align-items:center;gap:6px;padding:8px 14px;font-size:15px;display:inline-flex}.tb-close:active{transform:translateY(2px)}.tb-close svg{width:13px;height:13px}.tb-title{white-space:nowrap;margin:0;font-size:40px;line-height:1}.tb-book{min-height:0;box-shadow:0 0 0 3px var(--tb-ink), 0 7px 0 3px var(--tb-ink), inset 0 2px 0 #ffffff40;background:radial-gradient(120% 90% at 50% 0,#7a45e0 0%,#5326b4 45%,#3a1786 100%);border-radius:24px;flex:1 1 0;padding:11px 11px 15px;display:flex}.tb-book:before{content:"";pointer-events:none;border:2px dashed #ffffff4d;border-radius:19px;position:absolute;inset:5px}.tb-pages{min-width:0;min-height:0;box-shadow:0 0 0 2.5px var(--tb-ink), 0 3px 0 1px #eadbb8, 0 3px 0 3.5px var(--tb-ink), 0 6px 0 1px #dccaa0, 0 6px 0 3.5px var(--tb-ink);border-radius:12px;flex:1;grid-template-rows:minmax(0,1fr) auto;display:grid;position:relative}.tb-page{background:radial-gradient(130% 100% at 50% 40%, var(--tb-paper) 55%, var(--tb-paper-edge) 100%);flex-direction:column;min-width:0;min-height:0;padding:14px 16px;display:flex;position:relative}.tb-page-photo{border-radius:12px 12px 0 0;padding-bottom:6px}.tb-page-text{border-radius:0 0 12px 12px;padding-top:6px}.tb-ribbon{top:-14px;z-index:3;clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%);filter:drop-shadow(2px 2px #10082e8c);pointer-events:none;background:linear-gradient(90deg,#ff4f9a,#ff86bd 50%,#ff4f9a);width:22px;height:64px;position:absolute;inset-inline-end:22px}.tb-photo{min-height:0;box-shadow:0 0 0 2.5px var(--tb-ink), 4px 6px 0 #10082e38;background:#fff;border-radius:10px;flex:1;padding:7px;position:relative;transform:rotate(-1.2deg)}.tb-photo>.tutorial-scene{background:#7ed957;border-radius:6px;width:100%;height:100%;min-height:0;overflow:hidden}.tb-tape{z-index:2;pointer-events:none;background:#ffec96cc;width:64px;height:20px;position:absolute;top:-9px;box-shadow:0 1px 2px #00000026}.tb-tape-a{inset-inline-start:14px;transform:rotate(-8deg)}.tb-tape-b{inset-inline-end:14px;transform:rotate(7deg)}.tb-h{font-family:var(--font-display);color:#fff;-webkit-text-stroke:.14em var(--tb-ink);paint-order:stroke fill;margin:0;font-size:26px;line-height:1.05}.tb-page-text .tb-h{padding-inline-end:34px}.tb-kicker{letter-spacing:.04em;color:#ff4f9a;-webkit-text-stroke:0;margin-bottom:4px;font-size:12px;display:block}.tb-list{gap:8px;margin:10px 0 0;padding:0;list-style:none;display:grid}.tb-list li{color:#241a4f;align-items:flex-start;gap:9px;font-size:15px;font-weight:800;line-height:1.3;display:flex}.tb-num{width:24px;height:24px;font-family:var(--font-display);color:#fff;-webkit-text-stroke:.1em var(--tb-ink);paint-order:stroke fill;box-shadow:0 0 0 2px var(--tb-ink), 0 2px 0 2px var(--tb-ink);background:linear-gradient(#ffa6d1,#ff4f9a);border-radius:50%;flex:none;place-items:center;font-size:14px;display:grid}.tb-list li:nth-child(2) .tb-num{background:linear-gradient(#a6e3ff,#2a9cff)}.tb-list li:nth-child(3) .tb-num{background:linear-gradient(#c8ff9a,#2fb344)}.tb-nav{grid-template-columns:1fr 1fr;grid-template-areas:"dots dots""back next";gap:8px 10px;margin-top:auto;padding-top:10px;display:grid}.tb-dots{grid-area:dots;justify-content:center;gap:5px;display:flex}.tb-dot{width:9px;height:9px;box-shadow:0 0 0 1.5px var(--tb-ink);background:#d9c9a6;border-radius:99px;padding:0;transition:width .2s}.tb-dot.is-on{background:linear-gradient(#fff3a6, var(--tb-gold) 55%, #f2b51c);width:22px}.tb-btn{min-width:0;height:48px;font-family:var(--font-display);white-space:nowrap;color:#fff;-webkit-text-stroke:.11em var(--tb-ink);paint-order:stroke fill;box-shadow:0 0 0 3px var(--tb-ink), 0 5px 0 3px var(--tb-ink), inset 0 3px 0 #fff6;border-radius:16px;justify-content:center;align-items:center;gap:6px;padding:0 12px;font-size:20px;display:flex}.tb-btn svg{flex:none;width:15px;height:15px}.tb-btn:active:not(:disabled){box-shadow:0 0 0 3px var(--tb-ink), 0 2px 0 3px var(--tb-ink);transform:translateY(3px)}.tb-back{background:linear-gradient(#5a4ab8,#2a1d6e);grid-area:back}.tb-back:disabled{opacity:.45;cursor:default}.tb-next{background:linear-gradient(#7be35a,#2fb344);grid-area:next}.tb-turn-next{animation:.42s cubic-bezier(.2,.8,.3,1) tb-in-next}.tb-turn-prev{animation:.42s cubic-bezier(.2,.8,.3,1) tb-in-prev}@keyframes tb-in-next{0%{opacity:0;transform:translate(-18px)rotate(-1deg)}}@keyframes tb-in-prev{0%{opacity:0;transform:translate(18px)rotate(1deg)}}.tb-photo.tb-turn-next{animation-name:tb-photo-in-next}.tb-photo.tb-turn-prev{animation-name:tb-photo-in-prev}@keyframes tb-photo-in-next{0%{opacity:0;transform:translate(-18px)rotate(-2.2deg)}}@keyframes tb-photo-in-prev{0%{opacity:0;transform:translate(18px)rotate(-.2deg)}}@media (prefers-reduced-motion:reduce){.tb-turn-next,.tb-turn-prev{animation:none}}@media (orientation:landscape){.tb{padding-top:max(8px, env(safe-area-inset-top));padding-bottom:max(14px, env(safe-area-inset-bottom));gap:8px}.tb-title{font-size:30px}.tb-book{padding:9px 9px 13px}.tb-pages{grid-template-rows:none;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}.tb-page-photo{background:linear-gradient(to left, transparent 88%, #785a2838), radial-gradient(130% 100% at 50% 40%, var(--tb-paper) 55%, var(--tb-paper-edge) 100%);border-radius:0 12px 12px 0;padding:12px 14px 12px 20px}.tb-page-text{background:linear-gradient(to right, transparent 84%, #785a2838), radial-gradient(130% 100% at 50% 40%, var(--tb-paper) 55%, var(--tb-paper-edge) 100%);border-radius:12px 0 0 12px;padding:12px 20px 12px 14px}.tb-pages:after{content:"";inset-block:0;pointer-events:none;background:#10082e59;width:2px;position:absolute;left:40.8163%}.tb-h{font-size:24px}.tb-list li{font-size:14px}.tb-btn{height:44px;font-size:18px}}@media (orientation:landscape) and (height<=380px){.tb-title{font-size:26px}.tb-h{font-size:20px}.tb-list{gap:4px;margin-top:6px}.tb-list li{font-size:12.5px;line-height:1.22}.tb-btn{height:40px;font-size:17px}}