@import url('./style.css');
:root{--ink:#172c36;--muted:#68777d;--line:#dde4e4;--accent:#e6643d;--paper:#f7f8f5;--serif:Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font:15px/1.75 "Yu Gothic",Meiryo,system-ui,sans-serif}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,select,summary{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #247786;outline-offset:4px}[hidden]{display:none!important}.masthead{max-width:none;margin:0;background:white;padding:22px max(5vw,20px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}.logo{display:flex;align-items:center;gap:12px;font-size:27px;font-weight:900;letter-spacing:-1px}.logo-mark{background:var(--ink);color:white;font-size:23px;border-radius:10px;width:38px;height:38px;text-align:center;line-height:38px}.logo-sub{font-size:11px;letter-spacing:.04em;color:var(--muted);font-weight:500;margin-left:12px}.masthead nav{display:flex;gap:28px;font-size:12px;font-weight:700}.portal-main{max-width:1280px;padding:0 40px;margin:auto}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:50px;padding:62px 0 54px;align-items:center}.overline{font-size:11px;letter-spacing:.13em;font-weight:800;color:#567176;margin:0 0 16px}.hero h1{font-size:clamp(36px,4.2vw,61px);line-height:1.45;letter-spacing:-.05em;margin:0 0 22px}.hero h1 em{font-style:normal;color:#2d737b}.hero-description{font-size:14px;line-height:2;color:#647379}.hero form{display:flex;margin:26px 0 12px;background:white;border:1px solid #acbbbe;border-radius:9px;padding:5px;box-shadow:0 8px 18px #18303908}.hero input{width:100%;min-width:0;background:transparent;border:0;padding:11px 12px;color:var(--ink)}.hero button,.button{background:var(--ink);color:white;border:0;border-radius:6px;padding:11px 22px;white-space:nowrap;cursor:pointer}.hero button span{padding-left:12px}.quick-search{display:flex;flex-wrap:wrap;gap:10px;font-size:11px}.quick-search span{color:var(--muted)}.quick-search a{text-decoration:underline;text-underline-offset:4px}.hero-visual{height:350px;position:relative;background:#e9efea;border-radius:24px;overflow:hidden}.tile{position:absolute;border-radius:14px;display:grid;place-content:center;background:#fff;box-shadow:0 12px 28px #18303910}.tile-monitor{left:22px;top:45px;width:240px;height:203px;background:#d9e8e2;transform:rotate(-7deg);color:#315d58}.tile-monitor svg{width:185px}.tile-monitor span{font-size:10px;text-align:center}.tile-chair{right:26px;top:42px;width:130px;height:145px;background:#ecdace;transform:rotate(9deg);color:#976345}.tile-camera{right:27px;bottom:34px;width:160px;height:120px;background:#fffdf4;transform:rotate(-5deg);color:#575e57}.tile-audio{left:64px;bottom:22px;width:115px;height:110px;background:#e7b454;transform:rotate(8deg);color:#6b4b22}.object-art{display:block;width:100px;height:auto}.visual-label{position:absolute;top:16px;left:22px;font-size:9px;letter-spacing:.2em}.visual-caption{position:absolute;bottom:9px;right:20px;font-size:9px;color:#637a72}.section{padding:35px 0 45px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}.section-head h2,.specialty-band h2{font-size:28px;letter-spacing:-.03em;margin:0}.section-head .overline{margin-bottom:5px}.section-head>p{font-size:12px;color:var(--muted)}.genre-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.genre{display:grid;grid-template-columns:55px 1fr;gap:2px 14px;background:white;border:1px solid var(--line);padding:20px 16px;border-radius:10px;transition:transform .2s,border .2s}.genre:hover{transform:translateY(-3px);border-color:#53828b}.genre svg{grid-row:span 3;width:54px;align-self:center;color:#487580}.genre strong{font-size:13px}.genre span{font-size:9px;color:var(--muted)}.genre small{font-size:10px;color:#32717a}.genre.planned{background:#f2f4f1}.genre.planned small{color:#858f8c}.genre.planned svg{color:#8d9d9a}.coverage{font-size:11px;color:#68777d;padding:14px 0;line-height:1.9}.specialty-band{background:var(--ink);color:white;border-radius:13px;padding:34px;display:grid;grid-template-columns:1fr 1.3fr auto;gap:35px;align-items:center}.specialty-band .overline{color:#b5d9cf}.specialty-band p{font-size:13px;color:#cbd7d9}.specialty-band a{font-size:12px;border-bottom:1px solid #91a9ad;padding:8px 0}.guides-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.guide-card{display:block;background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden}.guide-art{height:150px;display:grid;place-items:center;background:#dbe8e1}.guide-art.vacuum{background:#e9e3d6}.guide-art.web{background:#dde7ee}.guide-art svg{width:130px;color:#41616c}.guide-card>div:last-child{padding:22px}.guide-card h3{font-size:17px;line-height:1.7;margin:9px 0}.guide-card p{font-size:12px;color:var(--muted)}.text-link{font-size:12px;font-weight:800;color:#2c6975}.calculator-drawer{margin:20px 0 50px;border:1px solid var(--line);border-radius:10px;padding:20px;background:white}.calculator-drawer>summary{font-size:13px;font-weight:bold;cursor:pointer}.calculator-drawer #calculator{margin-top:22px}.portal-footer{max-width:none;padding:45px max(5vw,20px);border-top:1px solid var(--line);background:#edf0ec;margin:0;color:#56666d}.portal-footer .logo{font-size:22px;color:var(--ink)}.portal-footer p,.portal-footer nav{font-size:12px}.portal-footer nav{display:flex;gap:24px;flex-wrap:wrap;margin:18px 0}.portal-footer small{font-size:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#search-results{padding:16px;border:1px solid var(--line);border-radius:8px;background:white;margin:10px 0}#search-results a{display:block;padding:10px;border-top:1px solid var(--line);font-weight:bold}#search-results span{display:block;font-size:11px;font-weight:normal}#search-status{font-size:12px}.breadcrumbs{display:flex;gap:10px;padding:22px 0;font-size:11px}.category-hero{display:flex;align-items:center;justify-content:space-between;background:#e5ede8;padding:35px 45px;border-radius:14px;gap:20px}.category-hero h1{font-size:36px;margin:0 0 12px}.category-hero>svg{width:180px;color:#366c6b}.category-chip{display:inline-block;background:white;padding:5px 12px;border-radius:5px;font-size:11px}.catalog-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px}.catalog-toolbar h2{font-size:22px;margin:0}.catalog-toolbar p{font-size:12px;color:var(--muted)}.catalog-toolbar label{font-size:11px;white-space:nowrap}.catalog-toolbar select{display:block;padding:10px;border:1px solid #a5b5b8;border-radius:5px;background:white}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.product-card{padding:20px;background:white;border:1px solid var(--line);border-radius:12px}.product-card h3{margin:0;font-size:24px}.product-card .overline{margin:14px 0 2px}.product-art{height:130px;background:#f2f5f1;display:grid;place-items:center;border-radius:6px;position:relative}.product-art svg{width:100px;color:#6b8b89}.product-art span{position:absolute;bottom:5px;font-size:8px;color:var(--muted)}.product-card dl{margin:18px 0}.product-card dl>div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);padding:8px 0;font-size:11px}.product-card dd{margin:0;font-weight:bold}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.service-card{background:white;border:1px solid var(--line);border-radius:12px;padding:35px}.service-card h2{font-size:23px}.service-card p{font-size:14px;color:var(--muted)}.service-card strong{font-size:13px}.single{grid-template-columns:minmax(0,500px)}
@media(min-width:1600px){.portal-main{max-width:1400px}}@media(max-width:1000px){.logo-sub{display:none}.genre-grid{grid-template-columns:repeat(3,1fr)}.hero{gap:25px}.tile-monitor{width:190px;left:12px}.tile-chair{right:10px;width:90px}.tile-camera{right:12px;width:125px}.specialty-band{grid-template-columns:1fr 1fr}.specialty-band a{grid-column:2}.masthead nav{gap:15px}.product-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.masthead{padding:16px 20px;flex-wrap:wrap;gap:12px}.logo{font-size:24px}.masthead nav{font-size:10px;gap:22px}.portal-main{padding:0 20px}.hero{grid-template-columns:1fr;padding:34px 0 20px;gap:25px}.hero h1{font-size:39px}.hero-visual{height:215px}.tile-monitor{top:34px;left:32px;width:175px;height:140px}.tile-monitor svg{width:135px}.tile-chair{right:24px;top:30px;height:92px;width:84px}.tile-chair svg{width:70px}.tile-camera{right:30px;bottom:15px;width:100px;height:80px}.tile-camera svg{width:85px}.tile-audio{left:140px;bottom:12px;width:76px;height:75px}.tile-audio svg{width:60px}.section{padding:25px 0}.section-head{display:block}.section-head h2{font-size:24px}.section-head>p{font-size:11px}.genre-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.genre{display:block;padding:15px 12px}.genre svg{width:47px;margin-bottom:7px}.genre strong,.genre span,.genre small{display:block}.genre strong{font-size:12px}.genre span{font-size:8px}.specialty-band{display:block;padding:26px}.specialty-band h2{font-size:26px}.guides-grid,.product-grid,.service-grid{grid-template-columns:1fr}.guide-card{display:grid;grid-template-columns:100px 1fr}.guide-art{height:100%;min-height:160px}.guide-art svg{width:85px}.guide-card>div:last-child{padding:17px}.guide-card h3{font-size:14px}.guide-card p{font-size:11px}.guide-card .overline{font-size:9px}.category-hero{padding:24px}.category-hero h1{font-size:26px}.category-hero>svg{width:85px}.category-hero p{font-size:12px}.catalog-toolbar{display:block}.catalog-toolbar label{display:block;margin-top:20px}.portal-footer nav{gap:15px}.single{grid-template-columns:1fr}}

.hero input{text-align:left}.compare-choice{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px}.compare-choice input{width:16px;height:16px}.selected-scroll{overflow-x:auto;background:white;margin:16px 0 25px}.selected-scroll table{border-collapse:collapse;min-width:460px;width:100%;font-size:12px}.selected-scroll th,.selected-scroll td{border:1px solid var(--line);padding:14px;text-align:left}.selected-scroll th{background:#e5ede8}#selected-comparison{padding:20px 0;border-top:1px solid var(--line)}