/* TIPSBLOCKS: 24 individual, practical Back to Top designs. V5 */
:root{--ease:cubic-bezier(.22,.67,.18,1);--hover:.85s;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f5f2;color:#222c28;font-family:Inter,'Helvetica Neue',Arial,'Noto Sans CJK JP',sans-serif;-webkit-font-smoothing:antialiased}button{font-family:inherit}a{color:inherit}.gallery{max-width:1460px;margin:auto;padding:60px 42px 90px}.intro{padding:0 0 44px;border-bottom:1px solid #d8ded8}.tag,.eyebrow{font-size:10px;font-weight:800;letter-spacing:.22em;color:#637b70}.intro h1{font:400 clamp(42px,5.4vw,74px)/1.07 Georgia,'Times New Roman',serif;letter-spacing:-.055em;margin:22px 0;color:#273c34}.intro h1 em{font-weight:400;color:#8e9f94}.intro p{max-width:720px;font-size:13px;line-height:2.05;color:#64746b;margin:24px 0}.intro-bits{display:flex;flex-wrap:wrap;gap:22px;font-size:10px;font-weight:700;letter-spacing:.1em;color:#9ba89f}.view-controls{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:25px 0 27px}.view-controls button{border:1px solid #aebbb2;background:white;padding:12px 20px;border-radius:99px;color:#32463b;font-size:12px;cursor:pointer;transition:background .35s}.view-controls button:hover{background:#edf1ec}.view-controls span{font-size:11px;color:#83928a}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 19px}.card{background:white;border:1px solid #e0e4df;box-shadow:0 3px 14px #26372e08;min-width:0}.card-top{height:42px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;gap:7px;border-bottom:1px solid #e6e8e5;color:#27352d}.card-top b{font-size:12px;letter-spacing:.03em}.card-top span{font-size:10px;color:#849189}.stage{height:214px;background:var(--stage);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.stage.edge{justify-content:flex-end}.stage.footer{align-items:flex-end;padding-bottom:0}.stage-info{position:absolute;bottom:13px;left:17px;font-size:9px;letter-spacing:.14em;color:#a0a9a1;font-weight:700;pointer-events:none}.stage.footer .stage-info{color:#bcc9c2}.card-bottom{padding:19px 17px 21px;min-height:152px}.card-heading{display:flex;gap:12px;align-items:baseline;justify-content:space-between;margin-bottom:15px}.card-heading h2{font-size:14px;letter-spacing:.075em;margin:0}.card-heading a{font-size:11px;color:#426855;text-decoration:none;border-bottom:1px solid #a9c5b3;padding-bottom:4px}.card-heading a:hover{color:#133f2e}.card-bottom p{font-size:10.5px;color:#738079;line-height:1.7;margin:8px 0;display:flex;align-items:baseline;gap:12px}.card-bottom strong{white-space:nowrap;color:#2b3c33;font-weight:700}.end-note{color:#9ba99f;font-size:10px;letter-spacing:.2em;text-align:center;padding:65px 0 0}
/* Functional accessible hit targets and motion rules. Typography stays static during ambience. */
.tb-btt{appearance:none;border:0;padding:0;line-height:1;isolation:isolate;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer;-webkit-tap-highlight-color:transparent;white-space:nowrap;font-synthesis:none;text-rendering:optimizeLegibility;color:#263830;transition:color var(--hover) var(--ease),background var(--hover) var(--ease),border-color var(--hover) var(--ease),box-shadow var(--hover) var(--ease),transform var(--hover) var(--ease);outline-offset:5px}
.tb-btt:focus-visible{outline:3px solid #1593b1;outline-offset:5px}
.tb-btt span,.tb-btt i,.tb-btt b,.tb-btt em,.tb-btt small,.tb-btt strong{pointer-events:none;box-sizing:border-box}
.tb-btt span,.tb-btt i,.tb-btt b,.tb-btt em,.tb-btt small,.tb-btt strong,.tb-btt::before,.tb-btt::after{transition-duration:var(--hover);transition-timing-function:var(--ease)}
/* 2133: editorial ascender, practical open typography */
.t2133{width:168px;height:64px;gap:15px;justify-content:flex-start;color:#225343;padding:0 9px 0 7px}.t2133 .line{width:28px;height:44px;position:relative;flex:none}.t2133 .line::before{content:'';position:absolute;bottom:3px;left:13px;width:1.5px;height:27px;background:#b27758;animation:a2133 7.5s ease-in-out infinite;transform-origin:bottom}.t2133 .line::after{content:'';position:absolute;top:9px;left:7px;width:13px;height:13px;border-top:1.5px solid #b27758;border-left:1.5px solid #b27758;transform:rotate(45deg)}.t2133 .copy{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding-bottom:4px}.t2133 small{font:700 10px/1 Arial,sans-serif;letter-spacing:2.3px}.t2133 strong{font:italic 29px/1 Georgia,serif;letter-spacing:-1.35px}.t2133::after{content:'';position:absolute;left:49px;bottom:7px;width:0;height:1.4px;background:#b27758;transition:width var(--hover) var(--ease)}.t2133:hover::after{width:110px}.t2133:hover .line{transform:translateY(-4px)}@keyframes a2133{0%,13%,100%{transform:scaleY(.7);opacity:.45}37%,67%{transform:scaleY(1.2);opacity:1}}
/* 2134: precise framed tile, no irregular novelty cut-outs */
.t2134{width:78px;height:78px;background:#263e3b;color:#fff;flex-direction:column;gap:8px;box-shadow:0 5px 15px #1b313120;overflow:hidden}.t2134::before{content:'';position:absolute;inset:6px;border:1px solid #ffffff42}.t2134 .arr{font:300 30px/1 Arial;color:#e6bb84;transform:translateY(0)}.t2134 .txt{font:700 10.5px/1 Arial;letter-spacing:2.1px;padding-left:2px}.t2134 .edge{position:absolute;width:2px;height:22px;background:#ecc18c;top:45px;left:6px;animation:a2134 7.8s ease-in-out infinite}.t2134:hover{background:#356d60;box-shadow:0 9px 22px #204d402f}.t2134:hover .arr{transform:translateY(-6px)}@keyframes a2134{0%,18%,100%{transform:translateY(0);opacity:.35}48%,68%{transform:translateY(-33px);opacity:1}}
/* 2135: frosted halo, static label and arrow */
.t2135{width:84px;height:84px;border-radius:50%;border:1px solid #88b0bd;background:#d9e9ed;color:#235064;box-shadow:0 6px 18px #356c7c22}.t2135 .ring{position:absolute;inset:-5px;border:1px solid #6d9eae;border-radius:50%;opacity:.5;animation:a2135 8.6s ease-in-out infinite}.t2135 .inside{width:66px;height:66px;border-radius:50%;background:linear-gradient(130deg,#ffffffbc,#d4e7eb80 60%,#fff9);box-shadow:inset 0 1px 2px #fff9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.t2135 .arr{font:300 23px/1 Arial}.t2135 .txt{font:italic 15px Georgia,serif}.t2135:hover .ring{border-color:#2d6477}.t2135:hover .inside{background:#326a77;color:white;transform:scale(.95)}@keyframes a2135{0%,17%,100%{transform:scale(.96);opacity:.27}44%,66%{transform:scale(1.09);opacity:.75}}
/* 2136: website edge rail, vertical word legible */
.t2136{height:136px;width:54px;border-radius:9px 0 0 9px;background:#874751;color:#fff9ee;box-shadow:-4px 6px 17px #52232b26;flex-direction:column;gap:12px}.t2136 .txt{font:700 11px/1.05 Arial;letter-spacing:1.5px;writing-mode:vertical-rl;transform:rotate(180deg)}.t2136 .arr{font:400 24px/1 Arial}.t2136 .track{position:absolute;left:6px;top:12px;height:111px;width:1px;background:#ffffff38}.t2136 .track i{width:2px;height:25px;background:#edbd9a;position:absolute;left:0;top:80px;animation:a2136 9.6s ease-in-out infinite}.t2136:hover{transform:translateX(-8px);background:#662c40}@keyframes a2136{0%,16%,100%{transform:translateY(0);opacity:.4}48%,66%{transform:translateY(-75px);opacity:1}}
/* 2137: useful full-label capsule */
.t2137{width:184px;height:58px;background:#fbf6ec;border:1px solid #d6c6b0;border-radius:32px;box-shadow:0 7px 18px #463c2617;justify-content:flex-start;padding:5px;gap:11px;color:#333e36}.t2137 .disc{width:45px;height:45px;border-radius:50%;background:#31473f;color:white;display:grid;place-items:center;flex:none}.t2137 .disc i{font:300 25px/1 Arial;animation:a2137 7s ease-in-out infinite}.t2137 .copy{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.t2137 b{font:700 11.2px/1 Arial;letter-spacing:1.25px}.t2137 small{font:600 9px/1 Arial;letter-spacing:1.1px;color:#9b8270}.t2137:hover{border-color:#789787;box-shadow:0 11px 23px #463c2625}.t2137:hover .disc{background:#bf7961}.t2137:hover .copy{transform:translateX(3px)}@keyframes a2137{0%,12%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}48%{transform:translateY(0)}}
/* 2138: quiet but robust editorial typography */
.t2138{width:179px;height:57px;gap:9px;color:#2b5345;padding:0 6px 6px}.t2138 .copy{font:400 20px/1 Georgia,serif;letter-spacing:-.7px}.t2138 em{font-style:italic}.t2138 .arr{font:300 22px/1 Arial;color:#a86f51;align-self:center;transform:translateY(-2px)}.t2138 .rule{position:absolute;bottom:6px;left:5px;right:5px;height:1px;background:#adbcb0}.t2138 .rule i{display:block;height:1.6px;width:25%;background:#bd7a5d;animation:a2138 9.5s ease-in-out infinite}.t2138:hover .rule{background:#a86f51}.t2138:hover .arr{transform:translate(3px,-6px)}@keyframes a2138{0%,12%,100%{transform:translateX(0);opacity:.65}45%,67%{transform:translateX(275%);opacity:1}}
/* 2139: realistic minimalist soft square */
.t2139{width:72px;height:72px;border:1px solid #5e7272;border-radius:12px;background:#f7faf8;color:#2b5155;box-shadow:0 4px 12px #27404213;flex-direction:column;gap:5px}.t2139 .corner{position:absolute;top:9px;left:9px;width:11px;height:1.5px;background:#ce9b70;animation:a2139 7.4s ease-in-out infinite;transform-origin:left}.t2139 .arr{font:300 26px/1 Arial}.t2139 .txt{font:700 10.5px/1 Arial;letter-spacing:1.5px;padding-left:2px}.t2139:hover{background:#335d61;color:#fff;border-color:#335d61}.t2139:hover .arr{transform:translateY(-5px)}@keyframes a2139{0%,17%,100%{transform:scaleX(.55)}45%,67%{transform:scaleX(1.7)}}
/* 2140: concentric ring; rotation limited to the decorative track */
.t2140{width:92px;height:92px;border-radius:50%;background:#edf1f3;color:#1b3f53;box-shadow:0 6px 19px #203a4920}.t2140 .orbit{position:absolute;inset:6px;border-radius:50%;border:1.5px solid #879eac;border-top:2.7px solid #bd896b;animation:a2140 22s linear infinite}.t2140 .face{width:68px;height:68px;border-radius:50%;background:#2b485d;color:white;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}.t2140 .arr{font:300 24px/1 Arial}.t2140 .txt{font:700 10px/1 Arial;letter-spacing:2px;padding-left:2px}.t2140:hover .face{transform:scale(.93);background:#416d6b}.t2140:hover .arr{transform:translateY(-5px)}@keyframes a2140{to{transform:rotate(360deg)}}
/* 2141: arch tab, composed with real button proportions */
.t2141{width:71px;height:104px;border-radius:37px 37px 5px 5px;background:#77766c;color:white;flex-direction:column;gap:8px;box-shadow:0 5px 0 #77766c31}.t2141 .spine{width:1.5px;height:20px;position:absolute;top:13px;left:calc(50% - .75px);background:#f5d6a2;animation:a2141 9s ease-in-out infinite}.t2141 .arr{font:300 25px/1 Arial;margin-top:22px}.t2141 .txt{font:700 11px/1 Arial;letter-spacing:1.6px;padding-left:1.6px}.t2141:hover{background:#5b6d62}.t2141:hover .arr{transform:translateY(-5px)}@keyframes a2141{0%,15%,100%{transform:translateY(6px);opacity:.45}45%,65%{transform:translateY(-3px);opacity:1}}
/* 2142: outlined practical label */
.t2142{width:153px;height:54px;gap:14px;border:1px solid #b96e55;background:#fffaf6;color:#a95138;padding:0 15px;overflow:hidden}.t2142::before{content:'';position:absolute;inset:0;background:#a95138;transform:scaleX(0);transform-origin:left;transition:transform var(--hover) var(--ease)}.t2142 .mark{height:19px;width:2px;background:#b96e55;position:relative;flex:none}.t2142 .mark i{height:7px;width:2px;background:#d9b19c;position:absolute;top:5px;left:6px;animation:a2142 7s ease-in-out infinite}.t2142 .txt{font:700 14px/1 'Courier New',monospace;position:relative;letter-spacing:-.1px}.t2142 .arr{font:300 20px/1 Arial;position:relative;margin-left:auto}.t2142:hover:before{transform:scaleX(1)}.t2142:hover{color:white}.t2142:hover .mark{background:white}.t2142:hover .arr{transform:translate(2px,-3px)}@keyframes a2142{0%,15%,100%{transform:translateY(0);opacity:.5}48%,68%{transform:translateY(-6px);opacity:1}}
/* 2143: robust editorial tab with clear hit target */
.t2143{width:127px;height:66px;background:#2f334b;color:white;justify-content:flex-start;padding:0 15px;gap:12px;box-shadow:0 6px 14px #2c2b4a24;overflow:hidden}.t2143 .arr{font:300 32px/1 Arial;color:#c4d8c1}.t2143 .copy{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.t2143 b{font:700 19px/1 Arial;letter-spacing:1.3px}.t2143 small{font:600 9px/1 Arial;letter-spacing:1.3px;color:#c6c4d3}.t2143 .runner{position:absolute;top:0;left:-20px;height:3px;width:30px;background:#b3dc9a;animation:a2143 9s ease-in-out infinite}.t2143:hover{background:#485d55}.t2143:hover .arr{transform:translateY(-5px)}@keyframes a2143{0%,20%,100%{transform:translateX(0);opacity:.4}46%,69%{transform:translateX(145px);opacity:1}}
/* 2144: engineered bracket form with accessible center */
.t2144{width:88px;height:88px;color:#296257;flex-direction:column;gap:5px;background:#f9fdfaf0}.t2144 .c{position:absolute;width:19px;height:19px;border-color:#2f8974;border-style:solid;border-width:0;animation:a2144 12s ease-in-out infinite}.t2144 .tl{top:4px;left:4px;border-width:2px 0 0 2px}.t2144 .tr{top:4px;right:4px;border-width:2px 2px 0 0;animation-delay:-3s}.t2144 .bl{bottom:4px;left:4px;border-width:0 0 2px 2px;animation-delay:-6s}.t2144 .br{bottom:4px;right:4px;border-width:0 2px 2px 0;animation-delay:-9s}.t2144 .arr{font:300 25px/1 Arial}.t2144 .txt{font:700 11px/1 Arial;letter-spacing:1.7px;padding-left:2px}.t2144:hover .c{width:25px;height:25px;border-color:#17513e;animation-play-state:paused}.t2144:hover .arr{transform:translateY(-4px)}@keyframes a2144{0%,12%,100%{opacity:.62;transform:scale(.9)}35%,56%{opacity:1;transform:scale(1.05)}}
/* 2145: offset shadow = timeless, not an inexplicable stack of paper */
.t2145{width:82px;height:82px;background:#f7f2eb;border:1px solid #8a706b;color:#655052;box-shadow:5px 5px 0 #bda9a5,8px 10px 16px #4e384124;flex-direction:column;gap:7px;animation:a2145 11s ease-in-out infinite}.t2145 .accent{position:absolute;top:11px;right:11px;width:9px;height:2px;background:#b78e7b}.t2145 .arr{font:300 29px/1 Arial}.t2145 .txt{font:700 9px/1 Arial;letter-spacing:1.05px}.t2145:hover{transform:translate(-3px,-3px);box-shadow:8px 9px 0 #bda9a5,11px 13px 18px #4e38412a;animation-play-state:paused}@keyframes a2145{0%,16%,100%{box-shadow:5px 5px 0 #bda9a5,8px 10px 16px #4e384124}46%,65%{box-shadow:6px 7px 0 #bda9a5,11px 12px 19px #4e38412b}}
/* 2146: vertical, reserved for contemporary editorial sites */
.t2146{height:119px;width:62px;background:#fcfdfb;border:1px solid #a6b9ae;color:#34584d;flex-direction:column;gap:14px;box-shadow:0 5px 12px #344e3914}.t2146 .vertical{height:41px;width:1.5px;background:#bfccc2;position:relative;overflow:hidden}.t2146 .vertical i{height:17px;width:1.5px;position:absolute;bottom:0;left:0;background:#608c7a;animation:a2146 8.5s ease-in-out infinite}.t2146 .arr{font:300 22px/1 Arial;position:absolute;top:54px}.t2146 .txt{font:700 10.5px/1 Arial;letter-spacing:1.2px;margin-top:48px}.t2146:hover{background:#355d51;color:#fff;border-color:#355d51}.t2146:hover .arr{transform:translateY(-5px)}@keyframes a2146{0%,14%,100%{transform:translateY(0);opacity:.55}48%,66%{transform:translateY(-25px);opacity:1}}
/* 2147: slim side rail; no entire button bobbing */
.t2147{height:148px;width:50px;background:#3f4968;color:#f5f4f4;border-radius:5px 0 0 5px;box-shadow:-6px 6px 18px #28385521;flex-direction:column;gap:12px}.t2147 .light{position:absolute;left:5px;top:15px;width:2px;height:24px;background:#c4d3e7;animation:a2147 10s ease-in-out infinite}.t2147 .arr{font:300 23px/1 Arial}.t2147 .txt{font:700 10.5px/1 Arial;letter-spacing:1.25px;writing-mode:vertical-rl;transform:rotate(180deg)}.t2147:hover{transform:translateX(-6px);background:#525b7d}@keyframes a2147{0%,17%,100%{transform:translateY(80px);opacity:.3}49%,68%{transform:translateY(0);opacity:1}}
/* 2148: dots serve as 'return in progress' visual motif, not decoration overload */
.t2148{height:54px;width:168px;padding:0 15px;border-radius:7px;background:#2d3632;color:#fff;justify-content:flex-start;gap:13px;box-shadow:0 6px 13px #242e2923}.t2148 .dots{display:flex;align-items:center;gap:4px}.t2148 .dots i{height:3px;width:3px;border-radius:50%;background:#d9b48d;opacity:.35;animation:a2148 6s ease-in-out infinite}.t2148 .dots i:nth-child(2){animation-delay:.36s}.t2148 .dots i:nth-child(3){animation-delay:.72s}.t2148 .txt{font:700 11.5px/1 Arial;letter-spacing:1.5px}.t2148 .arr{margin-left:auto;font:300 24px/1 Arial;color:#d9b48d}.t2148:hover{background:#416959}.t2148:hover .arr{transform:translateY(-5px)}@keyframes a2148{0%,13%,100%{opacity:.28;transform:translateY(0)}35%,48%{opacity:1;transform:translateY(-3px)}}
/* 2149: real document progress, exactly bound to scroll position */
.t2149{width:90px;height:90px;border-radius:50%;background:#f0f3ee;color:#244d3f;box-shadow:0 6px 20px #2b594023}.t2149 .gauge{position:absolute;inset:4px;border-radius:50%;background:conic-gradient(#39806c var(--progress,0%),#ced9d0 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}.t2149 .content{display:flex;flex-direction:column;align-items:center;gap:4px}.t2149 .arr{font:300 23px/1 Arial;animation:a2149 9s ease-in-out infinite}.t2149 strong{font:700 10px/1 Arial;letter-spacing:1.5px;padding-left:2px}.t2149 .pct{font:600 9.5px/1 Arial;color:#6b8f80}.t2149:hover .gauge{filter:drop-shadow(0 0 2px #39806c)}.t2149:hover .arr{color:#a56a49}@keyframes a2149{0%,18%,100%{transform:translateY(0)}37%{transform:translateY(-4px)}55%{transform:translateY(0)}}
/* 2150: restrained stroke, subtle continuous specular reflection */
.t2150{height:55px;width:166px;border:1px solid #7d8a7e;border-radius:30px;color:#445447;background:#f8f9f4;gap:12px;box-shadow:0 5px 13px #2631260d;overflow:hidden}.t2150 .arr{font:300 24px/1 Arial}.t2150 .txt{font:italic 16px/1 Georgia,serif}.t2150 .sheen{position:absolute;top:0;bottom:0;width:37px;left:-48px;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,#ffffff87,transparent);animation:a2150 11s ease-in-out infinite}.t2150:hover{background:#51685b;border-color:#51685b;color:white}.t2150:hover .arr{transform:translateY(-4px)}@keyframes a2150{0%,18%,100%{transform:translateX(0) skewX(-22deg);opacity:0}43%,63%{transform:translateX(214px) skewX(-22deg);opacity:1}}
/* 2151: split hairline typography with deliberate vertical rhythm */
.t2151{height:55px;width:174px;background:transparent;color:#2e5762;gap:13px;padding:0 8px}.t2151 .arr{font:300 24px/1 Arial;color:#2c8b94;transform:translateY(-1px)}.t2151 .txt{font:700 11px/1 Arial;letter-spacing:1.5px}.t2151 .rule{position:absolute;left:6px;right:6px;height:1px;background:#8cadb2}.t2151 .rule.top{top:5px}.t2151 .rule.bottom{bottom:5px}.t2151 .rule i{position:absolute;top:0;left:0;width:25%;height:2px;background:#247e85;animation:a2151 9s ease-in-out infinite}.t2151:hover .arr{transform:translate(2px,-6px)}.t2151:hover .rule{background:#347e84}@keyframes a2151{0%,16%,100%{transform:translateX(0);opacity:.5}45%,67%{transform:translateX(295%);opacity:1}}
/* 2152: simple elevated button, not a decorative origami object */
.t2152{width:82px;height:82px;background:#fffefa;color:#3d514b;border:1px solid #d4c6b9;box-shadow:0 7px 14px #3b40321c,0 2px 1px #3b403207;flex-direction:column;gap:7px;animation:a2152 12s ease-in-out infinite}.t2152 .glint{position:absolute;top:8px;right:8px;width:9px;height:1.5px;background:#c7a88d}.t2152 .arr{font:300 29px/1 Arial}.t2152 .txt{font:700 9px/1.4 Arial;letter-spacing:1.5px}.t2152:hover{transform:translateY(-3px);box-shadow:0 11px 19px #3b40322a;animation-play-state:paused}.t2152:hover .arr{transform:translateY(-4px)}@keyframes a2152{0%,18%,100%{box-shadow:0 7px 14px #3b40321c}45%,67%{box-shadow:0 9px 20px #3b403226}}
/* 2153: fixed side meter scroll progress; distinctive but usable */
.t2153{width:57px;height:155px;border:1px solid #ccbca8;border-right:0;border-radius:6px 0 0 6px;background:#f7f4ee;color:#745543;flex-direction:column;gap:8px;padding-left:12px;box-shadow:-4px 5px 15px #49392512}.t2153 .meter{position:absolute;top:13px;left:9px;width:2px;height:126px;background:#c6b8a7}.t2153 .meter i{position:absolute;bottom:0;left:0;width:2px;height:var(--progress,0%);background:#a56548;transition:height .15s linear}.t2153 .pct{font:600 10.5px/1 Arial;margin-top:11px}.t2153 .arr{font:300 22px/1 Arial;animation:a2153 10s ease-in-out infinite}.t2153 .txt{font:700 11px/1 Arial;letter-spacing:1.5px}.t2153:hover{background:#ece3d7}.t2153:hover .arr{transform:translateY(-4px)}@keyframes a2153{0%,16%,100%{color:#745543}45%,64%{color:#bf7c59}}
/* 2154: footer-native horizontal strip, not floating in the middle */
.t2154{height:60px;width:224px;border-top:1px solid #aabdb0;color:#f6f7f0;background:#2e3b38;gap:19px;overflow:hidden}.t2154 .txt{font:700 12px/1 Arial;letter-spacing:2.2px}.t2154 .arr{font:300 25px/1 Arial;color:#b8dfbd}.t2154 .rule{position:absolute;left:0;right:0;bottom:0;height:2px;background:#738f7f}.t2154 .rule i{position:absolute;left:-40px;bottom:0;height:2px;width:45px;background:#d7f3d7;animation:a2154 9.6s ease-in-out infinite}.t2154:hover{background:#426050}.t2154:hover .arr{transform:translateY(-5px)}@keyframes a2154{0%,19%,100%{transform:translateX(0);opacity:0}45%,66%{transform:translateX(269px);opacity:1}}
/* 2155: color-blocked square, thoughtful boundary movement */
.t2155{width:75px;height:84px;border:1px solid #303c39;background:#2b3633;color:#fff;flex-direction:column;overflow:hidden;box-shadow:0 6px 0 #222e2a22}.t2155 .upper{height:47px;width:100%;background:#d47d57;color:#fff;display:grid;place-items:center;flex:none;animation:a2155 11s ease-in-out infinite}.t2155 .upper span{font:300 29px/1 Arial}.t2155 .lower{height:37px;width:100%;display:grid;place-items:center;font:700 11px/1 Arial;letter-spacing:2px}.t2155:hover .upper{height:52px;animation-play-state:paused;background:#bd684c}.t2155:hover .lower{height:32px}@keyframes a2155{0%,16%,100%{height:47px}44%,64%{height:52px}}
/* 2156: translucent capsule; legible on busy pages via solid dark face */
.t2156{width:184px;height:61px;border-radius:33px;background:#3c4260;color:#fff;border:1px solid #737b9a;box-shadow:0 8px 21px #24273a38;gap:15px;overflow:hidden;justify-content:flex-start;padding:0 18px}.t2156 .shine{position:absolute;top:0;bottom:0;left:-55px;width:55px;transform:skewX(-24deg);background:linear-gradient(90deg,transparent,#d9daff4a,transparent);animation:a2156 12s ease-in-out infinite}.t2156 .arr{font:300 28px/1 Arial;color:#ded3f0;position:relative}.t2156 .copy{display:flex;flex-direction:column;gap:5px;align-items:flex-start;position:relative}.t2156 b{font:700 11.5px/1 Arial;letter-spacing:1px}.t2156 small{font:600 9.5px/1 Arial;letter-spacing:.85px;color:#d1cee1}.t2156:hover{background:#545d80;border-color:#b2b4cd}.t2156:hover .arr{transform:translateY(-5px)}@keyframes a2156{0%,17%,100%{transform:translateX(0) skewX(-24deg);opacity:0}42%,63%{transform:translateX(260px) skewX(-24deg);opacity:1}}
/* Demo: intentionally sparse realistic scroll surface. Buttons are the asset. */
.demo{background:#f6f7f4}.demo-head{height:78px;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(20px,5vw,90px);border-bottom:1px solid #dce3db}.demo-head a{text-decoration:none;font-size:12px;color:#3c5d4e}.demo-head span{font-size:11px;letter-spacing:.1em;color:#7a8a7e}.demo-hero{padding:118px max(25px,calc((100vw - 960px)/2)) 140px;min-height:500px;background:linear-gradient(115deg,#e6eee8,#f9f8f4)}.demo-hero h1{font:400 clamp(44px,7vw,88px)/1 Georgia,serif;letter-spacing:-.03em;color:#33443b;margin:20px 0}.demo-hero p,.demo-sect p{font-size:14px;line-height:2.1;color:#6c7d71;max-width:590px}.demo-tags{display:flex;gap:11px;flex-wrap:wrap;margin-top:24px}.demo-tags span{font-size:11px;background:#fff8;padding:10px 12px;border:1px solid #dce4dc;color:#637769}.demo-sect{max-width:1080px;margin:0 auto;padding:180px 35px 220px;min-height:800px}.demo-sect h2{font:normal 36px Georgia,serif;color:#42574b}.demo-sect.alternate{max-width:none;background:#edf1eb;padding-left:max(35px,calc((100vw - 1010px)/2))}.demo-tiles{display:flex;gap:13px;margin-top:50px}.demo-tiles div{height:190px;flex:1;background:#e6ebe5;border:1px solid #d4ddd3}.demo-lines{height:230px;max-width:850px;margin-top:55px;background:repeating-linear-gradient(to bottom,transparent 0 27px,#c8d6cb 28px 29px,transparent 30px 56px)}.demo-footer{background:#2e3b38;color:white;padding:100px 9vw;min-height:250px}.demo-footer b{font:700 12px Arial;letter-spacing:2px}.demo-footer p{font-size:12px;color:#b8c9bd}.floating{position:fixed;bottom:26px;right:28px;z-index:30;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s}.floating.shown{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0)}.floating.edge{right:0;bottom:20vh}.floating.footer{position:fixed;right:28px;bottom:0}.floating.footer:not(.shown){transform:translateY(20px)}
/* Mobile: preserve legibility, avoid scale-distorting tall rails */
@media(max-width:1040px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:670px){.gallery{padding:35px 14px 55px}.intro h1{font-size:46px}.intro p{font-size:12px}.cards{grid-template-columns:1fr;gap:18px}.stage{height:220px}.card-bottom{min-height:0;padding:17px}.card-bottom p{font-size:11px}.view-controls{gap:10px;flex-wrap:wrap}.view-controls span{font-size:10px}.demo-hero{padding:100px 25px 105px;min-height:460px}.demo-sect{padding:130px 25px 150px;min-height:680px}.demo-sect.alternate{padding:120px 25px}.floating{right:12px;bottom:14px}.floating.edge{right:0;bottom:22vh}.floating .t2137,.floating .t2156{transform:scale(.93);transform-origin:right bottom}.floating .t2154{width:200px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}}
body.pause-ambient .tb-btt,body.pause-ambient .tb-btt *,body.pause-ambient .tb-btt::before,body.pause-ambient .tb-btt::after,body.pause-ambient .tb-btt *::before,body.pause-ambient .tb-btt *::after{animation-play-state:paused!important}
/* V5 final optical and footer positioning correction */
.stage.footer{align-items:flex-end;justify-content:flex-end;padding:0 25px 18px 0}
.demo-footer{position:relative}
.demo .floating.footer{position:absolute;bottom:0;right:0;left:auto;visibility:visible;opacity:1;pointer-events:auto;transform:none}
.demo .floating.footer.shown{transform:none}
@media(max-width:670px){.stage.footer{padding:0 14px 20px 0}.demo .floating.footer{right:5px}}
/* Ambient motion QA refinement: deliberately visible phases with resting intervals.
   No text drifts and hit-target bounding boxes remain fixed. */
.t2137 .disc i{animation:a2137v5 7.2s cubic-bezier(.25,.67,.25,1) infinite}
@keyframes a2137v5{0%,12%,100%{transform:translateY(0);opacity:.72}34%,57%{transform:translateY(-6px);opacity:1}77%{transform:translateY(0);opacity:.72}}
.t2149 .arr{animation:a2149v5 9.2s cubic-bezier(.25,.67,.25,1) infinite}
@keyframes a2149v5{0%,12%,100%{transform:translateY(1px);opacity:.72}37%,61%{transform:translateY(-6px);opacity:1}80%{transform:translateY(1px);opacity:.72}}
.t2150 .sheen{background:linear-gradient(90deg,transparent,#a2baa764,transparent);animation:a2150v5 10s ease-in-out infinite}
@keyframes a2150v5{0%,18%,100%{transform:translateX(0) skewX(-22deg);opacity:0}53%{transform:translateX(111px) skewX(-22deg);opacity:1}77%{transform:translateX(220px) skewX(-22deg);opacity:.25}}
.t2152 .glint{animation:a2152glint 12s ease-in-out infinite}
@keyframes a2152glint{0%,16%,100%{transform:translateX(0);opacity:.35}43%,62%{transform:translateX(-11px);opacity:1}}
.t2154 .rule i{animation:a2154v5 9s ease-in-out infinite}
@keyframes a2154v5{0%,17%,100%{transform:translateX(0);opacity:0}53%{transform:translateX(115px);opacity:1}79%{transform:translateX(267px);opacity:.3}}
.t2156 .shine{background:linear-gradient(90deg,transparent,#e5deff65,transparent);animation:a2156v5 11s ease-in-out infinite}
@keyframes a2156v5{0%,16%,100%{transform:translateX(0) skewX(-24deg);opacity:0}53%{transform:translateX(125px) skewX(-24deg);opacity:1}79%{transform:translateX(263px) skewX(-24deg);opacity:.25}}
.t2141 .arr{animation:a2141arrow 9s ease-in-out infinite}
@keyframes a2141arrow{0%,14%,100%{transform:translateY(1px);opacity:.77}43%,63%{transform:translateY(-6px);opacity:1}}
.t2145 .accent{animation:a2145accent 11s ease-in-out infinite}
@keyframes a2145accent{0%,17%,100%{width:9px;transform:translateX(0);opacity:.5}45%,67%{width:18px;transform:translateX(-2px);opacity:1}}
/* Distinct, unhurried hover feedback on understated editorial variants */
.t2133:hover{color:#a36a4d}.t2133:hover .copy{transform:translateY(-2px)}
.t2138:hover{color:#a26447}.t2138:hover .copy{transform:translateY(-2px)}
.t2144:hover{background:#daeee3;color:#17513e}
.t2149:hover{background:#deede3;box-shadow:0 8px 24px #2b594032}
.t2151:hover{background:#dcebed;color:#175363}
.t2152:hover{background:#f1eadd;border-color:#a88974}

/* Embedded WordPress preview modes; normal live demos keep their original behaviour. */
html[class*="tb-mode-"] body.demo{background:#f1f4ef}
html[class*="tb-mode-"] .demo-head,html[class*="tb-mode-"] .demo-hero,html[class*="tb-mode-"] .demo-sect{display:none!important}
html[class*="tb-mode-"] .demo-footer{display:block!important;position:static!important;height:0!important;min-height:0!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;background:transparent!important}
html[class*="tb-mode-"] .demo-footer>b,html[class*="tb-mode-"] .demo-footer>p{display:none!important}
html[class*="tb-mode-"] .floating{position:fixed!important;left:auto!important;top:auto!important;right:clamp(10px,5vw,24px)!important;bottom:clamp(10px,5vw,24px)!important;display:flex!important;align-items:center!important;justify-content:center!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;transform:none!important;z-index:10!important}
html.tb-mode-large .floating{top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translate(-50%,-50%)!important}
html.tb-mode-large body.demo{background:#f6f8f4}
html.tb-mode-context body.demo{background:linear-gradient(110deg,#f8faf7,#e8ede8)}
html.tb-mode-card body.demo{background:linear-gradient(110deg,#fafbf8,#edf1ec)}
html.tb-mode-card .floating .tb-btt,html.tb-mode-context .floating .tb-btt{max-width:none}