:root { color-scheme: dark; font: 15px/1.6 system-ui, "Microsoft YaHei", sans-serif; color: #e9f0fe; background: #0b1019; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 290px; min-height: 100vh; background: radial-gradient(ellipse at 80% 2%,#152d4d,transparent 52%); }
button,input,textarea { font: inherit; }
button,a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: wait; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid #a7ccff; outline-offset: 3px; }
.shell { width: min(100% - 32px, 880px); margin: auto; padding-bottom: 24px; }
.masthead { display: flex; align-items: center; gap: 14px; min-height: 66px; }
.mark { font-size: 28px; font-weight: 850; letter-spacing: -.06em; }
.mark span { color: #80aaff; }
.tag,.site-link { color: #b4c4df; font-size: 12px; }
.site-link { margin-left: auto; padding: 9px 0; }
.chat { overflow: hidden; border: 1px solid #2c405d; border-radius: 24px; background: #0d1624; box-shadow: 0 20px 70px #0005; }
.intro { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 184px; padding: 24px 32px; border-bottom: 1px solid #2c405d; background: linear-gradient(100deg,#101927 15%,#162d4d); }
.intro::before { position: absolute; z-index: -2; inset: 0; content: ""; background: repeating-linear-gradient(-8deg, transparent 0 11px,#a2caff20 12px 13px); mask-image: linear-gradient(90deg,transparent 25%,black); }
.intro img { position: absolute; z-index: -1; right: 32px; width: 155px; height: 155px; object-fit: cover; border-radius: 50%; filter: brightness(1.2); }
.intro p { margin: 6px 0 0; color: #c1d2ed; }
.intro h1 { margin: 2px 0; font-size: clamp(29px, 6vw, 52px); letter-spacing: -.045em; line-height: 1.2; }
.intro .status { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 12px; color: #c6dcff; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: #94bcff; box-shadow: 0 0 10px #72a6ff; }
.chat-tools { display: flex; align-items: center; justify-content: space-between; padding: 5px 24px; font-size: 13px; color: #b9c9e1; }
.chat-tools button,.suggestions button { color: #c8dbf8; background: transparent; border: 1px solid #334865; border-radius: 20px; padding: 6px 12px; min-height: 36px; }
.chat-tools button:hover,.suggestions button:hover { background: #203451; }
.messages { height: clamp(180px,35dvh,440px); overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 12px 24px 20px; scrollbar-color: #415878 transparent; }
.message { max-width: min(85%,600px); }
.message.user { align-self: flex-end; }
.message small { display: block; margin: 0 0 4px 2px; color: #aabdd9; font-size: 11px; }
.message.user small { text-align: right; }
.message p { margin: 0; padding: 10px 14px; border-radius: 4px 15px 15px; background: #192b44; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user p { border-radius: 15px 4px 15px 15px; color: #0a1a33; background: #b2d0ff; }
.suggestions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 24px 8px; font-size: 12px; }
.notice { margin: 0 24px; font-size: 12px; color: #f4cc9c; }
.notice:not(:empty) { margin-bottom: 8px; }
form { display: flex; align-items: stretch; gap: 10px; margin: 0 24px; }
textarea,#code { color: #eff5ff; background: #101f32; border: 1px solid #395375; border-radius: 12px; padding: 10px 12px; }
textarea { flex: 1; min-width: 0; min-height: 46px; max-height: 150px; resize: vertical; }
form button { border: 0; padding: 8px 16px; border-radius: 12px; background: #a9c9ff; color: #091a31; font-weight: 700; }
footer,details { padding: 9px 24px; color: #a9bcd8; font-size: 12px; }
summary { cursor: pointer; }
#code { margin-left: 6px; padding: 5px; max-width: 60%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 550px) {
 .shell { width: calc(100% - 20px); }
 .chat { border-radius: 17px; }
 .intro { min-height: 145px; padding: 16px; }
 .intro img { width: 100px; height: 100px; right: 5px; opacity: .55; }
 .chat-tools,.messages,.suggestions,footer,details { padding-inline: 14px; }
 form,.notice { margin-inline: 14px; }
}