@import "https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;600;700;800&family=Noto+Serif+JP:wght@600;700;800&display=swap";
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#10201f;--muted:#65716f;--paper:#f2f0e9;--ui-font:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;--latin-font:"Helvetica Neue", Helvetica, Arial, sans-serif;--station-jp-font:"Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;--station-latin-font:"Helvetica Neue", Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:var(--ui-font);color:var(--ink);background:#dddcd4}button,input{font:inherit}.shell{grid-template-columns:minmax(320px,430px) 1fr;gap:28px;min-height:100vh;padding:28px;display:grid}.controls{background:#faf9f4f5;border:1px solid #10201f1f;border-radius:22px;flex-direction:column;gap:24px;padding:30px;display:flex;box-shadow:0 18px 60px #00000014}.eyebrow{font-family:var(--latin-font);letter-spacing:.16em;margin:0 0 8px;font-size:12px;font-weight:700}h1{letter-spacing:-.035em;margin:0;font-size:clamp(28px,3vw,44px);font-weight:700;line-height:1.08}.lead{color:var(--muted);margin:14px 0 0;font-size:14px;line-height:1.8}label{gap:9px;font-weight:700;display:grid}label span{font-size:13px}input{background:#fff;border:1px solid #10201f2e;border-radius:12px;outline:none;width:100%;padding:15px 16px;font-size:18px}input:focus{border-color:#10201f;box-shadow:0 0 0 3px #10201f14}.meta{grid-template-columns:1fr 1fr;gap:10px;display:grid}.meta div{border:1px solid #10201f1f;border-radius:12px;min-width:0;padding:12px}.meta small,.meta strong{display:block}.meta small{color:var(--muted);font-family:var(--latin-font);letter-spacing:.08em;margin-bottom:5px;font-size:10px}.meta strong{text-overflow:ellipsis;font-size:12px;overflow:hidden}button{color:#fff;cursor:pointer;background:#10201f;border:0;border-radius:12px;padding:16px 18px;font-weight:800}button:hover{transform:translateY(-1px)}.note{color:var(--muted);margin:-10px 0 0;font-size:12px;line-height:1.6}.creatorCredit{border-top:1px solid #10201f1c;gap:8px;margin-top:auto;padding-top:18px;display:grid}.creatorCreditLabel{font-family:var(--latin-font);letter-spacing:.16em;color:#10201f6b;font-size:9px;font-weight:700}.creatorCreditLinks{flex-wrap:wrap;gap:7px 14px;display:flex}.creatorCredit a{color:#10201fb8;width:fit-content;font-family:var(--latin-font);text-underline-offset:3px;font-size:11px;font-weight:600;line-height:1.4;text-decoration:none;transition:color .16s,opacity .16s}.creatorCredit a:hover{color:var(--ink);text-decoration:underline}.creatorCredit a:focus-visible{outline-offset:3px;border-radius:2px;outline:2px solid #10201f8c}.previewWrap{flex-direction:column;justify-content:center;gap:14px;min-width:0;display:flex}.preview{aspect-ratio:8/5;isolation:isolate;border-radius:22px;width:100%;max-height:calc(100vh - 110px);position:relative;overflow:hidden;box-shadow:0 24px 70px #0000002e}.tileWall{background:#7f8c86;grid-template-rows:repeat(20,1fr);grid-template-columns:repeat(32,1fr);gap:1.15px;padding:1.15px;display:grid;position:absolute;inset:0}.wallTile{transform-origin:50%;will-change:transform, clip-path;border-radius:.55px;min-width:0;min-height:0;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff21,inset 1px 0 #ffffff0d,inset 0 -1px #00000024,inset -1px 0 #00000014}.wallTile:before{content:"";pointer-events:none;background:radial-gradient(circle at 30% 24%, #ffffff0e, transparent 42%), radial-gradient(circle at 72% 76%, rgba(0,0,0,calc(.045 + var(--tile-grime,.5) * .035)), transparent 50%);opacity:var(--wall-grime-opacity,.72);position:absolute;inset:0}.wallTile:after{content:"";pointer-events:none;background:linear-gradient(135deg, rgba(255,255,255,calc(.015 + var(--tile-sheen,.03))) 0%, #fff0 42%, rgba(0,0,0,calc(.07 + var(--tile-grime,.5) * .03)) 100%);position:absolute;inset:0}.tileWall:after{content:"";z-index:1;pointer-events:none;mix-blend-mode:multiply;opacity:var(--wall-grime-strength,1);background:radial-gradient(at 12% 20%,#241a1117,#0000 22%),radial-gradient(at 82% 16%,#14140f0e,#0000 24%),radial-gradient(at 64% 72%,#2d1e1212,#0000 23%),radial-gradient(at 20% 82%,#10131111,#0000 21%),linear-gradient(#1214120e,#1214120e);position:absolute;inset:0}.preview:after{content:"";z-index:4;pointer-events:none;border-radius:inherit;opacity:var(--vignette-strength,1);background:radial-gradient(#0000 54%,#00000004 69%,#0001 86%,#00000029 100%);position:absolute;inset:0;box-shadow:inset 0 0 24px #0000000a}.signPanel{z-index:3;text-align:center;font-family:var(--station-jp-font);text-shadow:1px 3px 4px #0000004d,0 1px #ffffff0f;flex-direction:column;justify-content:center;align-items:center;padding:1.5%;display:flex;position:absolute;inset:9% 1.5%;box-shadow:none!important;-webkit-backdrop-filter:none!important;background:0 0!important;border:0!important}.autoFitFrame{justify-content:center;align-items:center;width:100%;min-width:0;display:flex;overflow:visible}.autoFitFrame>span{white-space:nowrap;transform-origin:50%;display:inline-block}.stationJa{font-family:var(--station-jp-font);font-weight:700;font-size:clamp(calc(58px * var(--jp-text-scale,1)), calc(9.4vw * var(--jp-text-scale,1)), calc(178px * var(--jp-text-scale,1)));letter-spacing:.015em;line-height:.96}.romanFitRow{width:100%;margin-top:2.1%}.stationRoman{font-family:var(--station-latin-font);font-weight:700;font-size:clamp(calc(22px * var(--roman-text-scale,1)), calc(2.9vw * var(--roman-text-scale,1)), calc(60px * var(--roman-text-scale,1)));letter-spacing:.045em;line-height:1}.swatches{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.swatches span{border:1px solid #10201f17;border-radius:12px;flex-direction:column;justify-content:space-between;min-height:64px;padding:11px 12px;font-size:11px;display:flex}.swatches b{font-family:var(--latin-font);text-transform:uppercase;letter-spacing:.08em;font-size:10px}@media (max-width:900px){.shell{grid-template-columns:1fr;padding:16px}.controls{order:2;padding:22px}.previewWrap{order:1}.preview{border-radius:16px;max-height:none}.tileWall{gap:.9px;padding:.9px}}.generateButton{letter-spacing:.02em;min-height:58px;font-size:15px;transition:transform .18s,box-shadow .18s,opacity .18s;position:relative;box-shadow:0 10px 26px #10201f29}.generateButton:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 32px #10201f38}.generateButton:disabled{cursor:not-allowed;opacity:.38;box-shadow:none;transform:none}.downloadButton{background:#394846}.resultMeta{animation:.42s both revealUp}.previewPlaceholder{aspect-ratio:8/5;text-align:center;color:#10201fc7;background:linear-gradient(135deg,#ffffff85,#ffffff1f),repeating-linear-gradient(0deg,#0000 0 34px,#10201f09 34px 35px),repeating-linear-gradient(90deg,#0000 0 34px,#10201f09 34px 35px),#d3d3ca;border:1px solid #10201f24;border-radius:22px;flex-direction:column;justify-content:center;align-items:center;width:100%;max-height:calc(100vh - 110px);padding:9%;display:flex;box-shadow:0 24px 70px #0000001a}.placeholderMark{width:74px;height:74px;font-family:var(--latin-font);background:#faf9f494;border:1px solid #10201f2e;border-radius:50%;place-items:center;margin-bottom:22px;font-size:31px;font-weight:700;display:grid}.placeholderEyebrow{font-family:var(--latin-font);letter-spacing:.17em;color:#10201f8c;margin:0 0 9px;font-weight:700;font-size:11px!important}.previewPlaceholder h2{letter-spacing:-.03em;margin:0;font-size:clamp(24px,3vw,42px)}.previewPlaceholder p:last-child{color:#10201f8f;max-width:470px;margin:14px 0 0;font-size:13px;line-height:1.8}.resultReveal{flex-direction:column;gap:14px;animation:.62s cubic-bezier(.2,.75,.2,1) both revealResult;display:flex}@keyframes revealResult{0%{opacity:0;filter:blur(3px);transform:translateY(12px)scale(.985)}to{opacity:1;filter:blur();transform:translateY(0)scale(1)}}@keyframes revealUp{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media (max-width:900px){.previewPlaceholder{border-radius:16px;max-height:none}}@media (prefers-reduced-motion:reduce){.resultReveal,.resultMeta{animation:none}.generateButton{transition:none}}
