@font-face{font-family:'Site Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('../assets/fonts/SiteSans.woff2') format('woff2')}
:root{color-scheme:light;--paper:#fbfcfa;--ink:#292b2d;--muted:#606569;--line:#d9ddd7;--soft:#edf0eb;--edge:24px;--work-size:min(840px,calc(100vw - var(--edge)*2),calc(100svh - 196px))}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 'Site Sans','PingFang SC','Microsoft YaHei',sans-serif}button,input{font:inherit}button{color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:9px 15px;min-height:44px;cursor:pointer}button:hover{background:var(--soft);border-color:#969e96}button:active{background:#e1e5df}button:disabled{opacity:.5;cursor:default}a{color:inherit;text-underline-offset:4px}a:hover{text-decoration-thickness:2px}:focus-visible{outline:2px solid #30527b;outline-offset:4px}::selection{background:#dce3e9;color:#17232b}input{caret-color:#30527b}html{scrollbar-width:thin;scrollbar-color:#a6afa4 var(--paper)}[hidden]{display:none!important}
.work-header{width:var(--work-size);margin:auto;padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}h1{font-weight:600;font-size:24px;line-height:1.3;margin:0;text-wrap:balance}.work-header a{display:flex;gap:8px;align-items:center;text-decoration:none;white-space:nowrap}.work-header svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.container{width:var(--work-size);margin:auto}.canvas-area{width:100%}#canvas-container{position:relative;width:100%;aspect-ratio:1;background:#141413;overflow:hidden}#canvas-container canvas{display:block;width:100%!important;height:auto!important}.loading,#work-error,.no-script{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:#faf9f5;margin:0;padding:24px;text-align:center}#work-error p{margin:0}body[data-render-state=failed] #canvas-container canvas{display:none}
.work-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;padding-top:16px;align-items:start}.primary{justify-self:start;background:var(--ink);border-color:var(--ink);color:#fff}.primary:hover{background:#40464b;border-color:#40464b;color:#fff}.adjustments-toggle{grid-column:2;grid-row:1;list-style:none;display:flex;align-items:center;justify-content:center;gap:8px}.adjustments-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.adjustments-toggle[aria-expanded=true] svg{transform:rotate(180deg)}.download{grid-column:3;grid-row:1}.adjustment-panel{grid-column:1/-1;grid-row:2;border-top:1px solid var(--line);padding:25px 0 8px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:26px 32px;min-width:0}.adjustment-basics,.shape-controls{min-width:0}.seed-section>label{display:block;margin-bottom:8px}.seed-section>input{width:100%;height:44px;text-align:center;border:1px solid #959f94;border-radius:3px;background:var(--paper);font-family:monospace;font-variant-numeric:tabular-nums;font-size:18px;padding:6px}.seed-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}.seed-controls button{padding-inline:8px}.palette-section{border:0;padding:0;margin:25px 0}.palette-section legend{padding:0;margin-bottom:10px}.palette-choices{display:flex;gap:8px}.palette-choices button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding-inline:10px}.palette-choices button[aria-pressed=true]{border-color:var(--ink);background:var(--soft)}.swatches{display:flex;gap:2px}.swatches i{width:7px;height:16px;display:block}.original i:nth-child(1){background:#141413}.original i:nth-child(2){background:#d97757}.original i:nth-child(3){background:#6a9bcc}.starfield i:nth-child(1){background:#30527b}.starfield i:nth-child(2){background:#cc2445}.starfield i:nth-child(3){background:#e7682f}
.shape-controls{border:0;padding:0;margin:0}.shape-controls legend{padding:0;margin-bottom:16px;font-weight:600}.control-group{margin-bottom:18px}.control-group label{display:block}.slider-container{display:flex;align-items:center;gap:16px}.slider-container input{min-width:0;flex:1;accent-color:#30527b;height:28px}.slider-container output{width:42px;text-align:right;font:13px/1.6 monospace;color:var(--muted);font-variant-numeric:tabular-nums}.color-controls{display:grid;gap:12px;padding:6px 0}.color-controls label{display:grid;grid-template-columns:1fr 44px 75px;align-items:center;gap:9px}.color-controls input{width:44px;height:44px;padding:0;border:1px solid var(--line);background:none;cursor:pointer}.color-controls output{font:13px/1.6 monospace;color:var(--muted)}.motion-control{display:flex;align-items:center;gap:10px}.motion-control input{width:20px;height:20px;accent-color:#30527b;margin:0;flex-shrink:0}#motion-note{font-size:13px;color:var(--muted);margin:12px 0 0}.panel-actions{grid-column:1/-1;display:flex;justify-content:space-between;gap:12px}footer{width:var(--work-size);margin:0 auto;padding:20px 0 14px;color:var(--muted);font-size:13px;text-align:right}footer a{text-decoration:none}footer a:hover{text-decoration:underline}
@media(max-width:600px){:root{--edge:16px;--work-size:min(calc(100vw - var(--edge)*2),calc(100svh - 196px))}.work-header{padding:18px 0;gap:12px}h1{font-size:22px}.work-controls{grid-template-columns:1fr 1fr;gap:10px;padding-top:14px}.primary{grid-column:1/-1;width:100%;justify-self:stretch}.adjustments-toggle{grid-column:1;grid-row:2}.download{grid-column:2;grid-row:2}.adjustment-panel{grid-row:3;grid-template-columns:1fr;padding-top:22px;gap:26px}.panel-actions{grid-column:1}footer{padding-top:18px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* The work remains self-contained inside its category's fixed environment. */
body[data-cover=works]{background:#f1f3ef}
.work-frame.site-frame{display:block;position:relative;z-index:1;width:var(--work-size);min-height:100dvh;margin:auto;padding:0}
.work-frame::before{content:'';position:absolute;inset:0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent,var(--paper) 64px,var(--paper) calc(100% - 64px),transparent)}
.work-controls{position:relative;background:var(--paper)}
@media(max-width:700px){.work-frame::before{inset:0 -14px;background:linear-gradient(90deg,transparent,var(--paper) 24px,var(--paper) calc(100% - 24px),transparent)}}