/* 88HARDWARE About PC v1 (Claude design about-claude.html, EY approved 2026-10-23 12:00 MYT). Content area of /about/ only (block printed after <main>);
 * header, nav, footer, chat and tool rail are the site's own. Every rule except @font-face is inside the PC gate (min-width:1200px) and (hover:hover) and (pointer:fine);
 * phone/tablet keep the live page (the block ships with the hidden attribute). Built by claude-pages/tools: selectors scoped to #h88ab1-page,
 * ids and keyframes prefixed, mock header/footer rules dropped. Inter = the site's own Inter (no font files shipped). */
@media (min-width:1200px) and (hover:hover) and (pointer:fine){

/* The block is printed right AFTER the page's own <main> (outside it, so editorial / info-pages rules scoped to #main-content do not reach it).
   On PC the page's own main collapses (children hidden, no padding; it stays as the skip-link target just above the block). */
html body main#main-content.h88ab1-on.h88ab1-on.h88ab1-on>*:not(#h88ab1-x1):not(#h88ab1-x2){display:none!important}
html body main#main-content.h88ab1-on.h88ab1-on{padding:0!important;margin-top:0!important;margin-bottom:0!important;min-height:0!important;border:0!important}
/* shown only while the page's own main is live (the home-route script parks / suspends mains; `~` because the standby Home main sits after it) */
html body main#main-content.h88ab1-on:not([hidden])~#h88ab1-page.h88ab1[hidden]{display:block!important}
/* isolate from theme-wide element rules (svg excluded: revert would drop its presentation attributes) */
html body #h88ab1-page.h88ab1 :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,a,div,span,b,i,em,small,strong,button,section,article,aside,nav,header,footer,figure,figcaption,label,input,select,textarea,fieldset,legend,dl,dt,dd,table,thead,tbody,tr,th,td,details,summary,blockquote,address,time,mark,img,br,hr,code,kbd,abbr,sup,sub){all:revert;box-sizing:border-box}
html body #h88ab1-page.h88ab1 :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,a,div,span,b,i,em,small,strong,button,section,article,aside,nav,header,footer,figure,figcaption,label,input,select,textarea,fieldset,legend,dl,dt,dd,table,thead,tbody,tr,th,td,details,summary,blockquote,address,time,mark,code,kbd,abbr,sup,sub)::before,html body #h88ab1-page.h88ab1 :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,a,div,span,b,i,em,small,strong,button,section,article,aside,nav,header,footer,figure,figcaption,label,input,select,textarea,fieldset,legend,dl,dt,dd,table,thead,tbody,tr,th,td,details,summary,blockquote,address,time,mark,code,kbd,abbr,sup,sub)::after{content:none}
html body #h88ab1-page.h88ab1{container:h88ab1/inline-size;display:block;position:relative;margin:0;padding:0;text-align:left;background:transparent;color-scheme:light;}
html body #h88ab1-page.h88ab1 [hidden]{display:none!important}
html body #h88ab1-page.h88ab1 :where(button[data-h88-chat-open]){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
html body #h88ab1-page.h88ab1{--red:#D7000F; --red-ui:#CF0023; --red-deep:#B4010E; --red-cat:#CF172D; --red-foot:#BA0020; --red-cart:#B5000B;
  --yellow:#FFCE45; --yellow-deep:#E8A912; --star:#FABF41;
  --ink:#1A1C21; --ink-2:#2A2D34; --text:#2B3038; --muted:#4F5663;
  --steel:#F3F4F6; --line:#E2E5E9; --white:#FFFFFF;
  --wrap:1280px;}
html body #h88ab1-page.h88ab1 *{box-sizing:border-box}
html body #h88ab1-page.h88ab1{-webkit-text-size-adjust:100%}
html body #h88ab1-page.h88ab1{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--white);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
html body #h88ab1-page.h88ab1 a{color:inherit;text-decoration:none}
html body #h88ab1-page.h88ab1 img,html body #h88ab1-page.h88ab1 svg{display:block}
html body #h88ab1-page.h88ab1 button{font:inherit}
html body #h88ab1-page.h88ab1 .wrap{width:var(--wrap);max-width:calc(100% - 32px);margin-left:max(16px,calc((100% - 1360px)/2));margin-right:auto}
html body #h88ab1-page.h88ab1 :focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}
html body #h88ab1-page.h88ab1 h1,html body #h88ab1-page.h88ab1 h2,html body #h88ab1-page.h88ab1 h3{margin:0;color:var(--ink);font-weight:800;letter-spacing:-.035em;text-wrap:balance}
html body #h88ab1-page.h88ab1 .h2{font-size:64px;line-height:1.0}
html body #h88ab1-page.h88ab1 p{margin:0}
html body #h88ab1-page.h88ab1 .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 28px;border-radius:6px;font-weight:700;font-size:17px;transition:background .2s,color .2s,box-shadow .2s,transform .2s}
html body #h88ab1-page.h88ab1 .btn-red{background:var(--red);color:#fff}
html body #h88ab1-page.h88ab1 .btn-red:hover{background:var(--red-deep)}
html body #h88ab1-page.h88ab1 .btn-yellow{background:var(--yellow);color:var(--ink)}
html body #h88ab1-page.h88ab1 .btn-yellow:hover{background:#FFD866;box-shadow:0 0 0 4px rgba(255,206,69,.25)}
html body #h88ab1-page.h88ab1 .btn-line{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
html body #h88ab1-page.h88ab1 .btn-line:hover{background:var(--ink);color:#fff}
html body #h88ab1-page.h88ab1 .tlink{font-weight:700;font-size:17px;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--red)}
html body #h88ab1-page.h88ab1 .tlink:hover{color:var(--red)}
html body #h88ab1-page.h88ab1 .hero{background:var(--steel);overflow:hidden;position:relative}
html body #h88ab1-page.h88ab1 .hero .wrap{position:relative;display:grid;grid-template-columns:600px 640px;justify-content:space-between;padding:36px 0 72px}
html body #h88ab1-page.h88ab1 .hero h1{font-size:132px;line-height:.88;letter-spacing:-.052em}
html body #h88ab1-page.h88ab1 .hero h1 span{display:block}
html body #h88ab1-page.h88ab1 .hero h1 .dot{display:inline;color:var(--red)}
html body #h88ab1-page.h88ab1 .hero .lede{font-size:21px;line-height:1.55;color:var(--text);max-width:520px;margin-top:104px}
html body #h88ab1-page.h88ab1 .hero .lede strong{color:var(--ink)}
html body #h88ab1-page.h88ab1 .hero .acts{display:flex;align-items:center;gap:28px;margin-top:34px}
html body #h88ab1-page.h88ab1 .board{position:relative;width:640px;height:600px}
html body #h88ab1-page.h88ab1 .board > svg.peg{position:absolute;inset:0;width:640px;height:600px;overflow:visible;filter:drop-shadow(0 28px 34px rgba(26,28,33,.22));z-index:1}
html body #h88ab1-page.h88ab1 .tape{position:absolute;right:calc(100% - 18px);top:374px;width:658px;height:44px;z-index:0;pointer-events:none;overflow:visible}
html body #h88ab1-page.h88ab1 .swing{transform-box:fill-box;transform-origin:50% 0%}
html body #h88ab1-page.h88ab1.h88ab1-js .ready .swing{animation:h88ab1-settle 1.5s cubic-bezier(.3,.7,.4,1) both}
html body #h88ab1-page.h88ab1.h88ab1-js .ready .s2{animation-delay:.08s}
html body #h88ab1-page.h88ab1.h88ab1-js .ready .s3{animation-delay:.16s}
html body #h88ab1-page.h88ab1.h88ab1-js .ready .s4{animation-delay:.24s}
html body #h88ab1-page.h88ab1.h88ab1-js .ready .s5{animation-delay:.32s}
html body #h88ab1-page.h88ab1.h88ab1-js .ready .s6{animation-delay:.4s}
@keyframes h88ab1-settle{0%{transform:rotate(7deg)}28%{transform:rotate(-4.5deg)}52%{transform:rotate(2.4deg)}74%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
html body #h88ab1-page.h88ab1.h88ab1-js .tape-blade{clip-path:inset(0 0 0 100%)}
html body #h88ab1-page.h88ab1.h88ab1-js .ready .tape-blade{animation:h88ab1-pull 1.25s cubic-bezier(.65,0,.2,1) .55s forwards}
@keyframes h88ab1-pull{to{clip-path:inset(0 0 0 0)}}
html body #h88ab1-page.h88ab1 .story{padding:120px 0 128px;background:#fff}
html body #h88ab1-page.h88ab1 .story .wrap{display:grid;grid-template-columns:500px 1fr;gap:96px;align-items:center}
html body #h88ab1-page.h88ab1 .clip{width:460px;margin-left:10px;transform:rotate(-3.5deg)}
html body #h88ab1-page.h88ab1 .clip svg{width:100%;height:auto;filter:drop-shadow(0 22px 30px rgba(26,28,33,.16))}
html body #h88ab1-page.h88ab1 .story h2{max-width:640px}
html body #h88ab1-page.h88ab1 .story .body{max-width:640px;margin-top:36px}
html body #h88ab1-page.h88ab1 .story .body p{font-size:19px;line-height:1.7;color:var(--text)}
html body #h88ab1-page.h88ab1 .story .body p+p{margin-top:22px}
html body #h88ab1-page.h88ab1 .story .body p:first-child{font-size:23px;line-height:1.55;color:var(--ink);font-weight:500}
html body #h88ab1-page.h88ab1 .values{background:var(--ink);color:#fff;padding:120px 0 80px}
html body #h88ab1-page.h88ab1 .values .head{display:grid;grid-template-columns:1fr 440px;align-items:end;gap:60px;margin-bottom:64px}
html body #h88ab1-page.h88ab1 .values h2{color:#fff}
html body #h88ab1-page.h88ab1 .values .head p{font-size:19px;line-height:1.6;color:#C9CDD4}
html body #h88ab1-page.h88ab1 .vrow{display:grid;grid-template-columns:230px 1fr 400px;gap:48px;align-items:start;padding:44px 0 46px;border-top:1px solid rgba(255,255,255,.14)}
html body #h88ab1-page.h88ab1 .vnum{font-size:148px;line-height:.78;font-weight:800;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--yellow);transition:color .35s}
html body #h88ab1-page.h88ab1 .vrow:hover .vnum{color:var(--yellow)}
html body #h88ab1-page.h88ab1 .vrow h3{color:#fff;font-size:54px;line-height:1.02;letter-spacing:-.038em;padding-top:4px;text-wrap:balance}
html body #h88ab1-page.h88ab1 .vrow p{font-size:18px;line-height:1.65;color:#C9CDD4;padding-top:10px}
html body #h88ab1-page.h88ab1 .vrow p a{display:inline-block;margin-top:14px;color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:5px}
html body #h88ab1-page.h88ab1 .vrow p a:hover{color:var(--yellow)}
html body #h88ab1-page.h88ab1 .serve{background:var(--steel);padding:120px 0 104px}
html body #h88ab1-page.h88ab1 .serve .head{display:grid;grid-template-columns:1fr 440px;gap:60px;align-items:end}
html body #h88ab1-page.h88ab1 .serve h2{max-width:720px}
html body #h88ab1-page.h88ab1 .serve .head p{font-size:19px;line-height:1.6;color:var(--text)}
html body #h88ab1-page.h88ab1 .shops{display:grid;grid-template-columns:repeat(5,1fr);margin-top:72px}
html body #h88ab1-page.h88ab1 .shop{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px;transition:transform .25s}
html body #h88ab1-page.h88ab1 .shop svg{width:100%;max-width:176px;height:auto}
html body #h88ab1-page.h88ab1 .shop b{display:block;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin-top:18px}
html body #h88ab1-page.h88ab1 .shop span{display:block;font-size:15px;color:var(--muted);margin-top:4px}
html body #h88ab1-page.h88ab1 .shop:hover{transform:translateY(-4px)}
html body #h88ab1-page.h88ab1 .shop:hover b{color:var(--red)}
html body #h88ab1-page.h88ab1 .mapwrap{position:relative;margin-top:6px}
html body #h88ab1-page.h88ab1 .mapwrap > svg{width:100%;height:auto;overflow:visible}
html body #h88ab1-page.h88ab1 .flow{stroke-dasharray:3 7;animation:h88ab1-flow 1.6s linear infinite}
@keyframes h88ab1-flow{to{stroke-dashoffset:-20}}
html body #h88ab1-page.h88ab1 .route{stroke-dasharray:4 7;animation:h88ab1-flow 1.9s linear infinite}
html body #h88ab1-page.h88ab1 .pin-pulse{transform-box:fill-box;transform-origin:center;animation:h88ab1-pulse 2.6s ease-out infinite}
@keyframes h88ab1-pulse{0%{transform:scale(.6);opacity:.55}80%,100%{transform:scale(2.2);opacity:0}}
html body #h88ab1-page.h88ab1 .modes{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:26px;border-top:2px solid var(--ink)}
html body #h88ab1-page.h88ab1 .mode{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:30px 40px 6px 0;align-items:start}
html body #h88ab1-page.h88ab1 .mode + .mode{padding-left:40px;border-left:1px solid #D3D7DD}
html body #h88ab1-page.h88ab1 .mode .ic{width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:inset 0 0 0 1px #DADDE2}
html body #h88ab1-page.h88ab1 .mode h3{font-size:26px;letter-spacing:-.025em}
html body #h88ab1-page.h88ab1 .mode p{font-size:17px;line-height:1.6;color:var(--text);margin-top:6px}
html body #h88ab1-page.h88ab1 .mode a{display:inline-block;margin-top:10px;font-size:16px}
html body #h88ab1-page.h88ab1 .carry{padding:120px 0 100px;background:#fff}
html body #h88ab1-page.h88ab1 .carry .head{display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:end;margin-bottom:56px}
html body #h88ab1-page.h88ab1 .carry .head p{font-size:19px;line-height:1.6;color:var(--text)}
html body #h88ab1-page.h88ab1 .carry .head p a{display:inline-block;margin-top:14px}
html body #h88ab1-page.h88ab1 .mosaic{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:268px;gap:10px;grid-template-areas:"pt pt el pl" "pt pt pa pl" "ht sf bm hw" "og og hs au"}
html body #h88ab1-page.h88ab1 .tile{position:relative;border-radius:10px;overflow:hidden;padding:26px 26px 0;display:flex;flex-direction:column;isolation:isolate}
html body #h88ab1-page.h88ab1 .tile h3{font-size:26px;line-height:1.08;letter-spacing:-.03em;max-width:240px;position:relative;z-index:2}
html body #h88ab1-page.h88ab1 .tile p{font-size:15px;line-height:1.5;margin-top:8px;max-width:250px;position:relative;z-index:2}
html body #h88ab1-page.h88ab1 .tile .art{position:absolute;z-index:1;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
html body #h88ab1-page.h88ab1 .tile:hover .art{transform:translateY(-8px) rotate(-1.5deg)}
html body #h88ab1-page.h88ab1 .tile .go{position:absolute;left:26px;bottom:22px;z-index:2;font-weight:700;font-size:15px;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
html body #h88ab1-page.h88ab1 .tile:hover .go,html body #h88ab1-page.h88ab1 .tile:focus-visible .go{opacity:1;transform:none}
html body #h88ab1-page.h88ab1 .t-yellow{background:var(--yellow);color:var(--ink)}
html body #h88ab1-page.h88ab1 .t-yellow p{color:#3A3320}
html body #h88ab1-page.h88ab1 .t-ink{background:var(--ink);color:#fff}
html body #h88ab1-page.h88ab1 .t-ink h3{color:#fff}
html body #h88ab1-page.h88ab1 .t-ink p{color:#C9CDD4}
html body #h88ab1-page.h88ab1 .t-red{background:var(--red);color:#fff}
html body #h88ab1-page.h88ab1 .t-red h3{color:#fff}
html body #h88ab1-page.h88ab1 .t-red p{color:#FFE3E5}
html body #h88ab1-page.h88ab1 .t-steel{background:#E8EBEF}
html body #h88ab1-page.h88ab1 .t-steel p{color:var(--muted)}
html body #h88ab1-page.h88ab1 .t-paper{background:var(--steel)}
html body #h88ab1-page.h88ab1 .t-paper p{color:var(--muted)}
html body #h88ab1-page.h88ab1 .t-white{background:#fff;box-shadow:inset 0 0 0 1px #DCE0E5}
html body #h88ab1-page.h88ab1 .t-white p{color:var(--muted)}
html body #h88ab1-page.h88ab1 .tile.big{padding:40px 40px 0}
html body #h88ab1-page.h88ab1 .tile.big h3{font-size:52px;max-width:420px;letter-spacing:-.04em}
html body #h88ab1-page.h88ab1 .tile.big p{font-size:17px;max-width:360px;margin-top:14px}
html body #h88ab1-page.h88ab1 .tile.big .go{left:40px;bottom:34px;font-size:17px}
html body #h88ab1-page.h88ab1 .brands{margin-top:56px;display:grid;grid-template-columns:300px 1fr;gap:60px;align-items:baseline;border-top:1px solid var(--line);padding-top:36px}
html body #h88ab1-page.h88ab1 .brands h3{font-size:24px;letter-spacing:-.025em}
html body #h88ab1-page.h88ab1 .brands p{font-size:19px;line-height:1.7;color:var(--text)}
html body #h88ab1-page.h88ab1 .brands p b{color:var(--ink);font-weight:700}
html body #h88ab1-page.h88ab1 .club{background:radial-gradient(1100px 600px at 78% 40%,#D3000F 0%,#B4010E 45%,#8E000B 100%);color:#fff;padding:112px 0;position:relative;overflow:hidden}
html body #h88ab1-page.h88ab1 .club .wrap{display:grid;grid-template-columns:560px 1fr;gap:60px;align-items:center;position:relative}
html body #h88ab1-page.h88ab1 .club .mark{font-size:24px;font-weight:900;font-style:italic;color:var(--star);letter-spacing:-.02em}
html body #h88ab1-page.h88ab1 .club h2{color:#fff;margin-top:18px}
html body #h88ab1-page.h88ab1 .club .intro{font-size:19px;line-height:1.65;color:#FFE1E3;margin-top:24px;max-width:520px}
html body #h88ab1-page.h88ab1 .tiers{list-style:none;margin:36px 0 0;padding:0;position:relative}
html body #h88ab1-page.h88ab1 .tiers li{display:grid;grid-template-columns:30px 120px 1fr;align-items:center;gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.2)}
html body #h88ab1-page.h88ab1 .tiers li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
html body #h88ab1-page.h88ab1 .tiers i{width:18px;height:18px;border-radius:50%;display:block;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
html body #h88ab1-page.h88ab1 .tiers b{font-size:22px;font-weight:800;letter-spacing:-.02em}
html body #h88ab1-page.h88ab1 .tiers span{font-size:17px;color:#FFE1E3}
html body #h88ab1-page.h88ab1 .club .acts{display:flex;align-items:center;gap:28px;margin-top:34px}
html body #h88ab1-page.h88ab1 .club .acts .tlink{color:#fff;text-decoration-color:var(--yellow)}
html body #h88ab1-page.h88ab1 .club .acts .tlink:hover{color:var(--yellow)}
html body #h88ab1-page.h88ab1 .cards{position:relative;height:500px}
html body #h88ab1-page.h88ab1 .cards > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
html body #h88ab1-page.h88ab1 .cardg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
html body #h88ab1-page.h88ab1 .cards:hover .c-gold{transform:translate(10px,-10px)}
html body #h88ab1-page.h88ab1 .cards:hover .c-bronze{transform:translate(-10px,6px)}
html body #h88ab1-page.h88ab1 .close{padding:128px 0 132px;background:#fff}
html body #h88ab1-page.h88ab1 .close .wrap{display:grid;grid-template-columns:1fr 440px;gap:60px;align-items:end}
html body #h88ab1-page.h88ab1 .close h2{font-size:150px;line-height:.94;letter-spacing:-.055em}
html body #h88ab1-page.h88ab1 .close h2 .dot{color:var(--red)}
html body #h88ab1-page.h88ab1 .close p{font-size:20px;line-height:1.6;color:var(--text)}
html body #h88ab1-page.h88ab1 .close .acts{display:flex;align-items:center;gap:16px;margin-top:30px}
@container h88ab1 (max-width:1100px){
html body #h88ab1-page.h88ab1 .hero .wrap,html body #h88ab1-page.h88ab1 .story .wrap,html body #h88ab1-page.h88ab1 .club .wrap,html body #h88ab1-page.h88ab1 .close .wrap,html body #h88ab1-page.h88ab1 .values .head,html body #h88ab1-page.h88ab1 .serve .head,html body #h88ab1-page.h88ab1 .carry .head,html body #h88ab1-page.h88ab1 .brands{grid-template-columns:1fr}
html body #h88ab1-page.h88ab1 .board{margin:20px auto 0;transform-origin:top center}
html body #h88ab1-page.h88ab1 .tape{display:none}
html body #h88ab1-page.h88ab1 .hero .lede{margin-top:40px}
html body #h88ab1-page.h88ab1 .vrow{grid-template-columns:140px 1fr}
html body #h88ab1-page.h88ab1 .vrow p{grid-column:2}
html body #h88ab1-page.h88ab1 .vnum{font-size:110px}
html body #h88ab1-page.h88ab1 .mosaic{grid-template-columns:repeat(2,1fr);grid-template-areas:"pt pt" "pt pt" "el pa" "pl pl" "ht sf" "bm hw" "og og" "hs au"}
html body #h88ab1-page.h88ab1 .shops{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
html body #h88ab1-page.h88ab1 .close h2{font-size:110px}
}
@container h88ab1 (max-width:620px){
html body #h88ab1-page.h88ab1 div.h88ab1-main{overflow-x:clip}
html body #h88ab1-page.h88ab1 .h2{font-size:42px}
html body #h88ab1-page.h88ab1 .tile.big .art{width:100%!important;left:0!important}
html body #h88ab1-page.h88ab1 .tile.big{padding:26px 26px 0}
html body #h88ab1-page.h88ab1 .hero .acts{flex-wrap:wrap}
html body #h88ab1-page.h88ab1 .hero h1{font-size:76px}
html body #h88ab1-page.h88ab1 .board{transform:scale(.52);height:320px;width:640px;margin-left:calc(50% - 320px)}
html body #h88ab1-page.h88ab1 .clip{width:100%;margin:0}
html body #h88ab1-page.h88ab1 .vrow{grid-template-columns:1fr;gap:16px}
html body #h88ab1-page.h88ab1 .vrow p{grid-column:auto}
html body #h88ab1-page.h88ab1 .vrow h3{font-size:36px}
html body #h88ab1-page.h88ab1 .vnum{font-size:80px}
html body #h88ab1-page.h88ab1 .mosaic{grid-template-columns:1fr;grid-template-areas:"pt" "el" "pa" "pl" "ht" "sf" "bm" "hw" "og" "hs" "au";grid-auto-rows:280px}
html body #h88ab1-page.h88ab1 .tile.big h3{font-size:34px}
html body #h88ab1-page.h88ab1 .shops{grid-template-columns:repeat(2,minmax(0,1fr))}
html body #h88ab1-page.h88ab1 .modes{grid-template-columns:1fr}
html body #h88ab1-page.h88ab1 .mode+.mode{padding-left:0;border-left:0;border-top:1px solid #D3D7DD}
html body #h88ab1-page.h88ab1 .close h2{font-size:72px}
html body #h88ab1-page.h88ab1 .cards{height:340px}
}
@media (prefers-reduced-motion:reduce){
html body #h88ab1-page.h88ab1 *,html body #h88ab1-page.h88ab1 *::before,html body #h88ab1-page.h88ab1 *::after{animation:none!important;transition:none!important}
html body #h88ab1-page.h88ab1.h88ab1-js .tape-blade{clip-path:none}
}

/* full-bleed bands also cover the right tool-rail lane (body padding-right = --h88-tool-rail-lane); content box unchanged */
html body #h88ab1-page.h88ab1 :is(div.h88ab1-main>section){margin-right:calc(0px - var(--h88-tool-rail-lane,0px))!important;padding-right:var(--h88-tool-rail-lane,0px)!important}

/* live layout: the block sits in the body box (viewport minus the tool-rail lane); the design column becomes the site column min(1280px, 100% - 48px), centred */
html body #h88ab1-page.h88ab1 .wrap{width:min(1280px,calc(100% - 48px));max-width:none;margin-left:auto;margin-right:auto}
/* the chat buttons wear the design's link / button looks */
html body #h88ab1-page.h88ab1 .vrow p button.vlink{display:inline-block;margin-top:14px;color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:5px}
html body #h88ab1-page.h88ab1 .vrow p button.vlink:hover{color:var(--yellow)}
/* between the site column and the design's own 1180 floor the 600+640 hero grid is wider than the column: scale the pegboard so it never runs under the tool rail */
@container h88ab1 (max-width:1288px) and (min-width:1101px){
html body #h88ab1-page.h88ab1 .hero .wrap{grid-template-columns:minmax(0,1fr) auto;column-gap:24px}
html body #h88ab1-page.h88ab1 .board{zoom:.8}
html body #h88ab1-page.h88ab1 .tape{display:none}
}
/* clear the live sticky header */
html body #h88ab1-page.h88ab1 [id]{scroll-margin-top:176px}

}