/* Generated by dev/export-tutorials.mjs from the app styles. */
.site-tt { --bg: #fff7f0; --surface: #ffffff; --ink: #3a1c10; --ink-2: #5a3a2a; --muted: #8b6b5a; --line: #f1d9c9; --accent: #f0572d; --accent-2: #c8401a; --accent-soft: #ffe7dc; --shadow: 0 2px 8px rgba(60,30,10,.12); --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --rk: 1; font-family: var(--font); }
.site-tt s { text-decoration: none; }
@keyframes checkDraw { to { stroke-dashoffset: 0; } } @keyframes checkPop { from { transform: scale(.4); opacity: 0; } }
.tt { display: flex; flex-direction: column; align-items: center; gap: 16px; } .tt-count { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); align-self: flex-start; }
.tt-phone { position: relative; width: 230px; height: 320px; flex: none; border-radius: 28px; border: 6px solid #1b2430; background: var(--bg); overflow: hidden; box-shadow: 0 14px 30px -12px rgba(0,0,0,.45); --c1: #fbbf24; --c2: #93c5fd; --c3: #bbf7d0; }
.tt-screen { position: absolute; inset: 0 0 52px 0; padding: 18px 12px 0; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.tt-row { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.tt-ic { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--c1); } .tt-ic.c1 { background: var(--c2); } .tt-ic.c2 { background: var(--c3); }
.tt-row span, .tt-front span { flex: 1; display: grid; gap: 4px; } .tt-row b, .tt-front b { display: block; height: 7px; width: 70%; border-radius: 4px; background: var(--ink); opacity: .75; } .tt-row u, .tt-front u { display: block; height: 5px; width: 45%; border-radius: 3px; background: var(--muted); opacity: .5; text-decoration: none; }
.tt-row em, .tt-front em { width: 30px; height: 8px; border-radius: 4px; background: var(--ink); opacity: .6; } em.late { background: #e5534b; opacity: 1; }
.tt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: center; justify-content: space-around; background: var(--surface); border-top: 1px solid var(--line); } .tt-bar i { width: 18px; height: 18px; border-radius: 6px; background: var(--muted); opacity: .45; }
.tt-fab { width: 40px; height: 40px; margin-top: -16px; border-radius: 50%; background: var(--accent); box-shadow: 0 4px 10px rgba(0,0,0,.3); } .tt-fab.dim { opacity: .5; }
.tt-finger { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(27,36,48,.45); border: 2px solid rgba(255,255,255,.9); z-index: 6; }
.tt-ring { position: absolute; left: 50%; bottom: 12px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; border: 3px solid var(--accent); opacity: 0; z-index: 5; animation: ttRing 6s infinite; } .tt-ring.row { left: 30px; top: 50%; bottom: auto; margin: -22px 0 0 -22px; }
.tt-finger.scan { left: 50%; top: 292px; animation: ttPress 6s infinite; } .tt-finger.hold { left: 38px; top: 108px; animation: ttPress2 6s infinite; }
.tt-sheet { position: absolute; left: 8px; right: 8px; bottom: 0; top: 40px; border-radius: 18px 18px 0 0; background: var(--surface); box-shadow: 0 -8px 24px rgba(0,0,0,.25); padding: 12px; display: flex; gap: 10px; transform: translateY(110%); animation: ttSheet 6s infinite; z-index: 4; }
.tt-receipt { position: relative; width: 84px; padding: 10px 8px; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); display: grid; gap: 7px; align-content: start; overflow: hidden; } .tt-receipt b { height: 8px; width: 60%; background: #333; border-radius: 3px; } .tt-receipt u { height: 5px; background: #bbb; border-radius: 3px; } .tt-receipt u.tot { background: #333; width: 50%; justify-self: end; }
.tt-scanline { position: absolute; left: 0; right: 0; height: 3px; background: #22a06b; box-shadow: 0 0 10px #22a06b; top: 0; animation: ttScan 6s infinite; }
.tt-fields { flex: 1; display: grid; gap: 10px; align-content: start; padding-top: 6px; } .tt-fields span { height: 20px; border-radius: 8px; background: var(--line); position: relative; overflow: hidden; } .tt-fields span::after { content: ""; position: absolute; inset: 0; background: var(--accent); opacity: .35; transform: scaleX(0); transform-origin: left; animation: ttFill 6s infinite; } .tt-fields .f2::after { animation-delay: .35s; }
.tt-check { position: absolute; right: 14px; bottom: 16px; opacity: 0; animation: ttCheck 6s infinite; }
.tt-sw { position: relative; border-radius: 12px; overflow: hidden; } .tt-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; } .tt-back s { text-decoration: none; display: grid; place-items: center; width: 40px; align-self: stretch; color: #fff; font-size: 14px; } .tt-back .g { background: #22a06b; } .tt-back .b { background: #2f7de1; margin-left: auto; } .tt-back .b2 { background: #8b5cf6; } .tt-back .r { background: #e5534b; }
.tt-front { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--surface); border-radius: 12px; animation: ttSlide 6s infinite; } .tt-front.bill { animation: ttPaid 6s infinite; }
.tt-finger.swipe { left: 150px; top: 56px; animation: ttSwipeF 6s infinite; } .tt-finger.bill { left: 60px; top: 58px; animation: ttBillF 6s infinite; } .tt-finger.home { left: 60px; top: 100px; animation: ttHomeF 6s infinite; } .tt-finger.theme { left: 150px; top: 60px; animation: ttThemeF 6s infinite; }
.tt-menu { position: absolute; left: 46px; top: 120px; width: 120px; padding: 6px; border-radius: 14px; background: var(--surface); box-shadow: 0 10px 26px rgba(0,0,0,.35); display: grid; gap: 4px; opacity: 0; transform: scale(.85); transform-origin: top left; animation: ttMenu 6s infinite; z-index: 5; } .tt-menu p { margin: 0; height: 26px; border-radius: 8px; background: var(--line); display: grid; place-items: center; font-size: 13px; } .tt-menu p.d { color: #e5534b; }
.tt-input { height: 34px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); padding: 0 10px; display: flex; align-items: center; font: 600 12px var(--font); } .tt-type { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid var(--accent); animation: ttTyping 6s steps(21) infinite; }
.tt-chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 24px; } .tt-chip { text-decoration: none; font: 700 11px var(--font); padding: 4px 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-2); }
.tt-in { opacity: 0; animation: ttIn 6s infinite; animation-delay: var(--d, 0s); } .tt-hl { animation: ttHl 6s infinite; animation-delay: var(--d, 0s); border-radius: 12px; }
.tt-form { display: grid; gap: 10px; } .tt-pill { display: inline-block; padding: 4px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-2); font: 700 11px var(--font); } .tt-amt { font: 800 24px var(--font); padding: 4px 2px; } .tt-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .tt-cell { aspect-ratio: 1; border-radius: 12px; background: var(--line); } .tt-cell:nth-child(3) { background: var(--accent-soft); } .tt-btn { height: 28px; border-radius: 12px; background: var(--accent); }
.tt-sel { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); font: 800 12px var(--font); } .tt-sel b { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.tt-bgt { display: grid; gap: 12px; } .tt-track { height: 14px; border-radius: 8px; background: var(--line); overflow: hidden; } .tt-fill { display: block; height: 100%; width: 0; background: #22a06b; border-radius: 8px; animation: ttGrow 6s infinite; } .tt-fill.b2 { background: #f59e0b; animation-delay: .4s; } .tt-ringbox { display: grid; place-items: center; padding-top: 6px; } .tt-arc { stroke-dasharray: 94; stroke-dashoffset: 94; animation: ttArc 6s infinite; }
.tt-tabs { display: flex; gap: 6px; } .tt-tabs s { flex: 1; height: 22px; border-radius: 11px; background: var(--line); } .tt-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 8px 4px; } .tt-bar-i { flex: 1; height: 0; border-radius: 6px 6px 0 0; background: var(--accent); animation: ttBarUp 6s infinite; }
.tt-bell { font-size: 38px; text-align: center; transform-origin: 50% 10%; animation: ttBell 6s infinite; } .tt-push { position: absolute; left: 10px; right: 10px; top: -70px; display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 14px; background: var(--surface); box-shadow: 0 8px 20px rgba(0,0,0,.35); animation: ttPush 6s infinite; z-index: 5; } .tt-push i { width: 26px; height: 26px; border-radius: 8px; background: var(--accent); flex: none; } .tt-push span { display: grid; gap: 4px; flex: 1; } .tt-push b { height: 7px; width: 70%; border-radius: 4px; background: var(--ink); opacity: .75; } .tt-push u { height: 5px; width: 90%; border-radius: 3px; background: var(--muted); opacity: .5; }
.tt-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tt-theme { position: relative; height: 70px; border-radius: 14px; border: 2px solid var(--line); } .tt-theme.a { background: #fff3e8; animation: ttTheme 6s infinite; } .tt-theme.b { background: #120726; } .tt-theme.c { background: #fff5d8; } .tt-theme.d { background: #1f3a30; } .tt-pen { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.35); font-style: normal; font-size: 11px; color: #1b2430; }
.tt-plan { padding: 10px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); display: grid; gap: 5px; } .tt-plan b { height: 8px; width: 40%; border-radius: 4px; background: var(--ink); opacity: .75; } .tt-plan u { height: 5px; width: 80%; border-radius: 3px; background: var(--muted); opacity: .5; } .tt-trow { display: flex; align-items: center; gap: 8px; } .tt-trow span { flex: 1; } .tt-trow b { display: block; height: 7px; width: 60%; border-radius: 4px; background: var(--ink); opacity: .6; }
.tt-tog { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--line); animation: ttTogBg 6s infinite; animation-delay: var(--d); } .tt-tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); animation: ttTogKnob 6s infinite; animation-delay: var(--d); }
.tt-avgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .tt-avgrid i { position: relative; aspect-ratio: 1; border-radius: 50%; } .tt-avgrid i.pick s { position: absolute; right: -3px; bottom: -3px; width: 16px; height: 16px; border-radius: 50%; background: #22a06b; color: #fff; font-size: 10px; display: grid; place-items: center; text-decoration: none; animation: ttCheck 6s infinite; } .tt-btnrow { display: flex; gap: 8px; margin-top: 14px; } .tt-btnrow b { flex: 1; height: 24px; border-radius: 10px; background: var(--line); } .tt-btnrow b.p { background: var(--accent); }
.tt-hcards { display: grid; gap: 8px; } .tt-hc { height: 58px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); } .tt-hc.a { background: var(--accent); animation: ttHc1 6s infinite; } .tt-hc.b { animation: ttHc2 6s infinite; } .tt-hc.c { animation: ttHc3 6s infinite; }
.tt-two { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; } .tt-mini { width: 76px; display: grid; gap: 6px; padding: 8px 4px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .tt-mini .tt-row { padding: 5px; box-shadow: none; background: var(--bg); } .tt-mini .tt-ic { width: 14px; height: 14px; } .tt-mini em { display: none; }
.tt-link { position: relative; width: 26px; height: 3px; background: var(--line); border-radius: 2px; flex: none; } .tt-link s { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); animation: ttPulseX 3s linear infinite; }
.tt-person { width: 44px; text-align: center; } .tt-person i { display: block; width: 44px; height: 44px; border-radius: 50%; background: var(--c1); } .tt-person.b i { background: var(--c2); } .tt-wal { display: grid; gap: 6px; place-items: center; width: 90px; padding: 10px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); } .tt-wal b { width: 50px; height: 8px; border-radius: 4px; background: var(--ink); opacity: .6; } .tt-wal span { display: grid; gap: 3px; } .tt-wal s { text-decoration: none; font: 700 9px var(--font); padding: 2px 6px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-2); }
.tt-file, .tt-reset { display: grid; place-items: center; height: 70px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); font-size: 30px; } .tt-reset { color: var(--accent-2); }
.tt-steps { margin: 0; padding-left: 22px; align-self: stretch; display: grid; gap: 8px; font-size: 15px; line-height: 1.4; } .tt-steps li::marker { font-weight: 800; color: var(--accent-2); }
@keyframes ttRing { 0%, 4% { opacity: 0; transform: scale(.6); } 8% { opacity: .9; transform: scale(.7); } 38% { opacity: .9; transform: scale(1.35); } 42%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes ttPress { 0%, 4% { opacity: 0; transform: scale(1.3); } 8%, 40% { opacity: 1; transform: scale(.85); } 46%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes ttPress2 { 0%, 6% { opacity: 0; } 10%, 40% { opacity: 1; transform: scale(.85); } 46%, 100% { opacity: 0; } }
@keyframes ttSheet { 0%, 40% { transform: translateY(110%); } 48%, 90% { transform: translateY(0); } 96%, 100% { transform: translateY(110%); } }
@keyframes ttScan { 0%, 50% { top: 0; opacity: 0; } 52% { opacity: 1; } 68% { top: 100%; opacity: 1; } 70%, 100% { top: 100%; opacity: 0; } }
@keyframes ttFill { 0%, 68% { transform: scaleX(0); } 76%, 90% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }
@keyframes ttCheck { 0%, 76% { opacity: 0; transform: scale(.3); } 82%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes ttSlide { 0%, 8%, 100% { transform: translateX(0); } 24%, 40% { transform: translateX(-120px); } 52%, 56% { transform: translateX(0); } 70%, 86% { transform: translateX(40px); } }
@keyframes ttSwipeF { 0%, 8% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 24%, 40% { opacity: 1; transform: translateX(-120px); } 46% { opacity: 0; } 52% { opacity: 0; transform: translateX(-60px); } 56% { opacity: 1; } 70%, 86% { opacity: 1; transform: translateX(-20px); } 92%, 100% { opacity: 0; } }
@keyframes ttPaid { 0%, 10%, 100% { transform: translateX(0); opacity: 1; } 30%, 50% { transform: translateX(40px); opacity: 1; } 70% { transform: translateX(240px); opacity: 0; } 72%, 90% { transform: translateX(0); opacity: 0; } 96% { opacity: 1; } }
@keyframes ttBillF { 0%, 8% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 30%, 50% { opacity: 1; transform: translateX(40px); } 56%, 100% { opacity: 0; } }
@keyframes ttMenu { 0%, 46% { opacity: 0; transform: scale(.85); } 54%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; } }
@keyframes ttTyping { 0% { width: 0; } 40%, 85% { width: 100%; } 96%, 100% { width: 0; } }
@keyframes ttIn { 0% { opacity: 0; transform: translateY(8px); } 8%, 82% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes ttHl { 0%, 100% { box-shadow: none; } 8%, 22% { box-shadow: 0 0 0 3px var(--accent); } 30% { box-shadow: none; } }
@keyframes ttGrow { 0%, 6% { width: 0; } 40%, 90% { width: 72%; } 96%, 100% { width: 0; } }
@keyframes ttArc { 0%, 6% { stroke-dashoffset: 94; } 50%, 90% { stroke-dashoffset: 30; } 96%, 100% { stroke-dashoffset: 94; } }
@keyframes ttBarUp { 0%, 6% { height: 0; } 34%, 90% { height: var(--h); } 96%, 100% { height: 0; } }
@keyframes ttBell { 0%, 20%, 100% { transform: rotate(0); } 8%, 16% { transform: rotate(18deg); } 12% { transform: rotate(-18deg); } }
@keyframes ttPush { 0%, 40% { top: -70px; } 50%, 85% { top: 10px; } 94%, 100% { top: -70px; } }
@keyframes ttTheme { 0%, 20% { background: #fff3e8; border-color: var(--line); } 40%, 90% { background: #ffd9c2; border-color: #f0572d; } 96%, 100% { background: #fff3e8; } }
@keyframes ttThemeF { 0%, 10% { opacity: 0; } 14%, 36% { opacity: 1; transform: translate(-96px, 0); } 42%, 100% { opacity: 0; } }
@keyframes ttTogBg { 0%, 10% { background: var(--line); } 20%, 85% { background: #22a06b; } 95%, 100% { background: var(--line); } }
@keyframes ttTogKnob { 0%, 10% { transform: none; } 20%, 85% { transform: translateX(14px); } 95%, 100% { transform: none; } }
@keyframes ttHc1 { 0%, 18% { transform: none; } 40%, 70% { transform: translateY(66px); } 92%, 100% { transform: none; } }
@keyframes ttHc2 { 0%, 18% { transform: none; } 40%, 70% { transform: translateY(-66px); } 92%, 100% { transform: none; } }
@keyframes ttHomeF { 0%, 8% { opacity: 0; } 14%, 70% { opacity: 1; } 40%, 70% { transform: translateY(66px); } 80%, 100% { opacity: 0; } }
@keyframes ttPulseX { 0% { left: 0; } 100% { left: 100%; } }
.tt-phone s { position: static; } .tt-phone .tt-fab { position: relative; } .tt-phone .tt-avgrid i.pick s { position: absolute; }
.tt-receipt { width: 72px; flex: none; } .tt-sheet { padding: 10px; gap: 8px; }
.tt-navbar { display: flex; align-items: center; justify-content: space-between; width: 100%; } .tt-nav { min-width: 52px; } .tt-nav:disabled { opacity: .35; } .tt-pos { font-weight: 700; color: var(--muted); font-size: 14px; }
@keyframes flameDance { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.06); } } @keyframes flameCore { to { transform: scale(1.14); } }
.tt-phone.fancy { border-color: #2b2f5a; box-shadow: 0 18px 40px -14px rgba(120,80,255,.55), 0 0 0 1px rgba(255,255,255,.08) inset; } .tt-phone.fancy::before { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%); transform: translateX(-120%); animation: ttShine 6s ease-in-out infinite; }
@keyframes ttShine { 0%, 60% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.tt-modal { position: absolute; left: 14px; right: 14px; top: 78px; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: 0 14px 30px rgba(0,0,0,.4); display: grid; gap: 10px; z-index: 5; opacity: 0; transform: scale(.85); animation: ttModal 6s infinite; }
.tt-twins { position: relative; height: 40px; } .tt-twin { position: absolute; top: 6px; width: 90px; height: 28px; border-radius: 10px; background: var(--line); } .tt-twin.a { left: 8px; animation: ttTwinA 6s infinite; } .tt-twin.b { right: 8px; background: var(--accent-soft); animation: ttTwinB 6s infinite; } .tt-eq { position: absolute; left: 50%; top: 4px; margin-left: -10px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #f59e0b; color: #fff; font: 800 13px var(--font); text-decoration: none; animation: ttPop 6s infinite; }
.tt-mrow b { display: block; height: 8px; width: 60%; border-radius: 4px; background: var(--ink); opacity: .7; margin-bottom: 5px; } .tt-mrow u { display: block; height: 5px; width: 85%; border-radius: 3px; background: var(--muted); opacity: .5; } .tt-mbtns { display: flex; gap: 8px; } .tt-mbtns s { flex: 1; height: 24px; border-radius: 10px; background: var(--line); } .tt-mbtns .ok { background: var(--accent); animation: ttBtn 6s infinite; }
.tt-finger.dup { left: 160px; top: 196px; animation: ttDupF 6s infinite; }
.tt-dcard { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, var(--accent), var(--accent-2, var(--accent))); } .tt-dcard u { display: block; height: 6px; width: 60px; border-radius: 3px; background: rgba(255,255,255,.7); text-decoration: none; margin-bottom: 6px; } .tt-big { position: relative; display: block; height: 30px; width: 90px; } .tt-big b { position: absolute; left: 0; top: 0; font: 800 26px var(--font); color: #fff; opacity: 0; animation: ttSlot 6s infinite; animation-delay: var(--d); }
.tt-arc2 { stroke-dasharray: 94.2; stroke-dashoffset: 18; animation: ttArc2 6s infinite; } .tt-fx { display: flex; gap: 6px; flex-wrap: wrap; min-height: 26px; }
.tt-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tt-inp { height: 30px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); display: flex; align-items: center; padding: 0 10px; } .tt-inp b { font: 800 12px var(--font); }
.tt-row.fade1 { animation: ttFilterOut 6s infinite; } .tt-row.fade2 { animation: ttFilterOut2 6s infinite; }
.tt-del { animation: ttDelRow 6s infinite; } .tt-bin { position: absolute; right: 18px; bottom: 70px; font-size: 28px; animation: ttBin 6s infinite; } .tt-back-row { position: absolute; left: 12px; right: 12px; top: 24px; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); opacity: 0; animation: ttRestore 6s infinite; } .tt-back-row span { flex: 1; display: grid; gap: 4px; } .tt-back-row b { height: 7px; width: 70%; border-radius: 4px; background: var(--ink); opacity: .75; display: block; } .tt-back-row u { height: 5px; width: 45%; border-radius: 3px; background: var(--muted); opacity: .5; display: block; } .tt-back-row s { text-decoration: none; color: var(--accent-2); font-size: 18px; }
.tt-flamebox { position: relative; display: grid; place-items: center; height: 120px; } .tt-flame { animation: flameDance 1.6s ease-in-out infinite; transform-origin: 50% 90%; } .tt-core { animation: flameCore 1.1s ease-in-out infinite alternate; transform-origin: 50% 90%; } .tt-count2 { position: absolute; bottom: 4px; right: 14px; width: 40px; height: 34px; } .tt-count2 b { position: absolute; right: 0; bottom: 0; font: 800 28px var(--font); color: var(--accent-2); opacity: 0; animation: ttSlot 6s infinite; animation-delay: var(--d); } .tt-count2 b.last { animation-name: ttSlotLast; }
.tt-weekdots { display: flex; justify-content: space-between; padding: 0 8px; } .tt-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--line); animation: ttDot 6s infinite; animation-delay: var(--d); }
.tt-chip2 { position: absolute; right: 52px; top: 6px; text-decoration: none; font: 800 10px var(--font); padding: 2px 7px; border-radius: 9px; background: #fde8e6; color: #b42318; opacity: 0; animation: ttChip 6s infinite; } .tt-pricetoast { position: absolute; left: 10px; right: 10px; bottom: 62px; display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 14px; background: #1b2430; box-shadow: 0 8px 20px rgba(0,0,0,.4); transform: translateY(40px); opacity: 0; animation: ttToast 6s infinite; } .tt-pricetoast i { width: 18px; height: 18px; border-radius: 50%; background: #e5534b; flex: none; } .tt-pricetoast span { display: grid; gap: 4px; flex: 1; } .tt-pricetoast b { height: 6px; width: 80%; border-radius: 3px; background: #fff; opacity: .85; display: block; } .tt-pricetoast u { height: 5px; width: 55%; border-radius: 3px; background: #fff; opacity: .5; display: block; }
@keyframes ttModal { 0%, 14% { opacity: 0; transform: scale(.85); } 22%, 80% { opacity: 1; transform: scale(1); } 90%, 100% { opacity: 0; } }
@keyframes ttTwinA { 0%, 24% { transform: translateX(-30px); } 40%, 100% { transform: translateX(26px); } } @keyframes ttTwinB { 0%, 24% { transform: translateX(30px); } 40%, 100% { transform: translateX(-26px); } } @keyframes ttPop { 0%, 38% { transform: scale(0); } 46%, 100% { transform: scale(1.15); } }
@keyframes ttBtn { 0%, 55% { box-shadow: none; } 60%, 72% { box-shadow: 0 0 0 4px var(--accent-soft); } 80%, 100% { box-shadow: none; } } @keyframes ttDupF { 0%, 52% { opacity: 0; transform: translate(0, 0); } 56%, 74% { opacity: 1; transform: translate(0, 0); } 80%, 100% { opacity: 0; } }
@keyframes ttSlot { 0%, 14% { opacity: 1; transform: none; } 18%, 100% { opacity: 0; transform: translateY(-8px); } } @keyframes ttSlotLast { 0%, 80% { opacity: 0; } 84%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ttArc2 { 0%, 6% { stroke-dashoffset: 18; } 30% { stroke-dashoffset: 34; } 60%, 90% { stroke-dashoffset: 52; } 96%, 100% { stroke-dashoffset: 18; } }
@keyframes ttFilterOut { 0%, 45% { opacity: 1; max-height: 50px; } 55%, 90% { opacity: 0; max-height: 0; padding: 0; margin: -4px 0; } 98%, 100% { opacity: 1; max-height: 50px; } } @keyframes ttFilterOut2 { 0%, 60% { opacity: 1; max-height: 50px; } 70%, 90% { opacity: 0; max-height: 0; padding: 0; margin: -4px 0; } 98%, 100% { opacity: 1; max-height: 50px; } }
@keyframes ttDelRow { 0%, 12% { transform: none; opacity: 1; } 28% { transform: translate(120px, 150px) scale(.4); opacity: 0; } 29%, 90% { opacity: 0; transform: translate(120px, 150px) scale(.4); } 98%, 100% { transform: none; opacity: 1; } }
@keyframes ttBin { 0%, 24% { transform: none; } 30% { transform: scale(1.3) rotate(-8deg); } 38%, 100% { transform: none; } }
@keyframes ttRestore { 0%, 52% { opacity: 0; transform: translateY(120px); } 66%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes ttDot { 0%, 6% { background: var(--line); transform: scale(1); } 12%, 85% { background: #ff9b2f; transform: scale(1.15); } 96%, 100% { background: var(--line); transform: scale(1); } }
@keyframes ttChip { 0%, 38% { opacity: 0; transform: scale(.4); } 46%, 90% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; } } @keyframes ttToast { 0%, 40% { opacity: 0; transform: translateY(40px); } 50%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
.tt-wcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .tt-wc { height: 64px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); padding: 10px; display: grid; align-content: space-between; } .tt-wc i { width: 22px; height: 22px; border-radius: 8px; background: var(--c1); } .tt-wc.b i { background: var(--c2); } .tt-wc.c i { background: var(--c3); } .tt-wc b { height: 7px; width: 60%; border-radius: 4px; background: var(--ink); opacity: .7; display: block; } .tt-wc u { height: 5px; width: 40%; border-radius: 3px; background: var(--muted); opacity: .5; display: block; } .tt-wplus { height: 64px; border-radius: 14px; border: 2px dashed var(--line); display: grid; place-items: center; font-size: 26px; color: var(--muted); }
.tt-badges { display: flex; gap: 4px; } .tt-badge { text-decoration: none; font-size: 13px; } .tt-attach { position: relative; display: grid; place-items: center; height: 110px; border-radius: 16px; background: var(--line); } .tt-photo { text-decoration: none; font-size: 44px; } .tt-check2 { position: absolute; right: 12px; bottom: 10px; opacity: 0; animation: ttCheck 6s infinite; }
.am-allocation{display:grid;grid-template-columns:minmax(0,1fr) minmax(80px,.55fr) 44px;gap:8px;align-items:end;margin-bottom:12px}.am-allocation .f{margin:0;min-width:0}.am-allocation select,.am-allocation input{width:100%;min-width:0;min-height:48px}.advanced-entry>summary{display:flex;align-items:center;gap:10px}.advanced-entry>summary>span{flex:1;min-width:0;display:grid;gap:3px}.advanced-entry>summary small{font-size:12px;color:var(--muted)}.advanced-entry .btn{white-space:normal;min-height:48px}.am-badge{display:inline-flex;vertical-align:middle;margin-inline-start:5px;color:var(--accent-2)}.am-demo-total{text-align:center;font-size:36px;font-weight:800;margin:24px 0}.am-demo-part{display:flex;align-items:center;gap:12px;margin:14px;padding:16px;background:var(--accent-soft);border-radius:12px;animation:am-part 5s infinite both}.am-demo-part.b{animation-delay:.8s}.am-demo-part i{height:12px;flex:1;background:var(--accent);border-radius:6px}.am-demo-part.b i{background:var(--warn)}.am-demo-result{text-align:center;font-weight:700;animation:am-result 5s infinite both}
@keyframes am-part{0%,10%{opacity:0;translate:0 12px}25%,85%{opacity:1;translate:0 0}100%{opacity:0;translate:0 0}}@keyframes am-result{0%,40%{opacity:0}55%,85%{opacity:1}100%{opacity:0}}
:root[data-motion=off] .am-demo-part,:root[data-motion=reduced] .am-demo-part,:root[data-motion=off] .am-demo-result,:root[data-motion=reduced] .am-demo-result{animation:none!important;opacity:1}
@media(prefers-reduced-motion:reduce){:root:not([data-motion=full]) .am-demo-part,:root:not([data-motion=full]) .am-demo-result{animation:none!important;opacity:1}}
.am-demo-total{font-size:30px;margin:12px 0}.am-demo-part{margin:10px;padding:12px}.am-demo-result{font-size:12px;padding:4px}
.site-tt .tt-phone { margin: 0 auto; }