@import url('assets/original-wall.css');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--ink:#f4f2ef;--muted:#9d9ba0;--light:#c4f6ff}*{box-sizing:border-box}body{margin:0;background:#101012;color:var(--ink);font:14px 'Noto Sans Thai',sans-serif}header{height:82px;border-bottom:1px solid #ffffff16;display:flex;align-items:center;justify-content:space-between;padding:0 5%}header img{width:180px;opacity:.5}a{color:#aaa;text-decoration:none}main{max-width:1400px;margin:auto;padding:38px 5%}.intro{margin-bottom:28px}.intro p,.overline{font-size:11px;letter-spacing:3px;color:#e25c6b}.intro h1{font-size:30px;margin:8px 0}.intro span{color:var(--muted)}.workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr);gap:28px;align-items:start}.preview-panel{position:sticky;top:24px}.hero{height:430px;border:1px solid #ffffff26;border-radius:14px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:55px 30px}.badge{position:absolute;left:18px;top:18px;background:#101012b0;padding:5px 10px;border-radius:20px;font-size:11px;color:#bbb}#lettering{width:100%;text-align:center;font-family:'Barlow Condensed','Noto Sans Thai',sans-serif;font-weight:800;line-height:1.2;--light:#c4f6ff}#main-text,#sub-text{white-space:pre;max-width:100%;color:var(--light);text-shadow:2px 3px #161616,0 0 7px var(--light),0 0 22px var(--light)}#main-text{font-size:64px}#sub-text{font-size:24px;margin-top:14px}#dimension{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#ccc;font-size:12px;letter-spacing:1px}.preview-footer{display:flex;justify-content:space-between;align-items:center;padding:18px 0}.preview-note,.local-note{font-size:12px;color:var(--muted);line-height:1.8}button,input,select,textarea{font:inherit}button{cursor:pointer;background:#232327;border:1px solid #ffffff25;color:var(--ink);padding:10px 15px;border-radius:8px}button:hover{background:#323238}button:focus-visible,a:focus-visible{outline:2px solid #ec7586;outline-offset:4px}fieldset{border:0;margin:0 0 20px;padding:0 0 20px;border-bottom:1px solid #ffffff15}legend{font-size:16px;margin-bottom:16px}legend b{font-size:11px;color:#df6171;margin-right:10px}label{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;color:#bbb;font-size:12px}input,select,textarea{width:100%;min-width:0;color:var(--ink);background:#1b1b20;border:1px solid #38383e;border-radius:8px;padding:11px}input:focus,select:focus,textarea:focus{outline:1px solid #c86473}input[type=color]{height:44px;padding:5px}.row{display:flex;gap:12px}.row>label{flex:1;min-width:0}#modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}#modes button{font-size:12px;padding:10px 7px}#modes [aria-pressed=true]{background:#59323b;border-color:#b56b7a}.primary{width:100%;background:#a63950;border-color:#b95166;font-weight:600}.primary:hover{background:#be425c}#result{margin-top:30px;padding:28px;background:#1a1a1e;border:1px solid #55505a;border-radius:12px}#result pre{font:14px/1.9 'Noto Sans Thai',sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}.actions{display:flex;gap:10px;flex-wrap:wrap}#feedback{color:#aaa;font-size:12px}footer{text-align:center;padding:25px;font-size:10px;letter-spacing:2px;color:#777}
.hero[data-mode=off] #lettering>div{color:#888;text-shadow:2px 3px #111}.hero[data-mode=back] #lettering>div{color:#121212;text-shadow:1px 1px #999,0 0 8px #fff0cf,0 0 24px #fff0cf,0 0 40px #fff0cf}.hero[data-mode=neon] #lettering>div{color:#17171a;-webkit-text-stroke:1px var(--light);text-shadow:0 0 6px var(--light),0 0 18px var(--light)}.hero[data-mode=rgb] #lettering{animation:rgb 9s linear infinite}.hero[data-mode=full] #lettering>div{background:linear-gradient(90deg,#ff4266,#ffd85a,#72ffa8,#50dfff,#b97bff,#ff4266);background-size:200% 100%;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 5px #c583bb);animation:rainbow 4s linear infinite}.hero[data-mode=fire] #lettering>div{background:radial-gradient(ellipse at 30% 80%,#fff3a4 0%,#ffab19 18%,transparent 45%),radial-gradient(ellipse at 70% 100%,#fff7a0 0%,#ff6b09 25%,#a61a08 65%);background-size:35% 180%,45% 170%;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(2px 2px 0 #080808);animation:flame 1.4s linear infinite}@keyframes rgb{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(180deg)}}@keyframes rainbow{to{background-position:200% 0}}@keyframes flame{to{background-position:10px -180px,-12px -150px}}@media(max-width:850px){.workspace{grid-template-columns:1fr}.preview-panel{position:static}.hero{height:310px}main{padding:25px 5%}.intro h1{font-size:25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}}