:root { --navy:#153e5c; --navy-deep:#0d2d44; --ice:#dceef5; --white:#f6fafd; --ink:#102b3e; --muted:#557082; --line:rgba(21,62,92,.18); --aqua:#7fb8ce; --shadow:0 22px 56px rgba(13,45,68,.16); color-scheme:light; font-family:Inter,"Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--white); line-height:1.55; } body:has(dialog[open]) { overflow:hidden; } a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { color:inherit; }
.site-header { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px clamp(22px,5vw,78px); border-bottom:1px solid rgba(220,238,245,.28); background:rgba(13,45,68,.97); color:var(--white); }
.brand { display:flex; align-items:baseline; gap:13px; }.brand strong { font-size:1.72rem; letter-spacing:.2em; line-height:1; }.brand span { color:#b8d7e4; font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.header-action,.primary-button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:43px; border-radius:3px; font-weight:800; }.header-action { border:1px solid rgba(220,238,245,.6); padding:0 15px; color:var(--white); }
.hero,.product-section { padding:clamp(54px,8vw,110px) clamp(22px,5vw,78px); }.hero { display:grid; grid-template-columns:minmax(0,.88fr) minmax(410px,1.12fr); align-items:center; gap:clamp(38px,7vw,96px); overflow:hidden; background:linear-gradient(115deg,var(--white) 0%,var(--white) 48%,var(--ice) 48%,#c9e3ed 100%); }.eyebrow { margin:0 0 14px; color:var(--navy); font-size:.76rem; font-weight:900; letter-spacing:.15em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:Georgia,"Times New Roman",serif; line-height:1.1; } h1 { max-width:680px; margin-bottom:21px; font-size:clamp(2.45rem,4.4vw,4.5rem); } h2 { margin-bottom:16px; font-size:clamp(2rem,3.5vw,3.45rem); } h3 { margin-bottom:8px; font-size:1.1rem; line-height:1.28; }.hero-lead,.section-heading>p { max-width:640px; margin-bottom:23px; color:var(--muted); font-size:1.07rem; }.hero-steps { display:flex; flex-wrap:wrap; gap:10px 20px; margin:0 0 28px; padding:0; list-style:none; color:var(--muted); font-weight:700; }.hero-steps li { display:inline-flex; align-items:center; gap:8px; }.hero-steps span { display:grid; width:32px; height:28px; place-items:center; background:var(--navy); color:var(--white); font-size:.66rem; letter-spacing:.05em; }.primary-button { padding:0 20px; background:var(--navy); color:var(--white); box-shadow:0 13px 28px rgba(21,62,92,.22); }
.hero-visual { position:relative; z-index:0; display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:9px; background:var(--navy); box-shadow:var(--shadow); transform:rotate(2deg); }.hero-visual::after { position:absolute; z-index:-1; top:22px; right:-23px; width:100%; height:100%; border:1px solid var(--navy); content:""; }.hero-tile { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#abc9d6; }.hero-tile:nth-child(2n) { transform:translateY(8px); }.hero-tile:nth-child(3n) { transform:translateY(-5px); }
.product-section { border-top:8px solid var(--navy); background:var(--white); }.section-heading { max-width:880px; margin-bottom:42px; }.section-heading>p { margin-bottom:0; }.category-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }.category-card,.tutorial-card { border:1px solid var(--line); border-radius:3px; background:#fff; }.category-card { min-height:158px; padding:20px; text-align:left; cursor:pointer; transition:transform 150ms ease,border-color 150ms ease,box-shadow 150ms ease; }.category-card:hover,.category-card.active,.tutorial-card:hover { border-color:var(--aqua); box-shadow:0 14px 30px rgba(21,62,92,.11); transform:translateY(-2px); }.category-card span { display:inline-flex; margin-bottom:16px; border-left:4px solid var(--aqua); padding-left:8px; color:var(--navy); font-size:.78rem; font-weight:900; }.category-card p,.tutorial-card p { margin-bottom:0; color:var(--muted); }.product-toolbar { display:flex; align-items:end; justify-content:space-between; gap:18px; margin:31px 0 20px; border-top:1px solid var(--line); padding-top:22px; }.product-toolbar strong,.product-toolbar span { display:block; }.product-toolbar span { color:var(--muted); }.search-box { display:grid; min-width:min(400px,100%); gap:7px; color:var(--muted); font-size:.88rem; font-weight:800; }.search-box input { width:100%; border:1px solid var(--line); border-radius:3px; padding:12px 13px; background:#fff; color:var(--ink); }.tutorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.tutorial-card { display:flex; min-height:275px; flex-direction:column; overflow:hidden; padding:0; text-align:left; cursor:pointer; transition:transform 150ms ease,border-color 150ms ease,box-shadow 150ms ease; }.tutorial-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--ice); }.card-body { display:flex; flex:1; flex-direction:column; padding:17px 18px 19px; }.tag { width:fit-content; margin-bottom:12px; border-radius:2px; padding:4px 8px; background:var(--ice); color:var(--navy); font-size:.73rem; font-weight:900; }.watch-label { display:inline-flex; width:fit-content; margin-top:auto; border-bottom:2px solid var(--aqua); padding-top:18px; color:var(--navy); font-weight:900; }.empty-state { min-height:196px; padding:26px; background:var(--ice); }
dialog { color:inherit; } .modal-backdrop { position:fixed; z-index:80; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; border:0; padding:clamp(16px,4vw,42px); background:rgba(5,27,42,.81); }.modal-backdrop[open] { display:flex; align-items:center; justify-content:center; }.modal-backdrop::backdrop { background:rgba(5,27,42,.81); }.video-modal { width:min(1100px,100%); max-height:92vh; overflow:auto; border:1px solid rgba(220,238,245,.45); border-radius:3px; background:#fff; box-shadow:0 30px 90px rgba(0,0,0,.38); }.modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:clamp(20px,3vw,32px) clamp(20px,3vw,34px) 0; }.modal-header .eyebrow { margin-bottom:8px; }.modal-header h2 { margin-bottom:0; font-size:clamp(1.65rem,3vw,2.8rem); }.modal-close { min-height:41px; border:1px solid var(--navy); border-radius:3px; padding:0 14px; background:var(--navy); color:var(--white); cursor:pointer; font-size:.84rem; font-weight:800; }.modal-copy { max-width:750px; margin:14px clamp(20px,3vw,34px) 24px; color:var(--muted); }.video-shell { position:relative; overflow:hidden; border-top:1px solid var(--line); background:#091a25; }.video-shell video { display:block; width:100%; aspect-ratio:16/9; background:#091a25; }.video-missing { position:absolute; right:18px; bottom:18px; left:18px; display:flex; justify-content:space-between; gap:16px; border:1px solid rgba(255,255,255,.32); border-radius:3px; padding:13px 15px; background:rgba(5,27,42,.86); color:#fff; }.video-missing span { color:rgba(255,255,255,.82); text-align:right; }.video-missing.is-hidden { display:none; }.site-footer { display:flex; justify-content:space-between; gap:16px; padding:27px clamp(22px,5vw,78px); background:var(--navy-deep); color:#c9e3ed; }.site-footer a { color:var(--white); font-weight:800; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #4d9fbd; outline-offset:3px; } @media (max-width:980px) { .hero { grid-template-columns:1fr; }.hero-visual { max-width:760px; }.category-grid,.tutorial-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:680px) { .site-header { position:static; align-items:flex-start; flex-direction:column; gap:12px; }.header-action { display:none; }.hero,.product-section { padding:46px 18px; }.hero { background:linear-gradient(160deg,var(--white) 0%,var(--white) 55%,var(--ice) 55%,#c9e3ed 100%); }.category-grid,.tutorial-grid { grid-template-columns:1fr; }.product-toolbar,.modal-header,.site-footer { align-items:stretch; flex-direction:column; }.search-box { min-width:0; }.modal-backdrop { align-items:flex-start; padding:12px; }.video-modal { max-height:calc(100vh - 24px); }.modal-close { width:100%; }.video-missing { position:static; flex-direction:column; }.video-missing span { text-align:left; } }