*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#101313;color:#e3e8e5;font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #8ce6c2;outline-offset:4px}button[hidden],[hidden]{display:none!important}header{max-width:1280px;margin:auto;padding:24px 32px;display:flex;gap:16px;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff0d}.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#dce6e1;font-size:12px;font-weight:700}.brand img{width:24px;height:24px}.brand span{font-size:10px;color:#72817b;font-weight:500}.draft{color:#85928c;font-size:11px}main{max-width:1280px;margin:0 auto;padding:28px 32px}.intro{margin-bottom:24px}.intro h1{font-size:28px;line-height:1.2;margin:0 0 8px;font-weight:650}.intro p{margin:0;color:#8c9c94;font-size:13px}nav{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #ffffff12;padding-bottom:18px}nav button{border:1px solid #ffffff0c;background:transparent;color:#99a9a1;border-radius:6px;padding:9px 13px;font-size:12px;display:flex;align-items:center;gap:9px;min-height:40px}nav button>span{font-size:10px;color:#687870}nav button[aria-pressed=true]{background:#28342e;border-color:#729d863b;color:#def0e6}nav small{font-size:9px;color:#b3d7bf;margin-left:5px}nav button:hover{border-color:#65816e}.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:36px;padding:28px 0 30px}.explanation h2{margin:0 0 9px;font-size:18px;font-weight:550}.explanation p{margin:0;max-width:470px;font-size:12px;color:#95a49c;min-height:36px}.tags{display:flex;gap:0;margin-top:15px;color:#aaa997;font-size:10px}.tags span+span{margin-left:13px;padding-left:13px;border-left:1px solid #6d77643d}.specimen{min-width:0;display:flex;flex-direction:column;align-items:start;gap:12px}.caption{font-size:9px;color:#708179;font-weight:650}.live-wrap{display:flex;min-height:48px;width:100%;align-items:center}.current-strip{max-width:100%;height:auto}.notice{display:flex;align-items:center;gap:10px;min-height:38px;max-width:100%;padding:4px 5px 4px 12px;background:#242827;border-radius:7px;color:#c7d2ce;font-size:12px;font-weight:500}.dot{width:5px;height:5px;background:#8ce6c2;border-radius:50%;flex:none;animation:signal 4s ease-in-out infinite}.notice-text{min-width:0;overflow-wrap:anywhere}.update{flex:none;margin-left:6px;display:flex;align-items:center;gap:8px;border:0;border-radius:4px;min-height:28px;padding:0 10px;background:#cee4db;color:#20372c;font-size:11px;font-weight:600;transition:background .18s}.refresh{width:13px;height:13px;background:currentColor;mask:url('/message-design-20260915/assets/refresh-cw.svg') center/contain no-repeat;transition:transform .3s}.update:hover{background:#e3f4eb}.update:hover .refresh{transform:rotate(60deg)}.update:disabled{cursor:default;opacity:.8}.notice.working .refresh{animation:spin 1s linear infinite}.notice.done{background:#26382f}.notice.done .dot{animation:none}.demo-note{font-size:10px;color:#67746d;min-height:15px}body[data-variant=slash] .notice{background:#202322;border-radius:3px;border-left:2px solid #8ce6c2;color:#b9c4bf;padding-left:11px}body[data-variant=slash] .dot{display:none}body[data-variant=slash] .update{color:#a7edd0;background:#303d36;border-radius:2px}body[data-variant=slash] .update:hover{background:#405749}.screens{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:24px;align-items:start}figure{margin:0;min-width:0}figcaption{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#a0aca6;margin-bottom:12px}figcaption span+span{color:#66756e;font-size:10px}.screen-button{display:block;padding:0;border:1px solid #ffffff12;border-radius:7px;background:#101313;width:100%;overflow:hidden}.screen-button img{display:block;width:100%;height:auto}.desktop .screen-button{box-shadow:0 12px 45px #0002}.mobile{max-width:390px}footer{display:flex;justify-content:space-between;gap:20px;align-items:baseline;border-top:1px solid #ffffff0d;margin-top:28px;padding-top:16px;color:#819087;font-size:11px}footer p{max-width:650px;margin:0}footer>span{font-size:9px;white-space:nowrap;color:#64756b}dialog{padding:0;border:1px solid #ffffff1a;background:#101313;width:fit-content;max-width:calc(100vw - 28px);max-height:calc(100dvh - 28px);border-radius:8px;overflow:auto}dialog::backdrop{background:#000c;backdrop-filter:blur(6px)}#zoom-image{display:block;max-width:100%;max-height:calc(100dvh - 30px);object-fit:contain}.close{position:fixed;right:25px;top:25px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #ffffff25;background:#262c29;border-radius:6px}.close img{width:18px;height:18px;filter:invert(1)}@keyframes signal{0%,100%{opacity:.6}50%{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:850px){.detail{gap:24px;grid-template-columns:1fr}.screens{grid-template-columns:minmax(0,1fr) 220px}footer{flex-direction:column;gap:12px}}@media(max-width:600px){header{padding:16px}.brand span{display:none}.draft{font-size:9px}main{padding:24px 16px}.intro h1{font-size:23px}.intro p{font-size:12px}nav{gap:6px}nav button{padding:8px 10px;gap:6px;font-size:11px}nav small{display:none}.detail{padding-top:22px;gap:22px}.screens{grid-template-columns:1fr;gap:24px}.mobile{width:100%;justify-self:center}.notice{width:100%;border-radius:0;padding:4px 9px 4px 14px;gap:8px;font-size:11px}.notice-text{flex:1}.update{margin:0;min-height:30px}.explanation h2{font-size:17px}body[data-variant=slash] .notice{border-left:0;border-bottom:1px solid #3f6754}.current-strip{width:100%}footer>span{white-space:normal}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}