:root{--ink:#111;--paper:#fbfaf4;--paper-strong:#fff;--muted:#5d5a52;--red:#df2d24;--blue:#1e5bbf;--yellow:#f2c230;--line:#111;--shadow:8px 8px 0 var(--ink);--shadow-small:5px 5px 0 var(--ink);--max-width:1180px;--sans:"Inter", "Arial", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:var(--ink);background:var(--paper);font-family:var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:17px;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:linear-gradient(90deg, #11111109 1px, transparent 1px) 0 0 / 48px 48px, var(--paper);min-width:320px;margin:0}body:before{content:"";background:linear-gradient(to bottom, var(--red) 0 22%, var(--yellow) 22% 43%, var(--blue) 43% 72%, var(--ink) 72% 100%);z-index:10;width:14px;position:fixed;inset:0 auto 0 0}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}button{font:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{letter-spacing:0;line-height:1.08}h1{max-width:760px;font-size:5rem;font-weight:900}h2{font-size:3.1rem;font-weight:850}h3{font-size:1.35rem;font-weight:850}#app{min-height:100svh;padding-left:14px}.site-header,main,.site-footer{width:min(calc(100% - 32px), var(--max-width));margin-inline:auto}.site-header{justify-content:space-between;align-items:center;gap:24px;padding:28px 0;display:flex}.brand,.site-nav,.hero-actions,.site-footer div{align-items:center;display:flex}.brand{gap:12px;font-size:1rem;font-weight:900}.brand-mark{border:3px solid var(--ink);background:linear-gradient(90deg, transparent 50%, var(--blue) 50%), linear-gradient(var(--red) 50%, var(--yellow) 50%);width:34px;height:34px;box-shadow:4px 4px 0 var(--ink);display:inline-block}.site-nav{border:3px solid var(--ink);background:var(--paper-strong);box-shadow:var(--shadow-small);gap:6px}.site-nav a{text-align:center;min-width:88px;padding:11px 14px;font-size:.86rem;font-weight:850}.site-nav a+a{border-left:3px solid var(--ink)}.hero-section{grid-template-columns:minmax(0,1fr) minmax(280px,380px);align-items:center;gap:clamp(30px,5vw,70px);padding:54px 0 72px;display:grid}.hero-copy{gap:24px;display:grid}.eyebrow,.section-kicker,.note-meta,.site-footer{letter-spacing:0;font-size:.78rem;font-weight:900}.eyebrow{border:3px solid var(--ink);background:var(--yellow);width:fit-content;box-shadow:var(--shadow-small);padding:8px 12px}.hero-text{max-width:700px;color:var(--muted);font-size:1.28rem}.hero-actions{flex-wrap:wrap;gap:14px;margin-top:6px}.primary-link,.secondary-link,.note-card a{border:3px solid var(--ink);min-height:48px;box-shadow:var(--shadow-small);justify-content:center;align-items:center;font-weight:900;transition:transform .16s,box-shadow .16s;display:inline-flex}.primary-link,.secondary-link{padding:12px 18px}.primary-link{background:var(--red);color:var(--paper-strong)}.secondary-link{background:var(--paper-strong)}.primary-link:hover,.secondary-link:hover,.note-card a:hover{box-shadow:2px 2px 0 var(--ink);transform:translate(3px,3px)}.bauhaus-panel{border:4px solid var(--ink);background:var(--paper-strong);min-height:460px;box-shadow:var(--shadow);position:relative;overflow:hidden}.shape{border:4px solid var(--ink);display:block;position:absolute}.circle-red{background:var(--red);border-radius:50%;width:158px;height:158px;top:34px;left:28px}.square-blue{background:var(--blue);width:150px;height:150px;top:130px;right:34px}.bar-black{background:var(--ink);width:292px;height:42px;top:282px;left:54px;transform:rotate(-18deg)}.triangle-yellow{border-style:solid;border-width:0 120px 208px;border-color:transparent transparent var(--yellow) transparent;background:0 0;width:0;height:0;bottom:42px;left:82px}.circle-line{background:0 0;border-radius:50%;width:128px;height:128px;bottom:46px;right:48px}.dot-blue{background:var(--blue);border-radius:50%;width:48px;height:48px;bottom:36px;right:192px}.featured-section,.about-section{border:4px solid var(--ink);background:var(--yellow);box-shadow:var(--shadow);grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);align-items:stretch;gap:28px;margin:0 0 54px;display:grid}.featured-section>div,.about-section>div,.about-section>p{padding:clamp(22px,4vw,38px)}.featured-section>div:first-child,.about-section>div:first-of-type{border-right:4px solid var(--ink)}.featured-note{background:var(--paper-strong);align-content:center;gap:22px;display:grid}.note-meta{color:var(--muted);flex-wrap:wrap;gap:10px;display:flex}.note-meta span{border:2px solid var(--ink);background:var(--paper);padding:5px 8px}.notes-section{padding:42px 0 68px}.section-heading{justify-content:space-between;align-items:end;gap:28px;margin-bottom:24px;display:flex}.section-kicker{color:var(--blue)}.notes-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;display:grid}.note-card{border:4px solid var(--ink);background:var(--paper-strong);min-height:350px;box-shadow:var(--shadow-small);grid-template-rows:auto auto 1fr auto;gap:18px;padding:24px;display:grid}.note-card:nth-child(2){background:#eef3ff}.note-card:nth-child(3){background:#fff4d1}.note-card p,.about-section p,.featured-note p{color:var(--muted)}.note-card a{background:var(--paper);justify-content:space-between;gap:16px;width:100%;padding:10px 14px}.note-card a span:last-child{border:2px solid var(--ink);background:var(--red);width:24px;height:24px;color:var(--paper-strong);place-items:center;display:inline-grid}.music-section{padding:28px 0 74px}.music-heading{align-items:start;margin-bottom:28px}.music-heading>div{max-width:600px}.music-heading>p{max-width:530px;color:var(--muted);font-size:1.05rem}.music-mode-switch{border:3px solid var(--ink);background:var(--paper-strong);width:fit-content;box-shadow:var(--shadow-small);grid-template-columns:repeat(2,minmax(130px,1fr));margin:0 0 22px;display:grid}.music-mode-switch button{min-height:48px;color:var(--ink);cursor:pointer;background:0 0;border:0;padding:10px 16px;font-weight:900}.music-mode-switch button+button{border-left:3px solid var(--ink)}.music-mode-switch button.is-active{background:var(--red);color:var(--paper-strong)}.music-console{grid-template-columns:280px minmax(0,1fr);grid-template-areas:"source detail""timeline detail";align-items:start;gap:22px;display:grid}.music-source-card,.music-detail,.music-fact-card{border:4px solid var(--ink);background:var(--paper-strong);box-shadow:var(--shadow-small)}.music-source-card{background:var(--yellow);grid-area:source;padding:22px}.music-source-card p:last-child{color:var(--ink);margin-top:10px;font-weight:800}.music-timeline{grid-area:timeline;gap:14px;display:grid;position:relative}.usecase-grid{grid-area:timeline;gap:12px;display:grid}.music-timeline:before{content:"";background:var(--ink);width:4px;position:absolute;top:34px;bottom:34px;left:32px}.music-node{z-index:1;width:100%;min-height:74px;color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:0;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:14px;padding:8px 14px 8px 0;display:grid;position:relative}.usecase-node{border:3px solid var(--ink);background:var(--paper-strong);color:var(--ink);text-align:left;box-shadow:var(--shadow-small);cursor:pointer;gap:7px;padding:16px;display:grid}.usecase-node:hover,.usecase-node.is-active{background:var(--yellow)}.usecase-node span{font-size:1rem;font-weight:900}.usecase-node small{color:var(--muted);font-size:.82rem;font-weight:800}.record-disc{border:4px solid var(--ink);background:radial-gradient(circle at 50% 50%, var(--paper) 0 10%, var(--ink) 11% 17%, transparent 18%), conic-gradient(var(--red) 0 25%, var(--yellow) 25% 44%, var(--blue) 44% 63%, var(--ink) 63% 100%);width:66px;height:66px;box-shadow:4px 4px 0 var(--ink);border-radius:50%;display:block}.music-node-text{border:3px solid var(--ink);background:var(--paper-strong);min-width:0;box-shadow:4px 4px 0 var(--ink);gap:3px;padding:10px 12px;font-weight:900;display:grid}.music-node-text span{color:var(--blue);font-size:.74rem}.music-node:hover .music-node-text,.music-node.is-active .music-node-text{background:var(--yellow)}.music-node.is-active .record-disc{background:radial-gradient(circle at 50% 50%, var(--paper) 0 10%, var(--ink) 11% 17%, transparent 18%), conic-gradient(var(--blue) 0 32%, var(--red) 32% 64%, var(--yellow) 64% 82%, var(--ink) 82% 100%)}.music-detail{grid-area:detail;align-content:start;gap:24px;min-height:642px;padding:clamp(24px,4vw,42px);display:grid}.music-detail-heading{gap:12px;display:grid}.music-detail h3{font-size:2.45rem}.music-detail p{max-width:760px;color:var(--muted);font-size:1.08rem}.usecase-scene{border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:#fff4d1;padding:12px 14px;font-weight:900;color:var(--ink)!important}.substyle-filter{flex-wrap:wrap;gap:10px;display:flex}.substyle-filter button{border:2px solid var(--ink);background:var(--paper);min-height:40px;color:var(--ink);cursor:pointer;padding:8px 12px;font-size:.86rem;font-weight:900}.substyle-filter button:hover,.substyle-filter button.is-active{background:var(--blue);color:var(--paper-strong)}.substyle-note{border-left:6px solid var(--red);background:#fff4d1;padding:12px 14px;color:var(--ink)!important}.music-detail-grid{grid-template-columns:minmax(0,1.15fr) minmax(220px,.85fr);gap:18px;display:grid}.music-detail h4{color:var(--blue);margin:0 0 12px;font-size:.82rem}.music-detail ul{align-content:start;gap:8px;min-height:260px;margin:0;padding:0;list-style:none;display:grid}.music-detail li{border:2px solid var(--ink);background:var(--paper);overflow-wrap:anywhere;padding:8px 10px;font-weight:800}.music-detail li.is-highlighted{background:var(--yellow);box-shadow:4px 4px 0 var(--ink)}.music-tags{flex-wrap:wrap;gap:10px;display:flex}.music-tags span{border:2px solid var(--ink);color:var(--ink);background:#eef3ff;padding:7px 10px;font-size:.84rem;font-weight:900}.music-tags span:nth-child(2n){background:#fff4d1}.music-tags span:nth-child(3n){background:#ffe9e6}.music-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px;display:grid}.music-fact-card{grid-template-rows:auto auto 1fr;gap:10px;min-height:190px;padding:18px;display:grid}.music-fact-card p{color:var(--blue);font-size:.8rem;font-weight:900}.music-fact-card strong{font-size:1.25rem;line-height:1.15}.music-fact-card span{color:var(--muted);overflow-wrap:anywhere}.about-section{background:var(--paper-strong);grid-template-columns:180px minmax(220px,.85fr) minmax(0,1.1fr)}.about-symbol{background:var(--blue);place-items:center;min-height:220px;display:grid}.about-symbol span{border:4px solid var(--ink);background:var(--paper-strong);display:block}.about-symbol span:first-child{border-radius:50%;width:96px;height:96px}.about-symbol span:nth-child(2){background:var(--yellow);width:96px;height:28px}.about-symbol span:nth-child(3){background:var(--red);width:74px;height:74px}.site-footer{border-top:4px solid var(--ink);justify-content:space-between;align-items:center;gap:18px;padding:34px 0 46px;display:flex}.site-footer div{flex-wrap:wrap;gap:10px}.site-footer a{border:2px solid var(--ink);background:var(--paper-strong);padding:8px 10px}@media (width<=920px){body:before{width:10px}#app{padding-left:10px}.site-header{flex-direction:column;align-items:flex-start}.site-nav{width:100%}.site-nav a{flex:1 1 0;min-width:0}.hero-section{grid-template-columns:1fr;min-height:auto;padding-top:20px}h1{max-width:640px;font-size:4rem}h2{font-size:2.55rem}.bauhaus-panel{min-height:400px}.featured-section,.about-section{grid-template-columns:1fr}.featured-section>div:first-child,.about-section>div:first-of-type{border-right:0;border-bottom:4px solid var(--ink)}.about-symbol{border-bottom:4px solid var(--ink)}.notes-grid{grid-template-columns:1fr}.note-card{min-height:260px}.music-heading{flex-direction:column;align-items:start}.music-heading>p{max-width:none}.music-mode-switch{width:100%}.music-console{grid-template-columns:1fr;grid-template-areas:"source""timeline""detail"}.music-timeline,.usecase-grid{scroll-snap-type:x proximity;gap:14px;padding:4px 6px 12px 0;display:flex;overflow-x:auto}.music-timeline:before{width:auto;height:4px;inset:36px 0 auto}.music-node{scroll-snap-align:start;flex:0 0 238px;width:238px}.usecase-node{scroll-snap-align:start;flex:0 0 248px;width:248px}.music-detail{min-height:0}.music-detail-grid{grid-template-columns:1fr}.music-detail ul{min-height:0}.music-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){:root{font-size:16px}.site-header,main,.site-footer{width:min(calc(100% - 24px), var(--max-width))}.brand{font-size:.92rem}h1{font-size:2.85rem}h2{font-size:2rem}.hero-text{font-size:1.08rem}.site-nav{grid-template-columns:1fr;display:grid}.site-nav a+a{border-left:0;border-top:3px solid var(--ink)}.hero-actions,.site-footer{flex-direction:column;align-items:stretch}.primary-link,.secondary-link{width:100%}.music-section{padding-bottom:56px}.music-node{flex-basis:210px;grid-template-columns:58px minmax(0,1fr);width:210px}.usecase-node{flex-basis:220px;width:220px}.music-mode-switch{grid-template-columns:1fr}.music-mode-switch button+button{border-top:3px solid var(--ink);border-left:0}.record-disc{width:58px;height:58px}.music-node-text{padding:9px 10px}.music-detail h3{font-size:1.75rem}.substyle-filter{grid-template-columns:1fr 1fr;display:grid}.music-facts{grid-template-columns:1fr}.music-fact-card{min-height:150px}.bauhaus-panel{min-height:340px}.circle-red{width:136px;height:136px;top:24px;left:18px}.square-blue{width:120px;height:120px;top:106px;right:20px}.bar-black{width:240px;top:206px;left:28px}.triangle-yellow{border-width:0 84px 146px;bottom:24px;left:38px}.circle-line{width:96px;height:96px;bottom:28px;right:22px}.dot-blue{bottom:22px;right:132px}}