/*
 * NOWEN UI / Site adapter v2
 * Source: cropflre/nowen-blog/docs/skills/nowen-ui/SKILL.md (v1.0.0).
 * Adapter only: preserve existing site routes, tutorials, search and release logic.
 * Deep Space / Solar Clarity / Bento / restrained Spotlight.
 */
:root {
  --color-primary:#5958dd; --color-primary-light:#7878ed; --color-primary-dark:#4743ae;
  --color-accent:#0ea5ab; --color-accent-light:#51c9c7;
  --color-bg-primary:#f8f9fd; --color-bg-secondary:#fff; --color-bg-tertiary:#f0f2fa;
  --color-bg-gradient:radial-gradient(ellipse 58% 42% at 95% 4%,rgba(121,120,232,.13),transparent 75%),radial-gradient(ellipse 55% 36% at 0% 18%,rgba(14,165,171,.09),transparent 80%);
  --color-text-primary:#171b31; --color-text-secondary:#576077; --color-text-muted:#7d849c;
  --color-border:rgba(76,88,135,.15); --color-border-light:rgba(76,88,135,.09);
  --color-glass:rgba(255,255,255,.79); --color-glass-border:rgba(255,255,255,.88); --color-glass-hover:rgba(255,255,255,.94);
  --color-shadow:0 4px 14px rgba(31,36,87,.035),0 20px 60px rgba(31,36,87,.065);
  --color-shadow-hover:0 10px 25px rgba(31,36,87,.055),0 32px 65px rgba(31,36,87,.11);
  --color-glow:rgba(88,87,222,.13); --color-glow-secondary:rgba(14,165,171,.12);
  --font-ui:Inter,"SF Pro Display","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-editorial:Georgia,"Songti SC",serif;
  --font-technical:"SFMono-Regular",Consolas,monospace;
  --bg:var(--color-bg-primary); --panel:var(--color-bg-secondary); --panel-soft:var(--color-bg-tertiary);
  --text:var(--color-text-primary); --muted:var(--color-text-secondary); --muted-2:var(--color-text-muted);
  --line:var(--color-border); --line-strong:rgba(76,88,135,.24);
  --brand:var(--color-primary); --brand-2:var(--color-primary-light);
  --brand-soft:rgba(89,88,221,.095); --shadow:var(--color-shadow);
  --radius:20px; --radius-sm:13px;
}
[data-theme="dark"] {
  --color-primary:#a5a3ff; --color-primary-light:#c0baff; --color-primary-dark:#7a7df3;
  --color-accent:#66dfdc; --color-accent-light:#9bf0e8;
  --color-bg-primary:#090d19; --color-bg-secondary:#121829; --color-bg-tertiary:#192236;
  --color-bg-gradient:radial-gradient(ellipse 58% 50% at 78% -8%,rgba(99,85,204,.21),transparent 75%),radial-gradient(ellipse 54% 38% at -7% 30%,rgba(24,130,157,.13),transparent 78%);
  --color-text-primary:#f1f3fc; --color-text-secondary:#b4bfd6; --color-text-muted:#8c97b1;
  --color-border:rgba(171,190,242,.13); --color-border-light:rgba(171,190,242,.075);
  --color-glass:rgba(20,27,47,.8); --color-glass-border:rgba(185,198,255,.13); --color-glass-hover:rgba(30,40,65,.92);
  --color-shadow:0 18px 60px rgba(0,0,0,.16); --color-shadow-hover:0 22px 70px rgba(0,0,0,.26);
  --color-glow:rgba(131,123,255,.22); --color-glow-secondary:rgba(56,201,204,.14);
  --line-strong:rgba(171,190,242,.22);
  --brand-soft:rgba(143,134,255,.13);
}
html {scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font-ui);background:var(--color-bg-primary);color:var(--color-text-primary);background-image:var(--color-bg-gradient);background-attachment:fixed}
::selection{background:color-mix(in srgb,var(--color-primary) 27%,transparent)}
:where(a,button,input,summary):focus-visible{outline:3px solid var(--color-primary);outline-offset:3px}
.app-header{height:74px;--header:74px;background:color-mix(in srgb,var(--color-bg-primary) 82%,transparent);border-color:var(--color-border-light);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%)}
:root{--header:74px}
.header-inner{max-width:1320px;grid-template-columns:minmax(210px,258px) minmax(220px,510px) 1fr;gap:24px;padding-inline:32px}
.brand{gap:12px}
.brand-mark{width:41px;height:41px;border-radius:14px;background:linear-gradient(145deg,#7779ee 0%,#5756d7 62%,#358bbd 100%);box-shadow:0 8px 25px var(--color-glow);font-size:20px}
.brand-copy{font-weight:850;letter-spacing:.055em;font-size:17px}
.brand-copy small{font-size:10px;font-weight:700;letter-spacing:.03em;color:var(--color-text-muted);border-left:1px solid var(--color-border);padding-left:9px}
.global-search .search-box{height:43px;background:var(--color-glass);border-color:var(--color-glass-border);box-shadow:0 3px 16px rgba(20,26,65,.025)}
.search-box{border-color:var(--color-border);background:var(--color-glass)}
.search-box:focus-within{border-color:color-mix(in srgb,var(--color-primary) 52%,var(--color-border));box-shadow:0 0 0 4px var(--color-glow)}
.header-link{color:var(--color-text-secondary);font-weight:600}
.header-download{background:linear-gradient(125deg,#5959e4,#464bc2);color:#fff;border:1px solid rgba(125,129,250,.28);border-radius:12px;box-shadow:0 7px 19px rgba(77,75,196,.15);font-size:12px;min-height:40px;padding-inline:17px}
.header-download:hover{transform:translateY(-2px);filter:brightness(1.07)}
[data-theme="dark"] .header-download{background:linear-gradient(130deg,#7879ea,#5655b9);color:#fff}
.icon-btn{border-radius:11px}

/* Landing hero: real application screenshot + honest product status */
body[data-view="home"] #appMain{position:relative;isolation:isolate}
body[data-view="home"] #appMain:before{content:"";position:absolute;top:20px;left:50%;width:min(88vw,1100px);height:560px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse 48% 50% at 50% 35%,var(--color-glow),transparent 78%);opacity:.8;z-index:-1}
.hero-shell{position:relative;max-width:1340px;min-height:636px;padding:94px 38px 84px;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(34px,6vw,80px)}
.hero-copy{position:relative;z-index:1}
.eyebrow,.note-kicker,.note-section-heading>span,.section-head span{font-family:var(--font-technical);font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--color-primary)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;background:var(--color-glass);border:1px solid var(--color-glass-border);padding:8px 13px;border-radius:999px;box-shadow:0 8px 30px rgba(23,30,65,.045)}
.hero-eyebrow:before{content:"";height:7px;width:7px;background:#30bc9d;box-shadow:0 0 0 4px rgba(48,188,157,.12);border-radius:50%}
.hero-copy h1{font-size:clamp(48px,5.4vw,78px);max-width:720px;line-height:1.16;letter-spacing:-.068em;margin:28px 0 24px;font-weight:820}
.hero-copy h1 em{background:linear-gradient(112deg,var(--color-primary-dark),var(--color-primary) 45%,var(--color-accent) 98%);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .hero-copy h1 em{background-image:linear-gradient(112deg,#b7adff,#8cbef7 65%,#80e6d8)}
.hero-copy>p{font-size:16px;color:var(--color-text-secondary);line-height:1.95;max-width:560px;margin-bottom:30px}
.hero-search{height:59px;max-width:570px;border-radius:16px;padding-inline:19px;box-shadow:var(--color-shadow);background:var(--color-glass)}
.hero-links{gap:10px;margin-top:19px}
.hero-links a{font-size:12px;padding:9px 13px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-glass);color:var(--color-text-secondary)}
.hero-links .hero-download-link{padding:9px 18px;color:#fff;background:linear-gradient(125deg,#5d5ee7,#4145bc);border-color:transparent;box-shadow:0 10px 26px rgba(93,94,231,.18)}
.hero-links a:hover{transform:translateY(-2px);border-color:var(--color-primary)}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:31px;color:var(--color-text-muted);font-size:11px}
.hero-meta span{display:inline-flex;align-items:center;gap:7px}
.hero-meta span:before{content:"";width:5px;height:5px;border:1px solid var(--color-accent);border-radius:50%}
.studio-preview{position:relative;min-width:0;padding:0;margin:0;align-self:center;transform:perspective(1000px) rotateY(-3deg) rotateX(2deg)}
.studio-preview-window{position:relative;overflow:hidden;border:1px solid var(--color-glass-border);background:var(--color-glass);border-radius:25px;box-shadow:0 20px 80px rgba(36,41,101,.18),inset 0 1px rgba(255,255,255,.15);padding:12px;backdrop-filter:blur(23px);-webkit-backdrop-filter:blur(23px)}
.studio-preview-window:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px rgba(255,255,255,.2)}
.studio-preview-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 11px 16px;color:var(--color-text-muted);font:600 10px var(--font-technical);letter-spacing:.065em}
.studio-preview-dots{display:flex;gap:6px}.studio-preview-dots i{height:7px;width:7px;border-radius:50%;background:var(--color-border)}.studio-preview-dots i:first-child{background:#ff8278}.studio-preview-dots i:nth-child(2){background:#efc66c}.studio-preview-dots i:nth-child(3){background:#60cba0}
.studio-preview-image{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:16px;border:1px solid var(--color-border);background:var(--color-bg-tertiary)}
.studio-preview figcaption{margin:13px 12px 5px;color:var(--color-text-muted);font-size:11px}
.studio-float{position:absolute;right:-22px;bottom:27px;display:flex;align-items:center;gap:11px;padding:12px 15px;border:1px solid var(--color-glass-border);border-radius:15px;background:var(--color-glass-hover);box-shadow:var(--color-shadow-hover);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.studio-float-icon{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--color-primary);font-size:15px}
.studio-float b{font-size:12px;display:block}.studio-float span{font-size:10px;color:var(--color-text-muted)}
.home-section{max-width:1318px;padding:66px 38px}
.home-section.soft-section{max-width:none;border-top:1px solid var(--color-border-light);border-bottom:1px solid var(--color-border-light);background:color-mix(in srgb,var(--color-glass) 35%,transparent);padding-inline:max(38px,calc((100vw - 1318px)/2 + 38px))}
.section-head{margin-bottom:28px}
.section-head h2{font-size:clamp(24px,3vw,36px);letter-spacing:-.045em}
.section-head p{color:var(--color-text-secondary)}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.product-card{border:1px solid var(--color-glass-border);border-radius:24px;min-height:240px;padding:26px;background:var(--color-glass);box-shadow:var(--color-shadow);backdrop-filter:blur(19px);-webkit-backdrop-filter:blur(19px);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease}
.product-card:first-child{grid-column:span 2;min-height:270px;background:linear-gradient(135deg,color-mix(in srgb,var(--color-glass) 90%,var(--color-primary) 10%),var(--color-glass))}
.product-card:nth-child(4){grid-column:span 2}
.product-card:before{width:250px;height:250px;right:-80px;top:-90px;background:radial-gradient(circle,var(--color-glow),transparent 72%)}
.product-card:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(360px circle at var(--nowen-pointer-x,50%) var(--nowen-pointer-y,0%),var(--color-glow),transparent 66%);opacity:0;transition:opacity .3s ease}
[data-theme="dark"] .product-card:hover:after{opacity:.55}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--color-shadow-hover);border-color:color-mix(in srgb,var(--color-primary) 28%,var(--color-glass-border))}
.product-card:first-child .product-title-row h3{font-size:24px}
.product-card:first-child .product-icon{font-size:37px}
.product-icon{font-size:29px}
.product-title-row h3{font-weight:750;letter-spacing:-.025em}
.product-card p{font-size:13px;max-width:520px;line-height:1.8}
.topic-card{border-radius:17px;background:var(--color-glass);border-color:var(--color-glass-border);padding:20px;box-shadow:0 3px 13px rgba(19,30,72,.03)}
.topic-card:hover{box-shadow:var(--color-shadow)}
.trust-row>div{border-left-color:var(--color-primary)}
.trust-row b{font-size:14px}
.docs-shell{max-width:var(--max)}
.docs-sidebar{background:color-mix(in srgb,var(--color-bg-primary) 55%,transparent)}
.article-wrap,.docs-content{min-width:0}

/* Nowen Note product and download: layered Bento surfaces, no fake install links */
.note-site{max-width:1318px;padding:0 38px;--note-radius:22px}
.note-navigation{min-height:78px;border-color:var(--color-border-light)}
.note-navigation a{padding:10px 14px;font-size:12px;border-radius:11px}
.note-navigation .is-current{background:var(--brand-soft);color:var(--color-primary)}
.note-hero{gap:clamp(28px,5vw,70px);padding:94px 0 100px;align-items:center}
.note-hero h1{font-size:clamp(42px,5.3vw,72px);line-height:1.14;letter-spacing:-.067em;margin:25px 0}
.note-hero-text>p{font-size:16px;line-height:1.9;max-width:600px}
.note-identity{gap:14px}.note-identity img{border-radius:15px;padding:4px;background:var(--color-glass);border:1px solid var(--color-glass-border);box-shadow:var(--color-shadow)}
.note-hero-art{position:relative;border-radius:25px;padding:12px;border-color:var(--color-glass-border);background:var(--color-glass);box-shadow:0 28px 75px rgba(34,37,93,.15);transform:rotate(1deg)}
.note-hero-art img{border-radius:15px;object-position:top}
.note-cta{border-radius:13px;border:1px solid transparent;background:linear-gradient(120deg,#5d60e9,#4146bf);color:#fff!important;min-height:47px;box-shadow:0 10px 26px rgba(89,86,215,.17)}
.note-cta:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 15px 35px rgba(89,86,215,.22)}
.note-secondary{border-radius:13px;min-height:47px;border-color:var(--color-border);background:var(--color-glass)}
.note-section{padding:74px 0;border-color:var(--color-border-light)}
.note-section-heading{margin-bottom:28px}
.note-section-heading h2{font-size:clamp(27px,3.2vw,38px);letter-spacing:-.05em;line-height:1.3}
.note-values{gap:16px}
.note-values article{position:relative;overflow:hidden;border:1px solid var(--color-glass-border);background:var(--color-glass);border-radius:21px;padding:27px 25px;box-shadow:var(--color-shadow);transition:transform .28s cubic-bezier(.22,1,.36,1),border-color .28s}
.note-values article:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--color-primary) 32%,var(--color-glass-border))}
.note-values b{font-size:15px;letter-spacing:-.02em}
.note-values p{font-size:13px;line-height:1.8}
.note-shot-grid{gap:20px}
.note-shot-grid figure{border:1px solid var(--color-glass-border);border-radius:24px;padding:15px;background:var(--color-glass);box-shadow:var(--color-shadow)}
.note-shot-grid img{border-radius:15px}
.note-steps{gap:16px}
.note-steps>div{border-color:var(--color-glass-border);border-radius:21px;background:var(--color-glass);padding:28px;box-shadow:var(--color-shadow)}
.note-steps b{background:var(--brand-soft);color:var(--color-primary)}
.note-download-teaser{border:1px solid var(--color-glass-border);border-radius:25px;background:linear-gradient(115deg,var(--color-glass),color-mix(in srgb,var(--color-glass) 87%,var(--color-primary) 13%));padding:32px;margin-top:60px;box-shadow:var(--color-shadow)}
.note-heading{padding:76px 0 50px}
.note-heading h1{font-size:clamp(40px,4.8vw,66px);letter-spacing:-.06em}
.note-heading>p{max-width:680px;font-size:16px}
.note-release-meta{border-radius:15px;border-color:var(--color-border);background:var(--color-glass);box-shadow:var(--color-shadow)}
.note-platform-tabs{gap:9px}
.note-platform-tabs button{padding:11px 17px;border-radius:12px;border:1px solid var(--color-border);background:var(--color-glass);font-weight:650}
.note-platform-tabs button.active{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border));background:var(--brand-soft);color:var(--color-primary);box-shadow:0 0 0 3px var(--color-glow)}
.note-platform-panel{border-radius:24px;border:1px solid var(--color-glass-border);background:var(--color-glass);box-shadow:var(--color-shadow);padding:30px}
.note-platform-panel details{border-color:var(--color-border)}
.note-release-warning{border:1px solid var(--color-border-light);background:color-mix(in srgb,var(--color-glass) 60%,transparent);border-radius:22px;padding:30px;margin-bottom:46px}
.note-feature-grid{gap:17px}
.note-feature-card{border:1px solid var(--color-glass-border);border-radius:22px;overflow:hidden;background:var(--color-glass);box-shadow:var(--color-shadow);transition:transform .25s}
.note-feature-card:hover{transform:translateY(-3px)}
.note-feature-copy{padding:26px}
.note-feature-card .note-shot,.note-feature-placeholder{background:var(--color-bg-tertiary)}
.note-version-list{gap:17px}
.note-version-list article{background:var(--color-glass);border-radius:22px;border-color:var(--color-glass-border);box-shadow:var(--color-shadow);padding:28px}
.note-site-footer{border-color:var(--color-border-light)}
.note-faq details{background:var(--color-glass);border-color:var(--color-border);border-radius:14px}
body[data-view="home"] .community-v5-card,body[data-view="home"] .community-v5-section{border-color:var(--color-glass-border)}
@media(min-width:981px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .studio-preview{transition:transform .55s cubic-bezier(.22,1,.36,1)}
  .studio-preview:hover{transform:perspective(1000px) rotateY(0) rotateX(0)}
}
@media(max-width:1120px){
  .header-inner{grid-template-columns:190px minmax(190px,1fr) auto;gap:14px}
  .hero-shell{gap:35px;min-height:0;padding-top:75px}
  .note-site{padding-inline:27px}
  .studio-float{right:0}
}
@media(max-width:900px){
  .hero-shell{grid-template-columns:1fr;gap:42px;padding:65px 26px 55px}
  .hero-copy h1{max-width:800px}
  .studio-preview{max-width:650px;margin:0 auto;transform:none}
  .home-section{padding-inline:26px}
  .home-section.soft-section{padding-inline:26px}
  .note-hero{gap:40px;padding-block:62px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-card:first-child,.product-card:nth-child(4){grid-column:auto}
}
@media(max-width:760px){
  :root{--header:62px}
  .app-header{height:62px}
  .header-inner{padding-inline:13px;gap:10px;grid-template-columns:auto minmax(0,1fr) auto}
  .brand-mark{width:37px;height:37px;border-radius:12px}
  .brand-copy{display:none}
  .header-download{min-height:36px;padding:7px 11px;font-size:11px}
  .hero-shell{padding:56px 20px 45px;gap:34px}
  .hero-copy h1{font-size:clamp(38px,9vw,58px);line-height:1.15;margin:23px 0}
  .hero-copy>p{font-size:14px;line-height:1.83}
  .hero-search{height:53px}
  .studio-preview-window{border-radius:20px;padding:9px}
  .studio-float{position:static;width:max-content;max-width:95%;margin:-16px 12px 0 auto;z-index:2}
  .home-section,.home-section.soft-section{padding:43px 20px}
  .product-grid{grid-template-columns:1fr;gap:13px}
  .product-card,.product-card:first-child{min-height:210px;padding:23px}
  .product-card:first-child,.product-card:nth-child(4){grid-column:auto}
  .note-site{padding:0 19px}
  .note-navigation{min-height:64px}
  .note-hero{padding:54px 0 60px}
  .note-hero h1{font-size:clamp(37px,8vw,53px)}
  .note-hero-art{transform:none}
  .note-values{gap:12px}
  .note-values article{padding:22px}
  .note-section{padding:46px 0}
  .note-download-teaser{margin-top:32px;padding:25px}
  .note-heading{padding:50px 0 35px}
  .note-heading h1{font-size:clamp(34px,8vw,50px)}
  .note-platform-panel{padding:20px}
  .note-platform-tabs{gap:7px}
  .note-platform-tabs button{padding:10px 13px}
  .note-feature-copy{padding:20px}
}
@media(max-width:430px){
  .hero-meta{gap:10px;font-size:10px}
  .hero-shell{padding-inline:17px}
  .hero-copy h1{font-size:clamp(36px,10vw,43px)}
  .hero-eyebrow{font-size:9px;padding-inline:10px}
  .note-navigation .note-back{font-size:11px}
  .note-navigation a{padding:8px}
  .note-site{padding-inline:16px}
  .note-panel-body>.note-cta,.note-panel-body>.note-secondary{max-width:100%}
}
@media(hover:none),(pointer:coarse){
  .product-card:after{display:none}
  .studio-preview{transform:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .product-card,.note-values article,.note-feature-card,.studio-preview,.hero-links a,.note-cta,.header-download{animation:none!important;transition:none!important;transform:none!important}
}

/* Screenshot CDN fallback remains legible instead of an empty broken frame. */
.nowen-image-fallback{display:grid;place-items:center;text-align:center;min-height:220px;width:100%;aspect-ratio:4/3;padding:24px;color:var(--color-text-secondary);border-radius:15px;border:1px dashed var(--color-border);background:linear-gradient(140deg,var(--color-bg-tertiary),color-mix(in srgb,var(--color-glass) 70%,var(--color-primary) 30%));font-size:13px;line-height:1.7}
.note-hero-art .nowen-image-fallback{min-height:260px}
@media(max-width:760px){body{background-attachment:scroll}.note-hero-art .nowen-image-fallback{min-height:180px}}