:root{--paper:#f7f8f2;--ink:#243a31;--accent:#cedd39;--wash:#e8eee2;--muted:#69776d;--rule:#d4dccf;--sans:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',Arial,sans-serif;--mono:'SFMono-Regular',Consolas,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.8 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}button{cursor:pointer}h1,h2,h3,p{margin:0}button{border:0}svg{display:block}::selection{background:var(--accent);color:var(--ink)}:focus-visible{outline:2px solid var(--ink);outline-offset:6px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.xmark{overflow:visible;flex-shrink:0}.mark-body{fill:var(--ink)}.mark-piece{fill:var(--accent);transition:transform .65s cubic-bezier(.22,1,.36,1)}.wordmark{display:inline-flex;align-items:center;gap:10px}.wordmark .xmark{width:29px;height:29px}.wordmark>span{font-size:27px;font-weight:650;letter-spacing:-1.8px;line-height:1}.overline{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.025em}.overline i{display:block;width:7px;height:7px;background:var(--accent)}.micro{font-size:10px;color:var(--muted)}
/* Direction board */
.board{background:#f1f3ed}.board-wrap{width:min(1200px,calc(100% - 96px));margin:auto}.board-header{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:33px 0;border-bottom:1px solid var(--rule)}.board-header>span{font:10px var(--mono);color:var(--muted);letter-spacing:.05em}.board-top-link{font-size:12px}.board-top-link:hover{text-decoration:underline;text-underline-offset:6px}.board-cover{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:center;padding:76px 0 47px}.board-cover h1{font-size:clamp(32px,3.4vw,49px);line-height:1.5;letter-spacing:-.045em;font-weight:550;margin:27px 0 23px}.board-cover h1>span{color:#788575}.board-lead{font-size:14px;line-height:1.95;color:var(--muted)}.concept-tags{display:flex;gap:22px;margin:24px 0;font-size:11px}.concept-tags span:before{content:'＋';color:#95a383;margin-right:6px}.board-primary{display:inline-flex;gap:37px;align-items:center;border-bottom:1px solid var(--ink);font-size:13px;padding:10px 0}.board-primary:hover{background:var(--accent)}.master-mark{background:var(--paper);padding:27px 30px 24px;min-height:431px;display:flex;flex-direction:column;justify-content:space-between}.master-label,.mark-caption{display:flex;justify-content:space-between;gap:15px;font:9px var(--mono);color:var(--muted)}.mark-caption{font-family:var(--sans);font-size:10px}.master-x{width:230px;height:230px;margin:28px auto 35px}.specimens{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:15px}.specimen{min-height:226px;display:flex;flex-direction:column;justify-content:space-between;padding:23px 27px;background:var(--paper)}.specimen-label{font-size:9px;letter-spacing:.03em}.specimen p{font-size:11px;opacity:.68}.specimen.dark{background:var(--ink);color:var(--paper)}.specimen.dark .mark-body{fill:var(--paper)}.specimen-wordmark{display:flex;align-items:center;gap:15px;margin:20px 0}.specimen-wordmark .xmark{width:46px;height:46px}.specimen-wordmark>span{font-size:43px;font-weight:600;letter-spacing:-3px}.icon-sizes{display:flex;align-items:baseline;justify-content:center;gap:29px;margin:20px 0 9px}.icon-sizes>div{display:flex;flex-direction:column;align-items:center;gap:10px}.icon-sizes span{font:9px var(--mono);color:var(--muted)}.icon-sizes>div:nth-child(1) svg{width:64px;height:64px}.icon-sizes>div:nth-child(2) svg{width:32px;height:32px}.icon-sizes>div:nth-child(3) svg{width:16px;height:16px}.specimen.single{background:var(--wash)}.specimen.single>.xmark{width:83px;height:83px;margin:20px auto}.specimen.single .mark-piece{fill:var(--ink)}.board-section{padding:90px 0}.board-section-head{display:grid;grid-template-columns:215px 1fr;gap:35px;align-items:start;margin-bottom:37px}.board-index{font-size:11px;color:var(--muted);padding-top:9px}.board-section-head h2{font-size:31px;font-weight:500;line-height:1.6;letter-spacing:-.035em}.board-section-head p{font-size:13px;color:var(--muted);max-width:650px;margin-top:15px;line-height:1.95}.grammar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.grammar-grid article{border-top:1px solid var(--rule);padding-top:15px}.grammar-art{height:155px;display:flex;align-items:center;justify-content:center}.grammar-grid h3{font-size:16px;font-weight:500;margin-bottom:9px}.grammar-grid p{font-size:12px;color:var(--muted);max-width:290px}.shape-art{gap:28px}.shape-art>svg{width:79px;height:79px}.shape-art>svg:last-child{margin-top:-30px}.shape-art>span{color:#a2ae9c;font-size:20px}.relation-art{gap:8px}.relation-art>div{width:64px;height:49px;background:#dce3d5}.relation-art>div:nth-child(2){width:57px;background:var(--accent);clip-path:polygon(0 0,70% 0,100% 100%,30% 100%);margin:0 -7px;transform:translateY(-9px)}.motion-art{gap:20px}.motion-art .xmark{width:85px;height:85px}.motion-art .mark-piece{transform:translate(20px,20px)}.motion-art.fitted .mark-piece{transform:translate(0,0)}.motion-art button{font-size:11px;background:transparent;border-bottom:1px solid #97a38f;padding:4px 0}.system-section{padding:72px 0;background:var(--paper)}.system-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:70px}.palette{display:grid;grid-template-columns:1fr 1fr;gap:7px}.palette>div{min-height:148px;padding:20px;display:flex;flex-direction:column;align-items:start}.palette strong{font-size:15px;font-weight:500}.palette span{font:10px var(--mono);margin-top:3px;opacity:.7}.palette small{font-size:10px;margin-top:auto;opacity:.7}.type-sample{padding:10px 0 0}.type-sample h3{font-size:43px;line-height:1.5;font-weight:500;letter-spacing:-.04em;margin:20px 0 15px}.type-sample p{font-size:13px;color:var(--muted)}.type-en{display:block;font-size:16px;line-height:1.5;letter-spacing:-.025em;margin-top:28px}.preview-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;border:1px solid var(--rule);padding:14px 20px;background:#e9eee3;font-size:11px}.preview-bar>span{display:flex;align-items:center;gap:9px}.preview-bar i{height:6px;width:6px;background:#80916e;border-radius:50%}.viewport-buttons{display:flex;align-items:center;gap:15px}.viewport-buttons button{font-size:11px;padding:4px 10px;background:transparent;color:var(--muted)}.viewport-buttons button[aria-pressed=true]{background:var(--paper);color:var(--ink)}.preview-stage{padding:0;background:#dbe2d4;border:1px solid var(--rule);border-top:0;display:flex;justify-content:center;overflow:hidden}.preview-stage iframe{display:block;width:100%;height:840px;border:0;background:var(--paper)}.preview-stage.mobile{padding:35px 10px}.preview-stage.mobile iframe{width:390px;height:780px;border:1px solid #c3ccbc;border-radius:23px}.preview-note{font-size:11px;color:var(--muted);margin-top:14px}.board-end{padding:10px 0 78px}.board-end>div{display:flex;gap:40px;align-items:center;margin:35px 0 23px}.board-end .xmark{width:87px;height:87px}.board-end h2{font-size:35px;font-weight:500;line-height:1.6;letter-spacing:-.03em}.board-end p{font-size:12px;color:var(--muted);line-height:1.9;margin-bottom:13px}.board-footer{display:flex;justify-content:space-between;padding:25px 0;font:9px var(--mono);color:var(--muted);border-top:1px solid var(--rule)}
/* Website concept */
.container{width:min(1160px,calc(100% - 104px));margin-inline:auto}.site-header{display:flex;align-items:center;justify-content:space-between;padding:29px 0;gap:30px}.site-header nav{display:flex;gap:32px;font-size:12px}.site-header nav a:hover{text-decoration:underline;text-underline-offset:6px}.talk{font-size:12px;border:1px solid #bdc7b6;padding:9px 17px;display:flex;gap:25px;align-items:center;border-radius:3px}.talk:hover{background:var(--wash)}.site-hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:66px;padding-top:65px;padding-bottom:65px}.site-hero h1{font-size:clamp(43px,5.6vw,74px);font-weight:550;line-height:1.36;letter-spacing:-.05em;margin:26px 0 25px}.last-word{display:inline-block}.highlight-word{display:inline-block;position:relative;z-index:0;margin-left:3px;padding:0 3px}.highlight-word:after{content:'';position:absolute;left:-5px;right:-4px;bottom:1px;height:60%;background:var(--accent);z-index:-1;clip-path:polygon(0 0,87% 0,100% 100%,13% 100%)}.hero-desc{font-size:15px;line-height:2;color:var(--muted)}.site-link{font-size:12px;display:inline-flex;gap:30px;align-items:center;margin-top:29px;border-bottom:1px solid #b4bfad;padding-bottom:7px}.hero-symbol{align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;border-top:1px solid var(--rule);padding-top:14px;margin-top:4px}.symbol-caption{display:flex;justify-content:space-between;gap:15px;font-size:9px;color:var(--muted)}.symbol-caption span:last-child{font:8px var(--mono);letter-spacing:.025em}.symbol-figure{position:relative;padding:22px 43px 15px 8px;flex:1;display:flex;align-items:center;justify-content:center}.hero-x{width:min(295px,85%);aspect-ratio:1}.hero-x .mark-piece{transform:translate(13px,13px)}.hero-symbol.fitted .hero-x .mark-piece{transform:translate(0,0)}.fit-control{position:absolute;bottom:17px;right:0;display:flex;flex-direction:column;gap:7px;align-items:center;background:transparent;font-size:11px}.fit-icon{font-size:22px;line-height:1.2}.fit-label{font-size:10px}.symbol-foot{border-top:1px solid var(--rule);padding-top:13px;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:var(--muted)}.symbol-foot span:first-child{color:var(--ink)}.try-row{display:grid;grid-template-columns:260px 1fr;gap:45px;align-items:start;padding:26px 0 30px;border-top:1px solid var(--rule)}.try-row>p{font-size:13px;line-height:1.9;padding-top:13px;color:var(--muted)}.try-row strong{font-weight:500;color:var(--ink)}.challenge-shell{display:flex;align-items:center;gap:16px;background:var(--wash);padding:10px 10px 10px 20px}.challenge-shell:focus-within{outline:1px solid var(--ink);outline-offset:3px}.input-mark .xmark{width:24px;height:24px}.challenge-shell input{width:100%;min-width:0;font-size:14px;border:0;background:transparent;padding:10px 0;outline:none}.challenge-shell input::placeholder{color:#6e7e68}.challenge-shell button{background:var(--accent);font-size:25px;width:46px;height:46px;flex-shrink:0}.challenge-shell button:hover{background:#d9e653}.try-note{font-size:9px;color:var(--muted);margin-top:7px}.try-response{border:1px solid var(--rule);padding:22px;font-size:14px;margin-bottom:25px}.try-response strong{font-weight:500;display:block;margin-bottom:7px}.try-response small{display:block;color:var(--muted);font-size:11px;margin-top:10px}.hero-baseline{display:flex;justify-content:space-between;gap:20px;padding:18px 0 19px;border-top:1px solid var(--rule);font-size:11px}.hero-baseline span:nth-child(n+2){font:8px var(--mono);color:var(--muted);align-self:center;letter-spacing:.025em}.approach-band{background:var(--wash);padding:66px 0;margin-top:33px}.approach-inner{display:grid;grid-template-columns:1fr 1.3fr;gap:25px 50px}.approach-inner h2{font-size:28px;font-weight:500;line-height:1.6;letter-spacing:-.035em;margin-top:20px}.connection{display:flex;align-items:center;gap:8px;position:relative}.connection:before{content:'';position:absolute;height:1px;background:#bdc9b3;left:0;right:0;top:50%}.connection>div{position:relative;z-index:1;flex:1;padding:18px 15px;min-height:91px;background:var(--paper);display:flex;flex-direction:column;justify-content:center;white-space:nowrap}.connection h3{font-weight:500;font-size:14px;margin-top:6px}.connection>div.connection-middle{background:var(--accent);transform:translateY(-10px);padding-right:23px;clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,100% 100%,17px 100%,0 calc(100% - 17px))}.connection-middle .micro{color:#5e662a}.connection .mini-piece{display:none}.approach-note{grid-column:2;font-size:12px;line-height:1.95;color:var(--muted)}.scene-section{padding:90px 0 70px;display:grid;grid-template-columns:.9fr 1.15fr;gap:45px 70px}.scene-header h2{font-size:36px;line-height:1.5;letter-spacing:-.045em;font-weight:500;margin:25px 0 21px}.scene-intro{font-size:13px;color:var(--muted);line-height:2}.scene-art{padding:22px 24px;background:var(--wash);position:relative}.scene-art:before{content:'';width:25px;height:25px;background:var(--paper);position:absolute;top:0;right:0;clip-path:polygon(0 0,100% 0,100% 100%)}.scene-art-header{display:flex;justify-content:space-between;gap:15px;font-size:10px;padding-bottom:18px;border-bottom:1px solid #cbd5c2}.scene-art-header span:last-child{font:9px var(--mono);color:var(--muted)}.chart{margin-top:21px}.chart-label{display:flex;justify-content:space-between;gap:15px;font-size:10px;color:var(--muted)}.chart-label span:last-child{font-size:9px}.chart svg{width:100%;height:125px;margin-top:8px;overflow:visible}.gridline{fill:none;stroke:#d1dac9;stroke-width:1}.chart-line{fill:none;stroke:#526f54;stroke-width:2}.chart-line.secondary{stroke:#a2b290;stroke-width:1.4}.chart circle{fill:var(--accent);stroke:#526f54;stroke-width:1.5}.insight{position:relative;background:var(--accent);padding:19px 24px;margin:8px -5px 0 30px;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}.insight-label{font-size:9px;color:#5e662a}.insight p{font-size:13px;line-height:1.9;margin-top:4px}.insight strong{font-weight:500}.scene-caption{font-size:10px;color:var(--muted);margin:18px 0 0}.scene-bottom{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);padding-top:21px;align-items:center;font-size:11px;color:var(--muted)}.scene-tabs{display:flex;gap:23px}.scene-tabs button{background:transparent;color:var(--muted);font-size:11px;padding:4px 0;position:relative}.scene-tabs button[aria-pressed=true]{color:var(--ink)}.scene-tabs button[aria-pressed=true]:before{content:'';width:6px;height:6px;background:var(--accent);display:inline-block;margin-right:8px}.site-closing{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:36px 0 61px}.site-closing p{font-size:25px;letter-spacing:-.04em}.site-closing a{font-size:12px;display:flex;gap:30px;border-bottom:1px solid var(--ink);padding:8px 0}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:25px;border-top:1px solid var(--rule);padding:27px 0}.site-footer .wordmark>span{font-size:22px}.site-footer .xmark{width:24px;height:24px}.site-footer p{font-size:10px;color:var(--muted)}.site-footer>span{font:9px var(--mono);color:var(--muted)}
@media(min-width:1450px){.site-hero{padding-top:82px;padding-bottom:80px}.hero-x{width:315px}.site-hero h1{font-size:77px}}
@media(max-width:1050px){.board-wrap{width:calc(100% - 64px)}.board-cover{gap:36px}.master-mark{min-height:390px;padding:23px}.master-x{width:210px;height:210px}.specimen{padding:20px}.specimen-wordmark>span{font-size:35px}.icon-sizes{gap:20px}.board-section-head{grid-template-columns:160px 1fr;gap:25px}.container{width:calc(100% - 64px)}.site-hero{gap:40px}.site-hero h1{font-size:58px}.hero-x{width:240px}.symbol-figure{padding-right:25px}.try-row{grid-template-columns:200px 1fr;gap:25px}.approach-inner{grid-template-columns:1fr;gap:25px}.connection{max-width:650px}.approach-note{grid-column:1}.scene-section{gap:35px}.scene-header h2{font-size:32px}.site-header nav{gap:22px}.system-grid{gap:35px}}
@media(max-width:700px){.board-wrap,.container{width:calc(100% - 40px)}.board-header{padding:24px 0}.board-header>span{display:none}.wordmark>span{font-size:25px}.board-top-link{font-size:11px}.board-cover{display:flex;flex-direction:column;align-items:stretch;padding:40px 0 24px;gap:30px}.board-cover h1{font-size:34px;line-height:1.5;margin:22px 0 18px}.board-lead{font-size:12px}.concept-tags{margin:19px 0;font-size:10px}.master-mark{min-height:340px;padding:23px}.master-x{width:195px;height:195px;margin:28px auto}.specimens{grid-template-columns:1fr 1fr;gap:10px}.specimen{min-height:190px;padding:18px}.specimen.dark{grid-column:1/-1;min-height:190px}.specimen-wordmark{justify-content:center;margin:10px 0}.specimen-wordmark>span{font-size:42px}.specimen p{font-size:10px}.specimen-label{font-size:8px}.icon-sizes{gap:14px}.icon-sizes>div:nth-child(1) svg{width:46px;height:46px}.icon-sizes>div:nth-child(2) svg{width:27px;height:27px}.icon-sizes>div:nth-child(3) svg{width:16px;height:16px}.specimen.single>.xmark{width:69px;height:69px}.board-section{padding:54px 0}.board-section-head{display:block;margin-bottom:28px}.board-index{display:block;margin-bottom:18px}.board-section-head h2{font-size:25px;line-height:1.65}.board-section-head p{font-size:12px}.grammar-grid{grid-template-columns:1fr;gap:25px}.grammar-grid article{display:grid;grid-template-columns:135px 1fr;gap:7px 20px;padding-top:20px}.grammar-art{grid-row:1/3;height:120px}.grammar-grid h3{align-self:end;margin:0;font-size:15px}.grammar-grid p{font-size:11px}.shape-art{gap:7px}.shape-art>svg{width:53px;height:53px}.shape-art>svg:last-child{margin-top:-20px}.shape-art>span{font-size:15px}.relation-art{gap:4px}.relation-art>div{width:37px;height:40px}.relation-art>div:nth-child(2){width:35px;margin:0}.motion-art{flex-direction:column;gap:12px}.motion-art .xmark{width:64px;height:64px}.motion-art button{font-size:10px}.system-section{padding:49px 0}.system-grid{grid-template-columns:1fr;gap:35px}.palette>div{min-height:131px;padding:19px}.type-sample{padding-left:4px}.type-sample h3{font-size:39px}.preview-bar{padding:13px 10px}.preview-bar>span{font-size:9px}.viewport-buttons{gap:6px}.viewport-buttons button{display:none}.viewport-buttons a{font-size:10px}.preview-stage iframe{height:700px}.preview-note{font-size:10px}.board-end{padding:0 0 50px}.board-end>div{gap:22px;margin-top:22px}.board-end .xmark{width:60px;height:60px}.board-end h2{font-size:25px}.board-end p{font-size:11px}.board-footer{font-size:8px}.site-header{padding:23px 0;gap:18px}.site-header nav{display:none}.talk{font-size:10px;padding:8px 11px;gap:15px}.site-header .wordmark>span{font-size:24px}.site-header .xmark{width:25px;height:25px}.site-hero{display:flex;flex-direction:column;align-items:stretch;gap:33px;padding:36px 0 35px}.site-hero h1{font-size:clamp(42px,11vw,65px);margin:22px 0 20px;line-height:1.34}.overline{font-size:11px}.hero-desc{font-size:13px;line-height:1.95}.site-link{font-size:11px;margin-top:22px}.hero-symbol{padding-top:12px;margin:0}.symbol-caption{font-size:8px}.symbol-caption span:last-child{font-size:8px}.symbol-figure{padding:17px 28px 15px 0;min-height:220px}.hero-x{width:180px;height:180px}.fit-control{bottom:20px;right:8px}.fit-label{font-size:10px}.symbol-foot{font-size:9px;padding-top:12px}.try-row{grid-template-columns:1fr;gap:17px;padding:23px 0}.try-row>p{font-size:13px;padding:0}.try-row>p br{display:none}.try-row strong{margin-left:8px}.challenge-shell{gap:10px;padding:9px 9px 9px 13px}.input-mark .xmark{width:20px;height:20px}.challenge-shell input{font-size:12px}.challenge-shell button{width:39px;height:42px;font-size:23px}.try-note{font-size:9px}.hero-baseline{font-size:10px;gap:10px;padding:16px 0}.hero-baseline span:nth-child(2){font-size:7px}.hero-baseline span:nth-child(3){display:none}.approach-band{margin-top:15px;padding:40px 0}.approach-inner{gap:23px}.approach-inner h2{font-size:25px;margin-top:16px}.connection{gap:5px}.connection>div{padding:13px 9px;min-height:82px}.connection h3{font-size:11px}.connection .micro{font-size:9px}.connection>div.connection-middle{padding-right:13px;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transform:translateY(-5px)}.approach-note{font-size:11px}.scene-section{display:block;padding:47px 0 40px}.scene-header h2{font-size:31px;margin:20px 0 17px}.scene-intro{font-size:12px}.scene-art{margin-top:29px;padding:20px}.scene-art-header{font-size:9px}.chart svg{height:112px}.insight{margin-left:13px;padding:17px 20px}.insight p{font-size:12px}.scene-caption{font-size:10px}.scene-bottom{display:block;margin-top:27px;padding-top:18px}.scene-tabs{margin-top:14px;justify-content:space-between;gap:10px}.scene-tabs button{font-size:11px}.site-closing{display:block;padding:19px 0 40px}.site-closing p{font-size:24px}.site-closing a{display:inline-flex;margin-top:17px;font-size:11px}.site-footer{padding:24px 0;gap:15px}.site-footer p{display:none}.site-footer .wordmark>span{font-size:21px}.site-footer>span{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}