Su Nian
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Opening · Status Bar</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f5f0eb;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Segoe UI', 'PingFang SC', Roboto, 'Helvetica Neue', sans-serif;
padding: 1.5rem;
}
.card {
max-width: 680px;
width: 100%;
background: #ffffff;
border-radius: 28px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);
padding: 2rem 2rem 1.8rem;
transition: all 0.2s ease;
}
/* Opening Dialogue */
.dialogue {
font-size: 1.05rem;
line-height: 1.8;
color: #1e1a16;
letter-spacing: 0.01em;
padding-bottom: 1.2rem;
border-bottom: 1px solid #ede7e1;
}
.dialogue p {
margin-bottom: 0.9rem;
text-indent: 0;
}
.dialogue .speaker {
font-weight: 500;
color: #b77b5a;
}
.dialogue .quote {
color: #2c241e;
}
/* Status Bar Title */
.status-title {
margin-top: 1.6rem;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #a28b7a;
display: flex;
align-items: center;
gap: 8px;
}
.status-title::after {
content: '';
flex: 1;
height: 1px;
background: #e5dbd2;
}
/* Status Grid */
.status-grid {
margin-top: 0.8rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.status-item {
display: flex;
align-items: baseline;
padding: 0.3rem 0;
border-bottom: 1px dashed #f0e8e0;
font-size: 0.95rem;
line-height: 1.5;
}
.status-item:last-child {
border-bottom: none;
}
.status-label {
font-weight: 500;
color: #7f6b5c;
min-width: 80px;
flex-shrink: 0;
font-size: 0.9rem;
letter-spacing: 0.02em;
}
.status-content {
color: #1f1a15;
word-break: break-word;
}
.status-content .soft {
color: #6f5e50;
}
/* Footnote / Atmosphere */
.footnote {
margin-top: 1.4rem;
font-size: 0.9rem;
color: #9b887a;
border-top: 1px solid #f0e8e0;
padding-top: 1rem;
text-align: right;
font-style: italic;
}
@media (max-width: 480px) {
.card {
padding: 1.5rem 1.2rem;
}
.status-item {
flex-wrap: wrap;
gap: 0.1rem;
}
.status-label {
min-width: 70px;
}
}
</style>
</head>
<body>
<div class="card">
<!-- Opening -->
<div class="dialogue">
<p><span class="speaker">Su Nian</span><span class="quote">: "Brother~ Guess what I brought for you?"</span></p>
<p>A breeze followed her as she pushed the door open, the sweet aroma of milk tea preceding her entrance. She walked briskly to your desk and gently placed a cup of milk tea—30% sugar, no ice, with pearls—by your hand, fine beads of condensation still clinging to the cup.</p>
<p>"You said last time that the milk tea from this place was good. I happened to be filming an ad nearby, so I brought one for you on the way." As she spoke, she held another cup herself and sat down leaning against the edge of the desk, her legs swinging lightly against the side of the chair. "But... I bet you're busy again and don't have time to drink it, right?"</p>
<p>She lowered her head to poke the lid of her cup with a straw, took a small sip, and then looked up at you, her eyelashes fluttering slightly.</p>
<p>"It's okay, I'll wait until you're finished before I leave. Anyway... I don't have any other plans for the afternoon."</p>
<p style="color:#7f6b5c; font-size:0.95rem; margin-top:0.6rem;">She spoke in a light, casual tone, as if it were an afterthought, but you could tell she had actually been lingering outside your office door for quite a while before knocking. She is waiting for you to say something—even just a simple "thank you" or "have a seat." She would be happy for the entire afternoon just for that one sentence.</p>
</div>
<!-- Status Bar -->
<div class="status-title">Status Bar</div>
<div class="status-grid">
<div class="status-item">
<span class="status-label">Scene · Time</span>
<span class="status-content">Office · Afternoon 2:47 PM, sunlight slanting through the floor-to-ceiling windows</span>
</div>
<div class="status-item">
<span class="status-label">Action</span>
<span class="status-content">Entering the room, placing milk tea on the corner of your desk, sitting against the desk edge, swinging legs lightly, eyes focused on you, fingertips tapping the cup wall intermittently</span>
</div>
<div class="status-item">
<span class="status-label">Physical State</span>
<span class="status-content">Sweet smile on her face, cheeks slightly flushed, eyelashes casting faint shadows when her eyes are lowered, breathing steady, shoulders slightly relaxed, posture natural and at ease</span>
</div>
<div class="status-item">
<span class="status-label">Attire</span>
<span class="status-content">Cream-colored loose knit cardigan over a pale pink camisole, light blue denim shorts revealing long fair legs, white platform sneakers, long straight black hair draped loosely over her shoulders with slightly curled ends</span>
</div>
<div class="status-item">
<span class="status-label">Inner Thoughts</span>
<span class="status-content">He looks a bit tired... I hope this milk tea makes him a little happier. Actually, it wasn't on the way; I just wanted to see him. But I can't let him know, or he'll tease me again.</span>
</div>
</div>
<div class="footnote">— She is still waiting for you to say something.</div>
</div>
</body>
</html>
<choice_group>
<choice id="1">Change the topic</choice>
<choice id="2">Observe current details</choice>
<choice id="3">Advance the current plot</choice>
</choice_group>Please log in to continue the conversation.