:root{font-family:Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;color:#111;background:#f3efe9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.app-shell{overflow:hidden}.site-head{height:76px;background:#e40722;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,3.4vw,64px);border-bottom:1px solid #ffffff75}.brand{text-decoration:none;font-size:28px;font-weight:1000;letter-spacing:-.1em;line-height:1}.brand span{color:#dfff42}.brand b{vertical-align:top;margin-left:5px;font:700 10px/1 monospace;letter-spacing:0}.head-id{font-size:11px;letter-spacing:.16em;font-weight:700}.head-id i{color:#dfff42;font-style:normal;margin-left:22px;font:700 10px monospace}.head-help{text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.05em;border-bottom:1px solid currentColor;padding-bottom:5px}.hero-line{min-height:410px;background:#e40722;color:#fff;display:flex;justify-content:space-between;align-items:end;gap:32px;padding:48px clamp(20px,3.4vw,64px) 50px;position:relative}.hero-line::before{content:"";position:absolute;top:29px;left:-2%;width:32%;height:25px;background:#dfff42;transform:rotate(-7deg);box-shadow:7px 7px 0 #131313}.hero-line h1{font-size:clamp(70px,9vw,160px);line-height:.91;letter-spacing:-.09em;margin:26px 0 0;font-weight:1000;text-shadow:4px 4px 0 #930019,8px 8px 0 #930019}.hero-line h1 em{font-style:normal;color:#dfff42}.eyebrow{display:inline-flex;align-items:center;gap:12px;font:800 11px/1 monospace;letter-spacing:.23em}.eyebrow i,.online-dot::before,.preview-head i{display:inline-block;content:"";width:8px;height:8px;border-radius:50%;background:#dfff42;box-shadow:0 0 0 4px #dfff4238}.hero-line p{margin:0 2vw 14px 0;max-width:300px;font-size:15px;line-height:1.95;font-weight:600}.hero-line p strong{color:#dfff42}.workbench{display:grid;grid-template-columns:minmax(310px,360px) minmax(0,1fr);background:#171717;color:#f6f4ee;min-height:800px}.editor{padding:28px 24px 34px clamp(20px,3.4vw,64px);border-right:1px solid #383838}.editor-top,.preview-head{height:35px;display:flex;align-items:start;justify-content:space-between;gap:12px;font:700 10px/1.2 monospace;letter-spacing:.14em}.editor-top{color:#aaa}.online-dot{color:#dfff42;white-space:nowrap}.online-dot::before{width:5px;height:5px;vertical-align:middle;margin-right:8px;box-shadow:none}.field-title{display:block;margin:20px 0 9px;color:#f8f8f8;font-size:15px;font-weight:900;letter-spacing:.04em}.field-title small{color:#888;font-size:10px;font-weight:600;margin-left:8px;letter-spacing:0}.editor textarea,.editor input[type=text],.editor input#subtitle{width:100%;border:1px solid #555;background:#232323;color:#f8f6ee;padding:13px 14px;outline:0;border-radius:0;transition:border-color .2s}.editor textarea{resize:vertical;min-height:88px;font-size:19px;line-height:1.4;font-weight:800}.editor input#subtitle{font-size:12px;height:45px}.editor textarea:focus,.editor input#subtitle:focus{border-color:#dfff42;box-shadow:0 0 0 2px #dfff4233}.field-meta,.speed-end{display:flex;justify-content:space-between;color:#838383;font:10px/1.5 monospace;margin-top:7px}.field-meta output{color:#dfff42}.rule{height:1px;background:#3d3d3d;margin:24px 0}.effect-list{display:grid;gap:5px}.effect{background:#252525;color:#fff;border:1px solid #454545;min-height:58px;padding:8px 13px;display:grid;grid-template-columns:33px 1fr 25px;align-items:center;gap:8px;text-align:left;transition:.2s}.effect:hover{border-color:#dfff42}.effect.active{background:#dfff42;border-color:#dfff42;color:#171717;transform:translateX(4px)}.effect-no{font:800 11px monospace;opacity:.6}.effect strong,.effect small{display:block}.effect strong{font-size:13px;letter-spacing:.05em}.effect small{font-size:10px;opacity:.62;margin-top:3px}.effect-mark{font-size:19px;text-align:center}.speed-head{display:flex;align-items:baseline;justify-content:space-between}.speed-head .field-title{margin:0 0 14px}.speed-head output{font:700 10px monospace;color:#dfff42}.editor input[type=range]{width:100%;height:7px;appearance:none;background:#565656;outline:0}.editor input[type=range]::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:#dfff42;border:4px solid #181818;box-shadow:0 0 0 1px #dfff42;cursor:ew-resize}.editor input[type=range]::-moz-range-thumb{width:11px;height:11px;background:#dfff42;border:3px solid #181818;box-shadow:0 0 0 1px #dfff42;cursor:ew-resize}.ratio-title{margin-top:25px}.ratio-list{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.ratio-list button{background:#252525;color:#ddd;border:1px solid #555;padding:10px 4px;font:800 13px monospace}.ratio-list button small{display:block;font:600 9px sans-serif;margin-top:3px;opacity:.58}.ratio-list button.active{background:#e40722;border-color:#e40722;color:#fff}.preview-column{min-width:0;padding:27px clamp(20px,3.4vw,64px) 34px 30px}.preview-head{color:#a7a7a7;align-items:center;margin-bottom:14px}.preview-head i{width:6px;height:6px;vertical-align:middle;margin-right:10px}.preview-head span:last-child{color:#dfff42}.stage-wrap{height:auto;min-height:0;display:grid;place-items:center;background:#0c0c0c;padding:18px;overflow:hidden}.stage-wrap .stage{max-width:1100px;box-shadow:0 18px 44px #0008}.stage-wrap .stage[data-ratio=portrait]{max-width:330px}.stage-wrap .stage[data-ratio=square]{max-width:650px}.preview-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0 25px;font-size:10px;color:#888}.replay{background:transparent;color:#dfff42;border:0;padding:8px 2px;font-size:20px;font-weight:800}.replay span{font-size:11px;margin-left:8px}.replay:hover span{text-decoration:underline}.export-box{border-top:1px solid #555;padding:24px 0 0;display:flex;gap:22px;align-items:center;justify-content:space-between}.export-number{color:#dfff42;font:800 10px monospace;letter-spacing:.14em}.export-box h2{font-size:clamp(22px,2.4vw,34px);letter-spacing:-.06em;line-height:1.1;margin:9px 0}.export-box p{color:#aaa;font-size:11px;line-height:1.7;margin:0}.download{flex:none;min-width:187px;background:#dfff42;color:#141414;border:0;padding:17px 18px;font-size:13px;font-weight:900;text-align:left;box-shadow:7px 7px 0 #414414;transition:transform .2s,box-shadow .2s}.download span{float:right}.download:hover{transform:translate(4px,4px);box-shadow:3px 3px 0 #414414}.download:focus-visible,.effect:focus-visible,.replay:focus-visible,.ratio-list button:focus-visible{outline:2px solid #fff;outline-offset:3px}.guide{padding:80px clamp(20px,3.4vw,64px) 100px;display:grid;grid-template-columns:1fr 1.7fr;gap:10vw}.eyebrow.dark{color:#e40722}.eyebrow.dark::before{content:"";display:block;width:7px;height:7px;background:#e40722}.guide h2{font-size:clamp(32px,3.5vw,54px);letter-spacing:-.08em;margin:20px 0}.guide ol{list-style:none;padding:0;margin:0}.guide li{border-top:1px solid #b4aea5;padding:19px 0;display:flex;gap:30px}.guide li:last-child{border-bottom:1px solid #b4aea5}.guide li b{font:800 15px monospace;color:#e40722}.guide li span{display:grid;gap:5px}.guide li strong{font-size:17px}.guide li small{font-size:12px;color:#6c6862;line-height:1.5}footer{background:#e40722;color:#fff;min-height:82px;padding:22px clamp(20px,3.4vw,64px);display:flex;align-items:center;justify-content:space-between;gap:20px;font:700 11px monospace;letter-spacing:.1em}footer a{text-decoration:none;color:#dfff42}@media(max-width:1100px){.workbench{grid-template-columns:310px minmax(0,1fr)}.editor{padding-left:24px}.preview-column{padding-right:24px}.export-box{align-items:start;flex-direction:column}.hero-line h1{font-size:9.5vw}}@media(max-width:800px){.site-head{height:64px}.head-id{display:none}.hero-line{min-height:300px;padding-bottom:35px}.hero-line h1{font-size:clamp(62px,13vw,105px)}.hero-line p{font-size:12px;margin-right:0}.workbench{display:block}.editor{border-right:0;border-bottom:1px solid #555;padding:25px 20px}.effect-list{grid-template-columns:repeat(2,1fr)}.effect{grid-template-columns:26px 1fr 20px}.preview-column{padding:25px 20px 36px}.guide{display:block;padding:60px 20px}.guide ol{margin-top:25px}}@media(max-width:540px){.site-head{padding:0 16px}.brand{font-size:23px}.head-help{font-size:11px}.hero-line{display:block;min-height:330px;padding:50px 17px 27px}.hero-line::before{height:15px;width:45%;top:19px}.hero-line h1{font-size:clamp(63px,16vw,96px);margin-top:19px}.hero-line p{font-size:11px;margin:23px 0 0;line-height:1.7}.hero-line p br{display:none}.workbench .editor,.preview-column{padding-left:15px;padding-right:15px}.stage-wrap{padding:8px}.preview-actions span:last-child{max-width:130px;text-align:right}.export-box p br{display:none}.download{width:100%}.effect{padding:8px}.effect strong{font-size:12px}.effect small{font-size:9px}.guide{padding:55px 17px}footer{padding:18px 17px;font-size:9px}footer span:nth-child(2){display:none}}