:root{--paper:#f7f4ee;--surface:#fffcf7;--ink:#38323e;--muted:#827b86;--line:#e7e0d9;--purple:#796695;--purple-deep:#65517f;--purple-pale:#eee8f3;--sage:#e9eddf;--radius:20px;font-family:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select,canvas{touch-action:manipulation}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #b9a2d4;outline-offset:4px}[hidden]{display:none!important}.app-shell{max-width:1512px;margin:auto;padding:0 48px}.site-header{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:13px;align-items:center;font-size:15px;font-weight:750;letter-spacing:2px}.brand small{display:block;margin-top:7px;font-size:11px;letter-spacing:1.5px;font-weight:400;color:var(--muted)}.brand-mark{color:var(--purple);font-size:43px;line-height:1}.back-link{font-size:12px;color:var(--muted)}.back-link:hover{color:var(--purple)}.page-intro{padding:49px 0 38px;display:flex;align-items:center;justify-content:space-between;gap:30px}.eyebrow{font-size:10px;letter-spacing:2.1px;font-weight:700;color:var(--purple);margin:0 0 13px}h1{font-size:37px;letter-spacing:1px;line-height:1.4;margin:0;font-weight:750}h1 span{color:#b39b71;font-size:41px;display:inline-block;margin-left:18px}.intro-copy{font-size:14px;line-height:1.9;color:var(--muted);margin:15px 0 0}.intro-stamp{border-left:1px solid var(--line);padding:8px 0 8px 38px;margin-right:22px;min-width:211px}.intro-stamp strong{font-size:46px;font-weight:450;letter-spacing:1px;line-height:1}.intro-stamp strong span{font-size:14px;margin-left:8px;letter-spacing:1px}.intro-stamp p{font-size:12px;color:var(--muted);margin:15px 0}.mini-tag{font-size:9px;letter-spacing:1.7px;color:#a89aab}.motion-panel,.customize-panel,.stage-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.motion-panel{padding:28px 28px 18px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:24px;min-width:0}.panel-heading .eyebrow{margin-bottom:8px;font-size:9px;letter-spacing:1.8px}h2{font-size:20px;letter-spacing:.5px;margin:0;line-height:1.5}.action-tabs{display:flex;padding:5px;border-radius:11px;background:#f2eee8;gap:3px}.action-tabs button{border:0;background:none;padding:11px 20px;border-radius:8px;color:#817687;font-size:13px;white-space:nowrap}.action-tabs button small{font-size:10px;margin-left:6px;color:#a497ab}.action-tabs button.selected{color:#645277;background:white;box-shadow:0 2px 7px #74658112;font-weight:700}.direction-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.direction-card{position:relative;overflow:hidden;border:1px solid #e9e3e2;border-radius:13px;background:#f6f2ed;min-width:0}.direction-card:nth-child(2){background:#eff0e8}.direction-card:nth-child(3){background:#eeedf3}.direction-card:nth-child(4){background:#f0ece6}.card-label{display:flex;align-items:center;gap:9px;margin:17px 17px 0}.card-label>span{font-size:9px;color:#b3a9ac;letter-spacing:1px}h3{font-size:13px;margin:0;font-weight:650}h3 small{font-size:10px;color:#99919b;font-weight:400;margin-left:5px}.card-label>b{margin-left:auto;font-size:14px;color:#918592;font-weight:400}.sprite-space{display:flex;align-items:center;justify-content:center;min-height:294px;background-image:radial-gradient(#c2b9c257 .8px,transparent .8px);background-size:16px 16px;background-position:8px 8px;margin:8px 0 0;overflow:hidden}.sprite-space canvas{width:288px;height:288px;image-rendering:pixelated;image-rendering:crisp-edges;flex-shrink:0}.direction-word{font-size:9px;letter-spacing:2.5px;color:#a497a3;display:block;text-align:center;margin:0 0 15px}.playback-toolbar{display:flex;align-items:center;gap:18px;margin-top:25px;min-width:0}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:1px solid transparent;font-size:12px;font-weight:600;padding:13px 18px;min-height:44px;white-space:nowrap;transition:background .15s,transform .15s}.button:active{transform:translateY(1px)}.button-primary{background:var(--purple);color:white;border-color:var(--purple)}.button-primary:hover{background:var(--purple-deep)}.button-quiet{background:#f1ede8;color:#786785;border-color:#ece5e4}.playback-button{min-width:101px}.frame-control{flex:1;min-width:120px;margin-right:10px}.frame-control label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);gap:12px}.frame-control output{font-variant-numeric:tabular-nums;letter-spacing:1px;font-size:10px;color:var(--purple)}input[type=range]{width:100%;accent-color:var(--purple);height:16px;margin:7px 0 0;cursor:pointer}.playback-meta{min-width:143px;display:flex;flex-direction:column;gap:9px;align-items:flex-start}.status-pill{font-size:10px;color:#8d8294;white-space:nowrap;display:flex;gap:7px;align-items:center}.status-pill i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7f9d7e}.status-pill.paused i{background:#bdad93}.loop-label{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px;white-space:nowrap}.loop-label input{accent-color:var(--purple);width:12px;height:12px;margin:0}.motion-note{font-size:10px;line-height:1.8;margin:15px 0 0;color:#a095a1}.lower-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:22px;margin-top:24px}.customize-panel,.stage-panel{padding:26px;min-width:0}.text-button{font-size:11px;color:var(--purple);background:none;border:0;padding:7px}.part-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px 12px}.part-field{min-width:0}.part-field label{display:block;font-size:11px;margin-bottom:8px;color:#675c6a}.part-field label span{font-size:8px;letter-spacing:.9px;color:#ab9fb0;display:block;margin-top:4px}.part-field select{display:block;width:100%;min-width:0;font-size:11px;padding:11px 7px;border:1px solid #e5dddf;border-radius:8px;color:#675a72;background:#fffefa;cursor:pointer}.customize-actions{display:flex;align-items:center;gap:17px;margin-top:24px;flex-wrap:wrap}.customize-actions>span{font-size:10px;color:#a095a1;line-height:1.7}.small-note{font-size:10px;color:#a095a1;line-height:1.8;margin:15px 0 0}.stage-panel .panel-heading{margin-bottom:17px}.stage-badge{font-size:10px;color:#897694;white-space:nowrap;padding:6px 9px;border:1px solid #e8dfe9;border-radius:7px;background:#f6f0f7}.stage-wrap{position:relative;display:flex;justify-content:center;border:1px solid #dadfce;border-radius:11px;overflow:hidden;background:#e4ead6}.stage-wrap canvas{display:block;width:100%;max-width:768px;height:auto;image-rendering:pixelated;image-rendering:crisp-edges;outline:none;cursor:crosshair}.stage-wrap:focus-within{outline:3px solid #c2afd4;outline-offset:3px}.stage-focus-hint{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);font-size:10px;line-height:1.5;white-space:nowrap;background:#fffdf0d9;color:#7c826c;padding:5px 11px;border:1px solid #d1d8be;border-radius:20px;pointer-events:none;transition:opacity .15s}.stage-wrap:focus-within .stage-focus-hint{opacity:0}.stage-controls{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:15px;flex-wrap:wrap}.keyboard-guide{display:flex;gap:14px;flex-wrap:wrap;color:#9d909f;font-size:10px;line-height:1.7}.keyboard-guide>span{white-space:nowrap}kbd{display:inline-block;font:9px ui-monospace,SFMono-Regular,monospace;background:#f1eceb;border:1px solid #e8e0df;color:#8f7e97;padding:1px 3px;border-radius:3px;margin-right:2px}.touch-controls{display:flex;gap:4px}.touch-controls button{border:1px solid #e5dfd8;background:#f5f1ea;border-radius:6px;padding:5px 8px;font-size:11px;color:#8d8290;min-width:27px;touch-action:none;user-select:none}.touch-controls button:active{background:#e2d8ea}.touch-controls #stage-attack{padding:5px 10px;color:var(--purple);background:#f0e8f5}.export-panel{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px 35px;margin:26px 0 18px;background:#ece6f0;border:1px solid #e4dbe9;border-radius:var(--radius)}.export-panel h2{font-size:22px}.export-panel p:not(.eyebrow){font-size:12px;line-height:1.8;color:#93829e;margin:11px 0 0}.export-spec{display:flex;gap:19px;margin-top:20px;flex-wrap:wrap}.export-spec span{font-size:10px;color:#aa9cb1;white-space:nowrap}.export-spec strong{font-size:12px;font-weight:650;color:#796586;margin-right:5px;letter-spacing:.3px}.export-actions{text-align:center;flex-shrink:0}.export-actions .button{padding:15px 23px}.export-actions p{font-size:10px!important}.example-links{display:flex;gap:17px;justify-content:center;font-size:10px;color:#826d8d;margin-top:17px}.example-links a:hover{text-decoration:underline}.sheet-panel{background:var(--surface);border:1px solid var(--line);border-radius:13px;overflow:hidden}.sheet-panel summary{cursor:pointer;padding:21px 26px;display:flex;align-items:center;justify-content:space-between;font-size:12px;list-style:none;color:#817087;gap:20px}.sheet-panel summary::-webkit-details-marker{display:none}.sheet-panel summary small{font-size:10px;font-weight:400;color:#aaa0ac;margin-left:16px}.sheet-panel summary b{font-weight:400;font-size:19px}.sheet-panel[open] summary b{transform:rotate(45deg)}.sheet-preview-content{border-top:1px solid var(--line);padding:27px;display:flex;gap:39px;justify-content:center;align-items:flex-start}.sheet-preview-wrap{background-color:white;background-image:linear-gradient(45deg,#ede9ed 25%,transparent 25%),linear-gradient(-45deg,#ede9ed 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ede9ed 75%),linear-gradient(-45deg,transparent 75%,#ede9ed 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;max-width:100%;min-width:0;border:1px solid var(--line)}.sheet-preview-wrap canvas{width:384px;max-width:100%;height:auto;display:block;image-rendering:pixelated;image-rendering:crisp-edges}.sheet-legend{padding-top:16px;max-width:265px}.sheet-legend p:not(.eyebrow){font-size:11px;line-height:1.8;color:#9a8c9e;margin-bottom:18px}.sheet-legend strong{display:block;color:#75667e;font-weight:600;margin-bottom:2px}.sheet-legend>span{font-size:10px;line-height:1.9;color:#afa1b3;display:block;border-top:1px solid var(--line);padding-top:15px}.scope-note{font-size:10px;line-height:1.9;color:#b0a4b3;margin:18px 4px 40px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:24px 0 31px;font-size:9px;color:#aa9caf;letter-spacing:1.5px;gap:20px}footer a{font-size:10px;letter-spacing:0}footer span:nth-child(2){font-size:8px;letter-spacing:1.4px}.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);padding:14px 20px;color:white;background:#51425ee8;border-radius:12px;font-size:12px;max-width:calc(100vw - 40px);text-align:center;box-shadow:0 8px 30px #4e385733;z-index:5}
@media(max-width:1350px){.app-shell{padding:0 36px}.sprite-space{min-height:220px}.sprite-space canvas{width:192px;height:192px}.lower-grid{grid-template-columns:1fr 1.15fr}.part-controls{gap:16px 10px}.customize-panel,.stage-panel{padding:23px}.stage-controls{gap:10px}.stage-controls .keyboard-guide{gap:9px}.customize-actions>span{font-size:9px}.card-label{margin:16px 13px 0}}
@media(max-width:1050px){.app-shell{padding:0 28px}.motion-panel{padding:23px 20px 16px}.direction-grid{gap:10px}.card-label h3 small{display:none}.sprite-space{min-height:210px}.lower-grid{grid-template-columns:1fr 1fr;gap:18px}.part-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.customize-panel,.stage-panel{padding:22px}.panel-heading .eyebrow{font-size:8px;letter-spacing:1.1px}.stage-panel .panel-heading{align-items:flex-start}.stage-badge{font-size:9px;padding:5px 6px}.stage-panel h2,.customize-panel h2{font-size:18px}.stage-wrap{margin-top:27px}.stage-controls{margin-top:20px}.stage-controls .keyboard-guide{gap:10px}.touch-controls button{padding:8px 11px;min-width:32px}.intro-stamp{margin-right:0;padding-left:28px;min-width:195px}h1{font-size:32px}.export-panel{padding:28px}.export-panel h2{font-size:20px}.export-spec{gap:12px}.export-actions .button{padding:14px 17px}}
@media(max-width:850px){.direction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sprite-space{min-height:215px}.card-label h3 small{display:inline}.card-label{margin:17px 19px 0}.motion-panel .panel-heading{align-items:flex-start}.action-tabs button{padding:10px 14px}.action-tabs button small{display:none}.lower-grid{grid-template-columns:1fr}.part-controls{grid-template-columns:repeat(3,minmax(0,1fr))}.stage-wrap{margin-top:0}.stage-wrap canvas{width:100%;max-width:768px}.stage-controls{margin-top:16px}.stage-panel .panel-heading{align-items:center}.playback-toolbar{gap:13px;flex-wrap:wrap}.playback-meta{min-width:128px}.playback-button{min-width:89px;padding:12px}.export-panel{align-items:flex-start;flex-direction:column}.export-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;text-align:left}.export-actions p{width:100%;margin:0!important;order:3}.example-links{margin:0;gap:13px}.page-intro{gap:18px}h1{font-size:29px}h1 span{font-size:30px;margin-left:6px}.intro-stamp{padding-left:22px;min-width:165px}.intro-stamp strong{font-size:39px}.intro-stamp p{font-size:10px}.intro-copy{font-size:12px}.sheet-preview-content{gap:22px;padding:22px}.sheet-legend{max-width:210px}.sheet-panel summary small{display:block;margin:8px 0 0}footer span:nth-child(2){display:none}}
@media(max-width:570px){.app-shell{padding:0 16px}.site-header{height:84px}.brand{font-size:12px;letter-spacing:1.5px;gap:9px}.brand-mark{font-size:34px}.brand small{font-size:9px;letter-spacing:1px}.back-link{font-size:10px}.page-intro{padding:31px 2px 29px}.page-intro .eyebrow{font-size:8px;letter-spacing:1.4px}.intro-stamp{display:none}h1{font-size:27px;letter-spacing:.2px}.intro-copy{font-size:12px;line-height:1.8;margin-top:12px}.motion-panel{padding:20px 12px 15px;border-radius:15px}.motion-panel>.panel-heading{flex-direction:column;gap:15px;margin:0 5px 18px}.motion-panel .panel-heading>div:first-child{display:flex;flex-direction:column}.panel-heading .eyebrow{font-size:8px}.action-tabs{width:100%;padding:4px}.action-tabs button{flex:1;font-size:12px;padding:10px 8px}.action-tabs button small{display:inline;font-size:9px}.direction-grid{gap:9px}.direction-card{border-radius:10px}.card-label{margin:12px 11px 0;gap:6px}h3{font-size:11px}.card-label>span{font-size:8px}.card-label h3 small{display:none}.sprite-space{min-height:190px;margin-top:4px;overflow:hidden}.direction-word{font-size:8px;margin-bottom:13px;letter-spacing:2px}.playback-toolbar{margin:21px 5px 0;column-gap:12px;row-gap:16px}.frame-control{margin:0;min-width:90px}.playback-meta{flex-direction:row;align-items:center;justify-content:space-between;width:100%;gap:12px}.motion-note{margin:14px 5px 0;font-size:9px}.playback-toolbar #replay-attack{order:3;width:100%;padding:10px;min-height:36px}.lower-grid{margin-top:18px;gap:18px}.customize-panel,.stage-panel{padding:22px 18px;border-radius:15px}.part-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 12px}.part-field label span{display:inline;margin-left:6px;font-size:7px}.customize-actions{gap:12px;margin-top:23px}.customize-actions>span{font-size:9px}.customize-actions .button{font-size:11px;padding:12px 14px}.stage-controls .keyboard-guide{font-size:9px}.touch-controls{width:100%;gap:7px}.touch-controls button{flex:1;padding:10px}.stage-panel .panel-heading{gap:10px}.stage-badge{font-size:8px}.stage-panel .eyebrow{letter-spacing:.8px}.stage-focus-hint{font-size:8px;padding:4px 8px;bottom:6px}.export-panel{margin-top:20px;padding:25px 22px;gap:22px;border-radius:15px}.export-panel .eyebrow{font-size:8px;letter-spacing:1.5px}.export-panel h2{font-size:19px}.export-panel p:not(.eyebrow){font-size:11px}.export-spec{gap:12px;margin-top:18px}.export-spec span{font-size:8px}.export-spec strong{font-size:10px;margin-right:4px}.export-actions{display:block;width:100%}.export-actions .button{width:100%;font-size:11px;padding:14px 10px}.export-actions p{margin-top:10px!important;font-size:9px!important;text-align:center}.example-links{justify-content:center;margin-top:15px;font-size:9px;gap:18px}.sheet-panel summary{padding:20px;font-size:11px}.sheet-panel summary small{font-size:9px;line-height:1.6}.sheet-preview-content{flex-direction:column;align-items:center;padding:16px}.sheet-legend{width:100%;max-width:none;padding:10px 3px}.sheet-legend .eyebrow{margin-bottom:13px}.sheet-legend p:not(.eyebrow){margin-bottom:11px;font-size:10px}.sheet-legend strong{display:inline-block;width:75px}.scope-note{font-size:9px;margin-bottom:28px}footer{padding:20px 2px 26px;font-size:8px;gap:10px}footer a{font-size:9px}}
@media(max-width:370px){.app-shell{padding:0 10px}.motion-panel{padding-left:9px;padding-right:9px}.direction-grid{gap:7px}.sprite-space{min-height:185px}.card-label{margin-left:9px;margin-right:9px}.card-label b{display:none}.part-field label span{display:block;margin:4px 0 0}.customize-actions>span{width:100%}.export-panel{padding:23px 18px}.export-spec{gap:9px}.export-spec strong{display:block;margin-bottom:4px}.stage-controls .keyboard-guide{font-size:8px}.brand{font-size:11px}.back-link{font-size:9px}h1{font-size:25px}.playback-meta{gap:8px}.status-pill,.loop-label{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Keep the 192 px previews whole; never crop an attack at narrow card widths. */
@media(min-width:851px) and (max-width:1050px){.direction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:470px){.direction-grid{grid-template-columns:1fr}.sprite-space{min-height:215px}.card-label h3 small{display:inline}.card-label b{display:block}}

/* Standalone pixel studio navigation and transparent still export. */
html{scroll-behavior:smooth}h2[id]{scroll-margin-top:24px}.download-buttons{display:flex;flex-direction:column;gap:10px}.example-links{flex-wrap:wrap;row-gap:10px}.export-actions{max-width:100%}.download-buttons .button{max-width:100%}
@media(max-width:850px){.download-buttons{width:100%}.export-actions{width:100%}.download-buttons .button{width:100%}.example-links{width:100%;justify-content:flex-start}}
@media(max-width:570px){.example-links{justify-content:center;column-gap:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}