:root{--navy:#101a31;--ink:#17223b;--muted:#66718a;--paper:#fffdf9;--cream:#f7f4ef;--line:#dedbd3;--blue:#1e62dc;--blue-pale:#e8effd;--coral:#f58d69;--coral-pale:#fff0e9;--mint:#d7efe6;--green:#217c61;--shadow:0 25px 70px rgba(16,26,49,.14)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--cream);color:var(--ink);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.45}a{color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid rgba(30,98,220,.48);outline-offset:4px}.skip-link{position:fixed;z-index:20;top:14px;left:14px;padding:10px 14px;border-radius:10px;background:var(--navy);color:#fff;transform:translateY(-150%);transition:transform .2s}.skip-link:focus{transform:translateY(0)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.demo-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:21px max(20px,calc((100% - 1220px)/2));background:rgba(247,244,239,.9)}.demo-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}.brand-mark{display:block;width:34px;height:34px;border:1px solid var(--line);border-radius:12px;background:#fbfaf6 url('/assets/cobuyhou/logo.png') center/180% no-repeat;box-shadow:0 7px 18px rgba(25,37,62,.08)}.demo-brand strong{display:block;font-size:17px;font-weight:850;letter-spacing:-.06em;line-height:1}.demo-brand strong span{color:var(--blue)}.demo-brand small{display:block;margin-top:3px;color:#8a8b8a;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.demo-header nav{display:flex;gap:18px;color:var(--muted);font-size:12px;font-weight:800}.demo-header nav a{text-decoration:none}.demo-header nav a:hover{color:var(--blue)}.demo-main{max-width:1180px;margin:0 auto;padding:75px 22px 100px}.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 18px;color:#154aa8;font-size:10px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}.eyebrow:before{width:8px;height:8px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px var(--coral-pale);content:""}.demo-intro h1{margin:0;font-size:clamp(54px,8vw,98px);font-weight:840;letter-spacing:-.1em;line-height:.9}.lede{max-width:685px;margin:27px 0 0;color:var(--muted);font-size:clamp(17px,2vw,23px);line-height:1.5}.demo-meta{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px;color:#7c8391;font-size:10px;font-weight:800}.demo-meta span{display:inline-flex;align-items:center;gap:7px;padding:7px 9px;border-radius:999px;background:rgba(255,253,249,.65)}.demo-meta i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--mint)}.player-shell{margin-top:70px}.player-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:17px}.player-heading h2,.transcript-card h2,.demo-footer-card h2{margin:0;font-size:clamp(25px,3.7vw,44px);letter-spacing:-.07em;line-height:1}.download-link{color:var(--blue);font-size:11px;font-weight:850;text-decoration:none}.download-link:hover{text-decoration:underline}.video-frame{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:21px;background:var(--navy);box-shadow:var(--shadow)}video{display:block;width:100%;aspect-ratio:16/9;background:var(--navy)}.video-badge{position:absolute;top:18px;left:18px;display:flex;gap:8px;padding:8px 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(16,26,49,.63);color:#fff;font-size:8px;font-weight:900;letter-spacing:.12em;pointer-events:none}.video-badge span+span{color:var(--coral)}.player-tools{display:flex;align-items:center;gap:8px;margin-top:12px}.player-tools button{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:rgba(255,253,249,.7);color:var(--ink);font-size:10px;font-weight:800}.player-tools button:hover{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}.player-hint{margin-left:auto;color:#8a8d91;font-size:10px}.transcript-card{margin-top:65px;padding:32px clamp(19px,4vw,42px);border:1px solid var(--line);border-radius:21px;background:rgba(255,253,249,.78)}.transcript-top{display:flex;align-items:end;justify-content:space-between;gap:20px}.transcript-actions{display:flex;flex-wrap:wrap;gap:8px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:39px;padding:0 12px;border-radius:10px;text-decoration:none;font-size:10px;font-weight:850}.button-primary{background:var(--blue);color:#fff;box-shadow:0 9px 18px rgba(30,98,220,.18)}.button-primary:hover{background:#154aa8}.button-ghost{border:1px solid var(--line);background:rgba(255,253,249,.75);color:var(--ink)}.button-ghost:hover{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}.transcript-note{margin:16px 0 0;color:#858b96;font-size:11px}.transcript{display:grid;gap:0;margin:28px 0 0;padding:0;list-style:none}.transcript li{display:grid;grid-template-columns:64px 1fr;gap:15px;padding:17px 0;border-top:1px solid var(--line)}.transcript time{padding-top:2px;color:var(--blue);font-family:ui-monospace,monospace;font-size:11px;font-weight:850}.transcript p{max-width:800px;margin:0;color:var(--ink);font-size:13px;line-height:1.55}.transcript li.is-current{margin-left:-12px;padding-left:12px;border-radius:10px;background:var(--blue-pale)}.demo-footer-card{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:28px;padding:29px clamp(19px,4vw,42px);border-radius:21px;background:var(--navy);color:#fff}.demo-footer-card .eyebrow{color:var(--coral)}.demo-footer-card h2{margin-top:0}.demo-footer-card p:not(.eyebrow){max-width:550px;margin:14px 0 0;color:#c7cfdf;font-size:12px}.footer-actions{display:flex;flex-wrap:wrap;gap:9px}.demo-footer-card .button-ghost{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.05);color:#fff}.demo-footer-card .button-ghost:hover{background:rgba(245,141,105,.12);border-color:var(--coral)}.demo-footer{display:flex;justify-content:space-between;gap:20px;max-width:1180px;margin:0 auto;padding:25px 22px 45px;color:#8a8d91;font-size:10px}.demo-footer a{text-decoration:none}.demo-footer a:hover{color:var(--blue)}
@media(max-width:700px){.demo-header{padding:16px 17px}.demo-header nav{gap:11px;font-size:10px}.demo-main{padding:53px 17px 70px}.demo-intro h1{font-size:65px}.player-shell{margin-top:47px}.player-heading{align-items:start;flex-direction:column;gap:12px}.player-tools{flex-wrap:wrap}.player-hint{width:100%;margin:2px 0 0}.transcript-top,.demo-footer-card{align-items:flex-start;flex-direction:column}.transcript-actions{width:100%}.transcript-actions .button{flex:1}.demo-footer{padding:20px 17px 30px;flex-direction:column;gap:8px}.video-badge{top:9px;left:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.001ms!important;scroll-behavior:auto!important}}