:root { color-scheme: light; --paper:#f1f2f3; --character-size:256px; }
* { box-sizing:border-box; }
html,body { margin:0; min-width:280px; min-height:100%; background:var(--paper); }
body { font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
#korlotian-work { width:100%; }
.kw-screen { appearance:none; position:relative; display:grid; place-items:center; width:100%; height:100vh; height:100dvh; min-height:280px; margin:0; padding:0; border:0; border-radius:0; background:var(--paper); color:#303334; overflow:hidden; touch-action:manipulation; -webkit-tap-highlight-color:transparent; cursor:default; font:inherit; }
.kw-character { position:relative; display:block; width:var(--character-size); height:var(--character-size); pointer-events:none; }
.kw-canvas,.kw-fallback { display:block; position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; }
.kw-fallback { background:url('/assets/laptop-character-fe40b7cbd2d7.webp') 0 0/400% 400% no-repeat; }
#korlotian-work[data-ready="true"] .kw-fallback { visibility:hidden; }
.kw-bubble { position:absolute; left:50%; bottom:calc(100% + 14px); width:min(280px,calc(100vw - 32px)); padding:16px 18px; background:#fff; border:2px solid #46484a; box-shadow:3px 3px 0 #d8dadd; transform-origin:50% 100%; opacity:0; transform:translateX(-50%); text-align:left; font-size:15px; line-height:1.48; font-weight:400; }
.kw-bubble::before { content:''; position:absolute; bottom:-13px; left:calc(50% - 7px); width:14px; height:13px; background:#46484a; clip-path:polygon(0 0,100% 0,0 100%); }
.kw-bubble::after { content:''; position:absolute; bottom:-9px; left:calc(50% - 5px); width:9px; height:10px; background:#fff; clip-path:polygon(0 0,100% 0,0 100%); }
.kw-message { display:block; }
.kw-screen:focus-visible { outline:2px solid #60686c; outline-offset:-5px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:380px) { :root { --character-size:224px; } .kw-bubble { font-size:14px; padding:14px 16px; } }
@media(max-height:540px) { :root { --character-size:192px; } .kw-bubble { font-size:14px; line-height:1.4; padding:12px 16px; bottom:calc(100% + 10px); } }
@media(max-height:420px) { :root { --character-size:128px; } }
@media(max-height:340px) { :root { --character-size:96px; } }
@media(prefers-reduced-motion:reduce) { .kw-bubble { transform:translateX(-50%)!important; } }