:root { color-scheme: light; --ink:#0f0f0f; --muted:#6b6b6b; --line:#0f0f0f; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100vh; background:#fff; color:var(--ink); font-family:"Coral Pixels","Atkinson Hyperlegible Mono","SFMono-Regular",Consolas,monospace; font-size:16px; }
.shell { width:min(100% - 72px, 1368px); min-height:100vh; margin:0 auto; display:flex; flex-direction:column; gap:24px; padding:28px 0 22px; }
.topbar { height:52px; flex:0 0 52px; display:flex; justify-content:space-between; align-items:center; font-family:"Digital Numbers","Coral Pixels",monospace; }
.brand { font-size:18px; line-height:27px; letter-spacing:0; }
.status { color:var(--muted); font-size:14px; line-height:21px; }
.rule { width:100%; height:1px; flex:0 0 1px; background:#404040; border:1px solid var(--line); }
main { width:100%; margin:0; padding:64px 120px 40px; flex:1; display:flex; flex-direction:column; gap:20px; overflow:hidden; }
.greeting { min-height:51px; margin:0; font:400 34px/51px "Coral Pixels","Atkinson Hyperlegible Mono",monospace; letter-spacing:0; }
.cursor { animation:blink 1s steps(1) infinite; } @keyframes blink { 50%{opacity:0;} }
.hint { margin:0; color:var(--muted); font:400 16px/24px "Coral Pixels","Atkinson Hyperlegible Mono",monospace; }
.thinking { height:30px; margin:0; display:flex; align-items:center; gap:6px; color:var(--muted); font:400 13px/20px "Digital Numbers","Coral Pixels",monospace; }
.pixel { display:block; width:8px; height:8px; flex:0 0 8px; border-radius:1px; background:#0f0f0f; animation:pixelPulse 1.2s steps(1) infinite; }
.pixel:nth-child(2) { animation-delay:.18s; }
.pixel:nth-child(3) { animation-delay:.36s; }
@keyframes pixelPulse { 0%,100%{opacity:.22;} 50%{opacity:1;} }
.message { height:112px; display:flex; flex-direction:column; gap:8px; padding:20px 22px; line-height:27px; }
.tag { display:block; margin:0; color:var(--muted); font:400 12px/18px "Digital Numbers","Coral Pixels",monospace; }
.history { display:grid; gap:24px; margin-top:0; }
.user-message { justify-self:end; max-width:80%; padding:10px 0; color:var(--muted); line-height:1.7; }
.assistant-message { padding:10px 0; line-height:1.8; }
.dialog { width:800px; max-width:100%; height:72px; flex:0 0 72px; display:flex; align-items:center; gap:12px; margin:0; padding:14px 16px; background:#fff; border:2px solid var(--line); border-radius:0; }
input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:400 16px/24px "Coral Pixels","Atkinson Hyperlegible Mono",monospace; }
input::placeholder { color:#999; }
button { border:0; padding:0; background:transparent; color:var(--ink); font:14px/21px "Digital Numbers","Coral Pixels",monospace; cursor:pointer; }
button:disabled { opacity:.45; cursor:wait; }
footer { color:var(--muted); font:12px/18px "Digital Numbers","Coral Pixels",monospace; letter-spacing:0; }
.result-panel { width:800px; max-width:100%; margin-top:8px; padding:22px; border:2px solid var(--line); background:#fff; }
.result-head { display:flex; justify-content:space-between; gap:20px; color:var(--muted); font:12px/18px "Digital Numbers","Coral Pixels",monospace; }
.result-panel h2 { margin:18px 0 8px; font-size:24px; font-weight:400; }
.result-panel p { margin:0 0 20px; color:var(--muted); line-height:1.7; }
.one-line-summary { padding:12px 0; color:var(--ink) !important; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); }
.result-actions { display:flex; flex-wrap:wrap; gap:18px; }
.result-actions button { border:1px solid var(--line); padding:10px 14px; }
.result-actions button:hover, .result-actions button:focus-visible { background:var(--ink); color:#fff; outline:0; }
.result-panel .image-save-tip { margin:18px 0 0; font-size:13px; }
.image-preview { width:800px; max-width:100%; margin-top:8px; padding-top:22px; border-top:1px dashed var(--line); }
.preview-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.preview-head h2 { margin:0; font-size:18px; font-weight:400; overflow-wrap:anywhere; }
.preview-head button { flex-shrink:0; padding:8px 0 8px 12px; }
.preview-head button:focus-visible { outline:1px dashed var(--ink); outline-offset:4px; }
.image-preview p { margin:10px 0 18px; color:var(--muted); font-size:14px; line-height:1.7; }
.image-preview img { display:block; width:100%; max-width:100%; height:auto; -webkit-touch-callout:default; }
@media (max-width:640px) {
  .shell { width:calc(100% - 72px); padding-top:28px; }
  main { padding-left:20px; padding-right:20px; }
  .message { padding-left:22px; padding-right:22px; }
}