:root { --entry-rainbow-edge:linear-gradient(90deg,#ff4242,#a1ff42,#42a1ff,#42d0ff,#a142ff); color-scheme: light; font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif; color: #25252c; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: radial-gradient(ellipse 44% 27% at 0 50%, #f1efff99, transparent), radial-gradient(ellipse 44% 30% at 100% 55%, #eef2ff99, transparent), #fff; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid #9286b8; outline-offset: 4px; }
.entry-header { padding: 0; }
/* Keep this page adjustment local; shared brand buttons keep their default size. */
.entry-header #open-login { width:96px; min-width:96px; height:44px; padding:8px 22px; font-size:15px; line-height:24px; }
.entry-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; max-width:1440px; height:96px; margin-inline:auto; padding-inline:clamp(16px,5vw,96px); }
.entry-brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-size: 19px; font-weight: 600; }
.entry-symbol { display: grid; grid-template-columns: repeat(2,7px); gap: 3px; width: 34px; height: 34px; padding: 8.5px; border-radius:50%; corner-shape:round; background: #25252d; }
.entry-symbol i { width: 7px; height: 7px; border-radius: 2px; corner-shape:var(--md-corner-shape); background: white; }
.entry-symbol i:last-child { background: #b2d6c9; }
.entry-beta { font-size: 11px; font-weight: 400; padding: 3px 7px; border: 1px solid #e0e0e6; border-radius: 12px; corner-shape:var(--md-corner-shape); color: #868692; }
.entry-main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }
.entry-hero { width: 100%; max-width: 800px; text-align: center; }
h1 { font-size: clamp(42px,5.5vw,74px); line-height: 1.22; font-weight: 450; letter-spacing: -3px; margin: 24px 0 22px; }
h1 > span { color: #7d7294; }
.entry-subtitle { font-size: 17px; line-height: 28px; font-weight: 400; color: #8a8993; margin: 0 0 44px; }
.mobile-break { display: none; }
.entry-composer { text-align: left; padding: 23px 22px 15px; background: linear-gradient(145deg, #fff 40%, #fafafd); border: 1px solid #dedee4; border-radius: 26px; corner-shape:var(--md-corner-shape); box-shadow: inset 0 1px 0 #fff,0 2px 2px #17171b03,0 12px 36px #17171b08; }
.entry-composer:focus-within { border-color: #bbb7c8; box-shadow: 0 0 0 3px #a2a0b50b,0 12px 36px #17171b09; }
.entry-composer textarea { display: block; width: 100%; min-height: 94px; max-height: 240px; resize: none; border: 0; outline: 0; padding: 0 2px; background: transparent; color: #36363e; font-size: 19px; line-height: 29px; }
.entry-composer textarea::placeholder { color: #a4a3ae; }
.entry-composer-tools { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.entry-icon-button { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius:50%; corner-shape:round; padding: 0; background: transparent; color: #767581; }
.entry-icon-button:hover { background: #efeff3; }
.entry-mode { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #777681; border: 1px solid #e4e3e9; background: linear-gradient(#fff,#f4f4f7); border-radius: 18px; corner-shape:var(--md-corner-shape); padding: 6px 11px; box-shadow: 0 1px 1px #00000004; }
.entry-mini-spark { font: 17px/17px system-ui; }
.entry-keyhint { margin-left: auto; font-size: 11px; color: #b0aeb9; }
.entry-send { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #303038; border-radius:50%; corner-shape:round; color: white; background: linear-gradient(#40404b,#24242c); box-shadow: inset 0 1px 0 #ffffff30,0 2px 0 #15151c; margin-left: auto; padding: 0; }
.entry-send:disabled { color: #a7a5af; background: #edecf0; border-color: transparent; box-shadow: none; cursor: default; }
.entry-send:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
.entry-suggestions { display: flex; justify-content: center; gap: 9px; flex-wrap: wrap; margin-top: 22px; }
.entry-suggestions button { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 18px; corner-shape:var(--md-corner-shape); border: 1px solid #eae9ef; background: #ffffffb3; color: #888692; font-size: 12px; line-height: 18px; }
.entry-suggestions button:hover { background: #f5f4f8; color: #242424; }
.entry-suggestions span { width: 14px; font-size: 14px; }
.entry-footer { display: flex; justify-content: space-between; gap: 16px; padding: 24px 48px; color: #aaa8b0; font-size: 11px; line-height: 20px; }
.entry-error { color: #b35f65; font-size: 12px; line-height: 20px; margin: 8px 0; }
.entry-error:empty { display: none; }
dialog { width: min(420px,calc(100% - 32px)); padding: 36px; border: 1px solid #e6e4ed; border-radius: 24px; corner-shape:var(--md-corner-shape); color: #303039; background: #fff; box-shadow: 0 24px 90px #25203526; }
dialog::backdrop { background: #29233325; backdrop-filter: blur(7px); }
.entry-close { position: absolute; right: 16px; top: 12px; border: 0; background: transparent; color: #9996a4; font-size: 25px; width: 30px; height: 30px; border-radius:50%; corner-shape:round; }
.entry-close:hover { background: #f4f3f7; }
dialog h2 { margin: 22px 0 10px; font-size: 23px; font-weight: 500; }
dialog p { font-size: 13px; line-height: 22px; color: #9995a4; }
dialog label { display: block; margin: 20px 0 7px; font-size: 12px; color: #6e697c; }
dialog input { width: 100%; height: 43px; padding: 10px 12px; border: 1px solid #dedee2; border-radius: 10px; corner-shape:var(--md-corner-shape); background: #fbfbfc; color: #303036; font-size: 14px; outline: none; }
#signin-dialog input:focus { border-color: #0047ff; box-shadow: 0 0 0 3px #0047ff14; }
#signin-dialog input::selection { color:#1f2937; background:#dce7ff; }
dialog input:disabled { color: #a1a1a7; background: #f6f6f7; }
dialog .entry-button { width: 100%; margin-top: 12px; }
dialog #login-hint { font-size: 11px; margin: 14px 0; }
dialog .entry-modal-note { font-size: 10px; text-align: center; margin: 18px 0 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 600px) {
  .entry-brand { font-size: 16px; gap: 8px; }
  h1 { font-size: 49px; letter-spacing: -2px; margin: 22px 0; }
  .entry-subtitle { font-size: 14px; line-height: 24px; margin-bottom: 30px; }
  .mobile-break { display: inline; }
  .entry-composer { padding: 19px 16px 14px; border-radius: 23px; corner-shape:var(--md-corner-shape); }
  .entry-composer textarea { font-size: 16px; line-height: 26px; min-height: 100px; }
  .entry-keyhint { display: none; }
  .entry-suggestions { gap: 7px; } .entry-suggestions button { padding: 7px 11px; font-size: 11px; }
  .entry-footer { padding: 20px; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; }
}

/* Stitch input revision: the writing surface and all toolbar controls share one shell. */
body { position:relative; isolation:isolate; background:#fff; }
.entry-header,.entry-main,.entry-footer { position:relative; z-index:1; }
.entry-main { padding:24px; }
.entry-hero { max-width:852px; }
h1 { font-size:clamp(46px,5.8vw,76px); line-height:1.15; margin:22px 0 24px; }
.entry-subtitle { margin-bottom:40px; }
.entry-composer.stitch-surface { display:flex; flex-direction:column; padding:24px; min-height:280px; background:rgb(255 255 255 / .76); border-radius:28px; corner-shape:var(--md-corner-shape); text-align:left; }
.entry-composer #entry-tools { margin-top:auto; flex:0 0 auto; }
.entry-composer textarea { min-height:140px; max-height:320px; margin-bottom:16px; padding:0; font-size:22px; line-height:32px; overflow-y:hidden; color:#34313b; }
.entry-composer textarea::placeholder { color:#918d9a; }
.entry-suggestions { gap:8px; margin-top:20px; flex-wrap:nowrap; }
.entry-suggestions button { min-width:0; flex:1; justify-content:flex-start; gap:6px; border:1px solid #dbd6e280; background:#ffffff94; backdrop-filter:blur(20px); box-shadow:inset 0 1px 0 #fff,0 2px 3px #42304e05; color:#484848; padding:7px 12px; overflow:hidden; white-space:nowrap; font-size:12px; }
.entry-suggestions button svg { flex-shrink:0; }
.entry-suggestions button:active { transform:scale(.98); }
@media(max-width:600px){
 .entry-main{padding:24px 18px;}h1{font-size:49px;line-height:1.18;margin:20px 0;}
 .entry-subtitle{margin-bottom:30px;}.entry-composer.stitch-surface{min-height:208px;padding:18px 14px 14px;border-radius:24px; corner-shape:var(--md-corner-shape);}
 .entry-composer textarea{min-height:112px;font-size:18px;line-height:28px;margin-bottom:14px;}
 .entry-suggestions{flex-wrap:wrap;gap:7px;}.entry-suggestions button{flex:0 1 auto;font-size:11px;max-width:100%;}
}

.entry-header { position:sticky; top:0; z-index:20; background:transparent; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.entry-mode,.entry-suggestions button { border-radius:9999px; corner-shape:round; }

/* Actual Figma logo and native wordmark. The SVG keeps its intrinsic shadow bounds. */
.entry-header .entry-brand { --entry-brand-size:30px; --entry-brand-word-size:28px; display:inline-flex; align-items:center; flex:none; gap:10px; }
.entry-brand-logo { display:block; position:relative; flex:0 0 var(--entry-brand-size, 30px); width:var(--entry-brand-size, 30px); height:var(--entry-brand-size, 30px); }
.entry-brand-logo > img { display:block; position:absolute; left:calc(var(--entry-brand-size, 30px) * -.072285); top:calc(var(--entry-brand-size, 30px) * -.0351); width:calc(var(--entry-brand-size, 30px) * 1.14457); height:calc(var(--entry-brand-size, 30px) * 1.14457); max-width:none; }
.entry-brand-wordmark {
  display:block;
  flex:none;
  color:#1c1f2e;
  font-family:"Alimama ShuHeiTi Entry", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:var(--entry-brand-word-size, 28px);
  font-weight:700;
  font-synthesis:none;
  line-height:var(--entry-brand-size, 30px);
  letter-spacing:0;
  white-space:nowrap;
}

@media (max-width:400px) {
  .entry-header .entry-brand { --entry-brand-size:22px; --entry-brand-word-size:21px; gap:8px; }
}

/* Account login is the default; optional local demo stays a separate action. */
#signin-dialog #login-hint:empty { display:none; }
#signin-dialog .entry-auth-demo { margin-top:22px; padding-top:20px; border-top:1px solid #ededed; }
#signin-dialog .entry-demo-login { width:100%; height:42px; color:#454545; font-size:13px; }
#signin-dialog .entry-auth-note { margin:10px 0 0; color:#888; font-size:11px; line-height:18px; text-align:center; }
#signin-dialog [hidden] { display:none!important; }
#signin-dialog #signin-submit { margin-top:20px; }
/* Sign-in surfaces and states come from the shared MDUI primary button. */
#signin-dialog #login-account-copy { margin:0 0 20px; }
#signin-dialog .entry-account-list { display:grid; gap:10px; max-height:min(42vh,320px); overflow-y:auto; padding:2px; }
#signin-dialog .entry-account { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 14px; width:100%; padding:16px; border:1px solid #e5e5e5; border-radius:14px; corner-shape:var(--md-corner-shape); color:inherit; background:transparent; text-align:left; font:inherit; cursor:pointer; transition:background .15s,border-color .15s; }
#signin-dialog .entry-account:hover { background:#f5f5f5; border-color:#c8c8c8; }
#signin-dialog .entry-account:focus-visible { outline:2px solid #303030; outline-offset:2px; }
#signin-dialog .entry-account:disabled { opacity:.55; cursor:wait; }
#signin-dialog .entry-account-name { grid-column:1; font-size:15px; font-weight:600; overflow-wrap:anywhere; }
#signin-dialog .entry-account-store { grid-column:1; font-size:12px; color:#777; overflow-wrap:anywhere; }
#signin-dialog .entry-account-arrow { grid-column:2; grid-row:1/3; align-self:center; color:#777; }
#signin-dialog #login-account-back { width:100%; margin-top:20px; font-size:13px; }
#signin-dialog #login-account-relogin { width:100%; }
@media(prefers-reduced-motion:reduce) { #signin-dialog .entry-account,#signin-dialog :is(#signin-submit,#login-account-relogin) { transition:none; } }