@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#050b10;--cyan:#53f7e3;--muted:#82949e;--line:#1d303a;--white:#edf7fa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--bg);color:var(--white);font-family:'Noto Sans SC',system-ui,sans-serif;font-size:14px}button,a,input{ -webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button,a{transition:color .2s,background .2s,border-color .2s}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}.ambient{position:absolute;inset:0 0 auto;height:730px;pointer-events:none;background:radial-gradient(ellipse at 72% 5%,#0c333936,transparent 65%);z-index:-1}.topbar{max-width:1320px;margin:auto;display:flex;align-items:center;padding:26px 40px;border-bottom:1px solid var(--line);gap:40px}.brand{display:flex;align-items:center;gap:13px;font-size:12px;letter-spacing:2px;font-weight:700}.brand-sub{display:block;font-size:10px;color:var(--muted);margin-top:5px;letter-spacing:2px}
.logo-slot{width:90px;height:45px;display:flex;align-items:center;justify-content:center;position:relative;color:var(--cyan);font-size:28px;border-radius:8px}.logo-slot small{position:absolute;bottom:2px;font-size:6px;letter-spacing:1px}.logo-slot img{width:100%;height:100%;object-fit:contain}.topbar nav{display:flex;align-items:center;gap:35px;margin-left:auto;font-size:12px}.text-button{border:0;background:transparent;padding:0;color:var(--muted)}.text-button:hover,nav a:hover{color:var(--cyan)}.text-button span{margin-left:8px}.online{border:1px solid var(--line);padding:9px 13px;border-radius:30px;font:9px monospace;letter-spacing:1px;color:#9ab0b8}.online i,.directory-bottom i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);margin-right:8px}main{max-width:1240px;margin:auto;padding:0 0 60px}.intro{padding:55px 0 30px}.eyebrow{font:10px monospace;letter-spacing:2.5px;color:var(--cyan)}.intro .eyebrow{display:flex;align-items:center;gap:10px}.eyebrow span:not(.title-dot){height:1px;width:24px;background:var(--cyan)}h1{font-size:clamp(32px,4.8vw,62px);letter-spacing:1px;line-height:1.4;margin:14px 0 12px;font-weight:800}.title-dot{color:var(--cyan);margin-left:8px}.intro-bottom{display:flex;justify-content:space-between;align-items:center}.subtitle{margin:0;font-size:22px;letter-spacing:7px;color:#b6c7ce}.intro-note{margin:0;text-align:right;font-size:11px;line-height:2;letter-spacing:2px;color:#b0c2ca}.intro-note span{color:#657e8a;letter-spacing:1px}.showcase{position:relative;height:382px;overflow:hidden;border:1px solid #24404b;border-radius:12px;background:#06141c}.showcase:before,.showcase:after{content:'';position:absolute;width:28px;height:28px;border-color:var(--cyan);z-index:4;pointer-events:none}.showcase:before{top:12px;left:12px;border-top:1px solid;border-left:1px solid}.showcase:after{bottom:12px;right:12px;border-bottom:1px solid;border-right:1px solid}.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}.slide.active{opacity:1}.image-shade{position:absolute;inset:0;background:linear-gradient(90deg,#051019ed 0%,#051019a8 32%,transparent 63%),linear-gradient(0deg,#040d16a0,transparent 45%)}.hero-content{position:absolute;left:45px;top:65px;max-width:46%}.feature-tag{font-size:10px;color:var(--cyan);letter-spacing:2px;background:#0e393958;border:1px solid #215752;padding:6px 10px}.hero-content h2{font-size:30px;font-weight:600;line-height:1.5;margin:20px 0 12px;letter-spacing:1px}.hero-content p{color:#8ca9b5;font-size:12px;line-height:1.9;max-width:310px}.primary{display:inline-flex;justify-content:center;align-items:center;gap:35px;background:var(--cyan);color:#052825;border:0;border-radius:4px;padding:13px 19px;font-size:12px;font-weight:700}.primary:hover{background:#9cfff1}.hero-content .primary{margin-top:14px}.frame-label{position:absolute;right:26px;top:24px;color:#6fa7b5;font:9px monospace;letter-spacing:2px}.carousel-control{position:absolute;bottom:25px;left:45px;right:35px;display:flex;align-items:center;gap:10px}.carousel-control button{border:1px solid #365260;background:#0a1c2570;width:28px;height:28px;border-radius:50%;font-size:13px}.carousel-control button:hover{border-color:var(--cyan);color:var(--cyan)}#dots{display:flex;gap:7px;margin-right:auto}#dots button{height:4px;width:19px;border:0;border-radius:3px;padding:0;background:#3d5966}#dots button.active{background:var(--cyan);width:32px}#counter{font:10px monospace;letter-spacing:2px;color:#8cafb8;margin-right:12px}.directory{padding-top:46px}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}.section-heading .eyebrow{font-size:9px;color:#6d999f}.section-heading h2{font-size:24px;font-weight:600;margin:10px 0 0;letter-spacing:2px}.section-heading h2 span{color:var(--cyan);font-size:20px;margin-left:8px}.directory-aside{text-align:right;font-size:10px;color:var(--muted)}.directory-aside>span{font:10px monospace;color:#c0d8de}.directory-aside p{margin:9px 0 0}.directory-aside p span{color:var(--cyan);margin-left:15px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}.category{border:1px solid var(--line);background:linear-gradient(120deg,#10202a7a,#0b151d66);border-radius:8px;overflow:hidden}.category:hover,.category[open]{border-color:#3b7c7e}.category summary{cursor:pointer;list-style:none;padding:24px;position:relative;min-height:164px}.category summary::-webkit-details-marker{display:none}.category-top{display:flex;align-items:center;justify-content:space-between}.category-icon{width:33px;height:33px;color:var(--cyan);font-size:30px;display:flex;align-items:center;justify-content:center;font-family:serif}.category-number{font:10px monospace;color:#506973;letter-spacing:1px}.category h3{font-size:20px;margin:15px 0 6px;font-weight:600;display:inline-block}.category-en{font:8px monospace;color:#6d9199;margin-left:12px;letter-spacing:.6px}.category p{margin:0;color:var(--muted);font-size:11px}.expand{position:absolute;bottom:24px;right:24px;color:#7c9aa5;font-size:18px;font-family:monospace}.category[open] .expand{transform:rotate(45deg);color:var(--cyan)}.sub-list{border-top:1px solid var(--line);padding:7px 16px 12px}.sub-list a{display:flex;align-items:center;gap:8px;padding:12px 8px;font-size:12px}.sub-list a:hover{background:#153b3d;color:var(--cyan);border-radius:4px}.sub-list small{margin-left:auto;font-size:9px;color:#668c95}.sub-list b{font-weight:400;color:var(--cyan)}.directory-bottom{display:flex;justify-content:space-between;margin-top:24px;color:#657b87;font-size:10px}.directory-bottom>span:last-child{font:8px monospace;letter-spacing:1.2px}footer{max-width:1320px;margin:auto;border-top:1px solid var(--line);padding:25px 40px 32px;display:flex;justify-content:space-between;color:#5d7986;font-size:9px;letter-spacing:1px}.footer-slash{margin:0 15px;color:#2f5b67}footer a:hover{color:var(--cyan)}dialog{max-width:760px;width:calc(100% - 32px);max-height:90vh;background:#0a171f;color:var(--white);border:1px solid #365a63;border-radius:12px;padding:26px}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head h2{margin:10px 0}.dialog-head button{font-size:28px;border:0;background:transparent;color:var(--muted)}dialog p{font-size:12px;color:var(--muted);line-height:1.8}.upload-row{display:flex;gap:10px;margin:22px 0}.secondary{border:1px solid #34545f;background:#132832;color:#c0d6dd;padding:10px 14px;border-radius:5px;cursor:pointer;font-size:12px}.secondary:hover{border-color:var(--cyan)}textarea{width:100%;height:260px;background:#050d13;color:#b6e8e2;border:1px solid #29434d;border-radius:5px;padding:12px;margin-top:9px;font:11px monospace;resize:vertical}.dialog-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}#message{font-size:11px;color:var(--cyan)}.lab-main{padding-top:50px}.lab-heading{display:flex;justify-content:space-between;align-items:center}.lab-heading h1{font-size:36px}.lab-canvas{width:100%;height:450px;display:block;background:#07151d;border:1px solid #24404b;border-radius:10px}.lab-controls{display:flex;gap:24px;align-items:center;margin-top:20px;padding:20px;background:#0b1b24;border:1px solid var(--line);border-radius:8px}.lab-controls label{display:flex;gap:15px;align-items:center;font-size:12px;color:var(--muted)}input[type=range]{accent-color:var(--cyan)}.lab-note{color:var(--muted);line-height:1.9;max-width:780px;font-size:13px}
@media(min-width:1500px){.intro{padding-top:68px}.showcase{height:430px}}@media(max-width:1320px){main{margin:0 40px}}@media(max-width:900px){.online{display:none}.hero-content{max-width:55%}.hero-content h2{font-size:25px}.category-grid{grid-template-columns:repeat(2,1fr)}.category-en{display:block;margin:0 0 8px}.category h3{margin-bottom:4px}.category summary{min-height:185px}.directory-bottom>span:last-child{display:none}}@media(max-width:600px){.topbar{padding:20px;gap:15px}.topbar nav{gap:16px;font-size:10px}.brand{font-size:9px;letter-spacing:1px}.brand-sub{font-size:8px}.logo-slot{width:35px;height:35px}main{margin:0 20px}.intro{padding-top:38px}.intro .eyebrow{font-size:7px;letter-spacing:1.5px}h1{font-size:30px;letter-spacing:0}.subtitle{font-size:17px;letter-spacing:4px}.intro-note{display:none}.showcase{height:380px}.hero-content{left:25px;top:64px;max-width:85%}.hero-content h2{font-size:25px;max-width:260px}.hero-content p{max-width:260px}.image-shade{background:linear-gradient(90deg,#051019d9,#05101965)}.carousel-control{left:25px;right:25px}.frame-label{font-size:7px}.section-heading h2{font-size:20px}.section-heading{align-items:start}.directory-aside p{display:none}.category-grid{gap:10px}.category summary{padding:18px;min-height:190px}.category h3{font-size:18px}.category-en{font-size:7px}.category p{font-size:10px;max-width:115px;line-height:1.7}.expand{right:16px;bottom:18px}.category-icon{font-size:26px}.directory-bottom{font-size:9px;line-height:1.8}footer{padding:20px;gap:12px;flex-wrap:wrap}footer>span:nth-child(2){display:none}.upload-row{flex-wrap:wrap}.dialog-actions{flex-wrap:wrap}.lab-canvas{height:340px}.lab-controls{flex-wrap:wrap}.lab-heading h1{font-size:28px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.slide{transition:none}}