@font-face{font-family:"ZCOOL XiaoWei Local";src:url("https://fonts.lightcatkenya.com/fonts/shiyu/zcool-xiaowei-shiyu.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jingfeng Zhongshan Seal Local";src:url("https://fonts.lightcatkenya.com/fonts/shiyu/jingfeng-color-names.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"ShiYu Glyph Patch";src:url("https://fonts.lightcatkenya.com/fonts/shiyu/shiyu-glyph-patch.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
.focus-inscription b{font-family:"ShiYu Glyph Patch","Jingfeng Zhongshan Seal Local","ZCOOL XiaoWei Local","ZCOOL XiaoWei","STKaiti","KaiTi",serif!important}
:root{
  --ink:#eee8dc;
  --muted:#8f928b;
  --gold:#cda84f;
  --line:rgba(238,232,220,.14);
  --mask:url("./assets/wheel-feather-mask-f3.png");
  --brightness:.78;
  --contrast:1.25;
  --strength:1;
  color:var(--ink);
  background:#111513;
  font-family:"Songti SC","STSong","Noto Serif CJK SC",serif
}
*{box-sizing:border-box}
html,body{width:100%;min-width:320px;min-height:100%;margin:0;overflow:hidden}
body{background:radial-gradient(circle at 53% 48%,#29302c 0,#171c19 43%,#0e1110 100%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
button,a{font:inherit;color:inherit}
.topbar{position:fixed;z-index:100;left:clamp(18px,3vw,46px);right:clamp(18px,3vw,46px);top:0;height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand i{width:36px;height:36px;display:grid;place-items:center;border-radius:48% 42% 51% 45%;background:#8f322c;color:#f4e8d9;font-style:normal;font-size:21px}.brand span{display:grid;gap:3px}.brand b{font-size:14px;font-weight:500;letter-spacing:.22em}.brand small{color:var(--muted);font-size:8px;letter-spacing:.15em}
.topbar nav{display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:3px}.topbar nav button{min-width:88px;padding:7px 14px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:8px;letter-spacing:.15em}.topbar nav .active{color:#171712;background:var(--gold)}.topbar nav button:disabled{opacity:.42}
.topbar>p{justify-self:end;margin:0;color:var(--muted);font:9px Georgia,serif;letter-spacing:.14em}.topbar>p span{color:var(--ink)}
.single-stage{position:relative;width:100vw;height:100vh;min-height:620px;overflow:hidden}
.single-stage::before,.single-stage::after{content:"";position:absolute;pointer-events:none;background:var(--line)}.single-stage::before{left:50%;top:72px;bottom:0;width:1px;opacity:.16}.single-stage::after{top:50%;left:0;right:0;height:1px;opacity:.12}
.stage-copy{position:absolute;z-index:30;left:clamp(28px,5.3vw,88px);top:50%;width:220px;transform:translateY(-42%);pointer-events:none}.stage-copy>p:first-child{margin:0 0 21px;color:var(--gold);font:8px Georgia,serif;letter-spacing:.22em}.stage-copy h1{margin:0 0 23px;font-size:clamp(48px,5vw,76px);font-weight:400;line-height:1.12;letter-spacing:.04em}.stage-copy>p:last-child{margin:0;color:var(--muted);font-size:9px;letter-spacing:.12em}
.wheel-viewport{position:absolute;inset:72px 0 0;outline:0;touch-action:none;cursor:grab}.wheel-viewport:active{cursor:grabbing}
.wheel-shell{--wheel-scale:.7;position:absolute;left:52%;top:50%;width:1100px;height:1100px;transform:translate(-50%,-50%);transition:left .9s cubic-bezier(.22,.72,.22,1),top .9s cubic-bezier(.22,.72,.22,1)}
.single-stage.selection-open .wheel-shell{left:39%}
.rotor{--rotation:0deg;position:absolute;inset:0;transform:scale(var(--wheel-scale)) rotate(var(--rotation));transform-origin:50% 50%;will-change:transform}
.wheel-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}.selection-open .hover-spoke{opacity:0!important}
.spoke{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--angle));pointer-events:none}
.leaf{position:absolute;left:0;top:0;width:var(--width);height:var(--height);padding:0;border:0;background:transparent;transform:translate(-50%,calc(-100% - var(--radius)));pointer-events:auto;cursor:pointer;outline:0}
.leaf-media{position:absolute;inset:0;isolation:isolate;transition:transform .45s cubic-bezier(.22,.72,.22,1),filter .35s ease,opacity .35s ease}
.hover-spoke{z-index:450;opacity:0;transition:opacity .16s ease;pointer-events:none}.hover-spoke.is-visible{opacity:1}.hover-leaf{pointer-events:none;filter:drop-shadow(0 8px 8px rgba(0,0,0,.38))}.hover-leaf .leaf-media{transform:translateY(-7px) scale(1.035);filter:brightness(1.07)}
.leaf img,.leaf-color{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.leaf-contrast{filter:grayscale(1) contrast(var(--contrast)) brightness(var(--brightness));mask:var(--mask) center/100% 100% no-repeat;-webkit-mask:var(--mask) center/100% 100% no-repeat}
.leaf-color{background:var(--leaf-color);opacity:var(--strength);mix-blend-mode:color;mask:var(--mask) center/100% 100% no-repeat;-webkit-mask:var(--mask) center/100% 100% no-repeat}
.hub{--hub-rotation:0deg;position:absolute;z-index:500;left:50%;top:50%;width:400px;height:400px;transform:translate(-50%,-50%) scale(var(--wheel-scale)) rotate(var(--hub-rotation));transform-origin:50% 50%;display:grid;place-items:center;pointer-events:none;will-change:transform;filter:drop-shadow(0 16px 19px rgba(0,0,0,.5))}.hub img{display:block;width:100%;height:100%;object-fit:contain}
.axis-mark{position:absolute;z-index:20;left:52%;top:86px;width:1px;height:38px;background:linear-gradient(var(--gold),transparent);transition:left .9s cubic-bezier(.22,.72,.22,1)}.axis-mark::before{content:"";position:absolute;left:-3px;top:-2px;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}.selection-open .axis-mark{left:39%}
.color-panel{position:absolute;z-index:60;right:clamp(34px,5vw,80px);top:50%;width:min(31vw,410px);height:min(78vh,720px);transform:translate(35px,-44%);display:grid;grid-template-columns:minmax(115px,42%) 1fr;gap:clamp(20px,2.5vw,40px);align-items:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .55s ease,transform .8s cubic-bezier(.22,.72,.22,1),visibility 0s linear .8s}
.selection-open .color-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,-44%);transition-delay:0s}
.close-panel{position:absolute;right:0;top:0;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:rgba(17,21,19,.58);color:var(--muted);cursor:pointer;transition:.25s}.close-panel:hover{color:var(--ink);border-color:var(--gold)}
.focus-feather{position:relative;width:100%;aspect-ratio:34/125;container-type:inline-size;filter:drop-shadow(0 24px 20px rgba(0,0,0,.38))}.focus-media{position:absolute;inset:0;isolation:isolate}.focus-media img,.focus-color{position:absolute;inset:0;width:100%;height:100%;display:block}.focus-contrast{filter:grayscale(1) contrast(var(--contrast)) brightness(var(--brightness));mask:var(--mask) center/100% 100% no-repeat;-webkit-mask:var(--mask) center/100% 100% no-repeat}.focus-color{background:var(--focus-color,#7a9b91);opacity:var(--strength);mix-blend-mode:color;mask:var(--mask) center/100% 100% no-repeat;-webkit-mask:var(--mask) center/100% 100% no-repeat}
.focus-inscription{position:absolute;z-index:5;left:50%;top:25%;bottom:15%;width:50cqw;transform:translateX(-50%);display:grid;grid-template-rows:1fr auto 1fr;place-items:center;color:#9f7d3f}.focus-inscription i{width:max(1px,.86cqw);height:100%;background:linear-gradient(transparent,rgba(119,88,35,.18) 12%,rgba(185,145,67,.78) 58%,rgba(92,65,23,.52))}.focus-inscription i:last-child{background:linear-gradient(rgba(92,65,23,.52),rgba(185,145,67,.78) 42%,rgba(119,88,35,.18) 88%,transparent)}.focus-inscription b{padding:8cqw 0;display:flex;flex-direction:column;align-items:center;gap:.43em;font-family:"Jingfeng Zhongshan Seal Local","ZCOOL XiaoWei Local","ZCOOL XiaoWei","STKaiti","KaiTi",serif;font-size:clamp(24px,28.2cqw,50px);font-weight:400;line-height:1}.focus-inscription b span{display:block;color:transparent;background:linear-gradient(90deg,#62471f 0%,#9b7737 23%,#c7a45d 46%,#ead18b 56%,#a47d39 73%,#5f431c 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:max(.32px,.24cqw) rgba(58,39,13,.78);filter:drop-shadow(0 -1px .45px rgba(40,24,7,.9)) drop-shadow(0 1px .4px rgba(250,224,148,.4));opacity:0;transform:translateY(var(--char-shift,0)) scale(.94);transition:opacity .58s ease,transform .72s cubic-bezier(.22,.72,.22,1)}.selection-open.inscription-ready .focus-inscription b span{opacity:1;transform:translateY(0) scale(1);transition-delay:var(--char-delay,0s)}
.color-meta{align-self:center}.color-meta #focus-pinyin{margin:0 0 9px;color:var(--gold);font:8px Georgia,serif;letter-spacing:.16em;text-transform:uppercase}.color-meta h2{margin:0;font-size:clamp(28px,3vw,44px);font-weight:400;line-height:1.2}.traditional{margin:7px 0 25px;color:var(--muted);font-size:11px;letter-spacing:.18em}.meta-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.meta-grid>*{min-width:0;padding:12px 11px;display:grid;gap:5px;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.018);text-align:left}.meta-grid button{cursor:pointer}.meta-grid span{color:var(--muted);font:7px Georgia,serif;letter-spacing:.12em}.meta-grid b{overflow:hidden;color:var(--ink);font-size:10px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}.close-hint{margin:15px 0 0;color:var(--muted);font-size:8px;line-height:1.7}
.color-panel{width:min(32vw,430px);grid-template-columns:minmax(120px,38%) minmax(0,1fr)}
.color-meta{min-width:0;max-height:100%;overflow-y:auto;scrollbar-width:none}.color-meta::-webkit-scrollbar{display:none}
.color-heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,190px);gap:15px;align-items:start}.color-title-copy{min-width:0}
.inline-color-tools{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:6px;min-width:0}.primary-color-chip,.complement-color-chip{width:100%;padding:0;overflow:hidden;border:1px solid rgba(219,190,119,.2);background:rgba(255,255,255,.018);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .22s ease,background .22s ease}.primary-color-chip:hover,.complement-color-chip:hover{border-color:rgba(219,190,119,.56);background:rgba(255,255,255,.038)}
.primary-color-chip{display:block;min-height:54px}.inline-color-plane{display:block;min-height:30px;background:#7a9b91;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.primary-color-chip .inline-color-plane{height:100%;min-height:54px}
.complement-inline{display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:3px;min-width:0}.complement-color-chip{display:grid;grid-template-rows:30px minmax(0,1fr);min-width:0}.complement-color-chip>span:last-child{display:grid;grid-template-columns:minmax(0,1fr);align-content:center;gap:1px;min-width:0;padding:4px 5px}.complement-color-chip small{display:none}.complement-color-chip b,.complement-color-chip em{grid-column:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.complement-color-chip b{font-size:8px;font-weight:400}.complement-color-chip em{color:rgba(239,232,216,.65);font:6px Georgia,serif;font-style:normal}
.complement-inline-actions{display:grid;gap:3px}.complement-inline-actions button{padding:0;border:1px solid rgba(205,168,79,.2);background:rgba(255,255,255,.018);color:rgba(239,232,216,.65);font:6px Georgia,serif;cursor:pointer}.complement-inline-actions button:hover{border-color:rgba(205,168,79,.52);color:var(--gold)}
.design-details{margin-top:10px;border-top:1px solid rgba(205,168,79,.18);border-bottom:1px solid rgba(205,168,79,.12)}.design-details summary{display:flex;align-items:center;justify-content:space-between;padding:9px 2px;color:rgba(239,232,216,.82);font-size:8px;letter-spacing:.12em;cursor:pointer;list-style:none}.design-details summary::-webkit-details-marker{display:none}.design-details summary::before{content:"＋";margin-right:8px;color:var(--gold);font-size:10px}.design-details[open] summary::before{content:"－"}.design-details summary span{margin-right:auto}.design-details summary small{color:var(--muted);font-size:6px;letter-spacing:.08em}.design-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(205,168,79,.12)}.design-grid>*{min-width:0;padding:8px;display:grid;gap:4px;border:0;border-right:1px solid rgba(205,168,79,.12);border-bottom:1px solid rgba(205,168,79,.12);background:rgba(255,255,255,.012);color:var(--ink);text-align:left}.design-grid>*:nth-child(even){border-right:0}.design-grid button{cursor:pointer}.design-grid span{color:var(--muted);font-size:6px;letter-spacing:.1em}.design-grid b{overflow:hidden;font:7px Georgia,serif;font-weight:400;text-overflow:ellipsis;white-space:nowrap}.design-grid small{color:var(--gold);font-size:6px}.design-grid .design-token{grid-column:1/-1;border-right:0}.design-grid .design-token b{font-size:6px}
.interaction-hint{position:absolute;z-index:25;left:50%;bottom:24px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid rgba(205,168,79,.1);border-radius:999px;background:rgba(13,17,15,.3);box-shadow:0 8px 28px rgba(0,0,0,.12);backdrop-filter:blur(5px);color:var(--muted);pointer-events:none}.interaction-hint span{display:flex;align-items:center;gap:5px;white-space:nowrap}.interaction-hint kbd{min-width:28px;padding:3px 6px;border:1px solid rgba(205,168,79,.2);border-radius:3px;background:rgba(239,232,216,.035);box-shadow:inset 0 1px rgba(255,255,255,.035);color:rgba(239,232,216,.78);font:7px Georgia,"Songti SC",serif;line-height:1;text-align:center}.interaction-hint em{color:rgba(239,232,216,.48);font-size:7px;font-style:normal;letter-spacing:.1em}.interaction-hint i{width:16px;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.copy-toast{position:fixed;z-index:1200;left:50%;bottom:65px;transform:translate(-50%,12px);padding:9px 15px;border:1px solid rgba(205,168,79,.35);background:rgba(13,16,15,.94);box-shadow:0 10px 30px rgba(0,0,0,.34);color:var(--gold);font-size:8px;letter-spacing:.15em;opacity:0;pointer-events:none;transition:.3s}.copy-toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){
  .topbar{height:62px;grid-template-columns:1fr auto}.topbar nav{display:none}.topbar>p{font-size:8px}.single-stage{min-height:560px}.stage-copy{left:18px;top:96px;width:auto;transform:none}.stage-copy>p:first-child,.stage-copy>p:last-child{display:none}.stage-copy h1{font-size:30px;line-height:1.15}.wheel-viewport{inset:62px 0 0}.wheel-shell{left:50%;top:45%}.single-stage.selection-open .wheel-shell{left:50%;top:29%}.axis-mark{left:50%;top:66px}.selection-open .axis-mark{left:50%}.color-panel{left:14px;right:14px;top:auto;bottom:17px;width:auto;height:39vh;min-height:260px;grid-template-columns:96px 1fr;transform:translateY(24px);gap:20px;padding:12px 8px 0;background:none;isolation:isolate}.color-panel::before{content:"";position:absolute;z-index:-1;left:-14px;right:-14px;top:-42vh;bottom:-30px;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(13,17,15,.025) 18%,rgba(13,17,15,.12) 34%,rgba(13,17,15,.38) 51%,rgba(13,17,15,.72) 66%,rgba(13,17,15,.94) 79%,#0d110f 91%)}.selection-open .color-panel{transform:none}.focus-feather{height:92%;width:auto;justify-self:center}.close-panel{top:4px;right:4px}.color-meta{padding-right:44px}.color-meta h2{font-size:28px}.traditional{margin-bottom:13px}.interaction-hint{bottom:13px;width:max-content}.selection-open .interaction-hint{opacity:0}.brand small{display:none}
}
@media(max-width:520px){.topbar{left:14px;right:14px}.brand i{width:32px;height:32px;font-size:18px}.brand b{font-size:12px}.stage-copy{top:82px}.topbar>p{letter-spacing:.06em}.color-panel{height:41vh}.meta-grid>*{padding:9px 8px}.close-hint{display:none}}
@media(max-width:900px){.color-panel{height:41vh;grid-template-columns:96px minmax(0,1fr)}.close-panel{top:-48px;right:2px}.color-meta{padding-right:12px}.color-heading{grid-template-columns:minmax(0,1fr) 150px;gap:10px}.primary-color-chip{min-height:52px}.primary-color-chip .inline-color-plane{min-height:52px}.complement-color-chip{grid-template-rows:28px minmax(0,1fr)}.inline-color-plane{min-height:28px}.selection-open .copy-toast{bottom:calc(41vh + 28px)}}
@media(min-width:601px) and (max-width:900px){.color-heading{grid-template-columns:minmax(0,1fr) 220px;gap:18px}.inline-color-tools{gap:8px}.primary-color-chip{min-height:62px}.primary-color-chip .inline-color-plane{min-height:62px}.complement-color-chip{grid-template-rows:34px minmax(0,1fr)}.inline-color-plane{min-height:34px}.complement-inline{grid-template-columns:minmax(0,1fr) 27px;gap:5px}.complement-color-chip>span:last-child{padding:6px 8px;gap:2px}.complement-color-chip b{font-size:10px}.complement-color-chip em{font-size:7px}.complement-inline-actions{gap:5px}.complement-inline-actions button{font-size:7px}}
@media(max-width:520px){.color-panel{height:41vh}.color-heading{grid-template-columns:minmax(0,1fr) 136px;gap:8px}.color-meta h2{font-size:25px}.traditional{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}