@charset "UTF-8";
:root{--ground:#f0efeb;--ink:#333934;--muted:#83877e;--drawer-height:150px;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--ground);font-synthesis:none}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{-webkit-font-smoothing:antialiased;overscroll-behavior:none}button,input{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.35}button:focus-visible,input:focus-visible{outline:2px solid #6f8065;outline-offset:5px}button{touch-action:manipulation}svg{display:block;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}::selection{background:#d1d7c8;color:var(--ink)}
#viewport{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;overflow:hidden;touch-action:none}#viewport>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}.site-header{position:fixed;left:38px;right:32px;top:29px;z-index:3;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;pointer-events:none}.title h1{font-size:29px;font-weight:700;letter-spacing:-1.3px;line-height:1.25;margin:0}.title p{font:10px "Courier New",monospace;letter-spacing:2.1px;margin:9px 0 0;color:var(--muted)}.scene-tools{display:flex;align-items:center;gap:12px;pointer-events:auto}.scene-tools button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 10px;font-size:12px;color:#73786e;transition:color .16s}.scene-tools button svg{width:17px;height:17px}.scene-tools button:hover,.scene-tools button[aria-pressed="true"]{color:var(--ink)}.scene-tools button[aria-pressed="false"] svg{opacity:.55}
.scene-hint{position:fixed;z-index:2;bottom:calc(var(--drawer-height) + 17px);left:50%;transform:translateX(-50%);margin:0;color:#73796d;font-size:13px;letter-spacing:.7px;line-height:1.5;text-align:center;white-space:nowrap;pointer-events:none;transition:color .18s}.scene-hint.is-over{color:#394936}.word-drawer{position:fixed;left:50%;bottom:18px;bottom:calc(15px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:4;width:min(1000px,calc(100% - 64px));padding:6px 0 0;pointer-events:none}.word-drawer::before{content:"";position:absolute;z-index:-1;left:-40vw;right:-40vw;top:-45px;bottom:-60px;background:linear-gradient(0deg,var(--ground) 30%,#f0efebe0 65%,#f0efeb00);pointer-events:none}.word-list{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:13px;min-height:48px;pointer-events:none}.word-token{pointer-events:auto;position:relative;min-height:48px;padding:12px 18px;max-width:210px;font-size:15px;font-weight:600;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--token-color,#f2eee3);border:1px solid #ffffff50;border-bottom-color:#747b651c;border-radius:3px;box-shadow:0 3px 0 #c6c7bb,0 6px 13px #69725b0e;transform:translateY(var(--token-lift,0px)) rotate(var(--token-turn,0deg));cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:opacity .14s,box-shadow .14s,background .14s}.word-token:hover{box-shadow:0 4px 0 #c0c3b4,0 9px 20px #69725b18;background:#f7f4e9}.word-token:active{cursor:grabbing}.word-token.is-grabbed{opacity:.18;box-shadow:none}.drawer-tools{display:flex;justify-content:center;align-items:center;gap:17px;margin-top:12px;min-height:38px;pointer-events:none;color:#878c7f}.drawer-tools button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 5px;font-size:12px;pointer-events:auto}.drawer-tools button:hover{color:#414a38}.drawer-tools button svg{width:15px;height:15px}.drawer-tools button>span:first-child:not(:last-child){font-size:17px;font-weight:normal;line-height:1}.drawer-separator{opacity:.5;font-size:12px}.is-dragging,.is-dragging *{cursor:grabbing!important}.custom-panel{pointer-events:auto;max-width:570px;margin:0 auto;min-height:48px}.custom-panel[hidden]{display:none!important}.word-drawer[data-custom-open="true"] .word-list{display:none}.custom-panel form{display:flex;align-items:center;gap:10px;min-height:48px;border-bottom:1px solid #bfc4b7;padding:0 3px}.custom-panel input{min-width:0;flex:1;height:48px;padding:8px 6px;background:transparent;border:0;border-radius:0;font-size:16px;color:var(--ink)}.custom-panel input::placeholder{color:#929889;font-size:13px}.custom-panel input:focus{outline:none}.custom-panel form:focus-within{border-bottom-color:#788969}.custom-panel button{min-height:44px;padding:9px 9px;white-space:nowrap;font-size:12px}.custom-panel button span{font-size:18px;margin-left:8px}.custom-panel button:hover{color:#657d4b}.canvas-error{position:absolute;z-index:6;left:50%;top:40%;transform:translate(-50%,-50%);max-width:420px;width:calc(100% - 50px);padding:23px;background:#efefe8e8;color:#555e4e;font-size:14px;line-height:1.9;text-align:center}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:760px){
  :root{--drawer-height:180px}
  .site-header{left:19px;right:12px;top:calc(17px + env(safe-area-inset-top,0px));gap:10px}
  .title h1{font-size:23px;letter-spacing:-1px}.title p{font-size:9px;letter-spacing:1.2px;margin-top:7px}
  .scene-tools{gap:1px;margin-top:-5px}.scene-tools button{min-width:48px;min-height:44px;padding:8px;gap:5px;font-size:11px}.scene-tools button svg{width:16px;height:16px}
  .word-drawer{bottom:calc(8px + env(safe-area-inset-bottom,0px));width:calc(100% - 36px);max-width:470px;padding-top:0}
  .word-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:11px;row-gap:9px;min-height:97px}
  .word-token{width:100%;min-width:0;min-height:44px;max-width:none;padding:10px 5px;font-size:13px;letter-spacing:0;box-shadow:0 3px 0 #c6c7bb,0 5px 10px #69725b0d;transform:rotate(var(--token-turn,0deg))}
  .drawer-tools{min-height:44px;margin-top:5px;gap:17px}.drawer-tools button{min-height:44px;font-size:12px;padding:8px 8px}.drawer-tools button svg{width:16px;height:16px}
  .scene-hint{font-size:12px;letter-spacing:.3px;bottom:calc(var(--drawer-height) + 12px);max-width:calc(100% - 32px);white-space:normal;width:max-content}
  .word-drawer::before{top:-32px}.custom-panel{min-height:97px;display:flex;align-items:center}.custom-panel form{width:100%;min-height:52px;gap:3px}.custom-panel input{font-size:16px;padding-left:1px}.custom-panel input::placeholder{font-size:12px}.custom-panel button{font-size:12px;padding-left:5px;padding-right:4px}.custom-panel button span{margin-left:4px}
  .canvas-error{font-size:13px;top:36%}
}
@media(max-width:370px){.site-header{left:16px;right:8px}.title h1{font-size:22px}.title p{font-size:8px;letter-spacing:1px}.scene-tools button{min-width:44px;padding:8px 6px}.scene-tools button span{font-size:11px}.scene-tools button svg{width:14px;height:14px}.word-drawer{width:calc(100% - 28px)}.word-list{gap:10px}.word-token{font-size:12px}}
@media(max-height:560px) and (min-width:761px){.site-header{top:18px;left:25px}.title h1{font-size:24px}.word-drawer{bottom:8px}.word-token{min-height:42px;padding:10px 15px;font-size:13px}.drawer-tools{margin-top:6px;min-height:30px}.drawer-tools button{min-height:30px}.scene-hint{bottom:calc(var(--drawer-height) + 9px)}}
.is-dragging .word-token{opacity:.35}.is-dragging .word-token.is-grabbed{opacity:0}.is-dragging .drawer-tools{opacity:.2}.is-dragging .word-drawer::before{opacity:.08}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important}}