:root{font-family:Arial,PingFang SC,Microsoft YaHei,sans-serif;color:#171715;background:#eeeadd;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px;background:linear-gradient(90deg,rgba(23,23,21,.04) 1px,transparent 1px),linear-gradient(rgba(23,23,21,.04) 1px,transparent 1px),#eeeadd;background-size:24px 24px}button,input,select,textarea{font:inherit}.topbar{height:66px;border-bottom:2px solid #171715;background:#f8f5e9;display:flex;align-items:center;padding:0 clamp(18px,4vw,64px);gap:32px;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-weight:900;font-size:19px}.logo{width:28px;height:28px;border:2px solid;display:flex;align-items:end;gap:3px;padding:4px;transform:rotate(-4deg)}.logo i{display:block;width:4px;background:#ff6038}.logo i:nth-child(1){height:8px}.logo i:nth-child(2){height:16px}.logo i:nth-child(3){height:12px}.topbar p{font-size:13px;color:#66645c;margin:0;flex:1}.text-button{border:0;background:none;text-decoration:underline;text-underline-offset:4px;font-weight:700;cursor:pointer}main{width:min(1260px,calc(100% - 36px));margin:auto}.intro{padding:68px 0 46px;display:grid;grid-template-columns:1.35fr .65fr;align-items:end;gap:50px}.index{font:700 11px ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em}.intro h1{font-size:clamp(46px,7vw,94px);line-height:.9;letter-spacing:-.065em;margin:20px 0 0;font-weight:900}.intro h1 em{font-style:normal;color:#ff6038;-webkit-text-stroke:2px #171715;text-shadow:4px 4px 0 #171715}.intro p{font-size:16px;line-height:1.75;margin:0;border-left:4px solid #ff6038;padding-left:22px;max-width:430px}.panel{border:2px solid #171715;background:#f8f5e9;box-shadow:6px 6px #171715}.workbench{display:grid;grid-template-columns:1fr 1fr;gap:24px}.panel-head{height:70px;border-bottom:2px solid #171715;display:flex;align-items:center}.panel-head>span{height:100%;width:68px;display:grid;place-items:center;border-right:2px solid #171715;background:#ff6038;font:900 13px ui-monospace,monospace}.panel-head>div{padding:0 18px}.panel-head h2{font-size:16px;margin:0 0 5px;text-transform:uppercase}.panel-head small{font-size:11px;color:#747167}.source-panel textarea{display:block;width:100%;height:370px;resize:none;border:0;border-bottom:2px solid #171715;background:#20201d;color:#e8e4d8;padding:22px;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;outline:none}.source-panel textarea:focus{box-shadow:inset 0 0 0 3px #ff6038}.status{height:40px;display:flex;align-items:center;padding:0 18px;font:700 11px ui-monospace,monospace;color:#55534d}.status span{width:8px;height:8px;border-radius:50%;background:#45a56b;margin-right:9px}.status.error{color:#b32e16}.status.error span{background:#ff6038}.canvas-wrap{height:412px;padding:36px;position:relative;background:#d8d3c5;overflow:hidden}.canvas{height:100%;display:grid;place-items:center;background-color:#f8f5e9;background-image:linear-gradient(45deg,#ddd8cb 25%,transparent 25%),linear-gradient(-45deg,#ddd8cb 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd8cb 75%),linear-gradient(-45deg,transparent 75%,#ddd8cb 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border:2px solid #171715;box-shadow:inset 0 0 0 8px #ffffff73}.canvas img{display:block;max-width:76%;max-height:76%;filter:drop-shadow(4px 5px 0 rgba(23,23,21,.12))}.canvas>span{font:700 12px ui-monospace,monospace;color:#817e74}.canvas.invalid{outline:5px solid rgba(255,96,56,.4)}.rulers{position:absolute;background:repeating-linear-gradient(90deg,#171715 0 1px,transparent 1px 12px)}.ruler-x{height:6px;top:20px;left:36px;right:36px}.ruler-y{width:6px;left:20px;top:36px;bottom:36px;background:repeating-linear-gradient(#171715 0 1px,transparent 1px 12px)}.controls{margin-top:24px}.control-grid{display:grid;grid-template-columns:repeat(6,1fr);padding:24px;gap:20px}.control-grid>label,.size-control{display:flex;flex-direction:column;gap:11px}.control-grid b,.size-control>b{font-size:11px;text-transform:uppercase;letter-spacing:.08em}.control-grid output{float:right;font:700 11px ui-monospace,monospace;color:#ff6038}.color-input{display:flex;border:2px solid;height:43px;background:#fff;align-items:center}.color-input input{border:0;width:43px;height:100%;padding:3px;background:transparent}.color-input code{font:700 12px ui-monospace,monospace;padding-left:8px}.control-grid select,.size-control input{height:43px;border:2px solid;background:#fff;padding:0 10px;font-size:12px;font-weight:700;border-radius:0}.control-grid input[type=range]{accent-color:#ff6038;height:43px;width:100%}.size-control{grid-column:span 1}.size-control>div{display:flex}.size-control label{height:43px;border:2px solid;display:flex;align-items:center;background:#fff;min-width:0}.size-control label span{font:900 10px ui-monospace,monospace;padding-left:8px}.size-control input{border:0;width:62px;padding:0 5px}.size-control button{border:2px solid;border-left:0;border-right:0;background:#d8d3c5;width:32px;cursor:pointer}.size-control button.active{background:#ff6038}.exports{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0 70px}.output-card{border:2px solid #171715;box-shadow:6px 6px #171715;padding:24px;min-width:0}.output-card.dark{background:#20201d;color:#f8f5e9}.output-card.light{background:#ff6038}.output-card>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px}.output-card h2{font-size:17px;margin:0}.output-card>div>span{font:800 11px ui-monospace,monospace}.output-card button{border:2px solid currentColor;padding:9px 13px;background:transparent;color:inherit;font-size:11px;font-weight:900;cursor:pointer}.output-card button:disabled{opacity:.4;cursor:not-allowed}.output-card textarea{margin-top:20px;width:100%;height:152px;resize:none;border:1px solid #7b786f;padding:15px;background:#111;color:#d8ff71;font:11px/1.6 ui-monospace,monospace}.output-card.light textarea{background:#f8f5e9;color:#171715;border:2px solid}.output-card p{font-size:11px;margin:10px 0 0}.output-card p code{background:#171715;color:#fff;padding:2px 4px}footer{border-top:2px solid #171715;background:#171715;color:#eeeadd;display:flex;justify-content:space-between;padding:24px clamp(18px,4vw,64px);font:700 10px ui-monospace,monospace;letter-spacing:.1em}@media(max-width:980px){.control-grid{grid-template-columns:repeat(3,1fr)}.intro{grid-template-columns:1fr}.intro p{max-width:560px}.workbench,.exports{grid-template-columns:1fr}.source-panel textarea{height:290px}.canvas-wrap{height:340px}}@media(max-width:600px){main{width:min(100% - 20px,1260px)}.topbar{height:58px;padding:0 12px}.topbar p{display:none}.brand{font-size:16px}.intro{padding:42px 5px 30px;gap:28px}.intro h1{font-size:48px}.intro h1 em{-webkit-text-stroke:1px #171715;text-shadow:3px 3px 0 #171715}.workbench{gap:16px}.panel{box-shadow:4px 4px #171715}.panel-head{height:62px}.panel-head>span{width:55px}.canvas-wrap{height:300px;padding:28px}.ruler-x{left:28px;right:28px;top:16px}.ruler-y{left:16px;top:28px;bottom:28px}.control-grid{grid-template-columns:1fr 1fr;padding:16px;gap:16px}.size-control{grid-column:span 2}.size-control input{width:100%}.size-control label{flex:1}.exports{gap:16px;margin-bottom:35px}.output-card{padding:18px}.output-card>div{grid-template-columns:auto 1fr}.output-card button{grid-column:1/-1;width:100%}footer{gap:15px;flex-direction:column;padding:20px}}