@font-face {font-family:"Idea Sans";src:url("./fonts/sans-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face {font-family:"Idea Sans";src:url("./fonts/sans-600.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face {font-family:"Idea Serif";src:url("./fonts/serif-600.ttf") format("truetype");font-weight:600;font-display:swap}
:root {
  color-scheme:light;
  --canvas:#f6f1f3; --surface:#fffafb; --soft:#ede4e9; --ink:#291f2b; --muted:#675668; --line:#d6c6d1; --control-border:#947e90;
  --primary:#a52f50; --on-primary:#fff; --primary-hover:#8d2543; --selected:#f0dce3;
  --accent:#a52f50; --accent-hover:#8d2543; --accent-soft:#f0dce3; --warm:#eae1e7; --on-warm:#675668;
  --error:#9e2944; --error-soft:#f0dce3; --backdrop:rgb(41 31 43 / .48);
  --menu-shadow:0 16px 48px #35253b14; --dialog-shadow:0 20px 64px #35253b24; --ease:cubic-bezier(.22,1,.36,1);
  --body:"Idea Sans","PingFang SC","Microsoft YaHei",sans-serif; --display:"Idea Serif","Songti SC",SimSun,serif;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --canvas:#1e1e1e; --surface:#262626; --soft:#303030; --ink:#e8e8e8; --muted:#adadad; --line:#424242; --control-border:#808080;
  --primary:#df91a8; --on-primary:#24191d; --primary-hover:#ecacc0; --selected:#383838;
  --accent:#df91a8; --accent-hover:#ecacc0; --accent-soft:#383838; --warm:#333333; --on-warm:#adadad;
  --error:#eaa0a0; --error-soft:#383838; --backdrop:rgb(0 0 0 / .72);
  --menu-shadow:0 16px 48px rgb(0 0 0 / .42); --dialog-shadow:0 24px 72px rgb(0 0 0 / .56);
}
* {box-sizing:border-box; scrollbar-color:var(--control-border) var(--soft); scrollbar-width:thin}
html {scroll-behavior:smooth; scroll-padding-top:100px}
body {margin:0; background:var(--canvas); color:var(--ink); font:400 16px/1.75 var(--body)}
[hidden] {display:none!important}
button,input,textarea,select {font:inherit}
button,a,input,textarea {-webkit-tap-highlight-color:transparent}
button,a {touch-action:manipulation}
button {cursor:pointer; color:inherit; background:none; border:0; transition:background 180ms,color 180ms,border-color 180ms}
button:disabled {cursor:not-allowed; opacity:.65}
a {color:inherit; text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {outline:2px solid var(--primary); outline-offset:3px}
input,textarea {caret-color:var(--accent)}
::selection {color:var(--ink); background:var(--warm)}
svg {width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; flex:none}
[data-icon] {display:inline-flex; align-items:center; flex:none}
h1,h2,h3,p {margin:0}
h1,h2,h3 {text-wrap:balance; letter-spacing:0}
p {text-wrap:pretty}
.primary,.secondary {display:inline-flex; justify-content:center; align-items:center; gap:10px; min-height:48px; padding:12px 20px; border:1px solid var(--primary); border-radius:12px; font-size:16px; font-weight:600; line-height:1.5}
.primary {background:var(--primary); color:var(--on-primary)}
.primary:hover {background:var(--primary-hover); border-color:var(--primary-hover)}
.primary:active,.secondary:active {transform:translateY(1px)}
.secondary {border-color:var(--control-border); background:var(--surface)}
.secondary:hover {background:var(--soft)}
.small {min-height:44px; padding:9px 16px}
.wide {width:100%}
.icon-button {width:44px; height:44px; display:inline-flex; justify-content:center; align-items:center; border-radius:12px; flex:none}
.icon-button:hover {background:var(--soft)}
.page,.header-inner,.footer-inner {width:min(1296px,100%); padding-inline:48px; margin-inline:auto}
.header {position:sticky; top:0; z-index:20; background:var(--canvas); border-bottom:1px solid var(--line)}
.header-inner {min-height:80px; display:flex; align-items:center; gap:52px}
.brand {min-height:44px;display:flex; align-items:center; gap:10px; font-size:20px; font-weight:600; white-space:nowrap}
.brand-mark {width:36px; height:36px; display:grid; place-items:center; background:var(--primary); border-radius:12px; color:var(--on-primary)}
.brand-mark svg {width:32px; height:32px; stroke:none}
.brand-mark path {fill:currentColor}
.brand-mark circle {fill:var(--primary)}
.desktop-nav {display:flex; align-items:center; gap:28px; font-size:16px; line-height:1.5}
.desktop-nav>a,.desktop-nav>button,.nav-flyout>button {min-height:44px; display:flex; align-items:center; gap:5px; padding:8px 0; color:var(--muted); white-space:nowrap}
.desktop-nav .nav-active {color:var(--ink); font-weight:600}
.desktop-nav button:hover,.desktop-nav a:hover {color:var(--ink)}
.nav-flyout {position:relative}
.nav-flyout>button svg {width:14px; height:14px; transition:transform 140ms}
.nav-flyout>button[aria-expanded="true"] svg {transform:rotate(180deg)}
.flyout {position:absolute; top:calc(100% + 16px); left:-20px; width:288px; padding:8px; background:var(--surface); border-radius:16px; box-shadow:var(--menu-shadow); animation:float-in 220ms var(--ease)}
.flyout button {display:flex; align-items:center; gap:14px; width:100%; padding:14px 12px; text-align:left; border-radius:12px; font-size:16px; line-height:1.5}
.flyout button:hover {background:var(--soft)}
.flyout small {display:block; font-size:13px; color:var(--muted); margin-top:5px}
.header-actions {margin-left:auto; display:flex; align-items:center; gap:8px}
.login {min-height:44px; padding:8px 12px; font-size:16px; white-space:nowrap}
.login:hover {color:var(--accent)}
.mobile-menu {display:none}
.mobile-nav {border-top:1px solid var(--line); padding:12px 20px; display:grid; gap:4px}
.mobile-nav>* {min-height:44px; padding:9px 12px; font-size:16px; text-align:left; border-radius:12px}
.mobile-nav>*:hover {background:var(--soft)}

.node-icon,.product-icon {width:40px; height:40px; justify-content:center; border-radius:12px; background:var(--soft); color:var(--ink)}
.warm-icon {background:var(--warm); color:var(--on-warm)}

.discover {padding-top:52px; padding-bottom:40px}
.section-heading {display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:32px}
.section-heading h2 {font-size:26px; font-weight:600; line-height:1.4}
.section-heading p {color:var(--muted); font-size:16px; margin-top:8px}
.search {display:flex; align-items:center; gap:10px; width:320px; min-height:48px; border:1px solid var(--control-border); padding-left:14px; border-radius:12px; color:var(--muted); background:var(--surface)}
.search input {min-width:0; width:100%; border:0; background:transparent; color:var(--ink); padding:10px 0; font-size:16px; outline-offset:0}
.search:focus-within {outline:2px solid var(--primary); outline-offset:3px}
.search input:focus-visible {outline:none}
input::placeholder,textarea::placeholder {color:var(--muted); opacity:1}
.workspace {display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:40px; align-items:start}
.filter-row {display:flex; flex-wrap:wrap; gap:6px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.category {min-height:44px; padding:9px 14px; color:var(--muted); font-size:16px; border-radius:12px; line-height:1.5}
.category:hover {background:var(--soft)}
.category.active {background:var(--primary); color:var(--on-primary)}
.feed-toolbar {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0}
.sorts {display:flex; gap:20px}
.sorts button {min-height:44px; padding:6px 0; color:var(--muted); font-size:13px}
.sorts button.selected {color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:7px}
#result-count {font-size:13px; color:var(--muted)}
.problem-card {padding:24px; border:1px solid var(--line); background:var(--surface); border-radius:16px; margin-bottom:16px}
.card-top {display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; line-height:1.5; margin-bottom:14px; flex-wrap:wrap}
.avatar {width:28px; height:28px; display:inline-grid; place-items:center; flex:none; border-radius:50%; color:var(--on-warm); background:var(--warm); font-size:13px}
.avatar-1,.avatar-3,.avatar-5 {background:var(--soft); color:var(--ink)}
.middot {color:var(--muted)}
.card-stage {margin-left:auto; font-size:13px; display:flex; align-items:center; gap:5px; padding:4px 7px; border-radius:4px; background:var(--soft)}
.card-stage.live {color:var(--on-warm); background:var(--warm)}
.card-stage svg {width:13px; height:13px}
.card-title {font-size:20px; font-weight:600; text-align:left; line-height:1.5; padding:0}
.card-title:hover {text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px}
.card-description {color:var(--muted); font-size:16px; line-height:1.75; margin:12px 0 16px}
.tags {display:flex; gap:8px; flex-wrap:wrap}
.tag {font-size:13px; border-radius:4px; color:var(--muted); background:var(--soft); padding:3px 8px}
.tag:first-child {background:var(--warm); color:var(--on-warm)}
.card-bottom {display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.resonate,.comment-count,.follow {min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 10px; font-size:13px; border-radius:12px; line-height:1.5}
.resonate {border:1px solid var(--control-border)}
.resonate:hover {color:var(--accent); background:var(--accent-soft); border-color:var(--accent)}
.resonate.active {background:var(--accent); color:var(--on-primary); border-color:var(--accent)}
.resonate strong {font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}
.comment-count,.follow {color:var(--muted)}
.comment-count:hover,.follow:hover {background:var(--soft); color:var(--ink)}
.follow {margin-left:auto}
.follow.active {color:var(--ink); background:var(--selected)}
.card-bottom svg {width:18px; height:18px}
.feed-end {margin:32px 0 16px; text-align:center; color:var(--muted); font-size:13px}
.aside {display:grid; gap:28px}
.share-card {padding:24px; background:var(--warm); color:var(--on-warm); border-radius:16px}
.share-symbol {margin-bottom:18px}
.share-symbol svg {width:28px; height:28px}
.share-card h2 {font-size:20px; line-height:1.5; font-weight:600}
.share-card p {font-size:16px; line-height:1.75; margin:14px 0 24px}
.share-foot {display:block; font-size:13px; text-align:center; margin-top:12px}
.side-panel {padding:0 8px}
.side-title {display:flex; align-items:center; justify-content:space-between; gap:8px}
.side-title h3 {font-size:20px; font-weight:600}
.sample-label {color:var(--muted); font-size:13px}
.side-sub {font-size:13px; color:var(--muted); margin-top:6px; margin-bottom:20px}
.progress-item {width:100%; display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); text-align:left}
.progress-item>[data-icon]:last-child {color:var(--muted); margin-left:auto; margin-top:6px}
.progress-item>[data-icon]:last-child svg {width:16px; height:16px}
.progress-copy {min-width:0}
.progress-copy strong {display:block; font-size:16px; line-height:1.5; font-weight:600}
.progress-copy small {display:block; color:var(--muted); font-size:13px; margin:4px 0 8px}
.stage {display:inline-block; font-size:13px; line-height:1.5; padding:3px 7px; border-radius:4px; color:var(--muted); background:var(--soft); font-weight:400}
.warm-stage {background:var(--warm); color:var(--on-warm)}
.text-link {display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:8px 0; font-size:13px; color:var(--accent)}
.text-link svg {width:16px; height:16px}
.community-note {padding:0 8px}
.community-note h3 {font-size:16px; line-height:1.7; font-weight:600}
.community-note p {font-size:13px; color:var(--muted); margin:8px 0}
.community-note button {min-height:44px; padding:8px 0; display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--muted)}
.community-note button svg {width:16px; height:16px}
footer {border-top:1px solid var(--line)}
.footer-inner {padding-block:32px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.footer-brand {display:grid; gap:5px; font-size:20px; font-weight:600}
.footer-brand span {color:var(--muted); font-weight:400; font-size:13px}
.footer-inner>div {display:flex; align-items:center; gap:20px; flex-wrap:wrap; color:var(--muted); font-size:13px}
.footer-inner button {min-height:44px; padding:8px 0; font-size:13px}
.empty {text-align:center; padding:64px 24px; background:var(--soft); border-radius:16px}
.empty h3 {font-size:20px; font-weight:600}
.empty p {color:var(--muted); margin:12px 0 24px; font-size:16px}

dialog {padding:0; border:0; border-radius:16px; width:min(680px,calc(100% - 40px)); max-height:calc(100dvh - 48px); color:var(--ink); background:var(--surface); box-shadow:var(--dialog-shadow)}
dialog[open] {animation:float-in 220ms var(--ease)}
dialog::backdrop {background:var(--backdrop)}
.dialog-top {position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); padding:12px 20px; border-bottom:1px solid var(--line); color:var(--muted); font-size:13px}
#dialog-content {padding:28px 32px 32px}
#dialog-content h2 {font-size:26px; line-height:1.4; font-weight:600; margin-bottom:16px}
#dialog-content p {color:var(--muted); font-size:16px; line-height:1.75; margin:12px 0}
#dialog-content .muted {font-size:13px}
.detail-box {padding:20px; background:var(--soft); border-radius:12px; margin:24px 0}
.detail-box h3 {font-size:16px; font-weight:600; line-height:1.6}
.detail-box p {margin-bottom:0!important}
.form-label {display:block; font-size:16px; font-weight:600; margin:20px 0 8px}
.form-input {display:block; width:100%; min-height:48px; padding:11px 12px; border:1px solid var(--control-border); border-radius:12px; background:var(--surface); color:var(--ink); font-size:16px; line-height:1.5}
.form-input[aria-invalid="true"] {border-color:var(--error)}
textarea {min-height:160px; resize:vertical}
.form-meta {font-size:13px; color:var(--muted); margin:12px 0 24px}
.form-actions {display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.field-error {color:var(--error); font-size:13px; margin-top:6px}
.password-wrap {display:flex; gap:8px}
.password-wrap .form-input {flex:1; min-width:0}
.password-wrap .icon-button {height:48px; border:1px solid var(--control-border)}
.auth-dialog {width:min(540px,calc(100% - 40px))}
.auth-dialog #dialog-content {position:relative; padding:32px 48px 40px; overflow:clip}
.auth-inner {position:relative}
.auth-brand {font-size:20px; font-weight:600; margin-bottom:24px}
.auth-dialog .form-meta {margin-bottom:0}
.auth-switch {color:var(--accent); min-height:44px; padding:8px 0; font-size:13px}
.auth-submit {margin-top:28px}
.search-dialog {width:min(760px,calc(100% - 40px))}
.modal-search {width:100%; margin-bottom:24px}
.modal-search input {font-size:16px}
.search-group {margin:24px 0}
.search-group h3 {font-size:13px; color:var(--muted); font-weight:600; margin-bottom:12px}
.search-categories {display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.search-categories button {padding:14px 16px; text-align:left; border:1px solid var(--line); border-radius:12px; font-size:16px; min-height:72px}
.search-categories button:hover {background:var(--warm); color:var(--on-warm)}
.search-categories button:hover small {color:var(--on-warm)}
.search-categories small {display:block; font-size:13px; color:var(--muted); margin-top:4px}
.search-tags {display:flex; flex-wrap:wrap; gap:8px}
.search-tags button {min-height:44px; padding:8px 12px; border-radius:12px; background:var(--soft); font-size:13px}
.search-tags button:hover {background:var(--warm); color:var(--on-warm)}
.search-result {display:flex; width:100%; align-items:center; gap:14px; padding:16px 0; text-align:left; border-bottom:1px solid var(--line); font-size:16px}
.search-result>span:first-child {flex:1}
.search-result small {display:block; font-size:13px; color:var(--muted); margin-bottom:5px}
.search-empty {padding:24px 0}
.toast {position:fixed; left:50%; bottom:24px; z-index:50; max-width:calc(100vw - 32px); padding:12px 20px; border-radius:12px; background:var(--primary); color:var(--on-primary); font-size:13px; text-align:center; opacity:0; transform:translate(-50%,12px); pointer-events:none; transition:opacity 160ms,transform 160ms}
.toast.show {opacity:1; transform:translate(-50%,0)}
.skip {position:fixed; left:20px; top:-100px; z-index:60; padding:12px; background:var(--surface); border-radius:12px}
.skip:focus {top:12px}
@keyframes float-in {from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}


/* Shared editorial type and rhythm, taken from D. */
h1,h2,h3,.card-title,.brand,.footer-brand {font-family:var(--display); font-weight:600}
.brand {font-size:26px}
.brand-mark {border-radius:12px}
.discover {padding-top:96px; padding-bottom:64px}
.section-heading {align-items:flex-end; margin-bottom:32px}
.section-heading h2 {font-size:40px; line-height:1.4}
.section-heading p {font-size:16px; margin-top:16px}
.workspace {grid-template-columns:minmax(0,1fr) 296px; gap:64px}
.problem-card {padding:32px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; margin:0}
.problem-card:first-child {padding-top:16px}
.card-title {font-size:20px; line-height:1.65; min-height:44px; max-width:100%}
.problem-card:first-child .card-title {font-size:26px; line-height:1.5}
.card-description {font-size:16px; line-height:1.7; max-width:40em; margin:16px 0}
.card-bottom {border:0; padding-top:0; margin-top:24px; gap:16px}
.card-stage {border-radius:4px}
.tag {border-radius:4px}
.share-card {padding:24px; color:var(--ink); background:var(--warm)}
.share-card h2 {font-size:26px; line-height:1.5}
.share-card p,.share-foot {color:var(--muted)}
.side-panel,.community-note {padding:0}
.aside {gap:32px}
.side-title h3 {font-size:20px}
.progress-copy strong {font-size:16px}
.footer-inner {padding-block:32px}
.footer-brand {font-size:20px}
.auth-dialog .auth-brand {font-family:var(--display); font-size:20px}
button:active {filter:brightness(.94)}


a:hover {text-decoration:underline; text-underline-offset:5px}

input,textarea,select {font-variant-numeric:tabular-nums}

@media(max-width:1150px) {
  .header-inner {gap:32px}.desktop-nav{gap:20px}
  
  .workspace {gap:32px; grid-template-columns:minmax(0,1fr) 270px}
  .section-heading {display:block}.search{margin-top:24px;width:100%;max-width:480px}
}
@media(max-width:950px) {
  .header-inner {gap:24px}.desktop-nav{gap:16px}.desktop-nav>button,.header-publish{display:none}
  
  
  
  .workspace {grid-template-columns:minmax(0,1fr) 240px;gap:32px}
  .share-card {padding:24px}.share-card h2{font-size:20px}
  .progress-item>[data-icon]:last-child{display:none}
}
@media(max-width:700px) {
  html {scroll-padding-top:88px}.page,.header-inner,.footer-inner{padding-inline:20px}
  .header-inner{min-height:72px;gap:12px}.brand{font-size:20px;gap:8px}
  .brand-mark{width:32px;height:32px}.brand-mark svg{width:28px;height:28px}.desktop-nav{display:none}
  .header-actions{gap:0}.header-actions>.icon-button[data-action="search"]{display:none}
  .mobile-menu{display:flex}.login{font-size:13px;padding-inline:8px}
  
  
  
  .discover{padding-top:64px}
  .section-heading h2 {font-size:26px}.section-heading p{margin-top:16px}
  .search{width:100%;margin-top:24px}.workspace{display:block}.category{padding:8px 12px;font-size:13px}
  .filter-row {gap:8px}.feed-toolbar{align-items:flex-start;gap:8px;flex-wrap:wrap;padding:16px 0}
  .sorts {gap:24px}#result-count{min-height:44px;display:inline-flex;align-items:center}
  .problem-card{padding:32px 0}.card-top{gap:8px;font-size:13px}.card-stage{margin-left:0}
  .problem-card:first-child .card-title{font-size:26px}.card-title{font-size:20px}
  .card-bottom{gap:8px}.resonate,.comment-count,.follow{padding-inline:8px}
  .aside {margin-top:64px;gap:32px}.share-card h2{font-size:26px}
  .footer-inner{display:block}.footer-inner>div{margin-top:24px;gap:16px}
  dialog,.auth-dialog,.search-dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  #dialog-content,.auth-dialog #dialog-content{padding:24px 20px 32px}
  #dialog-content h2{font-size:26px}.search-categories{grid-template-columns:1fr}
}
@media(max-width:360px) {
  
  .header-inner{gap:8px}.login{padding-inline:4px}.brand{gap:8px}
  .card-bottom .follow{margin-left:0}
}
:root[data-motion="paused"] *, :root[data-motion="paused"] *::before, :root[data-motion="paused"] *::after {animation:none!important; transition:none!important}
:root[data-motion="paused"] {scroll-behavior:auto}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Feed-first composition: one short introduction, then usable public content. */
.discover {padding-top:48px; padding-bottom:64px}
.section-heading {display:flex; align-items:center; gap:32px; margin-bottom:32px}
.section-heading h2 {font-family:var(--display); font-size:32px; font-weight:600; line-height:1.5; letter-spacing:-.02em; text-wrap:balance}
.section-heading p {font-size:16px; line-height:1.7; color:var(--muted); margin-top:12px}
.intro-publish {flex:none}
.workspace {grid-template-columns:minmax(0,1fr) 296px; gap:64px; align-items:start}
.feed-search {width:100%; max-width:none; margin:0 0 16px}
.filter-row {padding-bottom:12px}
.feed-toolbar {padding:8px 0; gap:16px}
.aside {padding-top:0}
.problem-card:first-child {padding-top:16px}
@media(max-width:1150px) {
  .workspace {grid-template-columns:minmax(0,1fr) 270px; gap:32px}
  .section-heading {display:flex}
  .feed-search {width:100%; max-width:none; margin:0 0 16px}
}
@media(max-width:950px) {
  .workspace {display:block}
  .aside {margin-top:64px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start}
  .community-note {grid-column:1/-1}
}
@media(max-width:700px) {
  .discover {padding-top:32px}
  .section-heading {display:block; margin-bottom:24px}
  .section-heading h2 {font-size:26px; line-height:1.5; letter-spacing:-.02em}
  .section-heading p {margin-top:12px; font-size:16px}
  .intro-publish {margin-top:16px}
  .feed-search {margin:0 0 16px}
  .filter-row {flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:12px; scrollbar-width:thin}
  .category {flex:none; white-space:nowrap; font-size:13px; padding:8px 12px}
  .feed-toolbar {flex-wrap:nowrap; align-items:center; padding:8px 0; gap:8px}
  .sorts {gap:16px}
  #result-count {white-space:nowrap; min-height:44px}
  .aside {grid-template-columns:1fr; margin-top:48px}
  .community-note {grid-column:auto}
}

/* Original case motion, translated into the current D visual system. */
.hero {position:relative; overflow:clip; border-bottom:1px solid var(--line)}
#particle-canvas {position:absolute; inset:0; width:100%; height:100%; pointer-events:none; mask-image:radial-gradient(ellipse 100% 95% at 50% 46%,#000 35%,transparent 88%)}
.hero-inner {position:relative; width:min(1280px,100%); margin-inline:auto; min-height:680px; padding:100px 32px 20px}
.hero-copy {position:relative; z-index:2; max-width:740px; margin-inline:auto; text-align:center}
.hero-copy h1 {font-size:clamp(40px,4.8vw,60px); font-weight:700; line-height:1.35}
.hero-copy>p {color:var(--muted); font-size:17px; line-height:1.9; margin-top:24px}
.hero-actions {display:flex; justify-content:center; gap:12px; margin-top:28px; flex-wrap:wrap}
.hero-actions .secondary {border-color:var(--line)}
.case-node {position:absolute; z-index:3; display:flex; align-items:center; gap:12px; width:225px; padding:16px; border-radius:16px; text-align:left; background:var(--surface); border:1px solid var(--line); transform:rotate(var(--tilt)); transition:transform 240ms var(--ease),border-color 140ms}
.case-node:hover {transform:rotate(0) translateY(-4px); border-color:var(--control-border)}
.case-node strong {display:block; font-size:15px; font-weight:500; line-height:1.6}
.case-node small {display:block; font-size:12px; color:var(--muted); margin-bottom:4px}
.node-icon,.product-icon {width:40px; height:40px; justify-content:center; border-radius:12px; background:var(--soft); color:var(--ink)}
.warm-icon {background:var(--warm); color:var(--on-warm)}
.node-arrow {display:none}
.node-files {--tilt:-7deg; left:25px; top:96px}
.node-food {--tilt:6deg; right:30px; top:245px}
.node-collection {--tilt:-4deg; left:62px; top:390px}
.case-story {position:relative; z-index:2; max-width:580px; margin:52px auto 36px; text-align:center}
.story-steps {display:flex; align-items:center; justify-content:center; gap:6px}
.story-steps button {min-height:44px; padding:7px 11px; border-radius:8px; color:var(--muted); font-size:14px; white-space:nowrap}
.story-steps button:hover {background:var(--soft)}
.story-steps button.active {background:var(--warm); color:var(--on-warm)}
.story-steps>span {width:14px; height:1px; background:var(--control-border); flex:none}
#story-copy {font-size:15px; color:var(--muted); margin-top:16px; min-height:28px}
.story-link {min-height:44px; font-size:14px; color:var(--accent); display:inline-flex; align-items:center; gap:7px; margin-top:4px}
.story-link svg {width:16px; height:16px}
.hero-bottom {display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); margin-top:38px}
.motion-toggle {display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:8px; font-size:12px; border-radius:8px}
.motion-toggle:hover {background:var(--soft)}
.motion-toggle svg {width:14px; height:14px}


:root {--particle:103,86,104}
:root[data-theme="dark"] {--particle:180,180,180}
.hero-inner {width:min(1296px,100%); padding-inline:48px}
.hero-copy h1 {font-family:var(--display); font-size:48px; font-weight:600; line-height:1.5; letter-spacing:-.02em}
.hero-copy>p {font-size:16px; line-height:1.75}
.case-node {font-weight:400}
.case-node strong {font-weight:600}
.case-story {margin-top:48px}
.story-steps button.active {background:var(--selected); color:var(--accent)}
.hero-copy .secondary:hover {border-color:var(--control-border)}
@media(max-width:1150px) {
  .hero-inner {padding-top:80px}
  .hero-copy {max-width:610px}
  .case-node {width:188px; gap:10px; padding:12px}
  .case-node strong {font-size:14px}
  .case-node .node-icon {width:32px; height:32px}
  .node-files {left:18px; top:95px}
  .node-food {right:18px; top:360px}
  .node-collection {left:25px; top:360px}
}
@media(max-width:950px) {
  .hero-inner {min-height:0; padding-top:48px}
  .hero-copy {max-width:640px}
  .hero-copy h1 {font-size:40px}
  .case-nodes {display:flex; justify-content:center; gap:12px; margin:32px auto 0; max-width:720px}
  .case-node {position:static; width:auto; flex:1; min-width:0; transform:none}
  .case-node:hover {transform:translateY(-2px)}
  .case-node .node-icon {display:none}
  .case-story {margin-top:32px; margin-bottom:16px}
  .hero-bottom {margin-top:16px}
}
@media(max-width:700px) {
  .hero-inner {padding:32px 20px 12px}
  .hero-copy h1 {font-size:clamp(26px,7.7vw,32px); line-height:1.5}
  .hero-copy>p {font-size:16px; margin-top:20px}
  .hero-actions {margin-top:24px}
  .hero-actions>* {padding:11px 14px}
  .case-nodes {display:grid; grid-template-columns:1fr; margin-top:32px; gap:10px}
  .case-node {width:100%; padding:12px 14px}
  .case-node .node-icon {display:inline-flex; width:36px; height:36px}
  .case-node>span:nth-child(2) {flex:1; min-width:0}
  .case-node strong {font-size:15px}
  .case-node small {font-size:12px; margin-bottom:2px}
  .node-arrow {display:inline-flex; color:var(--muted)}
  .node-arrow svg {width:16px; height:16px}
  .case-story {margin:24px 0 8px}
  .story-steps {gap:3px}
  .story-steps button {padding:7px 6px; font-size:13px}
  .story-steps>span {width:7px}
  #story-copy {font-size:14px; line-height:1.75}
  .hero-bottom {font-size:11px; gap:4px}
  .motion-toggle {font-size:11px; padding-inline:4px}
}
@media(max-width:360px) {
  .hero-actions {gap:10px}
  .hero-actions>* {width:100%}
  .story-steps button {font-size:12px; padding-inline:5px}
  .story-steps>span {width:4px}
}
:root[data-motion="paused"] .case-node {transform:none}
@media(prefers-reduced-motion:reduce) {.case-node {transform:none}}