:root{color-scheme:dark;font-family:system-ui,"Noto Sans JP",sans-serif;background:#090f20;color:#f5f7ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 15%,#302132 0,transparent 38%),radial-gradient(ellipse at 80% 35%,#102f51 0,transparent 45%),#090f20;min-height:100vh}a{color:inherit}header{border-bottom:1px solid #51607880;background:#0c1325c9;position:sticky;top:0;z-index:5}nav{max-width:1200px;margin:auto;padding:12px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-size:29px;font-weight:900;text-decoration:none;letter-spacing:-1px}.oz{background:linear-gradient(120deg,#31e9a2,#fbe447,#ff6b30,#ec2fe4,#3275ff);color:transparent;background-clip:text}nav .links{display:flex;gap:28px}nav .links a{text-decoration:none}main{max-width:1160px;margin:auto;padding:64px 24px 36px}.hero{display:grid;grid-template-columns:1fr 1.35fr;gap:42px;align-items:center;margin:0 0 68px}.logo{border:1px solid #62748e;border-radius:26px;background:#ffffff0c;padding:40px 24px;text-align:center;font-size:clamp(50px,7vw,90px);font-weight:900;letter-spacing:-5px;box-shadow:0 18px 50px #0006}.hero h1{font-size:clamp(32px,4vw,55px);margin:0 0 12px}.hero p{font-size:22px;color:#d5dff0}.rainbow{border-left:5px solid transparent;border-image:linear-gradient(#f73b41,#ffb32a,#34df6e,#39adff,#b64fff) 1;padding-left:30px}.section-title{font-size:38px;margin-bottom:36px}.section-title:after{content:"";display:block;width:110px;height:4px;margin-top:10px;background:linear-gradient(90deg,#f43,#ffc328,#31dd92,#3878ff,#a04eff)}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card{border:1px solid #8397b6;border-radius:17px;background:#ffffff09;padding:28px;display:flex;flex-direction:column;gap:12px}.tag{border:1px solid #8e9bb4;border-radius:30px;padding:5px 14px;align-self:flex-start}.card h3{font-size:29px;margin:6px 0 0;border-left:4px solid #55baff;padding-left:14px}.card p{margin:0;color:#d4deee}.preview{border:1px solid #7d8aa7;border-radius:14px;background:linear-gradient(140deg,#1b2d47,#0a1221);padding:30px 20px;min-height:210px;display:grid;place-content:center;text-align:center;font-size:28px;font-weight:750}.button{display:block;text-align:center;text-decoration:none;border:1px solid #e7efff;border-radius:11px;padding:13px;margin-top:auto;font-weight:700}.button:hover{background:#ffffff20}.tagline{text-align:center;margin:70px 0 28px}.tagline h2{font-size:35px;margin:0}.tagline p{color:#d6e0ef}footer{border-top:1px solid #53637f;padding:22px max(24px,calc((100vw - 1160px)/2));display:flex;justify-content:space-between;color:#cbd4e3}.page{max-width:900px;margin:auto}.page h1{font-size:40px}.page section{margin:34px 0;padding:25px;border:1px solid #596986;border-radius:15px;background:#ffffff08}.page p,.page li{line-height:1.85}.muted{color:#b9c8dc}@media(max-width:740px){nav{padding:12px 18px}.brand{font-size:23px}nav .links{gap:12px;font-size:13px}main{padding-top:36px}.hero,.cards{grid-template-columns:1fr}.logo{font-size:60px}.hero{gap:24px;margin-bottom:38px}.section-title{font-size:30px}footer{padding:20px;gap:15px;flex-wrap:wrap}}
/* Illustrated interface previews for the two featured products */
.preview{display:block;text-align:left;place-content:initial;min-height:0;padding:0;overflow:hidden;font-size:initial;font-weight:400}
.app-shot,.travel-shot{background:#111b2d;padding:12px;border-radius:14px}
.window-bar{display:flex;align-items:center;gap:9px;padding:7px 9px;background:#202d43;border-radius:8px 8px 0 0;color:#e6ecfa;font-size:11px}.window-brand{font-weight:800}.window-controls{margin-left:auto;letter-spacing:5px}
.app-inner{border:1px solid #64728c;border-top:0;border-radius:0 0 9px 9px;padding:16px;background:linear-gradient(140deg,#0b1425,#1a2840)}
.app-heading{font-size:25px;font-weight:800;margin-bottom:12px}.app-heading em{font-weight:400}.app-inner label{display:block;font-size:11px;margin-bottom:5px}.url-input,.quality{border:1px solid #7b89a3;border-radius:5px;background:#1b293e;padding:8px 10px;font-size:12px;color:#dce5f5}.url-input span{float:right}
.app-media{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-top:14px}.scenery{min-height:140px;position:relative;overflow:hidden;border-radius:7px;background:linear-gradient(#67baf1 0%,#b9eaff 44%,#3e9a77 45%,#12517b 100%)}.sun{position:absolute;width:28px;height:28px;right:22%;top:12%;border-radius:50%;background:#fff4bb}.mountains{position:absolute;inset:24% -10% 30%;background:linear-gradient(145deg,#e7f7f4 0 18%,#507c75 19% 42%,#285d47 43%);clip-path:polygon(0 100%,25% 15%,39% 68%,60% 0,83% 70%,100% 30%,100% 100%)}.lake{position:absolute;bottom:0;height:34%;width:100%;background:repeating-linear-gradient(175deg,#0b6d91 0 5px,#60c4c9 6px 8px,#0d587f 9px 14px);opacity:.9}.media-info{display:flex;flex-direction:column;gap:6px;min-width:0}.media-info b{font-size:13px}.media-info small{font-size:11px;color:#d1dcef}.quality{padding:6px;font-size:11px}.download{background:#2978ed;color:white;text-align:center;padding:9px 3px;border-radius:6px;font-size:12px;font-weight:800}
.travel-shot{padding:18px 12px}.travel-heading{font-size:17px;font-weight:800;margin-bottom:14px}.travel-select{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}.travel-select span{border:1px solid #8190aa;padding:9px;border-radius:6px;flex:1;font-size:13px}.travel-select b{font-size:20px}.travel-table{border:1px solid #66768e;border-radius:6px;overflow:hidden}.travel-table>div{display:grid;grid-template-columns:1fr 1fr 1fr}.travel-table span{font-size:11px;padding:12px 7px;border-right:1px solid #52627b;border-bottom:1px solid #52627b}.travel-table span:last-child{border-right:0}.travel-table>div:last-child span{border-bottom:0}.travel-table .table-head{background:#33445e;font-weight:800}
@media(max-width:460px){.app-shot{padding:6px}.app-inner{padding:9px}.app-media{gap:7px}.scenery{min-height:115px}.media-info b{font-size:11px}.travel-table span{font-size:10px;padding:9px 4px}.travel-select span{font-size:11px;padding:7px 4px}}

/* Official OZbase brand artwork */
.brand img{display:block;width:auto;height:44px;max-width:100%;object-fit:contain}
.logo img{display:block;width:100%;height:auto;max-width:480px;margin:auto}
@media(max-width:740px){.brand img{height:30px}nav .links{flex-wrap:wrap;justify-content:flex-end}}

/* Keep anchor targets visible below the sticky site navigation */
#works{scroll-margin-top:90px}
@media(max-width:740px){#works{scroll-margin-top:110px}}