:root{font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#1d2735;background:#f7f8fa;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ffb541;outline-offset:3px}.topbar{height:74px;background:#111a28;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:0 max(24px,calc((100vw - 1180px)/2));gap:15px}.brand{display:flex;align-items:center;gap:9px;font-size:20px}.brand>span{font-size:10px;letter-spacing:.17em;color:#aab9cc;margin-left:8px}.topbar nav{display:flex;gap:24px;font-size:13px;color:#d5dfeb}.hero{background:radial-gradient(circle at 77% 43%,#283b5a,#121c2c 65%);color:white;min-height:480px;display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:65px max(24px,calc((100vw - 1180px)/2))}.hero h1{font-size:clamp(35px,4.4vw,64px);line-height:1.25;letter-spacing:-.04em;margin:16px 0 19px}.hero h1 em{color:#ffcb73;font-style:normal}.hero p{line-height:1.85;color:#dbe5f4}.hero .note{font-size:12px;color:#aebacc}.eyebrow{font-size:11px;letter-spacing:.22em;font-weight:800;color:#ce8a39}.hero .eyebrow{color:#ffc677}.hero-links{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}.cta{display:inline-flex;align-items:center;justify-content:center;border:0;background:#e99d40;color:#161e2b;border-radius:99px;padding:12px 21px;font-weight:800;font-size:14px}.cta.outline{border:1px solid #8496b0;background:transparent;color:#fff}.hero-art{position:relative;height:370px}.center-art{position:absolute;left:28%;top:23%;width:46%;height:55%;border-radius:32px;background:linear-gradient(145deg,#ffd58a,#ef9e4d);display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:0 25px 60px #0007;transform:rotate(-5deg);font-size:72px;color:#293a57}.center-art span{font-size:22px;letter-spacing:.06em;font-weight:950}.floating{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;height:100px;border:1px solid #8295b366;border-radius:25px;background:#ffffff18;backdrop-filter:blur(8px);font-size:40px;box-shadow:0 12px 20px #0004}.floating small{font-size:10px;letter-spacing:.17em;color:#f0e9e1}.floating.a{left:8%;top:8%;transform:rotate(-10deg)}.floating.b{right:3%;top:7%;transform:rotate(12deg)}.floating.c{left:3%;bottom:4%;transform:rotate(9deg)}.floating.d{right:12%;bottom:4%;transform:rotate(-8deg)}.explore,.playground,.favorites,.about{max-width:1180px;margin:auto;padding:78px 24px}.section-heading{text-align:center}.section-heading h2,.favorites h2,.about h2{font-size:clamp(26px,3.3vw,38px);margin:8px 0}.section-heading>p:last-child{color:#667184}.gate-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0 40px}.gate{text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:8px;border:2px solid #e1e5ed;padding:25px;border-radius:23px;background:white;box-shadow:0 12px 30px #2d44600b;transition:transform .15s,border-color .15s}.gate:hover{transform:translateY(-3px)}.gate.active{border-color:#d9994d;background:#fff9ef}.gate-icon{font-size:36px}.gate strong{font-size:24px}.gate small{color:#657187}.gate>span:last-child{font-size:13px;font-weight:800;color:#a66a25;margin-top:9px}.chooser-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.chooser-head h3{font-size:23px}.text-btn{border:0;background:transparent;color:#8c5a26;font-weight:800;font-size:13px;padding:10px}.chips{display:flex;flex-wrap:wrap;gap:9px}.chip{border:1px solid #ced4df;border-radius:99px;background:#fff;padding:9px 15px;font-size:13px;font-weight:700}.chip.active{background:#192a43;border-color:#192a43;color:#fff}.results{font-size:13px;color:#737f8c;margin:22px 0 12px}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.demo-card{border:1px solid #e1e5ea;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 8px 20px #24324809}.card-art{height:155px;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(125deg,var(--bg1),var(--bg2));color:var(--ink);overflow:hidden}.card-art .art-emoji{font-size:80px;filter:drop-shadow(0 12px 5px #0002);transform:rotate(-9deg)}.card-art .art-text{position:absolute;bottom:12px;left:18px;font-size:12px;letter-spacing:.18em;font-weight:900}.card-art:after{content:'';position:absolute;border:1px solid currentColor;opacity:.15;width:170px;height:170px;border-radius:50%;right:-55px;top:-62px}.card-copy{padding:19px}.card-copy small{color:#7a8493;font-size:11px;letter-spacing:.1em}.card-copy h3{margin:8px 0;font-size:19px}.card-copy p{font-size:13px;color:#687486;line-height:1.65;min-height:43px}.tags{display:flex;flex-wrap:wrap;gap:5px;min-height:25px}.tag{font-size:10px;background:#f1f3f7;padding:5px 8px;border-radius:50px}.open-demo{width:100%;background:#192a43;color:#fff;border:0;border-radius:12px;padding:11px;font-weight:800;margin-top:14px}.playground{border-top:1px solid #dde2e8;scroll-margin-top:10px}.play-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(230px,.65fr);gap:20px}.demo-preview{border-radius:20px;overflow:hidden;border:1px solid #e0e4e9;background:#fff;min-height:410px}.play-aside{padding:22px;border:1px solid #e0e4e9;border-radius:20px;background:#fff}.play-aside p{line-height:1.85;font-size:14px;color:#647081}.selection{background:#f6f7fa;border-radius:14px;padding:18px;margin:25px 0}.selection .cta{width:100%}#savedMsg{font-size:12px;color:#3d7763}.preview-head{background:var(--theme-bg);color:var(--theme-fg);padding:18px 24px;display:flex;align-items:center;justify-content:space-between}.preview-logo{font-size:22px;font-weight:900}.preview-pill{font-size:10px;letter-spacing:.1em;opacity:.7}.preview-hero{background:var(--theme-bg);color:var(--theme-fg);min-height:220px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;padding:28px}.preview-hero h3{font-size:clamp(21px,3vw,33px);line-height:1.35;margin:6px 0}.preview-hero p{font-size:12px;opacity:.8}.preview-visual{text-align:center;font-size:clamp(85px,10vw,140px);filter:drop-shadow(0 15px 6px #0002)}.preview-cta{display:inline-block;background:var(--theme-accent);color:var(--theme-button);border:0;border-radius:100px;padding:10px 18px;font-weight:800;font-size:12px}.interaction{padding:25px;background:#fff}.interaction h4{margin:0 0 12px}.interaction p{font-size:12px;color:#677487}.demo-control{display:flex;gap:8px;flex-wrap:wrap}.demo-control button,.interactive-button{background:#f1f4f8;border:1px solid #d7dfe8;border-radius:10px;padding:9px 12px;font-weight:700;font-size:12px;color:#26374a}.demo-control button.active{background:#203b5e;color:#fff}.tiny-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.tiny-cards>div{background:#f2f5f8;border-radius:9px;padding:12px;font-size:12px;min-height:65px}.status{padding:12px;background:#f6f8fb;margin-top:10px;border-radius:8px;font-size:13px}.compare{position:relative;height:140px;overflow:hidden;border-radius:10px;background:linear-gradient(135deg,#e0d7cc,#f6f5ef);display:flex;align-items:center;justify-content:center;font-size:70px}.compare:after{content:'AFTER';position:absolute;right:0;top:0;bottom:0;width:var(--reveal,50%);background:#a5becd77;display:grid;place-items:center;color:#1d3755;font-size:16px;font-weight:900;border-left:3px solid white}.compare input{position:absolute;z-index:1;bottom:8px;width:80%}.favorites{display:grid;grid-template-columns:1fr 1.2fr;gap:40px}.favorites p{line-height:1.8;color:#647080}.memo{background:#fff;padding:25px;border-radius:20px;border:1px solid #e0e4ea}.memo label{display:block;margin:18px 0 6px;font-weight:800}.memo textarea{width:100%;padding:12px;border:1px solid #bdc7d4;border-radius:10px;resize:vertical}.memo-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}#favoritesList{font-size:13px;line-height:1.9}.fav-pill{background:#fff3e2;border-radius:10px;padding:8px 10px;display:block;margin:6px 0}.about{background:#e9edf2;max-width:none;padding-left:max(24px,calc((100vw - 1080px)/2));padding-right:max(24px,calc((100vw - 1080px)/2))}.about p{max-width:780px;line-height:1.9;color:#5c6675}footer{background:#121b29;color:#fff;display:flex;justify-content:space-between;gap:10px;padding:28px max(24px,calc((100vw - 1180px)/2));font-size:12px}footer span{color:#a4b0bf}@media(max-width:820px){.hero{grid-template-columns:1fr;padding:50px 24px}.hero-art{height:240px;max-width:420px;width:100%;margin:auto}.center-art{font-size:46px}.center-art span{font-size:17px}.floating{width:70px;height:70px;font-size:28px}.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.play-layout,.favorites{grid-template-columns:1fr}.topbar{padding:0 20px}}@media(max-width:540px){.topbar{height:62px}.brand{font-size:16px}.brand>span,.topbar nav a:nth-child(2){display:none}.hero{padding:38px 20px}.hero-art{height:205px}.hero-links{display:flex;flex-direction:column;align-items:stretch}.hero-links .cta{width:100%}.explore,.playground,.favorites{padding:50px 16px}.gate-grid{grid-template-columns:1fr;gap:12px;margin:24px 0}.gate{padding:18px}.gate strong{font-size:20px}.chooser-head{align-items:start}.chooser-head h3{font-size:19px}.gallery{grid-template-columns:1fr}.card-art{height:165px}.card-copy p{min-height:0}.preview-hero{grid-template-columns:1fr;padding:23px}.preview-visual{font-size:98px}.tiny-cards{grid-template-columns:1fr 1fr}footer{flex-direction:column}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* v0.3: photographic showcases */
.card-art:has(.card-photo){background:#29313b}
.card-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s ease}
.demo-card:hover .card-photo{transform:scale(1.045)}
.card-art:has(.card-photo)::before{content:"";position:absolute;inset:40% 0 0;z-index:1;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.card-art:has(.card-photo) .art-text{z-index:2;color:#fff;text-shadow:0 1px 3px #0008}
.card-art:has(.card-photo):after{display:none}
.preview-visual:has(img){align-self:stretch;min-height:220px;filter:none;overflow:hidden;border-radius:14px}
.preview-visual img{display:block;width:100%;height:100%;max-height:330px;object-fit:cover}
@media(max-width:540px){.preview-visual:has(img){min-height:190px}.preview-visual img{max-height:245px}}