/* 网页外壳和小程序基础组件的默认样式（web-h5 运行时）。 手机框 #wx-frame：手机上铺满（宽最多 480），桌面上居中一个 390 宽的框；小程序的 vh / vw / rpx 都按框算（--wx-vh / --wx-vw / --wx-rpx）。 框上的 transform 让 position: fixed 的元素（Tab 栏、弹层、粒子层）相对框定位，而不是整个浏览器窗口。 ICP 备案号在框下面一行（#icp），不压任何按钮。 */ *, *::before, *::after { -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; } body { background: #efe6da; color: #3a2416; font-family: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif; overflow: hidden; } #wx-stage { --icp-h: 22px; height: 100vh; height: 100dvh; display: flex; flex-direction: column; align-items: center; } #wx-frame { --frame-w: min(100vw, 480px); --frame-h: calc(100dvh - var(--icp-h)); --wx-vw: calc(var(--frame-w) / 100); --wx-vh: calc(var(--frame-h) / 100); --wx-rpx: calc(var(--frame-w) / 750); position: relative; width: var(--frame-w); height: var(--frame-h); overflow: hidden; transform: translateZ(0); background: #fff6ea; /* 像 App 一样：手机框里拖动、长按都不选中文字、不弹系统菜单（Devin 2026-10-24：桌面上划泡泡纸出现蓝色选区）；输入框照常能选 */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #wx-frame input, #wx-frame textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } #wx-frame img { -webkit-user-drag: none; } #icp { height: var(--icp-h); line-height: var(--icp-h); font-size: 11px; text-align: center; width: var(--frame-w, 100%); } #icp a { color: #7a5a44; text-decoration: none; } #icp a:hover { text-decoration: underline; } @media (min-width: 700px) and (min-height: 600px) { body { background: radial-gradient(60% 50% at 20% 10%, #fde6cf, transparent), radial-gradient(50% 50% at 90% 90%, #e3f1e8, transparent), #f3ebe0; } #wx-stage { justify-content: center; gap: 10px; } #wx-frame { --frame-w: 390px; --frame-h: min(844px, calc(100dvh - 72px)); border-radius: 28px; box-shadow: 0 24px 60px rgba(90, 50, 20, .18), 0 0 0 1px rgba(90, 50, 20, .06); } #icp { width: 390px; } } /* 每一页一个 ，自己滚动；不在栈顶的页面 hidden */ page { display: block; position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } page[hidden] { display: none !important; } #wx-ui { position: absolute; inset: 0; z-index: 10000; pointer-events: none; } #wx-ui > * { pointer-events: auto; } [hidden] { display: none !important; } /* ---- 小程序基础组件的默认样式（照微信基础库的默认值） ---- */ view, scroll-view, picker, checkbox-group, form { display: block; } page-meta, navigation-bar { display: none !important; } text { display: inline; white-space: pre-wrap; } image { display: inline-block; position: relative; overflow: hidden; width: 320px; height: 240px; } image > img { display: block; width: 100%; height: 100%; object-fit: fill; -webkit-user-drag: none; user-select: none; } image[mode="aspectFit"] > img { object-fit: contain; } image[mode="aspectFill"] > img { object-fit: cover; } image[mode="widthFix"] { height: auto; } image[mode="widthFix"] > img { height: auto; } scroll-view { position: relative; overflow: hidden; } scroll-view[scroll-y] { overflow-y: auto; overscroll-behavior: contain; } scroll-view[scroll-x] { overflow-x: auto; overscroll-behavior-x: contain; } @media (pointer: fine) { scroll-view[scroll-x] { cursor: grab; user-select: none; -webkit-user-select: none; } } /* 桌面上鼠标拖着滚（runtime/drag-scroll.js） */ scroll-view[no-bar] { scrollbar-width: none; } scroll-view[no-bar]::-webkit-scrollbar { display: none; } button { position: relative; display: block; margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; box-sizing: border-box; font-size: 18px; font-family: inherit; text-align: center; text-decoration: none; line-height: 2.55555556; border-radius: 5px; border: 0; overflow: hidden; color: #000; background-color: #f8f8f8; cursor: pointer; } button[disabled] { color: rgba(0, 0, 0, .3); cursor: default; } button[open-type="share"] { display: none !important; } /* 网页没有分享卡片：入口不显示 */ .button-hover { background-color: #dedede; color: rgba(0, 0, 0, .6); } label { cursor: pointer; } input, textarea { font: inherit; color: inherit; border: 0; outline: 0; background: transparent; padding: 0; margin: 0; box-sizing: border-box; } input { display: block; height: 1.4rem; min-height: 1.4rem; width: 100%; text-overflow: clip; } textarea { display: block; width: 300px; height: 150px; resize: none; } canvas { display: block; width: 300px; height: 150px; } [role="button"], picker { cursor: pointer; } switch { display: inline-block; vertical-align: middle; cursor: pointer; --wx-color: #04be02; } switch .wx-switch { display: block; position: relative; width: 52px; height: 32px; margin-right: 5px; border-radius: 16px; box-sizing: border-box; border: 1px solid #dfdfdf; background-color: #dfdfdf; transition: background-color .1s, border .1s; } switch .wx-switch::before { content: ""; position: absolute; top: 0; left: 0; width: 50px; height: 30px; border-radius: 15px; background: #fdfdfd; transition: transform .3s; } switch .wx-switch::after { content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 30px; border-radius: 15px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .3s; } switch[checked] .wx-switch { border-color: var(--wx-color); background-color: var(--wx-color); } switch[checked] .wx-switch::before { transform: scale(0); } switch[checked] .wx-switch::after { transform: translateX(20px); } switch[disabled] { opacity: .7; cursor: default; } checkbox { display: inline-block; vertical-align: middle; cursor: pointer; --wx-color: #09bb07; } checkbox .wx-checkbox { display: inline-block; position: relative; vertical-align: middle; width: 22px; height: 22px; margin-right: 5px; border: 1px solid #d1d1d1; border-radius: 3px; background: #fff; box-sizing: border-box; } checkbox[checked] .wx-checkbox::before { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--wx-color); } checkbox[disabled] .wx-checkbox { background: #e1e1e1; } /* ---- 页内系统界面：showToast / showModal / showActionSheet / picker ---- */ .wxui-toast { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); min-width: 120px; max-width: 70%; box-sizing: border-box; padding: 18px 16px 14px; border-radius: 12px; background: rgba(17, 17, 17, .78); color: #fff; text-align: center; font-size: 15px; line-height: 1.4; z-index: 3; pointer-events: none; } .wxui-toast-text { padding: 10px 16px; min-width: 0; } .wxui-toast-icon { font-size: 34px; line-height: 40px; margin-bottom: 6px; } .wxui-toast-title { white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wxui-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0); display: flex; align-items: center; justify-content: center; transition: background-color .2s; z-index: 2; } .wxui-mask.wxui-in { background: rgba(0, 0, 0, .5); } .wxui-modal { width: 80%; max-width: 320px; background: #fff; border-radius: 12px; overflow: hidden; text-align: center; color: #111; transform: scale(.94); opacity: 0; transition: transform .2s, opacity .2s; } .wxui-in .wxui-modal { transform: none; opacity: 1; } .wxui-modal-title { padding: 28px 24px 8px; font-size: 17px; font-weight: 700; } .wxui-modal-content { padding: 8px 24px 28px; font-size: 16px; line-height: 1.5; color: rgba(0, 0, 0, .55); white-space: pre-wrap; word-break: break-word; } .wxui-modal-input { display: block; width: calc(100% - 48px); margin: 12px 24px 24px; padding: 10px 12px; height: auto; border-radius: 8px; background: #f2f2f2; font-size: 16px; text-align: left; } .wxui-modal-bar { display: flex; border-top: 1px solid rgba(0, 0, 0, .1); } .wxui-btn { flex: 1; margin: 0; padding: 0; height: 56px; line-height: 56px; border-radius: 0; background: #fff; font-size: 17px; font-weight: 700; } .wxui-btn + .wxui-btn { border-left: 1px solid rgba(0, 0, 0, .1); } .wxui-mask:has(.wxui-sheet) { align-items: flex-end; } .wxui-sheet { width: 100%; max-height: 70%; display: flex; flex-direction: column; background: #f7f7f7; border-radius: 12px 12px 0 0; overflow: hidden; padding-bottom: env(safe-area-inset-bottom); transform: translateY(100%); transition: transform .25s; } .wxui-in .wxui-sheet { transform: none; } .wxui-sheet-title { padding: 16px; font-size: 14px; color: rgba(0, 0, 0, .5); text-align: center; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .06); } .wxui-sheet-list { overflow-y: auto; background: #fff; } .wxui-sheet-item { display: block; width: 100%; margin: 0; padding: 0; height: 56px; line-height: 56px; border-radius: 0; background: #fff; color: #111; font-size: 17px; border-bottom: 1px solid rgba(0, 0, 0, .06); } .wxui-sheet-item.wxui-selected { font-weight: 700; color: #07c160; } .wxui-sheet-cancel { margin-top: 8px; border-bottom: 0; } page, .tokens { --cr-paper: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjg1JyBudW1PY3RhdmVzPSczJyBzZWVkPSc0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+IDxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAuNDUgMCAwIDAgMCAuMzggMCAwIDAgMCAuMjggMCAwIDAgLjE0IDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTgwJyBoZWlnaHQ9JzE4MCcgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+") 0 0 / 180px 180px; --cr-wax: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCc+IDxmaWx0ZXIgaWQ9J2cnIHg9JzAnIHk9JzAnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuNTUgMS4yNScgbnVtT2N0YXZlcz0nMycgc2VlZD0nOScgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPiA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDUgMCAwIDAgLTEuNDUnLz48ZmVDb21wb3NpdGUgaW49J1NvdXJjZUdyYXBoaWMnIG9wZXJhdG9yPSdpbicvPjwvZmlsdGVyPiA8cGF0dGVybiBpZD0ncycgd2lkdGg9JzgnIGhlaWdodD0nOCcgcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgcGF0dGVyblRyYW5zZm9ybT0ncm90YXRlKC00NSknPjxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzIuMicgZmlsbD0nI2ZmZicgb3BhY2l0eT0nLjI0Jy8+PC9wYXR0ZXJuPiA8ZyBmaWx0ZXI9J3VybCgjZyknPjxyZWN0IHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgZmlsbD0nI0ZGQzkzQycvPjxyZWN0IHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgZmlsbD0ndXJsKCNzKScvPjwvZz48L3N2Zz4=") 0 0 / 64px 64px; --cr-wax-blue: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCc+IDxmaWx0ZXIgaWQ9J2cnIHg9JzAnIHk9JzAnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuNTUgMS4yNScgbnVtT2N0YXZlcz0nMycgc2VlZD0nOScgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPiA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDUgMCAwIDAgLTEuNDUnLz48ZmVDb21wb3NpdGUgaW49J1NvdXJjZUdyYXBoaWMnIG9wZXJhdG9yPSdpbicvPjwvZmlsdGVyPiA8cGF0dGVybiBpZD0ncycgd2lkdGg9JzgnIGhlaWdodD0nOCcgcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgcGF0dGVyblRyYW5zZm9ybT0ncm90YXRlKC00NSknPjxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzIuMicgZmlsbD0nI2ZmZicgb3BhY2l0eT0nLjI0Jy8+PC9wYXR0ZXJuPiA8ZyBmaWx0ZXI9J3VybCgjZyknPjxyZWN0IHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgZmlsbD0nIzJGNjhEMCcvPjxyZWN0IHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgZmlsbD0ndXJsKCNzKScvPjwvZz48L3N2Zz4=") 0 0 / 64px 64px; --cr-wax-pink: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCc+IDxmaWx0ZXIgaWQ9J2cnIHg9JzAnIHk9JzAnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuNTUgMS4yNScgbnVtT2N0YXZlcz0nMycgc2VlZD0nOScgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPiA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDUgMCAwIDAgLTEuNDUnLz48ZmVDb21wb3NpdGUgaW49J1NvdXJjZUdyYXBoaWMnIG9wZXJhdG9yPSdpbicvPjwvZmlsdGVyPiA8cGF0dGVybiBpZD0ncycgd2lkdGg9JzgnIGhlaWdodD0nOCcgcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgcGF0dGVyblRyYW5zZm9ybT0ncm90YXRlKC00NSknPjxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzIuMicgZmlsbD0nI2ZmZicgb3BhY2l0eT0nLjI0Jy8+PC9wYXR0ZXJuPiA8ZyBmaWx0ZXI9J3VybCgjZyknPjxyZWN0IHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgZmlsbD0nI0Y3QjRDMicvPjxyZWN0IHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgZmlsbD0ndXJsKCNzKScvPjwvZz48L3N2Zz4=") 0 0 / 64px 64px; --cr-wax-sky: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCc+IDxmaWx0ZXIgaWQ9J2cnIHg9JzAnIHk9JzAnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuNTUgMS4yNScgbnVtT2N0YXZlcz0nMycgc2VlZD0nOScgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPiA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDUgMCAwIDAgLTEuNDUnLz48ZmVDb21wb3NpdGUgaW49J1NvdXJjZUdyYXBoaWMnIG9wZXJhdG9yPSdpbicvPjwvZmlsdGVyPiA8cGF0dGVybiBpZD0ncycgd2lkdGg9JzgnIGhlaWdodD0nOCcgcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgcGF0dGVyblRyYW5zZm9ybT0ncm90YXRlKC00NSknPjxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzIuMicgZmlsbD0nI2ZmZicgb3BhY2l0eT0nLjI0Jy8+PC9wYXR0ZXJuPiA8ZyBmaWx0ZXI9J3VybCgjZyknPjxyZWN0IHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgZmlsbD0nI0E5RDNGNScvPjxyZWN0IHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgZmlsbD0ndXJsKCNzKScvPjwvZz48L3N2Zz4=") 0 0 / 64px 64px; --cr-wax-green: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCc+IDxmaWx0ZXIgaWQ9J2cnIHg9JzAnIHk9JzAnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuNTUgMS4yNScgbnVtT2N0YXZlcz0nMycgc2VlZD0nOScgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPiA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDUgMCAwIDAgLTEuNDUnLz48ZmVDb21wb3NpdGUgaW49J1NvdXJjZUdyYXBoaWMnIG9wZXJhdG9yPSdpbicvPjwvZmlsdGVyPiA8cGF0dGVybiBpZD0ncycgd2lkdGg9JzgnIGhlaWdodD0nOCcgcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgcGF0dGVyblRyYW5zZm9ybT0ncm90YXRlKC00NSknPjxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzIuMicgZmlsbD0nI2ZmZicgb3BhY2l0eT0nLjI0Jy8+PC9wYXR0ZXJuPiA8ZyBmaWx0ZXI9J3VybCgjZyknPjxyZWN0IHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgZmlsbD0nIzhDQ0I3RScvPjxyZWN0IHdpZHRoPSc2NCcgaGVpZ2h0PSc2NCcgZmlsbD0ndXJsKCNzKScvPjwvZz48L3N2Zz4=") 0 0 / 64px 64px; --cr-frame: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOTInIGhlaWdodD0nMTkyJyB2aWV3Qm94PScwIDAgOTYgOTYnPjxmaWx0ZXIgaWQ9J2wnIHg9Jy0xMCUnIHk9Jy0xMCUnIHdpZHRoPScxMjAlJyBoZWlnaHQ9JzEyMCUnPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuOScgbnVtT2N0YXZlcz0nMicgc2VlZD0nMTEnLz4gPGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCA1LjYgMCAwIDAgLTEuMzUnLz48ZmVDb21wb3NpdGUgaW49J1NvdXJjZUdyYXBoaWMnIG9wZXJhdG9yPSdpbicvPjwvZmlsdGVyPiA8ZyBmaWx0ZXI9J3VybCgjbCknIGZpbGw9J25vbmUnIHN0cm9rZT0nIzIzMjIyQScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJz4gPHBhdGggZD0nTTI3LjQgNi4zQzMwLjMgNi4wIDM0LjMgNC4zIDM3LjggNC4xQzQxLjQgMy45IDQ1LjUgNC44IDQ4LjcgNS4xQzUxLjkgNS40IDUzLjggNS44IDU3LjAgNS44QzYwLjEgNS44IDY0LjUgNC45IDY3LjggNS4xQzcxLjEgNS40IDczLjkgNi4zIDc2LjggNy4zQzc5LjYgOC4zIDgzLjAgOS4wIDg1LjAgMTEuMkM4Ny4wIDEzLjQgODcuNyAxNy44IDg4LjggMjAuNUM4OS45IDIzLjIgOTEuMiAyNC42IDkxLjYgMjcuNkM5Mi4xIDMwLjYgOTEuNSAzNC44IDkxLjYgMzguNEM5MS43IDQyLjAgOTIuNyA0NS44IDkyLjQgNDkuMEM5Mi4xIDUyLjIgODkuOCA1NC40IDg5LjggNTcuNUM4OS44IDYwLjYgOTIuNCA2NC41IDkyLjQgNjcuNkM5Mi4zIDcwLjggOTAuOCA3My41IDg5LjYgNzYuNEM4OC41IDc5LjQgODcuNiA4My4yIDg1LjMgODUuM0M4My4wIDg3LjMgNzguNiA4Ny44IDc1LjggODguNkM3Mi45IDg5LjUgNzEuMyA5MC4yIDY4LjEgOTAuNUM2NC44IDkwLjcgNTkuOCA5MC40IDU2LjQgOTAuNEM1My4wIDkwLjMgNTAuNSA5MC4yIDQ3LjggOTAuM0M0NS4wIDkwLjUgNDIuOSA5MC45IDM5LjkgOTEuMkMzNi45IDkxLjUgMzMuMyA5Mi43IDI5LjcgOTIuMkMyNi4yIDkxLjggMjEuMyA4OS44IDE4LjQgODguNEMxNS41IDg3LjEgMTQuMiA4Ni4yIDEyLjIgODQuMEMxMC4zIDgxLjggNy42IDc4LjMgNi42IDc1LjJDNS42IDcyLjEgNi42IDY4LjYgNi4zIDY1LjZDNi4wIDYyLjUgNC43IDU5LjcgNC42IDU3LjBDNC40IDU0LjMgNS40IDUyLjYgNS41IDQ5LjRDNS42IDQ2LjEgNS4yIDQwLjkgNS4wIDM3LjRDNC45IDMzLjkgNC41IDMxLjMgNC43IDI4LjNDNC45IDI1LjMgNS4zIDIyLjMgNi40IDE5LjZDNy41IDE2LjkgOS4yIDE0LjQgMTEuNSAxMi4xQzEzLjggOS45IDE3LjUgNi45IDIwLjIgNi4wQzIyLjggNS4wIDI0LjUgNi43IDI3LjQgNi4zWicgc3Ryb2tlLXdpZHRoPScyLjYnLz4gPHBhdGggZD0nTTMxLjUgNC4yQzM0LjggMy45IDM3LjggNC45IDQwLjggNS4wQzQzLjggNS4wIDQ2LjQgNC40IDQ5LjQgNC41QzUyLjMgNC41IDU0LjkgNS4zIDU4LjMgNS4yQzYxLjcgNS4xIDY2LjQgNC4wIDY5LjYgNC4wQzcyLjkgNC4wIDc1LjMgNC4xIDc3LjkgNS4yQzgwLjQgNi4zIDgzLjIgOC41IDg1LjEgMTAuOEM4Ny4wIDEzLjEgODguMCAxNS42IDg5LjMgMTguOEM5MC42IDIyLjAgOTIuOSAyNi42IDkzLjAgMzAuMEM5My4yIDMzLjQgOTAuNyAzNi40IDkwLjIgMzkuMkM4OS43IDQyLjEgOTAuMCA0NC40IDkwLjAgNDcuMEM5MC4xIDQ5LjcgODkuNyA1Mi4xIDkwLjQgNTUuMUM5MS4wIDU4LjIgOTMuOCA2Mi4xIDkzLjkgNjUuMkM5My45IDY4LjQgOTIuMSA3MS4wIDkwLjUgNzQuMUM4OS4wIDc3LjIgODcuMSA4MS4xIDg0LjYgODMuOEM4Mi4xIDg2LjUgNzguMCA4OS4wIDc1LjUgOTAuM0M3Mi45IDkxLjcgNzIuMCA5MS43IDY5LjQgOTIuMEM2Ni44IDkyLjMgNjMuMiA5Mi41IDU5LjkgOTIuMUM1Ni43IDkxLjcgNTMuNyA4OS45IDQ5LjkgODkuNUM0Ni4xIDg5LjAgNDAuOSA4OS41IDM3LjMgODkuNEMzMy42IDg5LjIgMzAuNyA4OC42IDI4LjAgODguM0MyNS4zIDg4LjAgMjMuNSA4OC4zIDIxLjEgODcuNUMxOC43IDg2LjYgMTUuOSA4NS41IDEzLjggODMuM0MxMS43IDgxLjIgOS41IDc3LjUgOC40IDc0LjVDNy4zIDcxLjUgNy45IDY4LjAgNy40IDY1LjNDNi45IDYyLjYgNS44IDYxLjUgNS4zIDU4LjVDNC43IDU1LjUgNC41IDUwLjUgNC4yIDQ3LjRDNC4wIDQ0LjIgMy40IDQyLjUgMy43IDM5LjZDNC4xIDM2LjggNi4xIDMzLjMgNi40IDMwLjJDNi43IDI3LjAgNC44IDIzLjcgNS42IDIwLjlDNi41IDE4LjEgOS4wIDE1LjcgMTEuNSAxMy40QzE0LjEgMTEuMSAxNy42IDguNSAyMC45IDcuMEMyNC4yIDUuNCAyOC4yIDQuNiAzMS41IDQuMlonIHN0cm9rZS13aWR0aD0nMS40JyBvcGFjaXR5PScuNCcvPjwvZz48L3N2Zz4=") 60 / 26px / 2px round; --cr-frame-2: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOTInIGhlaWdodD0nMTkyJyB2aWV3Qm94PScwIDAgOTYgOTYnPjxmaWx0ZXIgaWQ9J2wnIHg9Jy0xMCUnIHk9Jy0xMCUnIHdpZHRoPScxMjAlJyBoZWlnaHQ9JzEyMCUnPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuOScgbnVtT2N0YXZlcz0nMicgc2VlZD0nMTEnLz4gPGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCA1LjYgMCAwIDAgLTEuMzUnLz48ZmVDb21wb3NpdGUgaW49J1NvdXJjZUdyYXBoaWMnIG9wZXJhdG9yPSdpbicvPjwvZmlsdGVyPiA8ZyBmaWx0ZXI9J3VybCgjbCknIGZpbGw9J25vbmUnIHN0cm9rZT0nIzIzMjIyQScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJz4gPHBhdGggZD0nTTI3LjQgNS4wQzMwLjMgNS4wIDM0LjggNS45IDM4LjAgNS43QzQxLjMgNS41IDQzLjMgMy44IDQ2LjggMy45QzUwLjIgNC4wIDU1LjIgNi4wIDU4LjggNi4zQzYyLjMgNi42IDY1LjUgNS41IDY4LjMgNS44QzcxLjEgNi4xIDcyLjcgNi45IDc1LjUgOC4wQzc4LjMgOS4xIDgyLjkgMTAuOCA4NC45IDEyLjVDODYuOSAxNC4zIDg2LjUgMTUuOSA4Ny42IDE4LjRDODguOCAyMS4wIDkxLjQgMjQuNiA5MS44IDI3LjlDOTIuMyAzMS4xIDkwLjIgMzQuNiA5MC4zIDM3LjhDOTAuNCA0MC45IDkyLjQgNDMuMiA5Mi40IDQ2LjZDOTIuMyA0OS45IDkwLjUgNTQuOSA5MC4wIDU4LjFDODkuNiA2MS4yIDg5LjcgNjIuNSA4OS42IDY1LjRDODkuNiA2OC40IDkwLjcgNzIuOSA5MC4wIDc1LjlDODkuMiA3OC45IDg3LjcgODEuMiA4NS4zIDgzLjRDODIuOSA4NS42IDc4LjMgODcuNiA3NS41IDg5LjFDNzIuNyA5MC42IDcxLjMgOTIuMSA2OC42IDkyLjNDNjUuOCA5Mi41IDYyLjcgOTAuNCA1OS4xIDkwLjJDNTUuNCA4OS45IDQ5LjcgOTAuMiA0Ni41IDkwLjZDNDMuMiA5MS4wIDQyLjQgOTIuMyAzOS42IDkyLjRDMzYuNyA5Mi42IDMyLjggOTIuMiAyOS42IDkxLjVDMjYuNSA5MC45IDIzLjUgODkuOSAyMC42IDg4LjZDMTcuNiA4Ny4zIDE0LjIgODUuNSAxMS42IDgzLjZDOS4xIDgxLjcgNi41IDgwLjEgNS4yIDc3LjJDNC4wIDc0LjMgNC4wIDY5LjggNC4wIDY2LjNDNC4wIDYyLjggNS4wIDU5LjMgNS4yIDU2LjFDNS40IDUyLjkgNC45IDUwLjIgNS4xIDQ3LjFDNS4yIDQ0LjAgNi4yIDQwLjcgNi4wIDM3LjRDNS45IDM0LjIgNC4yIDMwLjcgNC4yIDI3LjZDNC4yIDI0LjUgNS4wIDIxLjIgNi4xIDE4LjdDNy4yIDE2LjIgOC42IDE0LjUgMTEuMCAxMi4zQzEzLjUgMTAuMSAxOC4xIDYuNiAyMC44IDUuNEMyMy41IDQuMiAyNC41IDUuMCAyNy40IDUuMFonIHN0cm9rZS13aWR0aD0nMi42Jy8+IDxwYXRoIGQ9J00zMC44IDMuOUMzMy40IDMuNyAzNC44IDUuMyAzNy41IDUuM0M0MC4xIDUuMyA0My4zIDQuMyA0Ni44IDQuMEM1MC4yIDMuNyA1NS4wIDMuNiA1OC40IDMuNkM2MS43IDMuNSA2NC4wIDMuMiA2Ni44IDMuOEM2OS42IDQuNSA3MS45IDYuMCA3NS4yIDcuNkM3OC40IDkuMiA4My45IDExLjMgODYuMyAxMy4zQzg4LjggMTUuMyA4OC44IDE3LjMgODkuOCAxOS44QzkwLjkgMjIuMiA5Mi42IDI1LjIgOTIuOCAyNy45QzkyLjkgMzAuNiA5MS4xIDMyLjYgOTEuMCAzNi4yQzkwLjggMzkuNyA5MS4zIDQ1LjcgOTEuOCA0OS4zQzkyLjMgNTMuMCA5My41IDU1LjAgOTMuOCA1OC4xQzk0LjIgNjEuMiA5NC41IDY0LjkgOTMuOCA2OC4wQzkzLjEgNzEuMSA5MS4xIDc0LjIgODkuNyA3Ni45Qzg4LjMgNzkuNyA4Ny44IDgyLjggODUuNSA4NC40QzgzLjIgODYuMSA3OC42IDg1LjUgNzUuOSA4Ni44QzczLjEgODguMSA3Mi40IDkxLjYgNjkuMiA5Mi40QzY2LjAgOTMuMyA2MC4zIDkyLjEgNTYuNyA5Mi4wQzUzLjEgOTIuMCA1MC41IDkyLjQgNDcuNiA5Mi4wQzQ0LjcgOTEuNyA0MS44IDkwLjAgMzkuMSA4OS45QzM2LjQgODkuOSAzNC44IDkyLjAgMzEuNiA5MS45QzI4LjMgOTEuOCAyMi45IDkwLjUgMTkuNiA4OS4xQzE2LjIgODcuNyAxMy42IDg1LjcgMTEuNCA4My4zQzkuMiA4MC44IDcuMSA3Ni45IDYuMiA3NC40QzUuMyA3MS45IDUuOCA3MC43IDYuMCA2OC4yQzYuMSA2NS42IDcuNyA2Mi44IDcuMyA1OS4wQzcuMCA1NS4yIDQuMSA0OS4wIDMuOSA0NS41QzMuNyA0Mi4wIDUuNyA0MC45IDYuMSAzNy44QzYuNiAzNC44IDYuOCAzMC4xIDYuOCAyNy4yQzYuNyAyNC40IDQuOCAyMy40IDUuOCAyMC44QzYuOCAxOC4xIDEwLjIgMTMuOCAxMi45IDExLjRDMTUuNiA5LjAgMTkuMCA3LjcgMjEuOSA2LjVDMjQuOSA1LjIgMjguMiA0LjEgMzAuOCAzLjlaJyBzdHJva2Utd2lkdGg9JzEuNCcgb3BhY2l0eT0nLjQnLz48L2c+PC9zdmc+") 60 / 26px / 2px round; --cr-frame-s: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOTInIGhlaWdodD0nMTkyJyB2aWV3Qm94PScwIDAgOTYgOTYnPjxmaWx0ZXIgaWQ9J2wnIHg9Jy0xMCUnIHk9Jy0xMCUnIHdpZHRoPScxMjAlJyBoZWlnaHQ9JzEyMCUnPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuOScgbnVtT2N0YXZlcz0nMicgc2VlZD0nMTEnLz4gPGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCA1LjYgMCAwIDAgLTEuMzUnLz48ZmVDb21wb3NpdGUgaW49J1NvdXJjZUdyYXBoaWMnIG9wZXJhdG9yPSdpbicvPjwvZmlsdGVyPiA8ZyBmaWx0ZXI9J3VybCgjbCknIGZpbGw9J25vbmUnIHN0cm9rZT0nIzIzMjIyQScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJz4gPHBhdGggZD0nTTIxLjQgMy41QzI0LjEgMy4xIDI5LjEgNS4yIDMyLjYgNS4yQzM2LjEgNS4yIDM5LjAgMy41IDQyLjIgMy41QzQ1LjQgMy42IDQ4LjEgNS4xIDUxLjcgNS40QzU1LjIgNS42IDU5LjcgNC44IDYzLjQgNS4wQzY3LjEgNS4yIDcxLjUgNi4wIDc0LjAgNi40Qzc2LjYgNi44IDc2LjggNi44IDc4LjYgNy4zQzgwLjUgNy44IDgzLjEgOC4wIDg0LjkgOS4zQzg2LjcgMTAuNiA4OC4yIDEyLjggODkuNCAxNS4xQzkwLjYgMTcuNCA5MS43IDIwLjAgOTIuMCAyMy4xQzkyLjMgMjYuMyA5MS41IDMwLjcgOTEuMyAzMy45QzkxLjIgMzcuMiA5MS4yIDM5LjcgOTEuMSA0Mi43QzkxLjEgNDUuNyA5MS4xIDQ4LjYgOTAuOSA1MS44QzkwLjYgNTQuOSA4OS43IDU4LjIgODkuOCA2MS41Qzg5LjggNjQuOSA5MS4wIDY4LjcgOTEuMiA3MS44QzkxLjQgNzQuOSA5Mi4yIDc3LjkgOTEuMCA4MC4wQzg5LjkgODIuMSA4NS45IDgyLjggODQuMiA4NC40QzgyLjYgODYuMSA4My4xIDg4LjcgODEuMyA4OS44Qzc5LjQgOTAuOCA3Ni4wIDkwLjUgNzMuMiA5MC43QzcwLjMgOTAuOCA2Ny4yIDkwLjYgNjMuOSA5MC43QzYwLjcgOTAuOCA1Ny4wIDkxLjQgNTMuNiA5MS4zQzUwLjIgOTEuMyA0Ni42IDkwLjQgNDMuNCA5MC40QzQwLjIgOTAuNSAzNy45IDkxLjUgMzQuNiA5MS41QzMxLjIgOTEuNiAyNi4zIDkxLjEgMjMuMSA5MC41QzE5LjkgODkuOSAxNy41IDg4LjcgMTUuNCA4OC4xQzEzLjMgODcuNiAxMi4yIDg4LjggMTAuNyA4Ny4zQzkuMiA4NS44IDcuMyA4MS41IDYuMyA3OS4zQzUuMiA3Ny4xIDQuNiA3Ni43IDQuMiA3NC4xQzMuOSA3MS40IDMuNyA2Ny4wIDQuMCA2My41QzQuNCA1OS45IDYuMCA1Ni4wIDYuMyA1Mi43QzYuNiA0OS4zIDYuMCA0Ni43IDYuMCA0My4zQzYuMCA0MC4wIDYuMyAzNS45IDYuMiAzMi41QzYuMSAyOS4wIDUuOCAyNS41IDUuNiAyMi42QzUuNCAxOS42IDQuMiAxNi43IDUuMiAxNC44QzYuMSAxMi44IDkuNCAxMi4xIDExLjIgMTAuOUMxMy4xIDkuNyAxNC41IDguNyAxNi4yIDcuNEMxNy45IDYuMiAxOC43IDMuOSAyMS40IDMuNVonIHN0cm9rZS13aWR0aD0nMi40Jy8+IDxwYXRoIGQ9J00yMy4zIDIuNEMyNS43IDIuNCAyOS4wIDUuMSAzMi41IDUuMkMzNi4wIDUuMyA0MC44IDIuOSA0NC40IDMuMEM0OC4wIDMuMCA1MC45IDQuOCA1My45IDUuM0M1Ni44IDUuOCA1OC43IDUuOSA2MS45IDYuMEM2NS4xIDYuMSA2OS44IDUuOCA3My4yIDUuOEM3Ni43IDUuNyA4MC4xIDQuOSA4Mi42IDUuN0M4NS4yIDYuNSA4Ni43IDguOCA4OC4zIDEwLjRDOTAuMCAxMi4wIDkyLjAgMTMuNiA5Mi41IDE1LjNDOTIuOSAxNi45IDkxLjYgMTcuNCA5MS4yIDIwLjVDOTAuOCAyMy42IDg5LjkgMzAuMSA5MC4wIDMzLjdDOTAuMiAzNy4zIDkxLjkgMzkuMiA5Mi4yIDQyLjJDOTIuNSA0NS4yIDkyLjAgNDguNCA5MS43IDUxLjhDOTEuNCA1NS4yIDkwLjYgNTkuMCA5MC41IDYyLjZDOTAuNCA2Ni4yIDkxLjIgNzEuMCA5MS4yIDczLjVDOTEuMyA3Ni4wIDkxLjYgNzUuOSA5MC45IDc3LjZDOTAuMSA3OS4zIDg4LjQgODEuNiA4Ni43IDgzLjdDODQuOSA4NS43IDgyLjggODkuMCA4MC41IDkwLjFDNzguMiA5MS4yIDc1LjQgOTAuNCA3Mi45IDkwLjNDNzAuNSA5MC4xIDY4LjggODkuMiA2NS44IDg5LjJDNjIuOCA4OS4yIDU4LjYgOTAuMiA1NC45IDkwLjNDNTEuMSA5MC41IDQ2LjcgODkuNiA0My4zIDg5LjhDMzkuOSA5MC4xIDM3LjggOTEuNiAzNC41IDkyLjBDMzEuMiA5Mi41IDI2LjggOTMuMSAyMy41IDkyLjVDMjAuMyA5MS45IDE3LjYgODkuNSAxNS4yIDg4LjNDMTIuOCA4Ny4xIDEwLjUgODYuOSA5LjMgODUuMkM4LjAgODMuNiA4LjIgODAuNyA3LjcgNzguNkM3LjEgNzYuNCA2LjYgNzUuMyA2LjEgNzIuNUM1LjYgNjkuNiA0LjUgNjQuNiA0LjQgNjEuNkM0LjMgNTguNiA1LjIgNTcuNSA1LjQgNTQuNUM1LjYgNTEuNCA1LjMgNDYuNSA1LjYgNDMuMUM2LjAgMzkuNyA3LjMgMzcuNyA3LjQgMzQuMUM3LjQgMzAuNiA1LjggMjUuMSA1LjggMjIuMEM1LjcgMTguOCA2LjMgMTcuMCA3LjIgMTUuM0M4LjEgMTMuNiA5LjYgMTMuMyAxMS40IDExLjZDMTMuMiAxMC4wIDE2LjEgNi45IDE4LjEgNS40QzIwLjEgMy44IDIwLjkgMi40IDIzLjMgMi40Wicgc3Ryb2tlLXdpZHRoPScxLjMnIG9wYWNpdHk9Jy40Jy8+PC9nPjwvc3ZnPg==") 56 / 18px / 2px round; --cr-frame-soft: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxOTInIGhlaWdodD0nMTkyJyB2aWV3Qm94PScwIDAgOTYgOTYnPjxmaWx0ZXIgaWQ9J2wnIHg9Jy0xMCUnIHk9Jy0xMCUnIHdpZHRoPScxMjAlJyBoZWlnaHQ9JzEyMCUnPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuOScgbnVtT2N0YXZlcz0nMicgc2VlZD0nMTEnLz4gPGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCA1LjYgMCAwIDAgLTEuMzUnLz48ZmVDb21wb3NpdGUgaW49J1NvdXJjZUdyYXBoaWMnIG9wZXJhdG9yPSdpbicvPjwvZmlsdGVyPiA8ZyBmaWx0ZXI9J3VybCgjbCknIGZpbGw9J25vbmUnIHN0cm9rZT0nIzlBOTM4QScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJz4gPHBhdGggZD0nTTI3LjQgMy42QzMwLjcgMy4wIDM0LjggMy43IDM4LjMgNC4xQzQxLjcgNC41IDQ0LjkgNi4wIDQ4LjEgNS45QzUxLjIgNS44IDU0LjQgMy40IDU3LjQgMy41QzYwLjMgMy42IDYyLjIgNi4yIDY1LjYgNi41QzY4LjkgNi45IDc0LjIgNC45IDc3LjQgNS42QzgwLjYgNi4yIDgyLjggOC4zIDg0LjggMTAuN0M4Ni44IDEzLjAgODguNSAxNi42IDg5LjcgMTkuNkM5MC45IDIyLjUgOTEuNiAyNS4yIDkyLjAgMjguMkM5Mi40IDMxLjEgOTIuMiAzMy45IDkyLjIgMzcuMUM5Mi4zIDQwLjMgOTIuNyA0My43IDkyLjQgNDcuM0M5Mi4xIDUwLjkgOTAuNiA1NS40IDkwLjIgNTguNkM4OS44IDYxLjggOTAuMSA2My43IDkwLjEgNjYuNUM5MC4yIDY5LjMgOTEuMSA3Mi40IDkwLjMgNzUuNUM4OS41IDc4LjUgODcuNyA4Mi40IDg1LjIgODQuN0M4Mi43IDg3LjEgNzguNSA4OC42IDc1LjMgODkuNkM3Mi4xIDkwLjYgNjguNiA5MC44IDY1LjggOTAuOUM2My4wIDkxLjAgNjEuNCA5MC4wIDU4LjUgOTAuMEM1NS42IDg5LjkgNTEuNiA5MC44IDQ4LjQgOTAuOEM0NS4xIDkwLjkgNDIuNCA5MC40IDM5LjIgOTAuNEMzNi4xIDkwLjQgMzIuOCA5MS4yIDI5LjUgOTAuOUMyNi4yIDkwLjYgMjIuNiA5MC4wIDE5LjUgODguN0MxNi40IDg3LjQgMTMuMSA4NS4zIDExLjEgODMuMkM5LjAgODEuMSA4LjEgNzguNiA3LjEgNzUuOUM2LjEgNzMuMyA1LjEgNzAuMCA0LjkgNjcuMUM0LjYgNjQuMiA1LjkgNjEuNyA1LjggNTguNUM1LjggNTUuMyA0LjkgNTEuNiA0LjYgNDguMUM0LjMgNDQuNiA0LjAgNDAuNCAzLjggMzcuNEMzLjcgMzQuNCAzLjMgMzIuOCAzLjcgMzAuMEM0LjAgMjcuMyA0LjcgMjQuMCA1LjggMjEuMEM3LjAgMTguMSA4LjUgMTQuNiAxMC42IDEyLjVDMTIuNiAxMC4zIDE1LjQgOS41IDE4LjIgOC4xQzIxLjAgNi42IDI0LjEgNC4zIDI3LjQgMy42Wicgc3Ryb2tlLXdpZHRoPScyLjInLz4gPHBhdGggZD0nTTMwLjIgMy42QzMzLjQgMy42IDM1LjIgNS43IDM4LjMgNS43QzQxLjMgNS43IDQ0LjkgMy40IDQ4LjMgMy41QzUxLjcgMy42IDU1LjEgNi4xIDU4LjQgNi4xQzYxLjcgNi4xIDY1LjEgMy43IDY4LjIgMy43QzcxLjIgMy42IDc0LjEgNC41IDc2LjcgNS44Qzc5LjIgNy4xIDgxLjEgOS4yIDgzLjQgMTEuNkM4NS43IDE0LjEgODguOSAxNy43IDkwLjQgMjAuOEM5MS45IDIzLjggOTIuMyAyNy4zIDkyLjUgMzAuMEM5Mi43IDMyLjggOTEuNiAzNC4zIDkxLjggMzcuMkM5MS45IDQwLjIgOTMuMyA0NC4yIDkzLjUgNDcuNUM5My44IDUwLjcgOTMuMSA1My43IDkzLjEgNTYuOEM5My4yIDYwLjAgOTQuNSA2My41IDkzLjggNjYuNkM5My4xIDY5LjcgOTAuMSA3Mi41IDg4LjggNzUuNkM4Ny42IDc4LjYgODguNSA4My4xIDg2LjQgODUuMUM4NC4zIDg3LjEgNzkuMiA4Ni44IDc2LjMgODcuNEM3My40IDg4LjAgNzIuMCA4Ny45IDY4LjkgODguN0M2NS44IDg5LjQgNjAuOSA5MS43IDU3LjcgOTIuMEM1NC40IDkyLjMgNTIuMiA5MC43IDQ5LjUgOTAuNEM0Ni43IDkwLjIgNDQuMSA5MC40IDQxLjAgOTAuNUMzNy45IDkwLjcgMzQuMCA5Mi4wIDMwLjkgOTEuM0MyNy44IDkwLjcgMjUuMSA4OC4wIDIyLjIgODYuNkMxOS4yIDg1LjIgMTUuNSA4NS4yIDEzLjEgODMuMkMxMC44IDgxLjEgOS41IDc3LjAgOC4xIDc0LjNDNi43IDcxLjYgNS4wIDcwLjAgNC41IDY2LjlDNC4wIDYzLjcgNC43IDU4LjQgNS4zIDU1LjJDNS44IDUyLjEgNy44IDUxLjAgNy43IDQ3LjhDNy41IDQ0LjYgNC41IDM5LjIgNC40IDM2LjBDNC4zIDMyLjggNi45IDMxLjAgNy4xIDI4LjVDNy40IDI1LjkgNC44IDIzLjggNS45IDIwLjZDNy4xIDE3LjUgMTIuMSAxMS44IDE0LjIgOS40QzE2LjQgNi45IDE2LjIgNi45IDE4LjggNi4wQzIxLjUgNS4wIDI2LjkgMy43IDMwLjIgMy42Wicgc3Ryb2tlLXdpZHRoPScxLjInIG9wYWNpdHk9Jy40Jy8+PC9nPjwvc3ZnPg==") 60 / 24px / 1px round; --cr-ring: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJyB2aWV3Qm94PScwIDAgMTAwIDEwMCc+PGZpbHRlciBpZD0nbCcgeD0nLTEwJScgeT0nLTEwJScgd2lkdGg9JzEyMCUnIGhlaWdodD0nMTIwJSc+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9Jy45JyBudW1PY3RhdmVzPScyJyBzZWVkPScxMScvPiA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDUuNiAwIDAgMCAtMS4zNScvPjxmZUNvbXBvc2l0ZSBpbj0nU291cmNlR3JhcGhpYycgb3BlcmF0b3I9J2luJy8+PC9maWx0ZXI+IDxnIGZpbHRlcj0ndXJsKCNsKScgZmlsbD0nbm9uZScgc3Ryb2tlPScjMjMyMjJBJyBzdHJva2UtbGluZWNhcD0ncm91bmQnPiA8cGF0aCBkPSdNOTQuNiA1MC4yQzk0LjIgNTYuMyA5My4zIDYyLjIgOTEuMyA2Ny42Qzg5LjIgNzMuMSA4Ni4xIDc4LjkgODIuMiA4Mi45Qzc4LjMgODYuOSA3My4zIDg5LjUgNjcuOCA5MS41QzYyLjMgOTMuNiA1NC45IDk1LjIgNDkuMCA5NS4yQzQzLjIgOTUuMiAzNy43IDkzLjkgMzIuNyA5MS44QzI3LjYgODkuNiAyMi45IDg2LjQgMTguOCA4Mi4zQzE0LjcgNzguMiAxMC42IDcyLjggNy45IDY3LjJDNS4yIDYxLjYgMi44IDU0LjUgMi44IDQ4LjlDMi43IDQzLjIgNS42IDM4LjYgNy44IDMzLjJDMTAuMCAyNy45IDEyLjIgMjEuMiAxNi4xIDE2LjdDMjAuMCAxMi4zIDI1LjcgOC44IDMxLjIgNi42QzM2LjcgNC40IDQzLjEgMy4yIDQ5LjAgMy41QzU0LjkgMy44IDYwLjcgNi4yIDY2LjUgOC41QzcyLjMgMTAuOCA3OS40IDEzLjQgODMuOSAxNy4yQzg4LjQgMjEuMSA5MS45IDI1LjkgOTMuNyAzMS40Qzk1LjUgMzYuOSA5NS4wIDQ0LjIgOTQuNiA1MC4yWicgc3Ryb2tlLXdpZHRoPScyLjYnLz4gPHBhdGggZD0nTTk1LjQgNDkuOEM5NS44IDU1LjcgOTYuNCA2My42IDk0LjQgNjguN0M5Mi40IDczLjggODcuNyA3Ni43IDgzLjYgODAuNUM3OS40IDg0LjMgNzQuOSA4OC45IDY5LjcgOTEuNkM2NC41IDk0LjMgNTguNCA5Ni44IDUyLjQgOTYuNUM0Ni40IDk2LjMgMzkuMiA5Mi41IDMzLjcgOTAuM0MyOC4yIDg4LjEgMjMuNSA4Ny4yIDE5LjMgODMuNEMxNS4xIDc5LjYgMTEuMSA3My4zIDguNSA2Ny41QzUuOSA2MS43IDQuMSA1NC40IDMuOSA0OC42QzMuNyA0Mi44IDQuNSAzOC4xIDcuMSAzMi43QzkuNyAyNy40IDE1LjIgMjAuMiAxOS40IDE2LjJDMjMuNyAxMi4zIDI3LjAgMTAuOCAzMi40IDguOEMzNy44IDYuOCA0NS43IDQuNiA1MS45IDQuNUM1OC4xIDQuMyA2NC4zIDYuMCA2OS44IDcuOEM3NS4yIDkuNiA4MC44IDExLjIgODQuNSAxNS40Qzg4LjIgMTkuNiA5MC4zIDI3LjMgOTIuMSAzMy4xQzkzLjkgMzguOCA5NS4xIDQzLjggOTUuNCA0OS44Wicgc3Ryb2tlLXdpZHRoPScxLjQnIG9wYWNpdHk9Jy41NScvPjwvZz48L3N2Zz4=") center / 100% 100% no-repeat; --cr-scribble: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PSc0MCcgdmlld0JveD0nMCAwIDEwIDQwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz4gPGZpbHRlciBpZD0nZycgeD0nLTUwJScgeT0nLTIwJScgd2lkdGg9JzIwMCUnIGhlaWdodD0nMTQwJSc+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9Jy42IDEuNCcgbnVtT2N0YXZlcz0nMicgc2VlZD0nMycvPiA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDQuNCAwIDAgMCAtMS4xJy8+PGZlQ29tcG9zaXRlIGluPSdTb3VyY2VHcmFwaGljJyBvcGVyYXRvcj0naW4nLz48L2ZpbHRlcj4gPHBhdGggZD0nTS02IDM3IEw0IDUgTTQgMzcgTDE0IDUnIGZpbGw9J25vbmUnIHN0cm9rZT0nI0ZGQzkzQycgc3Ryb2tlLXdpZHRoPSc3JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHZlY3Rvci1lZmZlY3Q9J25vbi1zY2FsaW5nLXN0cm9rZScgZmlsdGVyPSd1cmwoI2cpJy8+PC9zdmc+") 0 92% / 10px 48% repeat-x; --cr-scribble-sky: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PSc0MCcgdmlld0JveD0nMCAwIDEwIDQwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz4gPGZpbHRlciBpZD0nZycgeD0nLTUwJScgeT0nLTIwJScgd2lkdGg9JzIwMCUnIGhlaWdodD0nMTQwJSc+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9Jy42IDEuNCcgbnVtT2N0YXZlcz0nMicgc2VlZD0nMycvPiA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDQuNCAwIDAgMCAtMS4xJy8+PGZlQ29tcG9zaXRlIGluPSdTb3VyY2VHcmFwaGljJyBvcGVyYXRvcj0naW4nLz48L2ZpbHRlcj4gPHBhdGggZD0nTS02IDM3IEw0IDUgTTQgMzcgTDE0IDUnIGZpbGw9J25vbmUnIHN0cm9rZT0nI0E5RDNGNScgc3Ryb2tlLXdpZHRoPSc3JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHZlY3Rvci1lZmZlY3Q9J25vbi1zY2FsaW5nLXN0cm9rZScgZmlsdGVyPSd1cmwoI2cpJy8+PC9zdmc+") 0 92% / 10px 48% repeat-x; --cr-scribble-pink: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PSc0MCcgdmlld0JveD0nMCAwIDEwIDQwJyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz4gPGZpbHRlciBpZD0nZycgeD0nLTUwJScgeT0nLTIwJScgd2lkdGg9JzIwMCUnIGhlaWdodD0nMTQwJSc+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9Jy42IDEuNCcgbnVtT2N0YXZlcz0nMicgc2VlZD0nMycvPiA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDQuNCAwIDAgMCAtMS4xJy8+PGZlQ29tcG9zaXRlIGluPSdTb3VyY2VHcmFwaGljJyBvcGVyYXRvcj0naW4nLz48L2ZpbHRlcj4gPHBhdGggZD0nTS02IDM3IEw0IDUgTTQgMzcgTDE0IDUnIGZpbGw9J25vbmUnIHN0cm9rZT0nI0Y3QjRDMicgc3Ryb2tlLXdpZHRoPSc3JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHZlY3Rvci1lZmZlY3Q9J25vbi1zY2FsaW5nLXN0cm9rZScgZmlsdGVyPSd1cmwoI2cpJy8+PC9zdmc+") 0 92% / 10px 48% repeat-x; --cr-wave: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNCcgaGVpZ2h0PSc4JyB2aWV3Qm94PScwIDAgMjQgOCc+PGZpbHRlciBpZD0nbCcgeD0nLTEwJScgeT0nLTEwJScgd2lkdGg9JzEyMCUnIGhlaWdodD0nMTIwJSc+PGZlVHVyYnVsZW5jZSB0eXBlPSdmcmFjdGFsTm9pc2UnIGJhc2VGcmVxdWVuY3k9Jy45JyBudW1PY3RhdmVzPScyJyBzZWVkPScxMScvPiA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDUuNiAwIDAgMCAtMS4zNScvPjxmZUNvbXBvc2l0ZSBpbj0nU291cmNlR3JhcGhpYycgb3BlcmF0b3I9J2luJy8+PC9maWx0ZXI+IDxwYXRoIGZpbHRlcj0ndXJsKCNsKScgZD0nTTAgNCBRNiAwLjggMTIgNCBUMjQgNCcgZmlsbD0nbm9uZScgc3Ryb2tlPScjRjU4OTNBJyBzdHJva2Utd2lkdGg9JzIuNicgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+PC9zdmc+") 0 100% / 24px 8px repeat-x; --cr-rule: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nNicgdmlld0JveD0nMCAwIDEyMCA2Jz48ZmlsdGVyIGlkPSdsJyB4PSctMTAlJyB5PSctMTAlJyB3aWR0aD0nMTIwJScgaGVpZ2h0PScxMjAlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzInIHNlZWQ9JzExJy8+IDxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgNS42IDAgMCAwIC0xLjM1Jy8+PGZlQ29tcG9zaXRlIGluPSdTb3VyY2VHcmFwaGljJyBvcGVyYXRvcj0naW4nLz48L2ZpbHRlcj4gPHBhdGggZmlsdGVyPSd1cmwoI2wpJyBkPSdNMCAzIFExMCAxLjggMjAgMyBRMzAgMy40IDQwIDMgUTUwIDMuNyA2MCAzIFE3MCAyLjUgODAgMyBROTAgMy40IDEwMCAzIFExMTAgMi4wIDEyMCAzJyBmaWxsPSdub25lJyBzdHJva2U9JyMyMzIyMkEnIHN0cm9rZS13aWR0aD0nMS44JyBvcGFjaXR5PScwLjUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgLz48L3N2Zz4=") 0 0 / 120px 6px repeat-x; --cr-rule-dash: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMjAnIGhlaWdodD0nNicgdmlld0JveD0nMCAwIDEyMCA2Jz48ZmlsdGVyIGlkPSdsJyB4PSctMTAlJyB5PSctMTAlJyB3aWR0aD0nMTIwJScgaGVpZ2h0PScxMjAlJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjknIG51bU9jdGF2ZXM9JzInIHNlZWQ9JzExJy8+IDxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgNS42IDAgMCAwIC0xLjM1Jy8+PGZlQ29tcG9zaXRlIGluPSdTb3VyY2VHcmFwaGljJyBvcGVyYXRvcj0naW4nLz48L2ZpbHRlcj4gPHBhdGggZmlsdGVyPSd1cmwoI2wpJyBkPSdNMCAzIFExMCAxLjggMjAgMyBRMzAgMy40IDQwIDMgUTUwIDMuNyA2MCAzIFE3MCAyLjUgODAgMyBROTAgMy40IDEwMCAzIFExMTAgMi4wIDEyMCAzJyBmaWxsPSdub25lJyBzdHJva2U9JyMyMzIyMkEnIHN0cm9rZS13aWR0aD0nMS44JyBvcGFjaXR5PScwLjMyJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1kYXNoYXJyYXk9JzcgNicvPjwvc3ZnPg==") 0 0 / 120px 6px repeat-x; --cr-blob: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJyB2aWV3Qm94PScwIDAgMTAwIDEwMCc+IDxmaWx0ZXIgaWQ9J2cnIHg9Jy0xMCUnIHk9Jy0xMCUnIHdpZHRoPScxMjAlJyBoZWlnaHQ9JzEyMCUnPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuMDMnIG51bU9jdGF2ZXM9JzInIHNlZWQ9JzInIHJlc3VsdD0ndycvPiA8ZmVEaXNwbGFjZW1lbnRNYXAgaW49J1NvdXJjZUdyYXBoaWMnIGluMj0ndycgc2NhbGU9JzYnIHhDaGFubmVsU2VsZWN0b3I9J1InIHlDaGFubmVsU2VsZWN0b3I9J0cnIHJlc3VsdD0nZCcvPiA8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nLjU1IDEuMycgbnVtT2N0YXZlcz0nMycgc2VlZD0nOScvPjxmZUNvbG9yTWF0cml4IHZhbHVlcz0nMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgNSAwIDAgMCAtMS40NScgcmVzdWx0PSdtJy8+IDxmZUNvbXBvc2l0ZSBpbj0nZCcgaW4yPSdtJyBvcGVyYXRvcj0naW4nLz48L2ZpbHRlcj4gPHBhdHRlcm4gaWQ9J3MnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnIHBhdHRlcm5UcmFuc2Zvcm09J3JvdGF0ZSgtNDUpJz48cmVjdCB3aWR0aD0nOCcgaGVpZ2h0PScyLjInIGZpbGw9JyNmZmYnIG9wYWNpdHk9Jy4yNCcvPjwvcGF0dGVybj4gPGcgZmlsdGVyPSd1cmwoI2cpJz48cGF0aCBkPSdNOTEuMCA0OS40QzkwLjUgNTUuNiA4OS44IDYzLjIgODYuNyA2OS4zQzgzLjYgNzUuMyA3OS4xIDgyLjYgNzIuNiA4NS42QzY2LjEgODguNiA1NS43IDg3LjEgNDcuOCA4Ny4yQzQwLjAgODcuNCAzMS42IDg5LjMgMjUuMiA4Ni41QzE4LjkgODMuNyAxMy4wIDc2LjggOS44IDcwLjNDNi42IDYzLjkgNS45IDU0LjMgNi4wIDQ3LjZDNi4wIDQxLjAgNi43IDM2LjQgOS45IDMwLjVDMTMuMCAyNC43IDE4LjcgMTYuMiAyNS4xIDEyLjVDMzEuNCA4LjggNDAuMyA4LjIgNDcuOSA4LjJDNTUuNSA4LjIgNjMuNSA4LjggNzAuNSAxMi43Qzc3LjUgMTYuNiA4Ni4zIDI1LjYgODkuNyAzMS43QzkzLjEgMzcuOSA5MS41IDQzLjEgOTEuMCA0OS40WicgZmlsbD0nI0ZGQzkzQycvPjxwYXRoIGQ9J005NC4yIDUwLjVDOTMuNiA1Ny41IDkwLjcgNjcuNSA4Ni44IDcyLjhDODIuOCA3OC4xIDc2LjQgNzkuNiA3MC41IDgyLjNDNjQuNiA4NC45IDU4LjIgODguNyA1MS40IDg4LjdDNDQuNiA4OC44IDM2LjYgODUuMSAyOS43IDgyLjVDMjIuOSA3OS45IDEzLjcgNzguNiAxMC4xIDcyLjlDNi42IDY3LjMgNy42IDU2LjIgOC40IDQ4LjZDOS4yIDQxLjEgMTEuMiAzMi43IDE0LjcgMjcuNkMxOC4yIDIyLjUgMjMuOSAyMS4yIDI5LjQgMTguMEMzNS4wIDE0LjkgNDAuNSA5LjMgNDguMCA4LjZDNTUuNiA3LjggNjcuNiA5LjkgNzQuNyAxMy43QzgxLjggMTcuNCA4Ny4yIDI0LjggOTAuNSAzMC45QzkzLjcgMzcuMSA5NC45IDQzLjUgOTQuMiA1MC41WicgZmlsbD0ndXJsKCNzKScvPjwvZz48L3N2Zz4=") center / 100% 100% no-repeat; } page, .tokens { --stage-width: 170px; --stage-height: 190px; --stage-bottom: 0px; --art-rendering: auto; --page-bg: radial-gradient(60% 40% at 0% 10%, rgba(255, 190, 150, .45), transparent), radial-gradient(50% 35% at 100% 15%, rgba(160, 230, 200, .45), transparent), radial-gradient(60% 40% at 0% 95%, rgba(210, 190, 255, .35), transparent), linear-gradient(180deg, #fff6ea, #fce9d6); --page-color: #fff6ea; --zh: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif; --blur: none; --nav-bg: var(--card); --nav-ink: var(--ink); --nav-muted: var(--ink-2); --switch: #2e9c78; --jelly-shadow: 0 6px 14px rgba(0, 0, 0, .12), inset 0 3px 5px rgba(255, 255, 255, .8), inset 0 -4px 8px rgba(0, 0, 0, .08); --jelly-honey-shadow: 0 3px 6px rgba(208, 138, 6, .3), 0 2px 0 rgba(208, 138, 6, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-honey-pressed: 0 1px 3px rgba(208, 138, 6, .3), 0 0 0 rgba(208, 138, 6, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-mint-shadow: 0 8px 18px rgba(46, 156, 120, .38), 0 3px 0 rgba(46, 156, 120, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-mint-pressed: 0 4px 9px rgba(46, 156, 120, .38), 0 1px 0 rgba(46, 156, 120, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-pink-shadow: 0 8px 18px rgba(217, 88, 122, .38), 0 3px 0 rgba(217, 88, 122, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-pink-pressed: 0 4px 9px rgba(217, 88, 122, .38), 0 1px 0 rgba(217, 88, 122, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-orange-shadow: 0 8px 18px rgba(184, 58, 18, .5), 0 4px 0 rgba(184, 58, 18, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-orange-pressed: 0 4px 9px rgba(184, 58, 18, .5), 0 2px 0 rgba(184, 58, 18, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-pill-shadow: 0 5px 10px rgba(212, 170, 130, .2), 0 2px 0 rgba(212, 170, 130, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-pill-pressed: 0 2px 5px rgba(212, 170, 130, .2), 0 0 0 rgba(212, 170, 130, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-honey-pressed: 0 1px 3px rgba(208, 138, 6, .3), 0 0 0 rgba(208, 138, 6, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-mint-pressed: 0 4px 9px rgba(46, 156, 120, .38), 0 1px 0 rgba(46, 156, 120, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-pink-pressed: 0 4px 9px rgba(217, 88, 122, .38), 0 1px 0 rgba(217, 88, 122, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-orange-pressed: 0 4px 9px rgba(184, 58, 18, .5), 0 2px 0 rgba(184, 58, 18, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --jelly-pill-pressed: 0 2px 5px rgba(212, 170, 130, .2), 0 0 0 rgba(212, 170, 130, .85), inset 0 3px 5px rgba(255, 255, 255, .8); --en: 'Fredoka', -apple-system, 'PingFang SC', sans-serif; --en-text: 'Fredoka', -apple-system, 'PingFang SC', sans-serif; --t-word: 56px; --t-display: 28px; --t-title: 24px; --t-section: 18px; --t-body: 16px; --t-caption: 13px; --t-read: 16px; --t-read-s: 13px; --lh-tight: 1.2; --lh-body: 1.5; --lh-word: 1.1; --ink: #3a2416; --ink-2: #6b4a35; --ink-3: #6f503a; --word: #a61e3c; --word-shadow: #ff9fb3; --signal: #f05a28; --on-signal: #2a1206; --ok-ink: #16523f; --no-ink: #891730; --cur-ink: #7a4a00; --mon-ink: #5b3fb0; --err: #972615; --cream: #fffefa; --cream-2: #fce9d6; --line: #f6e4cf; --card: linear-gradient(180deg, #fffefa, #fff5e8); --card-shadow: 0 10px 26px rgba(217, 142, 92, .2), inset 0 2px 3px #fff, inset 0 -4px 10px rgba(235, 201, 166, .5); --fade-bw: 0px; --fade-top: #fffefa; --fade-end: #fff5e8; --bar-shadow: 0 -4px 16px rgba(217, 142, 92, .2); --honey: linear-gradient(180deg, #ffefa8, #ffc93c); --mint: linear-gradient(180deg, #b4f3d8, #6fd6b0); --pink: linear-gradient(180deg, #ffd6df, #ff9fb3); --orange: linear-gradient(180deg, #ff9b5c, #f05a28); --pill: linear-gradient(180deg, #ffffff, #fff0dc); --lilac: linear-gradient(180deg, #c9b8f5, #8e6fe0); --stage-lilac: radial-gradient(#f7f1ff, #e6dcf7); --gold: #f0a400; --heat-1: #ffe7a3; --heat-2: #ffd25c; --heat-3: #f6a623; --scrim: rgba(42, 26, 16, .25); --groove: inset 0 3px 7px rgba(201, 162, 126, .5); --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --gutter: 16px; --hit: 44px; --btn-m: 48px; --btn-l: 56px; --r-xs: 8px; --r-s: 12px; --r-m: 18px; --r-l: 24px; --r-full: 999px; --dur-press: 120ms; --dur: 240ms; --ease: cubic-bezier(.2, .8, .2, 1); --dur-hop: 600ms; --dur-confetti: 1200ms; --dur-shake: 250ms; --dur-bob: 1200ms; --dur-calm: 150ms; } page { min-height: calc(100 * var(--wx-vh)); background: var(--page-bg); color: var(--ink); font-family: var(--zh); font-size: var(--t-body); } .card { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); background: var(--card); box-shadow: var(--card-shadow); border-radius: var(--r-l); } .jelly { border-radius: var(--r-l); box-shadow: var(--jelly-shadow); } .jelly-honey { background: var(--honey); box-shadow: var(--jelly-honey-shadow); } .jelly-mint { background: var(--mint); box-shadow: var(--jelly-mint-shadow); } .jelly-pink { background: var(--pink); box-shadow: var(--jelly-pink-shadow); } .jelly-orange { background: var(--orange); box-shadow: var(--jelly-orange-shadow); color: var(--on-signal); } .jelly-pill { background: var(--pill); box-shadow: var(--jelly-pill-shadow); } .jelly-honey, .jelly-mint, .jelly-pink, .jelly-orange, .jelly-pill { transition: transform var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease); } .tap-hover { transform: translateY(2px); } .jelly-honey.tap-hover, .tap-hover > .jelly-honey { box-shadow: var(--jelly-honey-pressed); } .jelly-mint.tap-hover, .tap-hover > .jelly-mint { box-shadow: var(--jelly-mint-pressed); } .jelly-pink.tap-hover, .tap-hover > .jelly-pink { box-shadow: var(--jelly-pink-pressed); } .jelly-orange.tap-hover, .tap-hover > .jelly-orange { box-shadow: var(--jelly-orange-pressed); } .jelly-pill.tap-hover, .tap-hover > .jelly-pill { box-shadow: var(--jelly-pill-pressed); } .row-hover { background: var(--line); transition: background-color var(--dur-press) var(--ease); } .press:active { transform: translateY(2px); } .calm .tap-hover, .calm.tap-hover, .calm .press:active { transform: none !important; } button::after { border: none; } .handle { flex: none; align-self: center; width: 40px; height: 5px; border-radius: var(--r-full); background: var(--ink-3); opacity: .3; } @keyframes up { from { transform: translateY(100%); } } @keyframes calm-in { from { opacity: 0; } } .t-display { font-size: var(--t-display); font-weight: 700; line-height: var(--lh-tight); } .t-title { font-size: var(--t-title); font-weight: 700; } .t-section { font-size: var(--t-section); font-weight: 700; } .t-caption { font-size: var(--t-caption); color: var(--ink-2); } .tab-space { height: calc(64px + env(safe-area-inset-bottom)); } .end-space { flex: none; height: calc(var(--s-3) + env(safe-area-inset-bottom)); } .calm, .calm view, .calm image, .calm text, .calm button { animation: none !important; transition: none !important; } .calm .calm-fade { animation: calm-in var(--dur-calm) ease-out !important; } .calm .confetti { display: none; } .big { --t-read: 18px; --t-read-s: 15px; } page, .tokens { --m-out: cubic-bezier(.16, 1, .3, 1); --m-slow: 1; } .stagger > view, .stagger > text, .stagger > label { animation: m-rise calc(600ms * var(--m-slow, 1)) var(--m-out) backwards; } .sk-pixel .stagger > view, .sk-pixel .stagger > text, .sk-pixel .stagger > label, .sk-pixel.stagger > view, .sk-pixel.stagger > text, .sk-pixel.stagger > label { animation: m-px-drop calc(300ms * var(--m-slow, 1)) steps(3) backwards; } .stagger > view:nth-child(2), .stagger > text:nth-child(2), .stagger > label:nth-child(2) { animation-delay: calc(60ms * var(--m-slow, 1)); } .stagger > view:nth-child(3), .stagger > text:nth-child(3), .stagger > label:nth-child(3) { animation-delay: calc(120ms * var(--m-slow, 1)); } .stagger > view:nth-child(4), .stagger > text:nth-child(4), .stagger > label:nth-child(4) { animation-delay: calc(180ms * var(--m-slow, 1)); } .stagger > view:nth-child(5), .stagger > text:nth-child(5), .stagger > label:nth-child(5) { animation-delay: calc(240ms * var(--m-slow, 1)); } .stagger > view:nth-child(n+6), .stagger > text:nth-child(n+6), .stagger > label:nth-child(n+6) { animation-delay: calc(300ms * var(--m-slow, 1)); } .calm.stagger > view, .calm.stagger > text, .calm.stagger > label, .calm .stagger > view, .calm .stagger > text, .calm .stagger > label { animation: calm-in var(--dur-calm) ease-out !important; } @keyframes m-rise { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } } @keyframes m-px-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes m-fade { from { opacity: 0; } to { opacity: 1; } } .tap-hover { transform: translateY(2px) scale(.97, .95); } .sk-pixel .tap-hover, .sk-pixel.tap-hover { transform: translate(3px, 3px); } .jelly-honey, .jelly-mint, .jelly-pink, .jelly-orange, .jelly-pill { transition: transform calc(220ms * var(--m-slow, 1)) var(--m-out), box-shadow var(--dur-press) var(--ease); } .sk-pixel .jelly-honey, .sk-pixel .jelly-mint, .sk-pixel .jelly-pink, .sk-pixel .jelly-orange, .sk-pixel .jelly-pill { transition: none; } .fx-eat { animation: fx-eat calc(var(--fx-dur, 560ms) * var(--m-slow, 1)) linear forwards; } .sk-pixel .fx-eat { animation: fx-eat-px calc(var(--fx-dur, 420ms) * var(--m-slow, 1)) linear forwards; } .fx-fade { animation: fx-fade calc(320ms * var(--m-slow, 1)) ease-out forwards; } .calm .fx-eat, .calm .fx-fade { animation: fx-fade var(--dur-calm) ease-out forwards !important; } @keyframes fx-fade { to { opacity: 0; } } @keyframes fx-eat { 0% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.000 - 6px), #000 calc(var(--fx-r) * 0.000 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.000 - 6px), #000 calc(var(--fx-r) * 0.000 + 14px)); } 5% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.098 - 6px), #000 calc(var(--fx-r) * 0.098 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.098 - 6px), #000 calc(var(--fx-r) * 0.098 + 14px)); } 10% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.190 - 6px), #000 calc(var(--fx-r) * 0.190 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.190 - 6px), #000 calc(var(--fx-r) * 0.190 + 14px)); } 15% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.278 - 6px), #000 calc(var(--fx-r) * 0.278 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.278 - 6px), #000 calc(var(--fx-r) * 0.278 + 14px)); } 20% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.360 - 6px), #000 calc(var(--fx-r) * 0.360 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.360 - 6px), #000 calc(var(--fx-r) * 0.360 + 14px)); } 25% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.438 - 6px), #000 calc(var(--fx-r) * 0.438 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.438 - 6px), #000 calc(var(--fx-r) * 0.438 + 14px)); } 30% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.510 - 6px), #000 calc(var(--fx-r) * 0.510 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.510 - 6px), #000 calc(var(--fx-r) * 0.510 + 14px)); } 35% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.577 - 6px), #000 calc(var(--fx-r) * 0.577 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.577 - 6px), #000 calc(var(--fx-r) * 0.577 + 14px)); } 40% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.640 - 6px), #000 calc(var(--fx-r) * 0.640 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.640 - 6px), #000 calc(var(--fx-r) * 0.640 + 14px)); } 45% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.698 - 6px), #000 calc(var(--fx-r) * 0.698 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.698 - 6px), #000 calc(var(--fx-r) * 0.698 + 14px)); } 50% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.750 - 6px), #000 calc(var(--fx-r) * 0.750 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.750 - 6px), #000 calc(var(--fx-r) * 0.750 + 14px)); } 55% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.798 - 6px), #000 calc(var(--fx-r) * 0.798 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.798 - 6px), #000 calc(var(--fx-r) * 0.798 + 14px)); } 60% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.840 - 6px), #000 calc(var(--fx-r) * 0.840 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.840 - 6px), #000 calc(var(--fx-r) * 0.840 + 14px)); opacity: 1; } 65% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.878 - 6px), #000 calc(var(--fx-r) * 0.878 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.878 - 6px), #000 calc(var(--fx-r) * 0.878 + 14px)); } 70% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.910 - 6px), #000 calc(var(--fx-r) * 0.910 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.910 - 6px), #000 calc(var(--fx-r) * 0.910 + 14px)); } 75% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.938 - 6px), #000 calc(var(--fx-r) * 0.938 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.938 - 6px), #000 calc(var(--fx-r) * 0.938 + 14px)); } 80% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.960 - 6px), #000 calc(var(--fx-r) * 0.960 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.960 - 6px), #000 calc(var(--fx-r) * 0.960 + 14px)); } 85% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.978 - 6px), #000 calc(var(--fx-r) * 0.978 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.978 - 6px), #000 calc(var(--fx-r) * 0.978 + 14px)); } 90% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.990 - 6px), #000 calc(var(--fx-r) * 0.990 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.990 - 6px), #000 calc(var(--fx-r) * 0.990 + 14px)); } 95% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.997 - 6px), #000 calc(var(--fx-r) * 0.997 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.997 - 6px), #000 calc(var(--fx-r) * 0.997 + 14px)); } 100% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 1.000 - 6px), #000 calc(var(--fx-r) * 1.000 + 14px)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 1.000 - 6px), #000 calc(var(--fx-r) * 1.000 + 14px)); opacity: 0; } } @keyframes fx-eat-px { 0% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.000), #000 calc(var(--fx-r) * 0.000)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.000), #000 calc(var(--fx-r) * 0.000)); } 12.5% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.234), #000 calc(var(--fx-r) * 0.234)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.234), #000 calc(var(--fx-r) * 0.234)); } 25% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.438), #000 calc(var(--fx-r) * 0.438)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.438), #000 calc(var(--fx-r) * 0.438)); } 37.5% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.609), #000 calc(var(--fx-r) * 0.609)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.609), #000 calc(var(--fx-r) * 0.609)); } 50% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.750), #000 calc(var(--fx-r) * 0.750)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.750), #000 calc(var(--fx-r) * 0.750)); } 62.5% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.859), #000 calc(var(--fx-r) * 0.859)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.859), #000 calc(var(--fx-r) * 0.859)); opacity: 1; } 75% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.938), #000 calc(var(--fx-r) * 0.938)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.938), #000 calc(var(--fx-r) * 0.938)); } 87.5% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.984), #000 calc(var(--fx-r) * 0.984)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 0.984), #000 calc(var(--fx-r) * 0.984)); } 100% { -webkit-mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 1.000), #000 calc(var(--fx-r) * 1.000)); mask-image: radial-gradient(circle at var(--fx-x) var(--fx-y), transparent calc(var(--fx-r) * 1.000), #000 calc(var(--fx-r) * 1.000)); opacity: 0; } } .sk-doodle .card, .sk-doodle.card { border-radius: 14px 16px 13px 15px; } .sk-doodle .tap-hover, .sk-doodle.tap-hover { transform: translate(2px, 2px); } .sk-doodle .w-row { display: table; margin: 0 auto; padding: 0 .06em; background: linear-gradient(176deg, transparent 54%, var(--honey) 54%, var(--honey) 90%, transparent 90%); } .sk-crayon .card, .sk-crayon.card { border-image: var(--cr-frame); } .sk-crayon .jelly-honey, .sk-crayon .jelly-mint, .sk-crayon .jelly-pink, .sk-crayon .jelly-orange, .sk-crayon .jelly-pill, .sk-crayon.jelly-honey, .sk-crayon.jelly-mint, .sk-crayon.jelly-pink, .sk-crayon.jelly-orange, .sk-crayon.jelly-pill { border-image: var(--cr-frame-2); } .sk-crayon .tap-hover, .sk-crayon.tap-hover { transform: translate(1px, 2px); } .sk-crayon .w-row { display: table; margin: 0 auto; padding: 0 .1em; background: var(--cr-scribble); } /* components/nav-bar/nav-bar.wxss */ .nav:where([w-s="nav-bar"]) { display: flex; align-items: center; gap: var(--s-2); padding-left: var(--gutter); padding-bottom: var(--s-2); } .back-hit:where([w-s="nav-bar"]) { width: var(--hit); height: var(--hit); margin: 0 calc(var(--s-1) * -1); display: flex; align-items: center; justify-content: center; flex: none; } .back:where([w-s="nav-bar"]) { width: 36px; height: 36px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; } .icon:where([w-s="nav-bar"]) { width: 16px; height: 16px; } .slot:where([w-s="nav-bar"]) { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-2); } .sk-doodle:where([w-s="nav-bar"]) .back:where([w-s="nav-bar"]) { box-shadow: none; background: transparent; } .sk-doodle:where([w-s="nav-bar"]) .icon:where([w-s="nav-bar"]) { width: 22px; height: 22px; } .sk-crayon:where([w-s="nav-bar"]) .back:where([w-s="nav-bar"]) { box-shadow: none; border-image: none; background: transparent; } .sk-crayon:where([w-s="nav-bar"]) .icon:where([w-s="nav-bar"]) { width: 22px; height: 22px; } /* components/state-block/state-block.wxss */ .sb:where([w-s="state-block"]) { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--gutter); text-align: center; min-height: calc(var(--s-6) * 3); opacity: 0; transition: opacity var(--dur) var(--ease); } .sb-on:where([w-s="state-block"]) { opacity: 1; } .sb-bot:where([w-s="state-block"]) { width: calc(var(--s-6) * 3); height: calc(var(--s-6) * 3); } .sb-loading:where([w-s="state-block"]) .sb-bot:where([w-s="state-block"]) { width: calc(var(--s-6) * 2); height: calc(var(--s-6) * 2); } .sb-title:where([w-s="state-block"]) { font-size: var(--t-section); line-height: var(--lh-tight); font-weight: 700; color: var(--ink); } .sb-loading:where([w-s="state-block"]) .sb-title:where([w-s="state-block"]) { font-size: var(--t-body); font-weight: 400; color: var(--ink-2); } .sb-hint:where([w-s="state-block"]) { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); } .sb-act:where([w-s="state-block"]) { width: auto; margin: var(--s-2) 0 0; min-width: calc(var(--s-6) * 5); min-height: var(--hit); padding: 0 var(--s-5); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; line-height: var(--lh-tight); color: var(--ink); } .sb-act:where([w-s="state-block"]).jelly-orange:where([w-s="state-block"]) { color: var(--on-signal); } .sb-act:where([w-s="state-block"])::after { border: none; } .sb-row:where([w-s="state-block"]) { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title bot" "hint bot" "act act"; align-items: center; column-gap: var(--s-3); row-gap: var(--s-1); padding: 0; min-height: 0; text-align: left; } .sb-row:where([w-s="state-block"]) .sb-bot:where([w-s="state-block"]) { grid-area: bot; width: calc(var(--s-6) * 3); height: calc(var(--s-6) * 3); } .sb-row:where([w-s="state-block"]) .sb-title:where([w-s="state-block"]) { grid-area: title; align-self: end; } .sb-row:where([w-s="state-block"]) .sb-hint:where([w-s="state-block"]) { grid-area: hint; align-self: start; word-break: keep-all; } .sb-row:where([w-s="state-block"]) .sb-act:where([w-s="state-block"]) { grid-area: act; width: 100%; margin-top: var(--s-3); } .sk-doodle:where([w-s="state-block"]) .sb-bot:where([w-s="state-block"]) { width: 150px; height: 112px; } .sk-doodle:where([w-s="state-block"]).sb-loading:where([w-s="state-block"]) .sb-bot:where([w-s="state-block"]) { width: 110px; height: 82px; } .sk-doodle:where([w-s="state-block"]).sb-row:where([w-s="state-block"]) .sb-bot:where([w-s="state-block"]) { width: 112px; height: 96px; } .sk-crayon:where([w-s="state-block"]) .sb-bot:where([w-s="state-block"]) { width: 150px; height: 112px; } .sk-crayon:where([w-s="state-block"]).sb-loading:where([w-s="state-block"]) .sb-bot:where([w-s="state-block"]) { width: 110px; height: 82px; } .sk-crayon:where([w-s="state-block"]).sb-row:where([w-s="state-block"]) .sb-bot:where([w-s="state-block"]) { width: 112px; height: 96px; } /* components/scroll-more/scroll-more.wxss */ [w-h="scroll-more"] { display: flex; flex-direction: column; } .sm:where([w-s="scroll-more"]) { position: relative; flex: 1; height: 0; display: flex; flex-direction: column; margin: var(--fade-bw); overflow: hidden; border-radius: max(0px, calc(var(--r-l) - var(--fade-bw) + 2px)); } .sm-sc:where([w-s="scroll-more"]) { flex: 1; height: 0; } .sm-f:where([w-s="scroll-more"]) { position: absolute; left: 0; right: 0; pointer-events: none; } .sm-ft:where([w-s="scroll-more"]) { top: 0; height: 24px; background: var(--fade-top); -webkit-mask-image: linear-gradient(to bottom, #000 4px, transparent); mask-image: linear-gradient(to bottom, #000 4px, transparent); } .sm-fb:where([w-s="scroll-more"]) { bottom: 0; height: 48px; background: var(--fade-end); display: flex; align-items: flex-end; justify-content: center; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px); mask-image: linear-gradient(to bottom, transparent, #000 24px); } .sm-t:where([w-s="scroll-more"]) { padding: 12px 24px 4px; text-align: center; font-size: var(--t-read-s); line-height: 1.4; font-weight: 700; color: var(--ink-3); pointer-events: auto; } /* components/deck-picker/deck-picker.wxss */ .dp-root:where([w-s="deck-picker"]) { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; } .dp-backdrop:where([w-s="deck-picker"]) { position: absolute; inset: 0; background: var(--scrim); } .dp-sheet:where([w-s="deck-picker"]) { position: relative; display: flex; flex-direction: column; width: 100%; height: calc(78 * var(--wx-vh)); box-sizing: border-box; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--card); border-radius: var(--r-l) var(--r-l) 0 0; -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .dp-head:where([w-s="deck-picker"]) { flex: none; padding-bottom: var(--s-3); } .dp-handle:where([w-s="deck-picker"]) { width: 36px; height: 4px; background: var(--line); border-radius: var(--r-full); margin: 0 auto var(--s-3); } .dp-title:where([w-s="deck-picker"]) { display: block; font-size: var(--t-title); font-weight: 700; } .dp-caption:where([w-s="deck-picker"]) { display: block; font-size: var(--t-caption); color: var(--ink-2); margin-top: var(--s-1); } .dp-list:where([w-s="deck-picker"]) { flex: 1; height: 0; } .dp-row:where([w-s="deck-picker"]) { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--btn-l); padding: var(--s-2) var(--s-3); box-sizing: border-box; border-bottom: 1px solid var(--line); } .dp-selected:where([w-s="deck-picker"]) { background: var(--mint); border-radius: var(--r-m); color: var(--ok-ink); } .dp-copy:where([w-s="deck-picker"]) { min-width: 0; } .dp-name:where([w-s="deck-picker"]) { display: block; font-size: var(--t-body); font-weight: 700; overflow-wrap: anywhere; } .dp-check:where([w-s="deck-picker"]) { flex: none; font-size: var(--t-body); font-weight: 700; } .dp-cancel:where([w-s="deck-picker"]) { flex: none; min-height: var(--hit); display: flex; align-items: center; justify-content: center; margin-top: var(--s-3); border-radius: var(--r-full); } .dp-empty:where([w-s="deck-picker"]) { padding: var(--s-4); text-align: center; color: var(--ink-2); } .dp-languages:where([w-s="deck-picker"]) { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; } .dp-language:where([w-s="deck-picker"]) { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); min-width: 0; height: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; line-height: normal; white-space: nowrap; font-size: 16px; color: var(--ink); border-radius: var(--r-full); } /* components/fx-layer/fx-layer.wxss */ [w-h="fx-layer"] { position: fixed; left: 0; top: 0; width: calc(100 * var(--wx-vw)); height: calc(100 * var(--wx-vh)); pointer-events: none; z-index: 900; } .fx-canvas:where([w-s="fx-layer"]) { position: absolute; left: 0; top: 0; width: calc(100 * var(--wx-vw)); height: calc(100 * var(--wx-vh)); pointer-events: none; } .fx-px:where([w-s="fx-layer"]) { image-rendering: pixelated; } /* custom-tab-bar/index.wxss */ .bar:where([w-s="custom-tab-bar"]) { position: fixed; left: 0; right: 0; bottom: 0; display: flex; padding: var(--s-1) 0 env(safe-area-inset-bottom); background: var(--nav-bg); box-shadow: var(--bar-shadow); z-index: 20; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .bar:where([w-s="custom-tab-bar"]).hidden:where([w-s="custom-tab-bar"]) { transform: translateY(100%); opacity: 0; pointer-events: none; } .item:where([w-s="custom-tab-bar"]) { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; padding: 2px 0 6px; } .icon-wrap:where([w-s="custom-tab-bar"]) { width: var(--hit); height: 25px; border-radius: var(--r-s); display: flex; align-items: center; justify-content: center; } .icon:where([w-s="custom-tab-bar"]) { width: 21px; height: 21px; } .label:where([w-s="custom-tab-bar"]) { font-size: var(--t-caption); line-height: var(--lh-tight); font-weight: 700; color: var(--nav-muted); margin-top: 2px; } .label:where([w-s="custom-tab-bar"]).on:where([w-s="custom-tab-bar"]) { color: var(--nav-ink); } .bar:where([w-s="custom-tab-bar"]) { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); } .tb-pill:where([w-s="custom-tab-bar"]) { position: absolute; left: 0; top: calc(var(--s-1) + 2px); width: 33.3333%; height: 25px; display: flex; justify-content: center; pointer-events: none; transition: transform calc(550ms * var(--m-slow, 1)) var(--m-out); } .tb-pill:where([w-s="custom-tab-bar"]).tb-jump:where([w-s="custom-tab-bar"]), .bar:where([w-s="custom-tab-bar"]).sk-pixel:where([w-s="custom-tab-bar"]) .tb-pill:where([w-s="custom-tab-bar"]).tb-jump:where([w-s="custom-tab-bar"]) { transition: none; } .tb-pill:where([w-s="custom-tab-bar"])::before { content: ""; width: var(--hit); height: 25px; border-radius: var(--r-s); background: var(--honey); box-shadow: var(--jelly-honey-shadow); } .tb-f0:where([w-s="custom-tab-bar"])::before { animation: tb-stretch calc(550ms * var(--m-slow, 1)) var(--m-out); } .tb-f1:where([w-s="custom-tab-bar"])::before { animation: tb-stretch-b calc(550ms * var(--m-slow, 1)) var(--m-out); } .tb-on:where([w-s="custom-tab-bar"]) .icon:where([w-s="custom-tab-bar"]) { animation: tb-squash calc(550ms * var(--m-slow, 1)) var(--m-out); } .item:where([w-s="custom-tab-bar"]) { z-index: 1; } .bar:where([w-s="custom-tab-bar"]).sk-pixel:where([w-s="custom-tab-bar"]) .tb-pill:where([w-s="custom-tab-bar"]) { transition: transform calc(200ms * var(--m-slow, 1)) steps(2); } .bar:where([w-s="custom-tab-bar"]).sk-pixel:where([w-s="custom-tab-bar"]) .tb-pill:where([w-s="custom-tab-bar"])::after { content: ""; position: absolute; top: -3px; left: calc(50% + 15px); width: 9px; height: 9px; background: #C8283E; box-shadow: inset 0 0 0 1px #1E1426; } .bar:where([w-s="custom-tab-bar"]).sk-pixel:where([w-s="custom-tab-bar"]) .tb-f0:where([w-s="custom-tab-bar"])::before, .bar:where([w-s="custom-tab-bar"]).sk-pixel:where([w-s="custom-tab-bar"]) .tb-f1:where([w-s="custom-tab-bar"])::before, .bar:where([w-s="custom-tab-bar"]).sk-pixel:where([w-s="custom-tab-bar"]) .tb-on:where([w-s="custom-tab-bar"]) .icon:where([w-s="custom-tab-bar"]) { animation: none; } .bar:where([w-s="custom-tab-bar"]).sk-pixel:where([w-s="custom-tab-bar"]) .tb-f0:where([w-s="custom-tab-bar"])::after { animation: tb-blink calc(360ms * var(--m-slow, 1)) steps(1); } .bar:where([w-s="custom-tab-bar"]).sk-pixel:where([w-s="custom-tab-bar"]) .tb-f1:where([w-s="custom-tab-bar"])::after { animation: tb-blink-b calc(360ms * var(--m-slow, 1)) steps(1); } @keyframes tb-stretch { 30% { transform: scaleX(1.3); } } @keyframes tb-stretch-b { 30% { transform: scaleX(1.3); } } @keyframes tb-squash { 0% { transform: scale(1); } 30% { transform: scale(1.18, .82); } 100% { transform: scale(1); } } @keyframes tb-blink { 0%, 50% { opacity: 0; } 25%, 75% { opacity: 1; } } @keyframes tb-blink-b { 0%, 50% { opacity: 0; } 25%, 75% { opacity: 1; } } .bar:where([w-s="custom-tab-bar"]).sk-doodle:where([w-s="custom-tab-bar"]) { border-top: 1px solid var(--line); } .bar:where([w-s="custom-tab-bar"]).sk-doodle:where([w-s="custom-tab-bar"]) .tb-pill:where([w-s="custom-tab-bar"])::before { width: 34px; height: 9px; margin-top: 15px; border-radius: 3px 7px 4px 8px; box-shadow: none; transform: rotate(-3deg); } .bar:where([w-s="custom-tab-bar"]).sk-doodle:where([w-s="custom-tab-bar"]) .tb-f0:where([w-s="custom-tab-bar"])::before, .bar:where([w-s="custom-tab-bar"]).sk-doodle:where([w-s="custom-tab-bar"]) .tb-f1:where([w-s="custom-tab-bar"])::before { animation: none; } .bar:where([w-s="custom-tab-bar"]).sk-crayon:where([w-s="custom-tab-bar"]) { background: var(--cr-rule), var(--nav-bg); } .bar:where([w-s="custom-tab-bar"]).sk-crayon:where([w-s="custom-tab-bar"]) .tb-pill:where([w-s="custom-tab-bar"])::before { width: 46px; height: 30px; margin-top: -3px; border-radius: 0; box-shadow: none; background: var(--cr-blob); } .bar:where([w-s="custom-tab-bar"]).sk-crayon:where([w-s="custom-tab-bar"]) .tb-f0:where([w-s="custom-tab-bar"])::before, .bar:where([w-s="custom-tab-bar"]).sk-crayon:where([w-s="custom-tab-bar"]) .tb-f1:where([w-s="custom-tab-bar"])::before { animation: none; } /* pages/listen/listen.wxss */ :where(page[w-p="listen"]) .page{ height: calc(100 * var(--wx-vh)); display: flex; flex-direction: column; overflow: hidden; } :where(page[w-p="listen"]) .fill{ flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; } :where(page[w-p="listen"]) .main{ flex: 1; min-height: 0; display: flex; flex-direction: column; } :where(page[w-p="listen"]) .tab-space{ flex: none; } :where(page[w-p="listen"]) .deck-hit{ height: var(--hit); display: flex; align-items: center; min-width: 0; } :where(page[w-p="listen"]) .deck{ height: 36px; padding: 0 var(--s-3) 0 var(--s-4); border-radius: var(--r-full); display: flex; align-items: center; gap: var(--s-1); min-width: 0; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="listen"]) .deck-t{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(page[w-p="listen"]) .chev{ flex: none; width: 18px; height: 18px; } :where(page[w-p="listen"]) .head-row{ flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) var(--gutter) 0; min-height: var(--hit); } :where(page[w-p="listen"]) .station-n{ min-width: 0; font-size: var(--t-body); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(page[w-p="listen"]) .station-i{ font-family: var(--en); font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; } :where(page[w-p="listen"]) .seg{ flex: none; display: flex; padding: 3px; border-radius: var(--r-full); background: var(--line); box-shadow: var(--groove); } :where(page[w-p="listen"]) .seg-b{ min-width: 52px; height: 38px; padding: 0 var(--s-3); box-sizing: border-box; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; color: var(--ink-2); } :where(page[w-p="listen"]) .seg-b.on{ background: var(--cream); color: var(--ink); box-shadow: var(--jelly-pill-shadow); } :where(page[w-p="listen"]) .word-card{ flex: 1; min-height: 0; margin: var(--s-2) var(--gutter) 0; display: flex; flex-direction: column; overflow: hidden; } :where(page[w-p="listen"]) .card-in{ display: flex; flex-direction: column; flex: 1; height: 0; } :where(page[w-p="listen"]) .card-body{ padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-1); } :where(page[w-p="listen"]) .card-pet{ width: 56px; height: 60px; image-rendering: var(--art-rendering); } :where(page[w-p="listen"]) .word{ font-family: var(--en); display: block; font-size: var(--t-word); line-height: var(--lh-word); font-weight: 700; color: var(--word); text-shadow: 0 3px 0 var(--word-shadow); white-space: pre; } :where(page[w-p="listen"]) .reading{ display: block; font-family: var(--en-text); font-size: var(--t-read-s); line-height: var(--lh-body); color: var(--ink-2); overflow-wrap: anywhere; } :where(page[w-p="listen"]) .gloss{ display: block; font-size: var(--t-section); font-weight: 700; line-height: var(--lh-tight); } :where(page[w-p="listen"]) .divider{ align-self: stretch; height: 1px; background: var(--line); margin: var(--s-2) 0 var(--s-1); } :where(page[w-p="listen"]) .ex{ display: flex; flex-direction: column; gap: 2px; border-radius: var(--r-s); padding: var(--s-1) var(--s-2); } :where(page[w-p="listen"]) .ex-en{ font-family: var(--en-text); font-size: var(--t-read); line-height: var(--lh-body); } :where(page[w-p="listen"]) .ex-zh{ font-size: var(--t-read-s); line-height: var(--lh-body); color: var(--ink-2); } :where(page[w-p="listen"]) .example-reading{ display: block; font-family: var(--en-text); font-size: var(--t-read-s); line-height: 1.5; color: var(--ink-2); } :where(page[w-p="listen"]) .extra{ align-self: stretch; display: flex; gap: var(--s-2); align-items: flex-start; text-align: left; margin-top: var(--s-2); border-radius: var(--r-s); } :where(page[w-p="listen"]) .extra-t{ flex: 1; font-size: var(--t-read); line-height: var(--lh-body); } :where(page[w-p="listen"]) .col-i + .col-i{ margin-top: var(--s-1); } :where(page[w-p="listen"]) .ph-hl{ background: var(--heat-2); border-radius: 6px; } :where(page[w-p="listen"]) .ipa{ display: block; font-family: var(--en-text); font-size: var(--t-read); color: var(--ink-2); } :where(page[w-p="listen"]) .ph-rule{ display: block; font-size: var(--t-read-s); line-height: var(--lh-body); color: var(--ink-2); } :where(page[w-p="listen"]) .same{ align-self: stretch; display: flex; align-items: baseline; gap: var(--s-1); margin-top: var(--s-2); padding: var(--s-1) var(--s-2); border-radius: var(--r-s); text-align: left; font-size: var(--t-read-s); color: var(--ink-3); } :where(page[w-p="listen"]) .same-k{ flex: none; font-weight: 700; } :where(page[w-p="listen"]) .same-p{ flex: none; padding: 0 4px; border-radius: 4px; background: var(--heat-2); font-family: var(--en); font-weight: 700; color: var(--ink); } :where(page[w-p="listen"]) .same-t{ flex: 1; min-width: 0; font-family: var(--en-text); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(page[w-p="listen"]) .col-en{ display: block; font-family: var(--en-text); font-weight: 700; } :where(page[w-p="listen"]) .sk-doodle .col-en{ font-weight: 500; } :where(page[w-p="listen"]) .col-zh{ display: block; font-size: var(--t-read-s); color: var(--ink-2); } :where(page[w-p="listen"]) .lit{ background: var(--cream-2); } :where(page[w-p="listen"]) .tag{ flex: none; padding: 0 var(--s-2); height: var(--s-5); border-radius: var(--r-full); font-size: var(--t-caption); font-weight: 700; line-height: var(--s-5); text-align: center; } :where(page[w-p="listen"]) .ai{ font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; } :where(page[w-p="listen"]) .bob{ transform-origin: 50% 100%; animation: breathe calc(2400ms * var(--m-slow, 1)) ease-in-out infinite; } :where(page[w-p="listen"]) .sk-pixel .bob{ animation: px-bob calc(1000ms * var(--m-slow, 1)) steps(1) infinite; } @keyframes breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.02, .99); } } @keyframes px-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } :where(page[w-p="listen"]) .dots{ flex: none; display: flex; justify-content: center; gap: 6px; padding-top: var(--s-3); } :where(page[w-p="listen"]) .dot{ width: 8px; height: 8px; border-radius: var(--r-full); background: var(--line); } :where(page[w-p="listen"]) .dot.past{ background: var(--mint); } :where(page[w-p="listen"]) .dot.cur{ width: 22px; background: var(--honey); } :where(page[w-p="listen"]) .controls{ flex: none; display: flex; align-items: center; justify-content: space-between; padding: var(--s-3) var(--s-6) 0; } :where(page[w-p="listen"]) .key{ width: 52px; height: 52px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; } :where(page[w-p="listen"]) .key image{ width: 24px; height: 24px; } :where(page[w-p="listen"]) .play{ width: 80px; height: 80px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; } :where(page[w-p="listen"]) .play image{ width: 36px; height: 36px; } :where(page[w-p="listen"]) .note{ flex: none; min-height: calc(var(--t-caption) * var(--lh-tight)); text-align: center; margin: var(--s-2) var(--gutter) 0; font-size: var(--t-caption); line-height: var(--lh-tight); color: var(--ink-2); } :where(page[w-p="listen"]) .note.err{ color: var(--err); font-weight: 700; } :where(page[w-p="listen"]) .judge{ flex: none; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--gutter) 0; } :where(page[w-p="listen"]) .btn-text{ flex: none; min-height: var(--btn-m); padding: 0 var(--s-2); display: flex; align-items: center; font-size: var(--t-body); font-weight: 700; color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 5px; } :where(page[w-p="listen"]) .set-line{ flex: none; min-height: var(--hit); margin: var(--s-1) var(--gutter) 0; padding: 0 var(--s-3); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; gap: var(--s-2); } :where(page[w-p="listen"]) .set-ic{ flex: none; width: 18px; height: 18px; } :where(page[w-p="listen"]) .set-t{ min-width: 0; font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(page[w-p="listen"]) .set-sheet .set-row{ padding: 0 var(--s-3); } :where(page[w-p="listen"]) .set-sheet .set-opts{ justify-content: flex-start; padding: var(--s-2) var(--s-3) var(--s-3); flex-wrap: wrap; } :where(page[w-p="listen"]) .btn{ flex: 1; height: var(--btn-m); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-size: var(--t-body); font-weight: 700; } :where(page[w-p="listen"]) .bi{ width: 18px; height: 18px; } :where(page[w-p="listen"]) .auto{ flex: none; min-height: var(--hit); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-5); } :where(page[w-p="listen"]) .auto-t{ font-size: var(--t-body); color: var(--ink-2); } :where(page[w-p="listen"]) .play-options{ display: flex; justify-content: center; gap: var(--s-2); flex: none; padding: 0 var(--gutter); } :where(page[w-p="listen"]) .option{ min-height: 36px; min-width: var(--hit); padding: 0 var(--s-4); display: flex; align-items: center; justify-content: center; border-radius: var(--r-full); font-size: var(--t-caption); font-weight: 700; margin: var(--s-1) 0; } :where(page[w-p="listen"]) .compact .controls{ padding-top: var(--s-2); } :where(page[w-p="listen"]) .compact .play{ width: 64px; height: 64px; } :where(page[w-p="listen"]) .compact .key{ width: var(--hit); height: var(--hit); } :where(page[w-p="listen"]) .compact .judge{ padding-top: var(--s-2); } :where(page[w-p="listen"]) .compact .card-body{ padding-top: var(--s-3); } :where(page[w-p="listen"]) .link{ min-height: var(--hit); padding: 0 var(--s-3); border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; color: var(--ink-2); } :where(page[w-p="listen"]) .back-sheet{ flex: none; align-self: center; margin-top: var(--s-1); } :where(page[w-p="listen"]) .sheet-mask{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: var(--scrim); z-index: 30; display: flex; align-items: flex-end; } :where(page[w-p="listen"]) .done{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; background: var(--page-bg); background-color: var(--page-color); display: flex; flex-direction: column; align-items: center; padding: calc(env(safe-area-inset-top) + 72px) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom)); box-sizing: border-box; animation: calm-in var(--dur) ease-out; overflow-y: auto; -webkit-overflow-scrolling: touch; } :where(page[w-p="listen"]) .done-compact{ padding-top: calc(env(safe-area-inset-top) + 52px); } :where(page[w-p="listen"]) .done-compact .done-hero{ width: 110px; height: 110px; } :where(page[w-p="listen"]) .done-compact .done-pet{ width: 88px; height: 96px; } :where(page[w-p="listen"]) .done-compact .done-card{ margin-top: var(--s-3); padding: var(--s-3) var(--s-4); } :where(page[w-p="listen"]) .done-compact .done-acts{ gap: var(--s-2); } :where(page[w-p="listen"]) .done-skip{ position: absolute; left: var(--s-2); top: calc(env(safe-area-inset-top) + 40px); min-width: var(--hit); min-height: var(--hit); padding: 0 var(--s-3); border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; color: var(--ink-2); } :where(page[w-p="listen"]) .done-hero{ position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; } :where(page[w-p="listen"]) .done-glow{ position: absolute; top: var(--s-2); right: var(--s-2); bottom: var(--s-2); left: var(--s-2); border-radius: var(--r-full); background: radial-gradient(circle, var(--cream) 0%, transparent 70%); } :where(page[w-p="listen"]) .done-pet{ position: relative; width: 120px; height: 130px; image-rendering: var(--art-rendering); } :where(page[w-p="listen"]) .done-title{ margin-top: var(--s-2); font-size: var(--t-display); font-weight: 700; text-align: center; } :where(page[w-p="listen"]) .done-sub{ margin-top: var(--s-2); font-size: var(--t-body); color: var(--ink-2); } :where(page[w-p="listen"]) .done-card{ align-self: stretch; margin-top: var(--s-5); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="listen"]) .done-card-t{ font-size: var(--t-body); font-weight: 700; } :where(page[w-p="listen"]) .done-w{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); } :where(page[w-p="listen"]) .done-en{ font-family: var(--en-text); font-size: var(--t-read); font-weight: 700; color: var(--word); } :where(page[w-p="listen"]) .done-zh{ min-width: 0; font-size: var(--t-read-s); color: var(--ink-2); text-align: right; } :where(page[w-p="listen"]) .guess-row{ display: flex; gap: var(--s-2); } :where(page[w-p="listen"]) .guess{ flex: 1; min-width: 0; padding: var(--s-2) var(--s-1); border-radius: var(--r-m); background: var(--page-color); box-shadow: inset 0 0 0 1.5px var(--line); display: flex; flex-direction: column; align-items: center; gap: 2px; } :where(page[w-p="listen"]) .guess.open{ box-shadow: inset 0 0 0 2px var(--ink); } :where(page[w-p="listen"]) .guess-w{ font-family: var(--en-text); font-size: var(--t-read); font-weight: 700; color: var(--word); white-space: nowrap; } :where(page[w-p="listen"]) .guess-ipa{ font-family: var(--en-text); font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; } :where(page[w-p="listen"]) .sk-pixel .guess{ border-radius: 0; } :where(page[w-p="listen"]) .done-streak{ align-self: stretch; margin-top: var(--s-4); display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-body); } :where(page[w-p="listen"]) .streak-n{ flex: none; width: 32px; height: 32px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-family: var(--en); font-weight: 700; font-variant-numeric: tabular-nums; } :where(page[w-p="listen"]) .done-rest{ color: var(--ink-2); } :where(page[w-p="listen"]) .done-acts{ align-self: stretch; margin-top: auto; display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="listen"]) .done-go{ height: var(--btn-l); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-section); font-weight: 700; } :where(page[w-p="listen"]) .done-go2{ height: var(--btn-m); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="listen"]) .map-sheet{ position: relative; width: 100%; height: calc(85 * var(--wx-vh)); box-sizing: border-box; padding: var(--s-2) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom)); border-radius: var(--r-l) var(--r-l) 0 0; background: var(--card); display: flex; flex-direction: column; gap: var(--s-3); animation: up var(--dur) var(--ease); } :where(page[w-p="listen"]) .map-head{ flex: none; display: flex; justify-content: space-between; align-items: flex-start; } :where(page[w-p="listen"]) .block{ display: block; margin-top: var(--s-1); } :where(page[w-p="listen"]) .rnd{ min-height: var(--hit); display: flex; align-items: center; gap: var(--s-2); } :where(page[w-p="listen"]) .map-wait{ flex: none; } :where(page[w-p="listen"]) .map-list{ flex: 1; height: 0; } :where(page[w-p="listen"]) .st-row{ position: relative; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-1) 0; } :where(page[w-p="listen"]) .st-row::before{ content: ''; position: absolute; left: calc((var(--s-5) - var(--s-1)) / 2); top: 0; bottom: 0; width: var(--s-1); background: var(--line); z-index: 0; } :where(page[w-p="listen"]) .node{ position: relative; z-index: 1; flex: none; width: var(--s-5); height: var(--s-5); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-caption); font-weight: 700; color: var(--ok-ink); } :where(page[w-p="listen"]) .st{ position: relative; flex: 1; padding: var(--s-2) var(--s-4); border-radius: var(--r-m); } :where(page[w-p="listen"]) .st-t{ display: block; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="listen"]) .st-s{ display: block; font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="listen"]) .next{ position: absolute; right: var(--s-3); top: 50%; transform: translateY(-50%); padding: var(--s-1) var(--s-2); border-radius: var(--r-full); font-size: var(--t-caption); font-weight: 700; } :where(page[w-p="listen"]) .switch-deck{ flex: none; height: var(--btn-m); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="listen"]) .speed-sheet{ width: 100%; padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); box-sizing: border-box; border-radius: var(--r-l) var(--r-l) 0 0; background: var(--card); max-height: calc(85 * var(--wx-vh)); overflow-y: auto; overscroll-behavior: contain; } :where(page[w-p="listen"]) .speed-row{ display: flex; justify-content: space-between; align-items: center; min-height: var(--btn-l); padding: 0 var(--s-3); border-bottom: 1px solid var(--line); } :where(page[w-p="listen"]) .speed-row.selected{ background: var(--mint); border-radius: var(--r-m); font-weight: 700; } :where(page[w-p="listen"]) .japanese-word{ font-family: var(--zh); } :where(page[w-p="listen"]) .word-card{ position: relative; } :where(page[w-p="listen"]) .w-row{ display: block; white-space: pre; } :where(page[w-p="listen"]) .ch{ display: inline-block; animation: ch-in calc(550ms * var(--m-slow, 1)) var(--m-out) backwards; animation-delay: calc(var(--i) * 30ms * var(--m-slow, 1)); } :where(page[w-p="listen"]) .late .ch{ animation-delay: calc((var(--i) * 30ms + 640ms) * var(--m-slow, 1)); } :where(page[w-p="listen"]) .meta{ animation: m-fade calc(450ms * var(--m-slow, 1)) ease-out backwards; animation-delay: calc(120ms * var(--m-slow, 1)); } :where(page[w-p="listen"]) .late .meta{ animation-delay: calc(720ms * var(--m-slow, 1)); } :where(page[w-p="listen"]) .sk-pixel .ch{ animation: ch-type calc(1ms * var(--m-slow, 1)) steps(1) backwards; animation-delay: calc(var(--i) * 45ms * var(--m-slow, 1)); } :where(page[w-p="listen"]) .sk-pixel .late .ch{ animation-delay: calc((var(--i) * 45ms + 560ms) * var(--m-slow, 1)); } :where(page[w-p="listen"]) .sk-pixel .late .meta{ animation-delay: calc(600ms * var(--m-slow, 1)); } :where(page[w-p="listen"]) .sk-pixel .meta{ animation: m-fade calc(240ms * var(--m-slow, 1)) steps(2) backwards; } @keyframes ch-in { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } @keyframes ch-type { from { opacity: 0; } to { opacity: 0; } } :where(page[w-p="listen"]) .calm .card-body{ animation: calm-in var(--dur-calm) ease-out !important; } :where(page[w-p="listen"]) .ghost{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden; pointer-events: none; } :where(page[w-p="listen"]) .ghost .ch,:where(page[w-p="listen"]) .ghost .meta{ animation: none; } :where(page[w-p="listen"]) .stamp{ position: absolute; z-index: 3; padding: 4px 10px; font-size: var(--t-caption); font-weight: 800; white-space: nowrap; color: #0f3d2e; border-radius: var(--r-full); background: var(--mint); box-shadow: 0 4px 12px rgba(63, 174, 136, .3); transform: rotate(-4deg); animation: stamp-in calc(400ms * var(--m-slow, 1)) var(--m-out) backwards; } :where(page[w-p="listen"]) .sk-pixel .stamp{ color: var(--ok-ink); box-shadow: inset 0 0 0 2px #1E1426, 2px 2px 0 #1E1426; transform: none; animation: px-stamp calc(200ms * var(--m-slow, 1)) steps(2) backwards; } :where(page[w-p="listen"]) .stamp.probe{ left: 0; top: 0; visibility: hidden; animation: none; } @keyframes stamp-in { from { transform: scale(1.5) rotate(-8deg); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } } @keyframes px-stamp { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } } :where(page[w-p="listen"]) .done-pet{ animation: land calc(900ms * var(--m-slow, 1)) var(--m-out) backwards; } :where(page[w-p="listen"]) .sk-pixel .done-pet{ animation: px-land calc(450ms * var(--m-slow, 1)) steps(4) backwards; } :where(page[w-p="listen"]) .sk-soft .done-glow{ top: -44px; right: -44px; bottom: -44px; left: -44px; background: radial-gradient(circle, rgba(255, 233, 150, .95) 0%, rgba(255, 239, 168, .7) 40%, rgba(255, 239, 168, 0) 68%); } :where(page[w-p="listen"]) .done-glow{ animation: m-fade calc(1000ms * var(--m-slow, 1)) ease-out calc(300ms * var(--m-slow, 1)) backwards, glow calc(3200ms * var(--m-slow, 1)) ease-in-out calc(1300ms * var(--m-slow, 1)) infinite; } :where(page[w-p="listen"]) .sk-pixel .done-glow{ animation: m-fade calc(300ms * var(--m-slow, 1)) steps(2) backwards; } :where(page[w-p="listen"]) .done-title{ white-space: pre; } :where(page[w-p="listen"]) .done-title .tc{ display: inline-block; animation: ch-in calc(600ms * var(--m-slow, 1)) var(--m-out) backwards; animation-delay: calc((350ms + var(--i) * 40ms) * var(--m-slow, 1)); } :where(page[w-p="listen"]) .sk-pixel .done-title .tc{ animation: px-stamp calc(200ms * var(--m-slow, 1)) steps(2) backwards; animation-delay: calc((450ms + var(--i) * 45ms) * var(--m-slow, 1)); } :where(page[w-p="listen"]) .done-sub{ animation: m-fade calc(500ms * var(--m-slow, 1)) ease-out calc(800ms * var(--m-slow, 1)) backwards; } :where(page[w-p="listen"]) .done-card,:where(page[w-p="listen"]) .done-w,:where(page[w-p="listen"]) .guess{ animation: m-rise calc(600ms * var(--m-slow, 1)) var(--m-out) backwards; animation-delay: calc((950ms + var(--i, 0) * 110ms) * var(--m-slow, 1)); } :where(page[w-p="listen"]) .sk-pixel .done-card,:where(page[w-p="listen"]) .sk-pixel .done-w,:where(page[w-p="listen"]) .sk-pixel .guess{ animation-name: m-px-drop; animation-duration: calc(300ms * var(--m-slow, 1)); animation-timing-function: steps(3); } :where(page[w-p="listen"]) .done-streak{ animation: m-fade calc(500ms * var(--m-slow, 1)) ease-out calc(1400ms * var(--m-slow, 1)) backwards; } :where(page[w-p="listen"]) .done-acts{ animation: m-fade calc(500ms * var(--m-slow, 1)) ease-out calc(1600ms * var(--m-slow, 1)) backwards; } @keyframes land { 0% { opacity: 0; transform: translateY(-36px); } 55% { opacity: 1; transform: translateY(2px) scale(1.03, .97); } 100% { transform: none; } } @keyframes px-land { 0% { transform: translateY(-48px); } 75% { transform: translateY(0); } 88% { transform: translateY(-6px); } 100% { transform: none; } } @keyframes glow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: .8; } } :where(page[w-p="listen"]) .sk-doodle .deck{ box-shadow: none; background: transparent; padding-left: 0; font-size: var(--t-section); } :where(page[w-p="listen"]) .sk-doodle .card-pet{ width: 150px; height: 96px; } :where(page[w-p="listen"]) .sk-doodle .key{ box-shadow: none; background: transparent; } :where(page[w-p="listen"]) .sk-doodle .key image{ width: 28px; height: 28px; } :where(page[w-p="listen"]) .sk-doodle .done-go2{ border-radius: var(--r-m); } :where(page[w-p="listen"]) .sk-doodle .seg{ box-shadow: var(--groove); background: var(--card); } :where(page[w-p="listen"]) .sk-doodle .seg-b.on{ background: var(--honey); } :where(page[w-p="listen"]) .sk-doodle .dot{ box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; } :where(page[w-p="listen"]) .sk-doodle .dot.past{ background: var(--ink); } :where(page[w-p="listen"]) .sk-doodle .dot.cur{ background: var(--honey); } :where(page[w-p="listen"]) .sk-doodle .done-hero{ width: 220px; height: 170px; } :where(page[w-p="listen"]) .sk-doodle .done-pet{ width: 220px; height: 170px; } :where(page[w-p="listen"]) .sk-doodle .done-glow{ display: none; } :where(page[w-p="listen"]) .sk-doodle .done-title .tc:nth-last-child(-n+3){ background: linear-gradient(176deg, transparent 56%, var(--honey) 56%, var(--honey) 92%, transparent 92%); } :where(page[w-p="listen"]) .sk-doodle .done-w{ border-top: 1.5px dashed #D9D3C6; } :where(page[w-p="listen"]) .sk-doodle .done-en{ font-size: var(--t-section); } :where(page[w-p="listen"]) .sk-doodle .streak-n{ border-radius: var(--r-xs); box-shadow: inset 0 0 0 2px var(--ink); } :where(page[w-p="listen"]) .sk-doodle .ex-hit{ font-weight: 700; background: linear-gradient(transparent 58%, var(--honey) 58%); } :where(page[w-p="listen"]) .sk-crayon .col-en{ font-weight: 500; } :where(page[w-p="listen"]) .sk-crayon .deck{ box-shadow: none; border-image: none; background: transparent; padding-left: 0; font-size: var(--t-section); } :where(page[w-p="listen"]) .sk-crayon .card-pet{ width: 150px; height: 96px; } :where(page[w-p="listen"]) .sk-crayon .key{ box-shadow: none; border-image: none; background: transparent; } :where(page[w-p="listen"]) .sk-crayon .key image{ width: 28px; height: 28px; } :where(page[w-p="listen"]) .sk-crayon .play{ border-image: none; background: var(--cr-ring), var(--orange); } :where(page[w-p="listen"]) .sk-crayon .done-go2{ border-radius: var(--r-m); } :where(page[w-p="listen"]) .sk-crayon .seg{ box-shadow: none; border-image: var(--cr-frame-s); background: var(--card); } :where(page[w-p="listen"]) .sk-crayon .seg-b.on{ background: var(--honey); } :where(page[w-p="listen"]) .sk-crayon .dot{ box-shadow: none; background: var(--cr-ring); } :where(page[w-p="listen"]) .sk-crayon .dot.past{ background: var(--cr-ring), var(--ink); } :where(page[w-p="listen"]) .sk-crayon .dot.cur{ background: var(--cr-ring), var(--honey); } :where(page[w-p="listen"]) .sk-crayon .done-hero{ width: 220px; height: 170px; } :where(page[w-p="listen"]) .sk-crayon .done-pet{ width: 220px; height: 170px; } :where(page[w-p="listen"]) .sk-crayon .done-glow{ display: none; } :where(page[w-p="listen"]) .sk-crayon .done-title .tc:nth-last-child(-n+3){ background: var(--cr-scribble); } :where(page[w-p="listen"]) .sk-crayon .done-w{ border-top: 0; background: var(--cr-rule-dash); } :where(page[w-p="listen"]) .sk-crayon .done-en{ font-size: var(--t-section); } :where(page[w-p="listen"]) .sk-crayon .streak-n{ box-shadow: none; border-image: var(--cr-frame-s); } :where(page[w-p="listen"]) .sk-crayon .ex-hit{ font-weight: 700; padding-bottom: 3px; background: var(--cr-wave); } :where(page[w-p="listen"]) .play{ position: relative; } :where(page[w-p="listen"]) .play.waiting::after{ content: ''; position: absolute; top: -7px; right: -7px; bottom: -7px; left: -7px; border-radius: var(--r-full); border: 3px solid transparent; border-top-color: var(--heat-2); border-right-color: var(--heat-2); animation: buf-spin 1.1s linear infinite; } :where(page[w-p="listen"]) .eq{ display: flex; align-items: center; gap: 6px; height: 30px; } :where(page[w-p="listen"]) .eq-b{ width: 9px; height: 9px; border-radius: var(--r-full); background: currentColor; animation: buf-dot 1s ease-in-out infinite; } :where(page[w-p="listen"]) .eq-b:nth-child(2){ animation-delay: 0.16s; } :where(page[w-p="listen"]) .eq-b:nth-child(3){ animation-delay: 0.32s; } :where(page[w-p="listen"]) .jelly-orange .eq-b{ background: var(--on-signal, #fff); } :where(page[w-p="listen"]) .key.muted{ opacity: .35; } :where(page[w-p="listen"]) .buf{ flex: none; margin: var(--s-3) var(--gutter) 0; padding: var(--s-2) var(--s-3); display: flex; align-items: center; gap: var(--s-3); text-align: left; animation: buf-in calc(300ms * var(--m-slow, 1)) ease-out 600ms backwards; } :where(page[w-p="listen"]) .buf-pet{ flex: none; width: 40px; height: 40px; animation: buf-bob 1.6s ease-in-out infinite; image-rendering: var(--art-rendering); } :where(page[w-p="listen"]) .buf-t{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } :where(page[w-p="listen"]) .buf-h{ font-size: var(--t-body); font-weight: 700; color: var(--ink); } :where(page[w-p="listen"]) .buf-s{ font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="listen"]) .buf-bar{ margin-top: 6px; height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden; position: relative; } :where(page[w-p="listen"]) .buf-run{ position: absolute; top: 0; bottom: 0; width: 40%; border-radius: var(--r-full); background: var(--honey); animation: buf-run 1.4s ease-in-out infinite; } :where(page[w-p="listen"]) .sk-doodle .buf{ box-shadow: inset 0 0 0 2px var(--ink), 3px 3px 0 var(--ink); } :where(page[w-p="listen"]) .sk-doodle .buf-bar{ box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--card); } :where(page[w-p="listen"]) .sk-pixel .buf,:where(page[w-p="listen"]) .sk-pixel .buf-bar,:where(page[w-p="listen"]) .sk-pixel .buf-run{ border-radius: 0; } :where(page[w-p="listen"]) .sk-pixel .buf-run{ animation-timing-function: steps(6); } :where(page[w-p="listen"]) .sk-pixel .play.waiting::after{ border-radius: 0; animation-timing-function: steps(8); } :where(page[w-p="listen"]) .calm .play.waiting::after,:where(page[w-p="listen"]) .calm .eq-b,:where(page[w-p="listen"]) .calm .buf-pet,:where(page[w-p="listen"]) .calm .buf-run{ animation: none; } :where(page[w-p="listen"]) .calm .buf-run{ left: 30%; } :where(page[w-p="listen"]) .calm .buf{ animation: buf-in 1ms linear 600ms backwards; } @keyframes buf-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes buf-spin { to { transform: rotate(360deg); } } @keyframes buf-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-8px); opacity: 1; } } @keyframes buf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes buf-run { 0% { left: -40%; } 100% { left: 100%; } } /* pages/review/review.wxss */ :where(page[w-p="review"]) .wrap{ padding: var(--s-2) var(--gutter) var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); } :where(page[w-p="review"]) .today{ padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="review"]) .today-h{ display: flex; align-items: baseline; justify-content: space-between; } :where(page[w-p="review"]) .today-n{ font-size: var(--t-title); font-weight: 700; } :where(page[w-p="review"]) .today-m{ font-size: var(--t-body); color: var(--ink-2); } :where(page[w-p="review"]) .prog{ height: 10px; border-radius: var(--r-full); background: var(--line); box-shadow: var(--groove); overflow: hidden; } :where(page[w-p="review"]) .prog-in{ height: 100%; border-radius: var(--r-full); background: var(--mint); } :where(page[w-p="review"]) .today-note{ font-size: var(--t-read-s); line-height: var(--lh-body); color: var(--ink-2); } :where(page[w-p="review"]) .kinds{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) 6px; } :where(page[w-p="review"]) .kinds-l{ font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="review"]) .kinds{ row-gap: var(--s-2); } :where(page[w-p="review"]) .kind{ min-height: 36px; padding: 0 var(--s-3); box-sizing: border-box; border-radius: var(--r-full); display: flex; align-items: center; font-size: var(--t-caption); font-weight: 700; color: var(--ink); } :where(page[w-p="review"]) .start{ height: 52px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-section); font-weight: 700; } :where(page[w-p="review"]) .sift-card{ min-height: var(--btn-l); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); box-sizing: border-box; display: flex; align-items: center; gap: var(--s-3); } :where(page[w-p="review"]) .sc-l{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); } :where(page[w-p="review"]) .sc-t{ font-size: var(--t-section); font-weight: 700; } :where(page[w-p="review"]) .sc-s{ font-size: var(--t-read-s); color: var(--ink-2); } :where(page[w-p="review"]) .sc-chev{ flex: none; width: 20px; height: 20px; } :where(page[w-p="review"]) .play{ display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: calc(var(--s-3) * -1); } :where(page[w-p="review"]) .play-h{ font-size: var(--t-section); font-weight: 700; } :where(page[w-p="review"]) .play-row{ margin: 0 calc(var(--gutter) * -1); width: calc(100% + var(--gutter) * 2); } :where(page[w-p="review"]) .play-in{ display: flex; gap: var(--s-3); padding: 6px var(--gutter) 22px; width: max-content; } :where(page[w-p="review"]) .pc{ width: calc(70 * var(--wx-vw)); max-width: 300px; min-height: 148px; padding: var(--s-4); box-sizing: border-box; border-radius: var(--r-l); display: flex; flex-direction: column; gap: var(--s-1); background: var(--card); box-shadow: var(--card-shadow); white-space: normal; } :where(page[w-p="review"]) .pc-ic{ width: 40px; height: 40px; margin-bottom: 2px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .7); } :where(page[w-p="review"]) .pc-ic image{ width: 22px; height: 22px; } :where(page[w-p="review"]) .pc-k{ font-size: var(--t-caption); font-weight: 700; color: var(--mon-ink); } :where(page[w-p="review"]) .pc-t{ font-size: var(--t-section); font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :where(page[w-p="review"]) .pc-en{ font-family: var(--en-text); font-size: var(--t-read); } :where(page[w-p="review"]) .pc-s{ margin-top: auto; font-size: var(--t-read-s); color: var(--ink-2); } :where(page[w-p="review"]) .pc-by{ font-size: var(--t-read-s); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(page[w-p="review"]) .pc-w{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 2px; } :where(page[w-p="review"]) .pc-chip{ padding: 0 8px; border-radius: var(--r-full); background: var(--cream-2); font-family: var(--en-text); font-size: 13px; font-weight: 700; line-height: 22px; color: var(--ink-2); } :where(page[w-p="review"]) .pc-standup{ background: radial-gradient(circle at 88% 12%, #ffe9a8, #fff4d8 45%, #fffaf0); } :where(page[w-p="review"]) .pc-aha{ background: radial-gradient(circle at 92% 12%, #fff4cf, #fffefa 62%); } :where(page[w-p="review"]) .pc-scene{ background: radial-gradient(circle at 80% 20%, #f7f1ff, #e6dcf7); box-shadow: 0 10px 26px rgba(142, 111, 224, .18); } :where(page[w-p="review"]) .pc-tap{ background: radial-gradient(circle at 88% 14%, #ddf7ea, #fffefa 62%); } :where(page[w-p="review"]) .pc-rhythm{ background: radial-gradient(circle at 88% 14%, #ffd6df, #fffefa 62%); } :where(page[w-p="review"]) .pc-roots{ background: radial-gradient(circle at 88% 14%, #ede5ff, #fffefa 62%); } :where(page[w-p="review"]) .pc-roots .pc-t{ font-family: var(--en); font-size: 26px; font-weight: 700; } :where(page[w-p="review"]) .pc-etym .pc-t{ font-family: inherit; font-size: var(--t-section); } :where(page[w-p="review"]) .pc-etym .pc-en{ font-family: var(--en); font-weight: 700; } :where(page[w-p="review"]) .sk-pixel .pc{ border-radius: 0; box-shadow: inset 0 0 0 2px #1E1426, 4px 4px 0 rgba(30, 20, 38, .35); } :where(page[w-p="review"]) .sk-pixel .pc-ic,:where(page[w-p="review"]) .sk-pixel .pc-chip{ border-radius: 0; box-shadow: inset 0 0 0 2px #1E1426; } :where(page[w-p="review"]) .sk-pixel .pc-ic{ background: #FFF4DA; } :where(page[w-p="review"]) .sk-pixel .pc-k,:where(page[w-p="review"]) .sk-pixel .pc-chip,:where(page[w-p="review"]) .sk-pixel .pc-s,:where(page[w-p="review"]) .sk-pixel .pc-by{ color: #1E1426; } :where(page[w-p="review"]) .sk-pixel .pc-standup{ background: #FFD84A; } :where(page[w-p="review"]) .sk-pixel .pc-aha{ background: #FFF4DA; } :where(page[w-p="review"]) .sk-pixel .pc-scene{ background: #BEB0E4; } :where(page[w-p="review"]) .sk-pixel .pc-tap{ background: #B8EBA0; } :where(page[w-p="review"]) .sk-pixel .pc-rhythm{ background: #FFE0DB; } :where(page[w-p="review"]) .sk-pixel .pc-roots{ background: #E4DDF5; } :where(page[w-p="review"]) .speak-card{ min-height: var(--hit); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); box-sizing: border-box; display: flex; align-items: center; gap: var(--s-3); } :where(page[w-p="review"]) .sp-l{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); } :where(page[w-p="review"]) .sp-t{ font-size: var(--t-caption); font-weight: 700; color: var(--ink-2); } :where(page[w-p="review"]) .sp-en{ font-family: var(--en-text); font-size: var(--t-read); line-height: 1.35; } :where(page[w-p="review"]) .sp-zh{ font-size: var(--t-read-s); color: var(--ink-2); } :where(page[w-p="review"]) .sp-mic{ flex: none; width: 52px; height: 52px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; } :where(page[w-p="review"]) .sp-mic image{ width: var(--s-5); height: var(--s-5); } :where(page[w-p="review"]) .practice-art{ align-self: flex-end; width: 140px; height: 104px; margin: -8px -6px calc(var(--s-4) * -1 - 2px) 0; position: relative; z-index: 1; pointer-events: none; } :where(page[w-p="review"]) .sk-doodle .prog-in{ background: var(--honey); } :where(page[w-p="review"]) .sk-doodle .pc{ box-shadow: var(--card-shadow); border-radius: 14px 16px 13px 15px; } :where(page[w-p="review"]) .sk-doodle .pc-standup,:where(page[w-p="review"]) .sk-doodle .pc-aha,:where(page[w-p="review"]) .sk-doodle .pc-scene,:where(page[w-p="review"]) .sk-doodle .pc-tap,:where(page[w-p="review"]) .sk-doodle .pc-rhythm,:where(page[w-p="review"]) .sk-doodle .pc-roots{ background: var(--card); } :where(page[w-p="review"]) .sk-doodle .pc-ic{ background: var(--honey); box-shadow: inset 0 0 0 2px var(--ink); } :where(page[w-p="review"]) .sk-doodle .pc-k{ color: var(--ink-2); } :where(page[w-p="review"]) .sk-doodle .pc-chip{ background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); } :where(page[w-p="review"]) .sk-crayon .prog-in{ background: var(--honey); } :where(page[w-p="review"]) .sk-crayon .pc{ box-shadow: none; border-image: var(--cr-frame); } :where(page[w-p="review"]) .sk-crayon .pc-standup,:where(page[w-p="review"]) .sk-crayon .pc-aha,:where(page[w-p="review"]) .sk-crayon .pc-scene,:where(page[w-p="review"]) .sk-crayon .pc-tap,:where(page[w-p="review"]) .sk-crayon .pc-rhythm,:where(page[w-p="review"]) .sk-crayon .pc-roots{ background: var(--card); } :where(page[w-p="review"]) .sk-crayon .pc-ic{ box-shadow: none; background: var(--cr-blob); } :where(page[w-p="review"]) .sk-crayon .pc-standup .pc-ic{ background: var(--cr-ring), var(--cr-wax-pink); } :where(page[w-p="review"]) .sk-crayon .pc-aha .pc-ic{ background: var(--cr-ring), var(--cr-wax-sky); } :where(page[w-p="review"]) .sk-crayon .pc-scene .pc-ic{ background: var(--cr-ring), var(--cr-wax-green); } :where(page[w-p="review"]) .sk-crayon .pc-tap .pc-ic,:where(page[w-p="review"]) .sk-crayon .pc-rhythm .pc-ic{ background: var(--cr-ring), var(--cr-wax); } :where(page[w-p="review"]) .sk-crayon .pc-roots .pc-ic{ background: var(--cr-ring), var(--cr-wax-sky); } :where(page[w-p="review"]) .sk-crayon .pc-k{ color: var(--ink-2); } :where(page[w-p="review"]) .sk-crayon .pc-chip{ background: var(--card); box-shadow: none; border-image: var(--cr-frame-s); color: var(--ink); } :where(page[w-p="review"]) .kind{ position: relative; } :where(page[w-p="review"]) .kind::after{ content: ''; position: absolute; top: -5px; bottom: -5px; left: -2px; right: -2px; } /* pages/practice/practice.wxss */ :where(page[w-p="practice"]) .page{ min-height: calc(100 * var(--wx-vh)); display: flex; flex-direction: column; } :where(page[w-p="practice"]) .fill{ flex: 1; display: flex; flex-direction: column; justify-content: center; } :where(page[w-p="practice"]) .top{ flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-2); } :where(page[w-p="practice"]) .exit{ flex: none; width: var(--hit); height: var(--hit); border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; margin-left: calc(var(--s-2) * -1); } :where(page[w-p="practice"]) .exit image{ width: 22px; height: 22px; } :where(page[w-p="practice"]) .prog{ flex: 1; height: 10px; border-radius: var(--r-full); background: var(--line); box-shadow: var(--groove); overflow: hidden; } :where(page[w-p="practice"]) .prog-in{ height: 100%; border-radius: var(--r-full); background: var(--mint); transition: width var(--dur) var(--ease); } :where(page[w-p="practice"]) .wrap{ flex: 1; padding: var(--s-3) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s-4); } :where(page[w-p="practice"]) .title{ font-size: var(--t-display); font-weight: 700; } :where(page[w-p="practice"]) .sub{ font-size: var(--t-body); color: var(--ink-2); } :where(page[w-p="practice"]) .primary{ flex: none; margin-top: auto; height: var(--btn-l); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-section); font-weight: 700; } :where(page[w-p="practice"]) .end-list{ flex: 1; min-height: 200px; max-height: calc(60 * var(--wx-vh)); } :where(page[w-p="practice"]) .end-row{ display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); min-height: var(--hit); padding: var(--s-2) var(--s-4); margin-bottom: var(--s-2); border-radius: var(--r-m); background: var(--card); box-shadow: var(--card-shadow); box-sizing: border-box; } :where(page[w-p="practice"]) .end-row.miss{ background: var(--pink); } :where(page[w-p="practice"]) .end-w{ font-family: var(--en-text); font-size: var(--t-read); font-weight: 700; color: var(--word); } :where(page[w-p="practice"]) .miss .end-w{ color: var(--no-ink); } :where(page[w-p="practice"]) .end-zh{ min-width: 0; font-size: var(--t-read-s); color: var(--ink-2); text-align: right; } :where(page[w-p="practice"]) .psg{ flex: none; padding: var(--s-2) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="practice"]) .psg-head{ min-height: var(--hit); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 calc(var(--s-2) * -1); padding: 0 var(--s-2); border-radius: var(--r-m); } :where(page[w-p="practice"]) .psg-t{ font-size: var(--t-body); font-weight: 700; } :where(page[w-p="practice"]) .psg-fold{ flex: none; font-size: var(--t-caption); font-weight: 700; color: var(--ink-2); } :where(page[w-p="practice"]) .psg-line{ display: flex; flex-direction: column; gap: 2px; } :where(page[w-p="practice"]) .psg-en{ font-family: var(--en-text); font-size: 18px; font-weight: 500; line-height: 1.75; } :where(page[w-p="practice"]) .big .psg-en{ font-size: 20px; } :where(page[w-p="practice"]) .psg-w{ font-weight: 600; color: var(--word); padding: 1px 5px; border-radius: var(--r-xs); background: #ffe9a6; } :where(page[w-p="practice"]) .psg-w.miss{ color: var(--no-ink); background: #ffd6df; } :where(page[w-p="practice"]) .psg-zh{ font-size: var(--t-read-s); color: var(--ink-2); line-height: var(--lh-body); } :where(page[w-p="practice"]) .psg-tip{ font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="practice"]) .sk-pixel .psg-w{ background: var(--honey); box-shadow: inset 0 0 0 2px #1E1426; } :where(page[w-p="practice"]) .sk-pixel .psg-w.miss{ background: var(--pink); } :where(page[w-p="practice"]) .end-list.short{ flex: none; min-height: 0; max-height: calc(36 * var(--wx-vh)); } :where(page[w-p="practice"]) .flip-area{ position: relative; flex: 1 1 380px; min-height: 0; max-height: 540px; display: flex; flex-direction: column; } :where(page[w-p="practice"]) .flip,:where(page[w-p="practice"]) .flip-ghost{ flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s-5) var(--s-4) var(--s-4); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; } :where(page[w-p="practice"]) .back{ width: 100%; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; } :where(page[w-p="practice"]) .rows{ display: flex; flex-direction: column; width: 100%; flex: 1 1 0; min-height: 0; } :where(page[w-p="practice"]) .word{ font-family: var(--en); font-size: var(--t-word); line-height: var(--lh-word); font-weight: 700; color: var(--word); text-shadow: 0 4px 0 var(--word-shadow); text-align: center; white-space: pre; } :where(page[w-p="practice"]) .reading{ display: block; font-family: var(--en-text); font-size: var(--t-read-s); line-height: 1.5; color: var(--ink-2); } :where(page[w-p="practice"]) .zh-row{ max-width: 100%; margin-top: var(--s-1); display: flex; align-items: center; justify-content: center; gap: var(--s-3); } :where(page[w-p="practice"]) .gloss{ min-width: 0; font-size: var(--t-title); line-height: var(--lh-tight); font-weight: 700; text-align: center; } :where(page[w-p="practice"]) .speak,:where(page[w-p="practice"]) .hear{ flex: none; width: var(--hit); height: var(--hit); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; } :where(page[w-p="practice"]) .speak image,:where(page[w-p="practice"]) .hear image{ width: var(--s-5); height: var(--s-5); } :where(page[w-p="practice"]) .line{ width: 100%; height: 1px; background: var(--line); margin: var(--s-4) 0 var(--s-3); } :where(page[w-p="practice"]) .row{ width: 100%; display: flex; gap: var(--s-2); align-items: flex-start; margin-bottom: var(--s-3); } :where(page[w-p="practice"]) .tag{ flex: none; padding: 0 var(--s-2); height: var(--s-5); border-radius: var(--r-full); font-size: var(--t-caption); font-weight: 700; line-height: var(--s-5); text-align: center; } :where(page[w-p="practice"]) .txt{ flex: 1; font-size: var(--t-read); line-height: var(--lh-body); } :where(page[w-p="practice"]) .en{ font-family: var(--en-text); display: block; font-weight: 700; } :where(page[w-p="practice"]) .sub-t{ display: block; color: var(--ink-2); font-size: var(--t-read-s); } :where(page[w-p="practice"]) .sk-doodle .en{ font-weight: 500; } :where(page[w-p="practice"]) .col-i + .col-i{ margin-top: var(--s-1); } :where(page[w-p="practice"]) .ai{ font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; } :where(page[w-p="practice"]) .reveal{ margin-top: auto; margin-bottom: var(--s-6); font-size: var(--t-body); font-weight: 700; color: var(--ink-2); } :where(page[w-p="practice"]) .rates{ flex: none; margin-top: auto; display: flex; gap: var(--s-2); } :where(page[w-p="practice"]) .rates.off .rate{ opacity: .5; } :where(page[w-p="practice"]) .rate{ flex: 1; height: 72px; border-radius: var(--r-l); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); } :where(page[w-p="practice"]) .r1{ font-size: var(--t-section); font-weight: 700; } :where(page[w-p="practice"]) .r2{ font-size: var(--t-caption); font-weight: 700; color: var(--ink); } :where(page[w-p="practice"]) .q-t{ font-size: var(--t-section); font-weight: 700; } :where(page[w-p="practice"]) .q-card{ flex: 1 1 160px; max-height: 420px; min-height: 160px; padding: var(--s-5); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); } :where(page[w-p="practice"]) .hear{ width: 72px; height: 72px; } :where(page[w-p="practice"]) .q-hint{ font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="practice"]) .opts{ margin-top: auto; display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="practice"]) .opt{ min-height: var(--btn-m); padding: var(--s-2) var(--s-4); box-sizing: border-box; border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; text-align: center; font-size: var(--t-read); font-weight: 700; background: var(--pill); box-shadow: var(--jelly-pill-shadow); } :where(page[w-p="practice"]) .opt-en{ font-family: var(--en-text); } :where(page[w-p="practice"]) .opt.ok{ background: var(--mint); color: var(--ok-ink); } :where(page[w-p="practice"]) .opt.no{ background: var(--pink); color: var(--no-ink); } :where(page[w-p="practice"]) .m-head{ display: flex; align-items: center; gap: var(--s-3); } :where(page[w-p="practice"]) .m-pet{ flex: none; width: 58px; height: 63px; image-rendering: var(--art-rendering); } :where(page[w-p="practice"]) .m-h{ flex: 1; display: flex; flex-direction: column; gap: 6px; } :where(page[w-p="practice"]) .notes{ display: flex; gap: 6px; } :where(page[w-p="practice"]) .note{ width: 26px; height: 26px; border-radius: var(--r-full); background: var(--line); } :where(page[w-p="practice"]) .note.lit{ background: var(--honey); } :where(page[w-p="practice"]) .board{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px var(--s-4); } :where(page[w-p="practice"]) .tile{ height: 76px; border-radius: var(--r-m); border: 2px solid transparent; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0 var(--s-2); text-align: center; background: var(--card); box-shadow: var(--jelly-pill-shadow); } :where(page[w-p="practice"]) .tile.f-sound{ background: var(--stage-lilac); } :where(page[w-p="practice"]) .tile.f-empty{ background: none; box-shadow: none; border: 2px dashed var(--line); } :where(page[w-p="practice"]) .tile.f-none{ visibility: hidden; } :where(page[w-p="practice"]) .board.six{ gap: 10px var(--s-4); } :where(page[w-p="practice"]) .board.six .tile{ height: 64px; } :where(page[w-p="practice"]) .tile.sel{ border-color: var(--signal); } :where(page[w-p="practice"]) .tile.flip{ background: var(--pink); } :where(page[w-p="practice"]) .t-txt{ font-size: var(--t-read); font-weight: 700; line-height: var(--lh-tight); } :where(page[w-p="practice"]) .t-en{ font-family: var(--en-text); font-size: 20px; } :where(page[w-p="practice"]) .t-snd{ width: 28px; height: 28px; } :where(page[w-p="practice"]) .t-flip{ display: flex; flex-direction: column; align-items: center; gap: 2px; } :where(page[w-p="practice"]) .t-front{ font-family: var(--en-text); font-size: var(--t-read-s); font-weight: 700; color: var(--no-ink); } :where(page[w-p="practice"]) .t-back{ font-size: var(--t-read); font-weight: 700; color: var(--ink); } :where(page[w-p="practice"]) .m-note{ padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: 6px; } :where(page[w-p="practice"]) .m-note-t{ font-size: var(--t-body); font-weight: 700; } :where(page[w-p="practice"]) .m-note-s{ font-size: var(--t-read-s); line-height: var(--lh-body); color: var(--ink-2); } :where(page[w-p="practice"]) .m-tip{ text-align: center; font-size: var(--t-read-s); line-height: var(--lh-body); color: var(--ink-2); } :where(page[w-p="practice"]) .m-modes{ margin-top: auto; display: flex; justify-content: center; gap: var(--s-2); } :where(page[w-p="practice"]) .mode{ padding: 6px var(--s-3); border-radius: var(--r-full); font-size: var(--t-caption); color: var(--ink-2); background: var(--cream-2); } :where(page[w-p="practice"]) .mode.on{ background: var(--stage-lilac); color: var(--mon-ink); font-weight: 700; } :where(page[w-p="practice"]) .tile{ position: relative; transition: transform calc(250ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="practice"]) .tile.sel{ transform: translateY(-2px); } :where(page[w-p="practice"]) .sk-pixel .tile{ transition: none; } :where(page[w-p="practice"]) .sk-pixel .tile.sel{ transform: translate(-2px, -2px); } :where(page[w-p="practice"]) .ghost-tile{ z-index: 2; pointer-events: none; } :where(page[w-p="practice"]) .tile.ok{ border-color: #6fd6b0; background: linear-gradient(180deg, #e8fbf2, #b4f3d8); box-shadow: 0 4px 0 #3fae88, 0 0 0 6px rgba(111, 214, 176, .25); color: #0f3d2e; } :where(page[w-p="practice"]) .sk-pixel .tile.ok{ border-color: transparent; background: var(--mint); box-shadow: inset 0 0 0 3px #1E1426; color: var(--ok-ink); } :where(page[w-p="practice"]) .tile.refill{ animation: m-rise calc(550ms * var(--m-slow, 1)) var(--m-out) calc(560ms * var(--m-slow, 1)) backwards; } :where(page[w-p="practice"]) .sk-pixel .tile.refill{ animation: m-px-drop calc(300ms * var(--m-slow, 1)) steps(3) calc(480ms * var(--m-slow, 1)) backwards; } :where(page[w-p="practice"]) .tile.flip{ animation: tile-wrong calc(580ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="practice"]) .sk-pixel .tile.flip{ animation: tile-wrong-px calc(400ms * var(--m-slow, 1)) steps(2); } :where(page[w-p="practice"]) .tile.unflip{ animation: tile-back calc(240ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="practice"]) .sk-pixel .tile.unflip{ animation: tile-back calc(120ms * var(--m-slow, 1)) steps(2); } :where(page[w-p="practice"]) .t-orig{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; opacity: 0; animation: orig-out calc(580ms * var(--m-slow, 1)) linear; } :where(page[w-p="practice"]) .flip .t-flip{ animation: back-in calc(580ms * var(--m-slow, 1)) linear; } :where(page[w-p="practice"]) .sk-pixel .t-orig{ animation-duration: calc(400ms * var(--m-slow, 1)); } :where(page[w-p="practice"]) .sk-pixel .flip .t-flip{ animation-duration: calc(400ms * var(--m-slow, 1)); } @keyframes tile-wrong { 0% { transform: none; background: var(--card); } 14% { transform: translateX(-4px); } 29% { transform: translateX(3px); } 44% { transform: translateX(-2px); } 58% { transform: perspective(500px) rotateY(90deg); background: var(--card); } 59% { transform: perspective(500px) rotateY(-90deg); background: var(--pink); } 100% { transform: none; background: var(--pink); } } @keyframes tile-wrong-px { 0% { transform: none; background: var(--card); } 20% { transform: translateX(-3px); } 40% { transform: translateX(3px); } 55% { transform: perspective(500px) rotateY(90deg); background: var(--card); } 56% { transform: perspective(500px) rotateY(-90deg); background: var(--pink); } 100% { transform: none; background: var(--pink); } } @keyframes tile-back { from { transform: perspective(500px) rotateY(90deg); } to { transform: none; } } @keyframes orig-out { 0%, 57% { opacity: 1; } 58%, 100% { opacity: 0; } } @keyframes back-in { 0%, 57% { opacity: 0; } 58%, 100% { opacity: 1; } } :where(page[w-p="practice"]) .note{ transition: transform calc(350ms * var(--m-slow, 1)) var(--m-out), background calc(350ms * var(--m-slow, 1)); } :where(page[w-p="practice"]) .note.lit{ transform: scale(1.08); } :where(page[w-p="practice"]) .sk-pixel .note{ transition: none; } :where(page[w-p="practice"]) .sk-pixel .note.lit{ transform: none; box-shadow: inset 0 0 0 2px #1E1426; } :where(page[w-p="practice"]) .m-pet{ transform-origin: 50% 100%; } :where(page[w-p="practice"]) .m-pet.hop-a{ animation: hop-a calc(700ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="practice"]) .m-pet.hop-b{ animation: hop-b calc(700ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="practice"]) .sk-pixel .m-pet.hop-a{ animation: px-hop-a calc(400ms * var(--m-slow, 1)) steps(4); } :where(page[w-p="practice"]) .sk-pixel .m-pet.hop-b{ animation: px-hop-b calc(400ms * var(--m-slow, 1)) steps(4); } @keyframes hop-a { 30% { transform: translateY(-12px) rotate(-6deg); } 60% { transform: translateY(0) scale(1.04, .96); } } @keyframes hop-b { 30% { transform: translateY(-12px) rotate(-6deg); } 60% { transform: translateY(0) scale(1.04, .96); } } @keyframes px-hop-a { 50% { transform: translateY(-8px); } } @keyframes px-hop-b { 50% { transform: translateY(-8px); } } :where(page[w-p="practice"]) .praise-strip{ position: relative; flex: none; width: 100%; height: 44px; pointer-events: none; } :where(page[w-p="practice"]) .praise{ position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: 8px; white-space: nowrap; transform: translate(-50%, -50%); animation: praise-in calc(1050ms * var(--m-slow, 1)) var(--m-out) forwards; } :where(page[w-p="practice"]) .praise-t{ position: relative; font-family: var(--en); font-weight: 700; line-height: 1; letter-spacing: .01em; background: linear-gradient(180deg, #ffd45c, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(166, 70, 20, .25)); } :where(page[w-p="practice"]) .praise.l3 .praise-t,:where(page[w-p="practice"]) .praise.l4 .praise-t{ background-image: linear-gradient(90deg, #ff8a3d, #f45d8c, #8f6bff); } :where(page[w-p="practice"]) .praise.l5 .praise-t{ background-image: linear-gradient(90deg, #ff8a3d, #f45d8c, #8f6bff, #3fc6a0); } :where(page[w-p="practice"]) .praise-zh{ position: relative; font-size: var(--t-caption); font-weight: 700; color: #7a4a2a; } :where(page[w-p="practice"]) .praise-halo{ position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; box-sizing: border-box; border-radius: 50%; border: 3px solid #ffc93c; animation: praise-halo calc(600ms * var(--m-slow, 1)) var(--m-out) forwards; } :where(page[w-p="practice"]) .sk-pixel .praise{ animation: praise-px calc(1050ms * var(--m-slow, 1)) steps(1, end) forwards; } :where(page[w-p="practice"]) .sk-pixel .praise-t{ font-weight: 700; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #FFD84A; filter: none; text-shadow: 2px 0 #1E1426, -2px 0 #1E1426, 0 2px #1E1426, 0 -2px #1E1426, 3px 3px 0 #1E1426; } :where(page[w-p="practice"]) .sk-pixel .praise-zh{ color: #1E1426; background: #FFF4DA; padding: 1px 6px; box-shadow: inset 0 0 0 1px #1E1426; } :where(page[w-p="practice"]) .sk-pixel .praise-halo{ display: none; } @keyframes praise-in { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -55%) scale(1.08); } 32% { transform: translate(-50%, -58%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -85%) scale(1); } } @keyframes praise-px { 0% { opacity: 1; transform: translate(-50%, -40%) scale(1.25); } 12% { transform: translate(-50%, -55%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -70%); } 100% { opacity: 0; transform: translate(-50%, -80%); } } @keyframes praise-halo { from { transform: scale(.4); opacity: .9; } to { transform: scale(4.2); opacity: 0; } } :where(page[w-p="practice"]) .beat{ flex: none; display: flex; justify-content: center; align-items: center; gap: 8px; height: 14px; margin: -6px 0; } :where(page[w-p="practice"]) .bdot{ width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .12); transition: background calc(200ms * var(--m-slow, 1)); } :where(page[w-p="practice"]) .bdot.on{ background: #ffc93c; } :where(page[w-p="practice"]) .bdot.d1.on{ background: #6fd6b0; } :where(page[w-p="practice"]) .bdot.d2.on{ background: #f49ab2; } :where(page[w-p="practice"]) .bdot.d3.on{ background: #b18cf2; } :where(page[w-p="practice"]) .bdot.run{ animation: beat-hit calc(2142.857ms * var(--m-slow, 1)) linear infinite; } :where(page[w-p="practice"]) .bdot.d1.run{ animation-delay: calc(535.714ms * var(--m-slow, 1)); } :where(page[w-p="practice"]) .bdot.d2.run{ animation-delay: calc(1071.429ms * var(--m-slow, 1)); } :where(page[w-p="practice"]) .bdot.d3.run{ animation-delay: calc(1607.143ms * var(--m-slow, 1)); } :where(page[w-p="practice"]) .sk-pixel .bdot{ border-radius: 0; transition: none; } :where(page[w-p="practice"]) .sk-pixel .bdot.on{ background: #FFD84A; box-shadow: inset 0 0 0 1px #1E1426; } :where(page[w-p="practice"]) .sk-pixel .bdot.run{ animation-timing-function: steps(1, end); } @keyframes beat-hit { 0% { transform: scale(1); } 5.6% { transform: scale(1.6); } 25% { transform: scale(1.6); } 30.6% { transform: scale(1); } 100% { transform: scale(1); } } :where(page[w-p="practice"]) .w-row{ display: block; white-space: pre; } :where(page[w-p="practice"]) .word .ch{ display: inline-block; animation: q-ch-in calc(520ms * var(--m-slow, 1)) var(--m-out) backwards; animation-delay: calc(var(--i) * 30ms * var(--m-slow, 1)); } :where(page[w-p="practice"]) .sk-pixel .word .ch{ animation: q-ch-type calc(1ms * var(--m-slow, 1)) steps(1) backwards; animation-delay: calc(var(--i) * 45ms * var(--m-slow, 1)); } @keyframes q-ch-in { from { opacity: 0; transform: translateY(12px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } @keyframes q-ch-type { from { opacity: 0; } to { opacity: 0; } } :where(page[w-p="practice"]) .q-card .hear,:where(page[w-p="practice"]) .q-card .q-hint{ animation: m-rise calc(520ms * var(--m-slow, 1)) var(--m-out) backwards; } :where(page[w-p="practice"]) .sk-pixel .q-card .hear,:where(page[w-p="practice"]) .sk-pixel .q-card .q-hint{ animation: m-px-drop calc(300ms * var(--m-slow, 1)) steps(3) backwards; } :where(page[w-p="practice"]) .opt{ transition: opacity calc(240ms * var(--m-slow, 1)) ease-out, transform calc(220ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="practice"]) .opt.ok{ box-shadow: 0 4px 0 #3fae88, 0 0 0 5px rgba(111, 214, 176, .28); } :where(page[w-p="practice"]) .sk-pixel .opt.ok{ box-shadow: inset 0 0 0 3px #1E1426; } :where(page[w-p="practice"]) .opt.hit{ animation: opt-hit calc(320ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="practice"]) .opt.no{ animation: opt-shake calc(380ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="practice"]) .opt.show{ animation: opt-show calc(360ms * var(--m-slow, 1)) var(--m-out) calc(300ms * var(--m-slow, 1)) backwards; } :where(page[w-p="practice"]) .opt.dim{ opacity: .35; } :where(page[w-p="practice"]) .sk-pixel .opt{ transition: none; } :where(page[w-p="practice"]) .sk-pixel .opt.hit{ animation: opt-hit calc(240ms * var(--m-slow, 1)) steps(3); } :where(page[w-p="practice"]) .sk-pixel .opt.no{ animation: opt-shake-px calc(320ms * var(--m-slow, 1)) steps(4); } :where(page[w-p="practice"]) .sk-pixel .opt.show{ animation: opt-show calc(240ms * var(--m-slow, 1)) steps(2) calc(320ms * var(--m-slow, 1)) backwards; } @keyframes opt-hit { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 75% { transform: scale(.98); } 100% { transform: scale(1); } } @keyframes opt-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } @keyframes opt-shake-px { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } } @keyframes opt-show { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } } :where(page[w-p="practice"]) .hear,:where(page[w-p="practice"]) .speak{ position: relative; } :where(page[w-p="practice"]) .hear.speaking image{ animation: spk-beat calc(520ms * var(--m-slow, 1)) ease-in-out infinite; } :where(page[w-p="practice"]) .speak.speaking image{ animation: spk-beat calc(520ms * var(--m-slow, 1)) ease-in-out infinite; } :where(page[w-p="practice"]) .hear.speaking::after,:where(page[w-p="practice"]) .hear.speaking::before{ content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: var(--r-full); border: 4px solid rgba(240, 90, 40, .6); box-sizing: border-box; pointer-events: none; animation: spk-ripple calc(1100ms * var(--m-slow, 1)) ease-out infinite; } :where(page[w-p="practice"]) .hear.speaking::before{ animation-delay: calc(550ms * var(--m-slow, 1)); } :where(page[w-p="practice"]) .sk-pixel .hear.speaking image{ animation: px-spk calc(400ms * var(--m-slow, 1)) steps(2) infinite; } :where(page[w-p="practice"]) .sk-pixel .speak.speaking image{ animation: px-spk calc(400ms * var(--m-slow, 1)) steps(2) infinite; } :where(page[w-p="practice"]) .sk-pixel .hear.speaking::after{ border-radius: 0; border-color: #1E1426; animation: px-ripple calc(900ms * var(--m-slow, 1)) steps(3) infinite; } :where(page[w-p="practice"]) .sk-pixel .hear.speaking::before{ display: none; } @keyframes spk-beat { 0%, 100% { transform: none; } 50% { transform: translateY(-2px) scale(1.08); } } @keyframes spk-ripple { 0% { transform: scale(1); opacity: .9; } 60% { opacity: .55; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes px-spk { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } } @keyframes px-ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } :where(page[w-p="practice"]) .calm .hear::after,:where(page[w-p="practice"]) .calm .hear::before{ display: none; } :where(page[w-p="practice"]) .flip-area.dealt .flip{ animation: card-up calc(560ms * var(--m-slow, 1)) var(--m-out) calc(300ms * var(--m-slow, 1)) backwards; } :where(page[w-p="practice"]) .flip-area.dealt .flip .ch{ animation-delay: calc((var(--i) * 30ms + 600ms) * var(--m-slow, 1)); } :where(page[w-p="practice"]) .flip-area.turn .flip{ animation: card-turn calc(460ms * var(--m-slow, 1)) linear; } :where(page[w-p="practice"]) .flip-area.turn .flip .back{ animation: back-show calc(460ms * var(--m-slow, 1)) linear; } :where(page[w-p="practice"]) .flip-area.turn .flip .reveal{ animation: front-hide calc(460ms * var(--m-slow, 1)) linear forwards; } :where(page[w-p="practice"]) .sk-pixel .flip-area.dealt .flip{ animation: card-up-px calc(300ms * var(--m-slow, 1)) steps(3) calc(220ms * var(--m-slow, 1)) backwards; } :where(page[w-p="practice"]) .sk-pixel .flip-area.dealt .flip .ch{ animation-delay: calc((var(--i) * 45ms + 480ms) * var(--m-slow, 1)); } :where(page[w-p="practice"]) .sk-pixel .flip-area.turn .flip{ animation: card-turn calc(360ms * var(--m-slow, 1)) steps(3); } :where(page[w-p="practice"]) .sk-pixel .flip-area.turn .flip .back,:where(page[w-p="practice"]) .sk-pixel .flip-area.turn .flip .reveal{ animation-duration: calc(360ms * var(--m-slow, 1)); } :where(page[w-p="practice"]) .calm .flip-area .flip{ animation: calm-in var(--dur-calm) ease-out !important; } @keyframes card-turn { 0% { transform: perspective(900px) rotateY(0deg); animation-timing-function: cubic-bezier(.5, 0, .9, .4); } 50% { transform: perspective(900px) rotateY(90deg) scale(1.03); } 50.1% { transform: perspective(900px) rotateY(-90deg) scale(1.03); animation-timing-function: cubic-bezier(.1, .6, .4, 1); } 100% { transform: perspective(900px) rotateY(0deg); } } @keyframes back-show { 0%, 50% { opacity: 0; } 50.1%, 100% { opacity: 1; } } @keyframes front-hide { 0%, 50% { opacity: 1; } 50.1%, 100% { opacity: 0; } } @keyframes card-up { 0% { opacity: 0; transform: translateY(56px) scale(.96); } 70% { opacity: 1; transform: translateY(-4px); } 100% { transform: none; } } @keyframes card-up-px { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } :where(page[w-p="practice"]) .flip-ghost{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; overflow: hidden; } :where(page[w-p="practice"]) .flip-ghost .ch,:where(page[w-p="practice"]) .flip-ghost .back,:where(page[w-p="practice"]) .flip-ghost .reveal{ animation: none; } :where(page[w-p="practice"]) .flip-ghost.good{ border: 2px solid #6fd6b0; background: linear-gradient(180deg, #e8fbf2, #b4f3d8); box-shadow: 0 4px 0 #3fae88, 0 0 0 6px rgba(111, 214, 176, .25); animation: ghost-glow calc(140ms * var(--m-slow, 1)) var(--m-out) forwards; } :where(page[w-p="practice"]) .flip-ghost.good.fx-eat{ animation: fx-eat calc(var(--fx-dur, 520ms) * var(--m-slow, 1)) linear forwards, fly-ur calc(560ms * var(--m-slow, 1)) cubic-bezier(.5, 0, .75, 0) forwards; } :where(page[w-p="practice"]) .flip-ghost.good.fx-fade{ animation: fx-fade calc(320ms * var(--m-slow, 1)) ease-out forwards, fly-ur calc(560ms * var(--m-slow, 1)) cubic-bezier(.5, 0, .75, 0) forwards; } :where(page[w-p="practice"]) .flip-ghost.hard{ animation: sink-pile calc(500ms * var(--m-slow, 1)) cubic-bezier(.5, 0, .75, 0) forwards; } :where(page[w-p="practice"]) .flip-ghost.again{ animation: turn-sink calc(700ms * var(--m-slow, 1)) ease-in-out forwards; } :where(page[w-p="practice"]) .flip-ghost.again .back{ animation: front-only calc(700ms * var(--m-slow, 1)) linear forwards; } :where(page[w-p="practice"]) .sk-pixel .flip-ghost.good{ border-color: transparent; background: var(--mint); box-shadow: inset 0 0 0 3px #1E1426; animation: ghost-glow calc(120ms * var(--m-slow, 1)) steps(2) forwards; } :where(page[w-p="practice"]) .sk-pixel .flip-ghost.good.fx-eat{ animation: fx-eat-px calc(var(--fx-dur, 380ms) * var(--m-slow, 1)) linear forwards, fly-ur calc(380ms * var(--m-slow, 1)) steps(4) forwards; } :where(page[w-p="practice"]) .sk-pixel .flip-ghost.good.fx-fade{ animation: fx-fade calc(320ms * var(--m-slow, 1)) steps(3) forwards, fly-ur calc(380ms * var(--m-slow, 1)) steps(4) forwards; } :where(page[w-p="practice"]) .sk-pixel .flip-ghost.hard{ animation: sink-pile calc(340ms * var(--m-slow, 1)) steps(3) forwards; } :where(page[w-p="practice"]) .sk-pixel .flip-ghost.again{ animation: turn-sink calc(480ms * var(--m-slow, 1)) steps(4) forwards; } :where(page[w-p="practice"]) .sk-pixel .flip-ghost.again .back{ animation-duration: calc(480ms * var(--m-slow, 1)); } @keyframes ghost-glow { from { transform: scale(1); } to { transform: scale(1.02); } } @keyframes fly-ur { from { transform: scale(1.02); } to { transform: translate(44px, -60px) scale(.94); } } @keyframes sink-pile { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(64px) scale(.9); } } @keyframes turn-sink { 0% { opacity: 1; transform: perspective(900px) rotateY(0deg); } 40% { opacity: 1; transform: perspective(900px) rotateY(90deg) translateY(8px); } 40.1% { transform: perspective(900px) rotateY(-90deg) translateY(8px); } 65% { opacity: 0; } 100% { opacity: 0; transform: perspective(900px) rotateY(0deg) translateY(56px) scale(.92); } } @keyframes front-only { 0%, 40% { opacity: 1; } 40.1%, 100% { opacity: 0; } } :where(page[w-p="practice"]) .rate.tap-hover{ transform: translateY(3px) scale(.96, .9); } :where(page[w-p="practice"]) .sk-pixel .rate.tap-hover{ transform: translate(3px, 3px); } :where(page[w-p="practice"]) .q-art{ align-self: center; width: 140px; height: 96px; } :where(page[w-p="practice"]) .sk-doodle .q-card{ position: relative; } :where(page[w-p="practice"]) .q-art-corner{ position: absolute; right: var(--s-2); bottom: var(--s-1); width: 76px; height: 52px; pointer-events: none; } :where(page[w-p="practice"]) .sk-doodle .prog-in{ background: var(--honey); } :where(page[w-p="practice"]) .sk-doodle .m-head{ flex-direction: row-reverse; } :where(page[w-p="practice"]) .sk-doodle .m-pet{ width: 110px; height: 70px; } :where(page[w-p="practice"]) .sk-doodle .note{ box-shadow: inset 0 0 0 1.5px var(--ink); background: var(--card); } :where(page[w-p="practice"]) .sk-doodle .note.lit{ background: var(--honey); } :where(page[w-p="practice"]) .sk-doodle .tile.f-sound{ background: var(--card); } :where(page[w-p="practice"]) .sk-doodle .tile.sel{ border-color: transparent; background: var(--honey); } :where(page[w-p="practice"]) .sk-doodle .tile.ok{ border-color: transparent; background: var(--honey); box-shadow: inset 0 0 0 3px var(--ink); color: var(--ok-ink); } :where(page[w-p="practice"]) .sk-doodle .tile.f-empty{ border-color: #D9D3C6; } :where(page[w-p="practice"]) .sk-doodle .mode{ background: var(--card); box-shadow: inset 0 0 0 1.5px #C9C3B6; color: var(--ink-3); } :where(page[w-p="practice"]) .sk-doodle .mode.on{ background: var(--honey); box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); } :where(page[w-p="practice"]) .sk-doodle .opt.ok{ box-shadow: inset 0 0 0 2px var(--ink), 3px 3px 0 var(--ink); } :where(page[w-p="practice"]) .sk-doodle .hear.speaking::after,:where(page[w-p="practice"]) .sk-doodle .hear.speaking::before{ border-color: rgba(255, 197, 49, .8); } :where(page[w-p="practice"]) .sk-doodle .rate{ box-shadow: inset 0 0 0 2px var(--ink); } :where(page[w-p="practice"]) .sk-doodle .rate.jelly-honey{ background: var(--card); } :where(page[w-p="practice"]) .sk-doodle .psg-w{ background: var(--honey); } :where(page[w-p="practice"]) .sk-crayon .en{ font-weight: 500; } :where(page[w-p="practice"]) .sk-crayon .q-card{ position: relative; } :where(page[w-p="practice"]) .sk-crayon .prog-in{ background: var(--honey); } :where(page[w-p="practice"]) .sk-crayon .m-head{ flex-direction: row-reverse; } :where(page[w-p="practice"]) .sk-crayon .m-pet{ width: 110px; height: 70px; } :where(page[w-p="practice"]) .sk-crayon .note{ box-shadow: none; background: var(--cr-ring), var(--card); } :where(page[w-p="practice"]) .sk-crayon .note.lit{ background: var(--cr-ring), var(--honey); } :where(page[w-p="practice"]) .sk-crayon .tile,:where(page[w-p="practice"]) .sk-crayon .opt,:where(page[w-p="practice"]) .sk-crayon .end-row{ border-image: var(--cr-frame-s); } :where(page[w-p="practice"]) .sk-crayon .tile.f-sound{ background: var(--card); } :where(page[w-p="practice"]) .sk-crayon .tile.sel{ border-color: transparent; background: var(--honey); } :where(page[w-p="practice"]) .sk-crayon .tile.ok{ border-color: transparent; background: var(--honey); box-shadow: none; border-image: var(--cr-frame-s); color: var(--ok-ink); } :where(page[w-p="practice"]) .sk-crayon .tile.f-empty{ border-image: var(--cr-frame-soft); } :where(page[w-p="practice"]) .sk-crayon .mode{ background: var(--card); box-shadow: none; border-image: var(--cr-frame-soft); color: var(--ink-3); } :where(page[w-p="practice"]) .sk-crayon .mode.on{ background: var(--honey); box-shadow: none; border-image: var(--cr-frame-s); color: var(--ink); } :where(page[w-p="practice"]) .sk-crayon .opt.ok{ box-shadow: none; border-image: var(--cr-frame-s); } :where(page[w-p="practice"]) .sk-crayon .hear.speaking::after,:where(page[w-p="practice"]) .sk-crayon .hear.speaking::before{ border-color: rgba(255, 201, 60, .8); } :where(page[w-p="practice"]) .sk-crayon .rate{ box-shadow: none; border-image: var(--cr-frame-s); } :where(page[w-p="practice"]) .sk-crayon .rate.jelly-honey{ background: var(--card); } :where(page[w-p="practice"]) .sk-crayon .psg-w{ background: var(--honey); } :where(page[w-p="practice"]) .q-card.sp-q{ flex: none; min-height: 150px; } :where(page[w-p="practice"]) .sp-slots{ display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: var(--s-3); } :where(page[w-p="practice"]) .sp-slot{ width: 30px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; border-bottom: 3px solid var(--line); } :where(page[w-p="practice"]) .sp-slot.on{ border-bottom-color: var(--ink); } :where(page[w-p="practice"]) .sp-ch{ font-family: var(--en); font-size: 28px; font-weight: 700; line-height: 1; color: var(--ink); } :where(page[w-p="practice"]) .sp-slots.ok .sp-slot{ border-bottom-color: var(--ok-ink); } :where(page[w-p="practice"]) .sp-slots.ok .sp-ch{ color: var(--ok-ink); } :where(page[w-p="practice"]) .sp-slot.wrong{ border-bottom-color: var(--no-ink); } :where(page[w-p="practice"]) .sp-slot.wrong .sp-ch{ color: var(--no-ink); text-decoration: line-through; } :where(page[w-p="practice"]) .sp-ans{ font-family: var(--en); font-size: 15px; font-weight: 700; color: var(--ok-ink); } :where(page[w-p="practice"]) .sp-tiles{ display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); } :where(page[w-p="practice"]) .sp-tile{ width: 44px; height: 48px; border-radius: var(--r-s); display: flex; align-items: center; justify-content: center; font-family: var(--en); font-size: 24px; font-weight: 700; color: var(--ink); } :where(page[w-p="practice"]) .sp-tile.used{ opacity: .25; } :where(page[w-p="practice"]) .sp-note{ align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); margin-top: var(--s-3); text-align: center; } :where(page[w-p="practice"]) .sp-word{ font-family: var(--en); font-size: 26px; font-weight: 700; color: var(--ok-ink); } :where(page[w-p="practice"]) .sp-rule{ font-size: var(--t-read-s); color: var(--ink-2); } :where(page[w-p="practice"]) .sk-pixel .sp-tile{ border-radius: 0; } /* pages/tap/tap.wxss */ :where(page[w-p="tap"]) .page{ min-height: calc(100 * var(--wx-vh)); display: flex; flex-direction: column; -webkit-user-select: none; user-select: none; } :where(page[w-p="tap"]) .fill{ flex: 1; display: flex; flex-direction: column; justify-content: center; } :where(page[w-p="tap"]) .close{ flex: none; width: var(--hit); height: var(--hit); border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; margin-left: calc(var(--s-2) * -1); } :where(page[w-p="tap"]) .close image{ width: 22px; height: 22px; } :where(page[w-p="tap"]) .wrap{ flex: 1; padding: var(--s-1) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s-4); } :where(page[w-p="tap"]) .head{ display: flex; flex-direction: column; gap: var(--s-1); padding: 0 var(--s-1); } :where(page[w-p="tap"]) .h1{ font-size: 26px; font-weight: 700; } :where(page[w-p="tap"]) .sk-pixel .h1{ font-weight: 800; } :where(page[w-p="tap"]) .h2{ font-size: var(--t-body); color: var(--ink-2); } :where(page[w-p="tap"]) .stage{ position: relative; flex: none; height: 300px; display: flex; align-items: center; justify-content: center; } :where(page[w-p="tap"]) .ring{ position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; } :where(page[w-p="tap"]) .r1{ width: 268px; height: 268px; margin: -134px 0 0 -134px; border: 3px solid rgba(240, 164, 0, .25); box-sizing: border-box; } :where(page[w-p="tap"]) .r2{ width: 300px; height: 300px; margin: -150px 0 0 -150px; border: 2px solid rgba(240, 164, 0, .12); box-sizing: border-box; } :where(page[w-p="tap"]) .sk-pixel .ring{ border-radius: 0; border: 0; } :where(page[w-p="tap"]) .sk-pixel .r1{ width: 262px; height: 262px; margin: -131px 0 0 -131px; box-shadow: inset 0 0 0 4px rgba(30, 20, 38, .18); } :where(page[w-p="tap"]) .sk-pixel .r2{ display: none; } :where(page[w-p="tap"]) .key{ position: relative; width: 232px; height: 232px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: radial-gradient(circle at 40% 32%, #fff6cf 0%, #ffd76a 55%, #f6b82a 100%); box-shadow: 0 8px 0 #dd9f33, 0 20px 40px rgba(240, 164, 0, .3), inset 0 4px 8px rgba(255, 255, 255, .7); transition: transform calc(220ms * var(--m-slow, 1)) var(--m-out), box-shadow var(--dur-press) var(--ease); } :where(page[w-p="tap"]) .key.tap-hover{ transform: translateY(6px) scale(.97, .94); box-shadow: 0 2px 0 #dd9f33, 0 8px 18px rgba(240, 164, 0, .3), inset 0 4px 8px rgba(255, 255, 255, .7); } :where(page[w-p="tap"]) .key.th-a{ animation: thump-a calc(260ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="tap"]) .key.th-b{ animation: thump-b calc(260ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="tap"]) .key.idle{ opacity: .72; } :where(page[w-p="tap"]) .key-pet{ width: 92px; height: 99px; image-rendering: var(--art-rendering); pointer-events: none; } :where(page[w-p="tap"]) .key-t{ font-size: 17px; font-weight: 700; color: #2a1206; pointer-events: none; } :where(page[w-p="tap"]) .sk-pixel .key{ width: 226px; height: 226px; border-radius: 0; gap: 8px; background: #FFD84A; color: #1E1426; box-shadow: inset 0 0 0 4px #1E1426, inset -10px -10px 0 #E8B820, 6px 6px 0 #1E1426; transition: none; } :where(page[w-p="tap"]) .sk-pixel .key.tap-hover{ transform: translate(6px, 6px); box-shadow: inset 0 0 0 4px #1E1426, inset -10px -10px 0 #E8B820; } :where(page[w-p="tap"]) .sk-pixel .key.th-a{ animation: px-thump-a calc(160ms * var(--m-slow, 1)) steps(2); } :where(page[w-p="tap"]) .sk-pixel .key.th-b{ animation: px-thump-b calc(160ms * var(--m-slow, 1)) steps(2); } :where(page[w-p="tap"]) .sk-pixel .key-pet{ width: 96px; height: 96px; } :where(page[w-p="tap"]) .sk-pixel .key-t{ font-weight: 800; color: #1E1426; } @keyframes thump-a { 0% { transform: none; } 35% { transform: translateY(5px) scale(.97, .95); } 100% { transform: none; } } @keyframes thump-b { 0% { transform: none; } 35% { transform: translateY(5px) scale(.97, .95); } 100% { transform: none; } } @keyframes px-thump-a { 0% { transform: translate(4px, 4px); } 100% { transform: none; } } @keyframes px-thump-b { 0% { transform: translate(4px, 4px); } 100% { transform: none; } } :where(page[w-p="tap"]) .bubble-slot{ position: absolute; top: 20px; right: 18px; width: 150px; height: 64px; pointer-events: none; } :where(page[w-p="tap"]) .bubble{ position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #fffefa; box-shadow: 0 6px 16px rgba(217, 142, 92, .25); animation: bubble-in calc(900ms * var(--m-slow, 1)) var(--m-out) forwards; } :where(page[w-p="tap"]) .bubble-t{ font-family: var(--en); font-size: var(--t-body); font-weight: 600; color: var(--ok-ink); white-space: nowrap; } :where(page[w-p="tap"]) .bubble-praise{ font-family: var(--en); font-size: 20px; font-weight: 700; line-height: 1; white-space: nowrap; background: linear-gradient(90deg, #ff8a3d, #f45d8c, #8f6bff); -webkit-background-clip: text; background-clip: text; color: transparent; } :where(page[w-p="tap"]) .sk-pixel .bubble{ border-radius: 0; background: #FFF4DA; box-shadow: inset 0 0 0 2px #1E1426, 3px 3px 0 #1E1426; animation: bubble-px calc(900ms * var(--m-slow, 1)) steps(1, end) forwards; } :where(page[w-p="tap"]) .sk-pixel .bubble-t{ font-weight: 700; } :where(page[w-p="tap"]) .sk-pixel .bubble-praise{ background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #C8283E; } @keyframes bubble-in { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 22% { opacity: 1; transform: translateY(-2px) scale(1.04); } 36% { transform: none; } 75% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-14px); } } @keyframes bubble-px { 0% { opacity: 1; transform: translateY(6px); } 15% { transform: none; } 80% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-8px); } } :where(page[w-p="tap"]) .story{ flex: none; max-height: 300px; padding: var(--s-4) var(--s-4); box-sizing: border-box; } :where(page[w-p="tap"]) .line{ display: flex; flex-direction: column; gap: 2px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); } :where(page[w-p="tap"]) .line:last-child{ border-bottom: 0; } :where(page[w-p="tap"]) .en{ font-family: var(--en-text); font-size: var(--t-read); line-height: var(--lh-body); } :where(page[w-p="tap"]) .zh{ font-size: var(--t-read-s); color: var(--ink-2); line-height: var(--lh-body); } :where(page[w-p="tap"]) .mark{ font-weight: 700; padding: 0 2px; border-radius: 6px; } :where(page[w-p="tap"]) .mark.hit{ background: var(--mint); color: var(--ok-ink); } :where(page[w-p="tap"]) .mark.miss{ background: var(--pink); color: var(--no-ink); } :where(page[w-p="tap"]) .mark.off{ color: var(--word); } :where(page[w-p="tap"]) .bar{ flex: none; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); } :where(page[w-p="tap"]) .toggle{ flex: none; width: var(--hit); height: var(--hit); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; } :where(page[w-p="tap"]) .toggle image{ width: 20px; height: 20px; } :where(page[w-p="tap"]) .track{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } :where(page[w-p="tap"]) .groove{ height: 8px; border-radius: var(--r-full); background: #f1dcc4; overflow: hidden; } :where(page[w-p="tap"]) .groove-in{ height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, #ffc93c, #f0a400); transition: width 260ms linear; } :where(page[w-p="tap"]) .sk-pixel .groove{ height: 12px; background: #EFE2C2; box-shadow: inset 0 0 0 2px #1E1426; padding: 2px; box-sizing: border-box; } :where(page[w-p="tap"]) .sk-pixel .groove-in{ background: #C8283E; transition: none; } :where(page[w-p="tap"]) .times{ display: flex; justify-content: space-between; font-size: var(--t-caption); color: var(--ink-2); font-variant-numeric: tabular-nums; } :where(page[w-p="tap"]) .sk-pixel .times{ font-family: var(--en); font-size: 16px; } :where(page[w-p="tap"]) .words{ flex: none; display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="tap"]) .words-t{ font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 0 var(--s-1); } :where(page[w-p="tap"]) .chips{ display: flex; flex-wrap: wrap; gap: var(--s-2); } :where(page[w-p="tap"]) .chip{ height: 36px; padding: 0 13px; border-radius: var(--r-full); display: inline-flex; align-items: center; box-sizing: border-box; font-family: var(--en); font-size: var(--t-body); font-weight: 500; color: var(--ink-2); background: rgba(255, 254, 250, .7); border: 1.5px dashed #e3c3a1; } :where(page[w-p="tap"]) .chip.hit{ background: linear-gradient(180deg, #b4f3d8, #6fd6b0); color: #0f3d2e; border: 1.5px solid transparent; box-shadow: 0 2px 0 #3fae88; } :where(page[w-p="tap"]) .chip.miss{ background: var(--pink); color: var(--no-ink); border: 1.5px solid transparent; } :where(page[w-p="tap"]) .chip.off{ opacity: .45; border-style: solid; } :where(page[w-p="tap"]) .chip.pop{ animation: chip-pop calc(420ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="tap"]) .sk-pixel .chip{ border-radius: 0; border: 0; background: #FFF7E2; color: #1E1426; box-shadow: inset 0 0 0 2px #1E1426; font-family: var(--en-text); } :where(page[w-p="tap"]) .sk-pixel .chip.hit{ background: #B8EBA0; color: #1E3A10; box-shadow: inset 0 0 0 2px #1E1426, 2px 2px 0 #1E1426; } :where(page[w-p="tap"]) .sk-pixel .chip.miss{ background: #FFE0DB; color: #781D2A; } :where(page[w-p="tap"]) .sk-pixel .chip.pop{ animation: px-chip-pop calc(200ms * var(--m-slow, 1)) steps(2); } @keyframes chip-pop { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } } @keyframes px-chip-pop { 0% { transform: translateY(-4px); } 100% { transform: none; } } :where(page[w-p="tap"]) .note{ font-size: var(--t-caption); color: var(--ink-2); padding: 0 var(--s-1); } :where(page[w-p="tap"]) .foot{ margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); } :where(page[w-p="tap"]) .foot-t{ font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="tap"]) .link{ min-height: var(--hit); padding: 0 6px; display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; } :where(page[w-p="tap"]) .acts{ margin-top: auto; display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="tap"]) .tp-back{ height: var(--btn-l); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-section); font-weight: 700; } :where(page[w-p="tap"]) .tp-again{ height: var(--btn-m); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="tap"]) .beat{ flex: none; display: flex; justify-content: center; align-items: center; gap: 8px; height: 14px; margin: -8px 0; } :where(page[w-p="tap"]) .bdot{ width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .12); } :where(page[w-p="tap"]) .bdot.on{ background: #ffc93c; } :where(page[w-p="tap"]) .bdot.d1.on{ background: #6fd6b0; } :where(page[w-p="tap"]) .bdot.d2.on{ background: #f49ab2; } :where(page[w-p="tap"]) .bdot.d3.on{ background: #b18cf2; } :where(page[w-p="tap"]) .bdot.run{ animation: tp-beat calc(2142.857ms * var(--m-slow, 1)) linear infinite; } :where(page[w-p="tap"]) .bdot.d1.run{ animation-delay: calc(535.714ms * var(--m-slow, 1)); } :where(page[w-p="tap"]) .bdot.d2.run{ animation-delay: calc(1071.429ms * var(--m-slow, 1)); } :where(page[w-p="tap"]) .bdot.d3.run{ animation-delay: calc(1607.143ms * var(--m-slow, 1)); } :where(page[w-p="tap"]) .sk-pixel .bdot{ border-radius: 0; } :where(page[w-p="tap"]) .sk-pixel .bdot.on{ background: #FFD84A; box-shadow: inset 0 0 0 1px #1E1426; } :where(page[w-p="tap"]) .sk-pixel .bdot.run{ animation-timing-function: steps(1, end); } @keyframes tp-beat { 0% { transform: scale(1); } 5.6% { transform: scale(1.6); } 25% { transform: scale(1.6); } 30.6% { transform: scale(1); } 100% { transform: scale(1); } } @media (max-height: 700px) { :where(page[w-p="tap"]) .stage{ height: 240px; } :where(page[w-p="tap"]) .key{ width: 196px; height: 196px; } :where(page[w-p="tap"]) .sk-pixel .key{ width: 190px; height: 190px; } :where(page[w-p="tap"]) .key-pet{ width: 72px; height: 78px; } :where(page[w-p="tap"]) .r1{ width: 220px; height: 220px; margin: -110px 0 0 -110px; } :where(page[w-p="tap"]) .r2{ width: 240px; height: 240px; margin: -120px 0 0 -120px; } } /* pages/scene/scene.wxss */ :where(page[w-p="scene"]) .page{ height: calc(100 * var(--wx-vh)); display: flex; flex-direction: column; overflow: hidden; } :where(page[w-p="scene"]) .fill{ flex: 1; display: flex; flex-direction: column; justify-content: center; } :where(page[w-p="scene"]) .top{ flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-1); } :where(page[w-p="scene"]) .exit{ flex: none; width: var(--hit); height: var(--hit); border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; margin-left: calc(var(--s-2) * -1); } :where(page[w-p="scene"]) .exit image{ width: 22px; height: 22px; } :where(page[w-p="scene"]) .head{ min-width: 0; display: flex; flex-direction: column; } :where(page[w-p="scene"]) .h-t{ font-size: var(--t-section); font-weight: 700; line-height: var(--lh-tight); } :where(page[w-p="scene"]) .h-s{ font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="scene"]) .play{ flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--gutter); } :where(page[w-p="scene"]) .chat{ flex: 1 1 auto; min-height: 120px; } :where(page[w-p="scene"]) .dock{ flex: none; margin: 0 calc(var(--gutter) * -1); padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s-3); background: var(--page-color); box-shadow: var(--bar-shadow); } :where(page[w-p="scene"]) .sk-pixel .dock{ box-shadow: 0 -3px 0 rgba(30, 20, 38, .35); } :where(page[w-p="scene"]) .blurb{ display: block; margin: var(--s-2) 0 var(--s-3); font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="scene"]) .chat-end{ height: var(--s-2); } :where(page[w-p="scene"]) .b{ max-width: 78%; margin-bottom: 10px; padding: 10px 14px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; } :where(page[w-p="scene"]) .b-them{ margin-right: auto; background: var(--cream); border-radius: 20px 20px 20px 6px; box-shadow: 0 6px 16px rgba(142, 111, 224, .14); } :where(page[w-p="scene"]) .b-me{ width: fit-content; max-width: 72%; margin-left: auto; background: var(--honey); border-radius: 20px 20px 6px 20px; box-shadow: var(--jelly-honey-shadow); } :where(page[w-p="scene"]) .b.k-reply{ background: var(--stage-lilac); } :where(page[w-p="scene"]) .b-name{ font-size: var(--t-caption); font-weight: 700; color: var(--mon-ink); } :where(page[w-p="scene"]) .b-en{ font-family: var(--en-text); font-size: 17px; line-height: 1.35; color: var(--ink); } :where(page[w-p="scene"]) .b-me .b-en{ color: var(--on-signal); font-weight: 600; } :where(page[w-p="scene"]) .b-zh{ font-size: var(--t-read-s); line-height: 1.45; color: var(--ink-2); } :where(page[w-p="scene"]) .sk-pixel .b{ border-radius: 0; } :where(page[w-p="scene"]) .sk-pixel .b-them{ box-shadow: inset 0 0 0 2px #1E1426, 3px 3px 0 rgba(30, 20, 38, .35); } :where(page[w-p="scene"]) .sk-pixel .b-me{ box-shadow: inset 0 0 0 2px #1E1426, 3px 3px 0 #1E1426; } :where(page[w-p="scene"]) .sk-pixel .b-me .b-en{ color: #1E1426; } :where(page[w-p="scene"]) .ask{ flex: none; display: flex; flex-direction: column; gap: 10px; } :where(page[w-p="scene"]) .ask-h{ display: flex; align-items: center; justify-content: space-between; } :where(page[w-p="scene"]) .ask-t{ font-size: 15px; font-weight: 700; } :where(page[w-p="scene"]) .opts{ display: flex; flex-direction: column; gap: 10px; } :where(page[w-p="scene"]) .opt{ min-height: var(--btn-m); padding: var(--s-2) 14px; box-sizing: border-box; border-radius: var(--r-m); border: 2px solid transparent; display: flex; align-items: center; gap: 10px; background: var(--pill); box-shadow: var(--jelly-pill-shadow); } :where(page[w-p="scene"]) .opt-k{ flex: none; width: 26px; height: 26px; border-radius: var(--r-full); background: var(--cream-2); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--ink-2); } :where(page[w-p="scene"]) .opt-en{ min-width: 0; font-family: var(--en-text); font-size: 17px; font-weight: 500; line-height: 1.3; color: var(--ink); } :where(page[w-p="scene"]) .opt.st-meh{ border-color: #c98a1a; background: #fff4dc; } :where(page[w-p="scene"]) .opt.st-no{ background: var(--pink); } :where(page[w-p="scene"]) .opt.st-tried{ opacity: .6; } :where(page[w-p="scene"]) .opt.st-tried-no{ opacity: .4; } :where(page[w-p="scene"]) .sk-pixel .opt{ border: 0; } :where(page[w-p="scene"]) .sk-pixel .opt.st-meh{ background: #FFE0DB; box-shadow: inset 0 0 0 3px #781D2A, 3px 3px 0 #1E1426; } :where(page[w-p="scene"]) .note{ flex: none; padding: var(--s-3) 14px; display: flex; gap: 10px; } :where(page[w-p="scene"]) .note-ic{ flex: none; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--lilac); color: #fff; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; } :where(page[w-p="scene"]) .note.k-ok .note-ic{ background: var(--honey); color: var(--on-signal); } :where(page[w-p="scene"]) .note-b{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); } :where(page[w-p="scene"]) .note-t{ font-size: 14px; font-weight: 700; color: var(--mon-ink); } :where(page[w-p="scene"]) .note-s{ font-size: 14px; line-height: 1.55; } :where(page[w-p="scene"]) .note-go{ margin-top: var(--s-1); display: flex; gap: var(--s-2); } :where(page[w-p="scene"]) .keep,:where(page[w-p="scene"]) .swap{ flex: 1; height: var(--hit); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="scene"]) .sk-pixel .note{ background: #E6DCF7; box-shadow: inset 0 0 0 2px #1E1426, 3px 3px 0 rgba(30, 20, 38, .35); } :where(page[w-p="scene"]) .sk-pixel .note-ic{ color: #1E1426; box-shadow: inset 0 0 0 2px #1E1426; } :where(page[w-p="scene"]) .wrap{ flex: 1; min-height: 0; padding: var(--s-3) var(--gutter) 0; display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="scene"]) .title{ font-size: var(--t-title); font-weight: 700; } :where(page[w-p="scene"]) .sub{ font-size: var(--t-read-s); color: var(--ink-2); } :where(page[w-p="scene"]) .rv-list{ flex: 1; min-height: 0; } :where(page[w-p="scene"]) .rv{ margin-bottom: var(--s-3); padding: var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); } :where(page[w-p="scene"]) .rv-them,:where(page[w-p="scene"]) .rv-me,:where(page[w-p="scene"]) .rv-best,:where(page[w-p="scene"]) .rv-end{ padding: var(--s-2) var(--s-3); border-radius: var(--r-s); display: flex; flex-direction: column; gap: 2px; } :where(page[w-p="scene"]) .rv-me{ background: var(--cream-2); } :where(page[w-p="scene"]) .rv-me.same{ background: var(--mint); } :where(page[w-p="scene"]) .rv-best{ background: var(--stage-lilac); } :where(page[w-p="scene"]) .rv-row{ display: flex; align-items: center; gap: var(--s-2); } :where(page[w-p="scene"]) .rv-who,:where(page[w-p="scene"]) .rv-lab{ font-size: var(--t-caption); font-weight: 700; color: var(--ink-2); } :where(page[w-p="scene"]) .rv-best .rv-lab{ color: var(--mon-ink); } :where(page[w-p="scene"]) .rv-tag{ padding: 0 var(--s-2); border-radius: var(--r-full); font-size: 12px; font-weight: 700; line-height: 20px; color: var(--ink); } :where(page[w-p="scene"]) .rv-en{ font-family: var(--en-text); font-size: var(--t-read); font-weight: 600; line-height: 1.35; } :where(page[w-p="scene"]) .rv-zh{ font-size: var(--t-read-s); color: var(--ink-2); } :where(page[w-p="scene"]) .talking .rv-en,:where(page[w-p="scene"]) .b.talking .b-en{ text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; } :where(page[w-p="scene"]) .end-go{ flex: none; display: flex; gap: var(--s-2); padding-bottom: var(--s-3); } :where(page[w-p="scene"]) .again,:where(page[w-p="scene"]) .primary{ flex: 1; height: var(--btn-l); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-section); font-weight: 700; } :where(page[w-p="scene"]) .b-them{ animation: m-rise calc(460ms * var(--m-slow, 1)) var(--m-out) backwards; } :where(page[w-p="scene"]) .b.hide{ opacity: 0; } :where(page[w-p="scene"]) .flyer{ position: fixed; z-index: 5; margin: 0; max-width: none; pointer-events: none; animation: none; } :where(page[w-p="scene"]) .flyer.go{ transition: transform calc(460ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="scene"]) .sk-pixel .b-them{ animation: m-px-drop calc(300ms * var(--m-slow, 1)) steps(3) backwards; } :where(page[w-p="scene"]) .sk-pixel .flyer.go{ transition: transform calc(360ms * var(--m-slow, 1)) steps(4); } :where(page[w-p="scene"]) .opt.st-picked{ border-color: var(--signal); } :where(page[w-p="scene"]) .opts .opt{ animation: m-rise calc(420ms * var(--m-slow, 1)) var(--m-out) backwards; animation-delay: calc(var(--n) * 50ms * var(--m-slow, 1)); transition: opacity calc(200ms * var(--m-slow, 1)) ease-out, transform calc(220ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="scene"]) .sk-pixel .opts .opt{ animation: m-px-drop calc(240ms * var(--m-slow, 1)) steps(3) backwards; animation-delay: calc(var(--n) * 60ms * var(--m-slow, 1)); transition: none; } :where(page[w-p="scene"]) .opt.st-gone{ opacity: 0; } :where(page[w-p="scene"]) .opt.st-fade{ opacity: .3; } :where(page[w-p="scene"]) .opt.st-meh{ animation: sc-nudge calc(320ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="scene"]) .opt.st-no{ animation: sc-shake calc(380ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="scene"]) .sk-pixel .opt.st-meh{ animation: sc-nudge-px calc(240ms * var(--m-slow, 1)) steps(2); } :where(page[w-p="scene"]) .sk-pixel .opt.st-no{ animation: sc-shake-px calc(320ms * var(--m-slow, 1)) steps(4); } :where(page[w-p="scene"]) .opts .opt.st-tried,:where(page[w-p="scene"]) .opts .opt.st-tried-no,:where(page[w-p="scene"]) .opts .opt.st-gone,:where(page[w-p="scene"]) .opts .opt.st-fade,:where(page[w-p="scene"]) .opts .opt.st-picked,:where(page[w-p="scene"]) .sk-pixel .opts .opt.st-tried,:where(page[w-p="scene"]) .sk-pixel .opts .opt.st-tried-no,:where(page[w-p="scene"]) .sk-pixel .opts .opt.st-gone,:where(page[w-p="scene"]) .sk-pixel .opts .opt.st-fade,:where(page[w-p="scene"]) .sk-pixel .opts .opt.st-picked{ animation: none; } @keyframes sc-nudge { 0%, 100% { transform: none; } 30% { transform: translateX(-3px); } 65% { transform: translateX(2px); } } @keyframes sc-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } @keyframes sc-nudge-px { 0%, 100% { transform: none; } 50% { transform: translateX(-2px); } } @keyframes sc-shake-px { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-4px); } } :where(page[w-p="scene"]) .note{ animation: m-rise calc(380ms * var(--m-slow, 1)) var(--m-out) backwards; } :where(page[w-p="scene"]) .sk-pixel .note{ animation: m-px-drop calc(240ms * var(--m-slow, 1)) steps(3) backwards; } :where(page[w-p="scene"]) .rv{ animation: m-rise calc(520ms * var(--m-slow, 1)) var(--m-out) backwards; animation-delay: calc(var(--n, 6) * 60ms * var(--m-slow, 1)); } :where(page[w-p="scene"]) .sk-pixel .rv{ animation: m-px-drop calc(300ms * var(--m-slow, 1)) steps(3) backwards; animation-delay: calc(var(--n, 6) * 60ms * var(--m-slow, 1)); } :where(page[w-p="scene"]) .calm .b-them,:where(page[w-p="scene"]) .calm .opts .opt,:where(page[w-p="scene"]) .calm .note,:where(page[w-p="scene"]) .calm .rv{ animation: calm-in var(--dur-calm) ease-out !important; } :where(page[w-p="scene"]) .praise-strip{ flex: none; position: relative; height: 34px; pointer-events: none; } :where(page[w-p="scene"]) .praise{ position: absolute; left: 0; right: 0; top: 2px; display: flex; justify-content: center; align-items: baseline; gap: 6px; animation: sc-cheer calc(1050ms * var(--m-slow, 1)) var(--m-out) forwards; } :where(page[w-p="scene"]) .praise-t{ font-family: var(--en); font-weight: 700; line-height: 1; color: #f05a28; } :where(page[w-p="scene"]) .praise-zh{ font-size: var(--t-caption); font-weight: 700; color: var(--ink-2); } :where(page[w-p="scene"]) .praise-halo{ display: none; } :where(page[w-p="scene"]) .sk-pixel .praise{ animation: sc-cheer-px calc(1050ms * var(--m-slow, 1)) steps(1, end) forwards; } :where(page[w-p="scene"]) .sk-pixel .praise-t{ color: #FFD84A; text-shadow: 2px 0 #1E1426, -2px 0 #1E1426, 0 2px #1E1426, 0 -2px #1E1426; } @keyframes sc-cheer { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.05); } 35% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } } @keyframes sc-cheer-px { 0% { opacity: 1; transform: translateY(4px); } 15% { transform: none; } 80% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-10px); } } :where(page[w-p="scene"]) .beat{ display: flex; gap: 6px; } :where(page[w-p="scene"]) .bdot{ width: 7px; height: 7px; border-radius: var(--r-full); background: var(--line); } :where(page[w-p="scene"]) .bdot.on{ background: #ffc93c; } :where(page[w-p="scene"]) .bdot.on.d1{ background: #6fd6b0; } :where(page[w-p="scene"]) .bdot.on.d2{ background: #f49ab2; } :where(page[w-p="scene"]) .bdot.on.d3{ background: #b18cf2; } :where(page[w-p="scene"]) .bdot.run{ animation: sc-beat calc(2142.857ms * var(--m-slow, 1)) linear infinite; } :where(page[w-p="scene"]) .bdot.run.d1{ animation-delay: calc(535.714ms * var(--m-slow, 1)); } :where(page[w-p="scene"]) .bdot.run.d2{ animation-delay: calc(1071.429ms * var(--m-slow, 1)); } :where(page[w-p="scene"]) .bdot.run.d3{ animation-delay: calc(1607.143ms * var(--m-slow, 1)); } :where(page[w-p="scene"]) .sk-pixel .bdot.run{ animation-timing-function: steps(1, end); } @keyframes sc-beat { 0%, 30% { transform: scale(1); } 6%, 25% { transform: scale(1.5); } } :where(page[w-p="scene"]) .sk-crayon .opt{ border-image: var(--cr-frame-s); } /* pages/aha/aha.wxss */ :where(page[w-p="aha"]) .page{ height: calc(100 * var(--wx-vh)); display: flex; flex-direction: column; overflow: hidden; } :where(page[w-p="aha"]) .fill{ flex: 1; display: flex; flex-direction: column; justify-content: center; } :where(page[w-p="aha"]) .top{ flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-1); } :where(page[w-p="aha"]) .exit{ flex: none; width: var(--hit); height: var(--hit); border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; margin-left: calc(var(--s-2) * -1); } :where(page[w-p="aha"]) .exit image{ width: 22px; height: 22px; } :where(page[w-p="aha"]) .head{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } :where(page[w-p="aha"]) .h-t{ font-size: var(--t-section); font-weight: 700; line-height: var(--lh-tight); } :where(page[w-p="aha"]) .steps{ display: flex; gap: 5px; } :where(page[w-p="aha"]) .sdot{ width: 14px; height: 5px; border-radius: var(--r-full); background: var(--line); } :where(page[w-p="aha"]) .sdot.past{ background: var(--mint); } :where(page[w-p="aha"]) .sdot.now{ width: 22px; background: var(--honey); } :where(page[w-p="aha"]) .more{ flex: none; height: 36px; padding: 0 var(--s-3); border-radius: var(--r-full); display: flex; align-items: center; font-size: var(--t-caption); font-weight: 700; color: var(--ink); } :where(page[w-p="aha"]) .sk-pixel .sdot{ border-radius: 0; } :where(page[w-p="aha"]) .wrap{ flex: 1; min-height: 0; padding: var(--s-3) var(--gutter) var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="aha"]) .grow{ flex: 1; } :where(page[w-p="aha"]) .kicker{ font-size: var(--t-caption); font-weight: 700; color: var(--mon-ink); letter-spacing: 1px; } :where(page[w-p="aha"]) .primary{ flex: none; height: var(--btn-l); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-section); font-weight: 700; color: var(--ink); } :where(page[w-p="aha"]) .primary.jelly-orange{ color: var(--on-signal); } :where(page[w-p="aha"]) button.primary{ width: 100%; margin: 0; padding: 0; line-height: var(--btn-l); border: 0; } :where(page[w-p="aha"]) button.primary::after{ border: 0; } :where(page[w-p="aha"]) .c-honey{ background: var(--honey); } :where(page[w-p="aha"]) .c-mint{ background: var(--mint); } :where(page[w-p="aha"]) .c-pink{ background: var(--pink); } :where(page[w-p="aha"]) .c-lilac{ background: var(--lilac); color: #fff; } :where(page[w-p="aha"]) .sk-pixel .c-lilac{ color: #1E1426; } :where(page[w-p="aha"]) .hook{ padding-top: var(--s-5); } :where(page[w-p="aha"]) .q{ font-size: 26px; font-weight: 800; line-height: 1.35; } :where(page[w-p="aha"]) .chips{ display: flex; flex-wrap: wrap; gap: var(--s-2); } :where(page[w-p="aha"]) .chip{ padding: 6px 14px; border-radius: var(--r-full); font-family: var(--en-text); font-size: 18px; font-weight: 700; color: var(--ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .12); } :where(page[w-p="aha"]) .sk-pixel .chip{ border-radius: 0; box-shadow: inset 0 0 0 2px #1E1426, 3px 3px 0 #1E1426; } :where(page[w-p="aha"]) .lead{ font-size: var(--t-read-s); line-height: var(--lh-body); color: var(--ink-2); } :where(page[w-p="aha"]) .peek{ flex: none; display: flex; justify-content: center; flex-wrap: wrap; gap: var(--s-3); } :where(page[w-p="aha"]) .pk-i{ width: 54px; height: 54px; border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; background: var(--card); box-shadow: var(--jelly-pill-shadow); animation: pk-bob calc(2400ms * var(--m-slow, 1)) ease-in-out infinite; animation-delay: calc(var(--n) * -400ms * var(--m-slow, 1)); } :where(page[w-p="aha"]) .pk-i:nth-child(odd){ transform: rotate(-4deg); } :where(page[w-p="aha"]) .peek-t{ text-align: center; font-size: var(--t-read-s); font-weight: 700; color: var(--ink-2); } @keyframes pk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } :where(page[w-p="aha"]) .sk-pixel .pk-i{ border-radius: 0; box-shadow: inset 0 0 0 2px #1E1426, 3px 3px 0 #1E1426; animation-timing-function: steps(2); } :where(page[w-p="aha"]) .calm .pk-i{ animation: none; } :where(page[w-p="aha"]) .guess{ flex: 1; min-height: 0; padding: var(--s-2) var(--gutter) var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="aha"]) .note{ flex: none; min-height: 44px; padding: var(--s-2) var(--s-3); box-sizing: border-box; border-radius: var(--r-m); display: flex; align-items: center; background: var(--cream-2); } :where(page[w-p="aha"]) .note{ gap: var(--s-2); } :where(page[w-p="aha"]) .note-t{ font-size: var(--t-read-s); line-height: 1.45; color: var(--ink-2); } :where(page[w-p="aha"]) .note-ok{ flex: none; width: 24px; height: 24px; border-radius: var(--r-full); background: var(--mint); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: var(--ink); } :where(page[w-p="aha"]) .note-zh{ font-size: var(--t-read-s); color: var(--ink-2); } :where(page[w-p="aha"]) .sk-pixel .note-ok{ border-radius: 0; box-shadow: inset 0 0 0 2px #1E1426; } :where(page[w-p="aha"]) .note.k-ok{ background: #e5f8ef; } :where(page[w-p="aha"]) .note.k-ok .note-t{ font-family: var(--en-text); font-size: var(--t-read); font-weight: 700; color: var(--ink); } :where(page[w-p="aha"]) .note.k-also{ background: #e5f8ef; } :where(page[w-p="aha"]) .note.k-also .note-t,:where(page[w-p="aha"]) .note.k-done .note-t{ color: var(--ink); font-weight: 600; } :where(page[w-p="aha"]) .note.k-miss{ background: #fff1e6; } :where(page[w-p="aha"]) .note.k-miss .note-t{ color: var(--ink); } :where(page[w-p="aha"]) .note.k-done{ background: #fff4cf; } :where(page[w-p="aha"]) .sk-pixel .note{ border-radius: 0; box-shadow: inset 0 0 0 2px #1E1426; } :where(page[w-p="aha"]) .guess{ position: relative; } :where(page[w-p="aha"]) .cards{ flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); align-content: start; } :where(page[w-p="aha"]) .slot{ position: relative; } :where(page[w-p="aha"]) .slot.up{ z-index: 10; } :where(page[w-p="aha"]) .gcard{ position: relative; min-height: 72px; padding: var(--s-2) 10px; box-sizing: border-box; border-radius: var(--r-m); display: flex; align-items: center; gap: var(--s-2); background: var(--card); box-shadow: var(--jelly-pill-shadow); touch-action: none; transition: transform calc(220ms * var(--m-slow, 1)) var(--m-out), opacity calc(200ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="aha"]) .gc-ic{ flex: none; font-size: 30px; line-height: 1; } :where(page[w-p="aha"]) .gc-b{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } :where(page[w-p="aha"]) .gc-en{ font-family: var(--en-text); font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); } :where(page[w-p="aha"]) .gap{ display: inline-block; min-width: 26px; margin: 0 2px; padding: 0 4px; border-radius: 6px; background: var(--cream-2); color: var(--ink-3); text-align: center; } :where(page[w-p="aha"]) .gap.filled{ background: var(--mint); color: var(--ink); } :where(page[w-p="aha"]) .gc-zh{ font-size: 13px; color: var(--ink-2); } :where(page[w-p="aha"]) .gcard.st-held{ transform: translateY(-4px) scale(1.03); box-shadow: 0 0 0 3px var(--signal), var(--jelly-pill-shadow); } :where(page[w-p="aha"]) .gcard.st-drag{ z-index: 10; transition: none; box-shadow: 0 14px 28px rgba(58, 36, 22, .22); } :where(page[w-p="aha"]) .gcard.st-fly{ z-index: 10; opacity: 0; transition: transform calc(320ms * var(--m-slow, 1)) cubic-bezier(.5, 0, .75, .4), opacity calc(320ms * var(--m-slow, 1)) ease-in; } :where(page[w-p="aha"]) .gcard.st-in{ visibility: hidden; } :where(page[w-p="aha"]) .gcard.st-back{ animation: gc-back calc(420ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="aha"]) .gcard.st-home{ transition: transform calc(420ms * var(--m-slow, 1)) cubic-bezier(.34, 1.4, .64, 1); } @keyframes gc-back { 0%, 100% { transform: none; } 18% { transform: translateX(-10px); } 42% { transform: translateX(8px); } 66% { transform: translateX(-4px); } 84% { transform: translateX(2px); } } :where(page[w-p="aha"]) .sk-pixel .gcard{ border-radius: 0; box-shadow: inset 0 0 0 2px #1E1426, 3px 3px 0 #1E1426; } :where(page[w-p="aha"]) .sk-pixel .gcard.st-held{ box-shadow: inset 0 0 0 3px #1E1426, 4px 4px 0 #1E1426; background: #FFF4DA; } :where(page[w-p="aha"]) .sk-pixel .gcard.st-fly{ transition: transform calc(240ms * var(--m-slow, 1)) steps(4), opacity calc(240ms * var(--m-slow, 1)) steps(4); } :where(page[w-p="aha"]) .sk-pixel .gcard.st-back{ animation: gc-back-px calc(320ms * var(--m-slow, 1)) steps(4); } :where(page[w-p="aha"]) .sk-pixel .gcard.st-home{ transition: transform calc(240ms * var(--m-slow, 1)) steps(3); } :where(page[w-p="aha"]) .sk-pixel .gap{ border-radius: 0; } @keyframes gc-back-px { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } } :where(page[w-p="aha"]) .baskets{ flex: none; display: flex; gap: var(--s-2); } :where(page[w-p="aha"]) .basket{ flex: 1; min-width: 0; height: 96px; border-radius: var(--r-l); box-shadow: 0 6px 14px rgba(0, 0, 0, .1), inset 0 3px 5px rgba(255, 255, 255, .7), inset 0 -6px 10px rgba(0, 0, 0, .08); } :where(page[w-p="aha"]) .bk{ height: 100%; padding: var(--s-2) 6px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; } :where(page[w-p="aha"]) .bk-w{ font-family: var(--en-text); font-size: 18px; font-weight: 800; line-height: 1.1; text-align: center; color: inherit; } :where(page[w-p="aha"]) .bk-dots{ display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 8px; } :where(page[w-p="aha"]) .bk-dot{ width: 8px; height: 8px; border-radius: var(--r-full); background: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 rgba(0, 0, 0, .15); } :where(page[w-p="aha"]) .bk-dot.also{ background: rgba(255, 255, 255, .55); } :where(page[w-p="aha"]) .basket.over{ transform: scale(1.06); box-shadow: 0 0 0 3px var(--signal), 0 10px 20px rgba(0, 0, 0, .14); } :where(page[w-p="aha"]) .basket{ transition: transform calc(160ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="aha"]) .basket.ready .bk{ animation: bk-ready calc(1400ms * var(--m-slow, 1)) ease-in-out infinite; } :where(page[w-p="aha"]) .bk.bump{ animation: bk-bump calc(380ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="aha"]) .basket.cheer .bk{ animation: bk-bump calc(420ms * var(--m-slow, 1)) var(--m-out) backwards; animation-delay: calc(var(--n) * 90ms * var(--m-slow, 1)); } @keyframes bk-bump { 0% { transform: none; } 35% { transform: translateY(-6px) scale(1.06, .96); } 70% { transform: translateY(1px) scale(.99, 1.01); } 100% { transform: none; } } @keyframes bk-ready { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } } :where(page[w-p="aha"]) .sk-pixel .basket{ border-radius: 0; box-shadow: inset 0 0 0 3px #1E1426, 4px 4px 0 #1E1426; } :where(page[w-p="aha"]) .sk-pixel .basket.over{ box-shadow: inset 0 0 0 4px #1E1426, 6px 6px 0 #1E1426; } :where(page[w-p="aha"]) .sk-pixel .bk-dot{ border-radius: 0; background: #1E1426; box-shadow: none; } :where(page[w-p="aha"]) .sk-pixel .bk-dot.also{ background: #5a4a66; } :where(page[w-p="aha"]) .sk-pixel .bk.bump,:where(page[w-p="aha"]) .sk-pixel .basket.cheer .bk{ animation-timing-function: steps(3); } :where(page[w-p="aha"]) .hooray{ position: absolute; left: 0; right: 0; top: 40%; display: flex; justify-content: center; pointer-events: none; } :where(page[w-p="aha"]) .hooray-t{ font-size: 34px; font-weight: 800; color: var(--mon-ink); animation: aha-open calc(520ms * var(--m-slow, 1)) var(--m-out) backwards; } :where(page[w-p="aha"]) .sk-pixel .hooray-t{ color: #1E1426; animation: m-px-drop calc(300ms * var(--m-slow, 1)) steps(3) backwards; } :where(page[w-p="aha"]) .list{ flex: 1; min-height: 0; } :where(page[w-p="aha"]) .rule,:where(page[w-p="aha"]) .egg{ margin-bottom: var(--s-3); padding: var(--s-3) var(--s-3) var(--s-2); display: flex; flex-direction: column; gap: var(--s-1); } :where(page[w-p="aha"]) .rule-h{ display: flex; align-items: center; gap: var(--s-2); margin-bottom: 2px; } :where(page[w-p="aha"]) .rule-w{ flex: none; padding: 4px 12px; border-radius: var(--r-full); font-family: var(--en-text); font-size: 18px; font-weight: 800; color: var(--ink); } :where(page[w-p="aha"]) .rule-t{ flex: 1; min-width: 0; font-size: var(--t-read-s); font-weight: 600; line-height: 1.45; } :where(page[w-p="aha"]) .ex{ min-height: 36px; padding: 4px var(--s-2); border-radius: var(--r-s); display: flex; align-items: center; gap: var(--s-2); } :where(page[w-p="aha"]) .ex-en{ font-family: var(--en-text); font-size: var(--t-read); font-weight: 600; line-height: 1.3; } :where(page[w-p="aha"]) .ex-zh{ flex: 1; min-width: 0; font-size: var(--t-read-s); color: var(--ink-2); } :where(page[w-p="aha"]) .ex-play{ flex: none; width: 0; height: 0; border-left: 9px solid var(--ink-3); border-top: 6px solid transparent; border-bottom: 6px solid transparent; } :where(page[w-p="aha"]) .ex.talking .ex-en{ text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; } :where(page[w-p="aha"]) .egg{ background: radial-gradient(circle at 90% 10%, #fff7d6, var(--card) 60%); } :where(page[w-p="aha"]) .egg-t{ font-size: var(--t-section); font-weight: 800; line-height: 1.35; } :where(page[w-p="aha"]) .egg-s{ font-size: var(--t-read-s); line-height: var(--lh-body); color: var(--ink-2); } :where(page[w-p="aha"]) .sk-pixel .rule-w{ border-radius: 0; box-shadow: inset 0 0 0 2px #1E1426; } :where(page[w-p="aha"]) .sk-pixel .egg{ background: #FFF4DA; } :where(page[w-p="aha"]) .rule,:where(page[w-p="aha"]) .egg{ animation: aha-open calc(460ms * var(--m-slow, 1)) var(--m-out) backwards; animation-delay: calc(var(--n) * 140ms * var(--m-slow, 1)); } :where(page[w-p="aha"]) .rule .ex,:where(page[w-p="aha"]) .egg .ex{ animation: m-rise calc(380ms * var(--m-slow, 1)) var(--m-out) backwards; animation-delay: calc((var(--n) * 140ms + 200ms) * var(--m-slow, 1)); } @keyframes aha-open { 0% { opacity: 0; transform: translateY(18px) scale(.96, .8); } 60% { opacity: 1; transform: translateY(-2px) scale(1.01, 1.02); } 100% { transform: none; } } :where(page[w-p="aha"]) .sk-pixel .rule,:where(page[w-p="aha"]) .sk-pixel .egg{ animation: m-px-drop calc(300ms * var(--m-slow, 1)) steps(3) backwards; animation-delay: calc(var(--n) * 140ms * var(--m-slow, 1)); } :where(page[w-p="aha"]) .sk-pixel .rule .ex,:where(page[w-p="aha"]) .sk-pixel .egg .ex{ animation: none; } :where(page[w-p="aha"]) .sum{ padding-top: var(--s-4); } :where(page[w-p="aha"]) .sum-card{ padding: var(--s-5) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); background: radial-gradient(circle at 85% 15%, #fff4cf, var(--card) 65%); animation: aha-open calc(520ms * var(--m-slow, 1)) var(--m-out) backwards; } :where(page[w-p="aha"]) .sum-k{ font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--mon-ink); } :where(page[w-p="aha"]) .sum-t{ font-size: 21px; font-weight: 800; line-height: 1.45; } :where(page[w-p="aha"]) .sum-q{ font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="aha"]) .sum-icons{ font-size: 24px; line-height: 1.3; letter-spacing: 2px; } :where(page[w-p="aha"]) .sum-go{ flex: none; display: flex; gap: var(--s-2); } :where(page[w-p="aha"]) .again{ flex: 1; height: var(--hit); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; color: var(--ink); } :where(page[w-p="aha"]) .sk-pixel .sum-card{ background: #FFF4DA; animation: m-px-drop calc(300ms * var(--m-slow, 1)) steps(3) backwards; } :where(page[w-p="aha"]) .sheet-mask{ position: fixed; inset: 0; z-index: 20; background: var(--scrim); } :where(page[w-p="aha"]) .sheet{ position: fixed; left: var(--gutter); right: var(--gutter); bottom: 96px; z-index: 21; max-height: calc(62 * var(--wx-vh)); padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); animation: m-rise calc(320ms * var(--m-slow, 1)) var(--m-out) backwards; } :where(page[w-p="aha"]) .sheet-t{ padding: 0 var(--s-2); font-size: var(--t-section); font-weight: 700; } :where(page[w-p="aha"]) .sheet-list{ flex: 1; min-height: 0; max-height: calc(52 * var(--wx-vh)); } :where(page[w-p="aha"]) .topic{ padding: 10px var(--s-2); border-radius: var(--r-s); display: flex; flex-direction: column; gap: 2px; } :where(page[w-p="aha"]) .topic.cur{ background: var(--cream-2); } :where(page[w-p="aha"]) .topic-q{ font-size: var(--t-read-s); font-weight: 600; line-height: 1.4; } :where(page[w-p="aha"]) .topic-w{ font-family: var(--en-text); font-size: 13px; color: var(--ink-2); } :where(page[w-p="aha"]) .sk-pixel .sheet{ box-shadow: inset 0 0 0 2px #1E1426, 4px 4px 0 #1E1426; } :where(page[w-p="aha"]) .praise-strip{ flex: none; position: relative; height: 30px; pointer-events: none; } :where(page[w-p="aha"]) .praise{ position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; align-items: baseline; gap: 6px; animation: ah-cheer calc(1050ms * var(--m-slow, 1)) var(--m-out) forwards; } :where(page[w-p="aha"]) .praise-t{ font-family: var(--en); font-weight: 700; line-height: 1; color: #f05a28; } :where(page[w-p="aha"]) .praise-zh{ font-size: var(--t-caption); font-weight: 700; color: var(--ink-2); } :where(page[w-p="aha"]) .sk-pixel .praise{ animation: ah-cheer-px calc(1050ms * var(--m-slow, 1)) steps(1, end) forwards; } :where(page[w-p="aha"]) .sk-pixel .praise-t{ color: #FFD84A; text-shadow: 2px 0 #1E1426, -2px 0 #1E1426, 0 2px #1E1426, 0 -2px #1E1426; } @keyframes ah-cheer { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.05); } 35% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } } @keyframes ah-cheer-px { 0% { opacity: 1; transform: translateY(4px); } 15% { transform: none; } 80% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-10px); } } :where(page[w-p="aha"]) .beat{ flex: none; display: flex; justify-content: center; gap: 6px; } :where(page[w-p="aha"]) .bdot{ width: 7px; height: 7px; border-radius: var(--r-full); background: var(--line); } :where(page[w-p="aha"]) .bdot.on{ background: #ffc93c; } :where(page[w-p="aha"]) .bdot.on.d1{ background: #6fd6b0; } :where(page[w-p="aha"]) .bdot.on.d2{ background: #f49ab2; } :where(page[w-p="aha"]) .bdot.on.d3{ background: #b18cf2; } :where(page[w-p="aha"]) .bdot.run{ animation: ah-beat calc(2142.857ms * var(--m-slow, 1)) linear infinite; } :where(page[w-p="aha"]) .bdot.run.d1{ animation-delay: calc(535.714ms * var(--m-slow, 1)); } :where(page[w-p="aha"]) .bdot.run.d2{ animation-delay: calc(1071.429ms * var(--m-slow, 1)); } :where(page[w-p="aha"]) .bdot.run.d3{ animation-delay: calc(1607.143ms * var(--m-slow, 1)); } :where(page[w-p="aha"]) .sk-pixel .bdot.run{ animation-timing-function: steps(1, end); } @keyframes ah-beat { 0%, 30% { transform: scale(1); } 6%, 25% { transform: scale(1.5); } } :where(page[w-p="aha"]) .q,:where(page[w-p="aha"]) .lead,:where(page[w-p="aha"]) .kicker{ animation: m-rise calc(520ms * var(--m-slow, 1)) var(--m-out) backwards; } :where(page[w-p="aha"]) .chips .chip{ animation: m-rise calc(460ms * var(--m-slow, 1)) var(--m-out) backwards; animation-delay: calc((var(--n) * 70ms + 160ms) * var(--m-slow, 1)); } :where(page[w-p="aha"]) .cards .slot{ animation: m-rise calc(420ms * var(--m-slow, 1)) var(--m-out) backwards; animation-delay: calc(var(--n) * 40ms * var(--m-slow, 1)); } :where(page[w-p="aha"]) .sk-pixel .q,:where(page[w-p="aha"]) .sk-pixel .lead,:where(page[w-p="aha"]) .sk-pixel .kicker,:where(page[w-p="aha"]) .sk-pixel .chips .chip,:where(page[w-p="aha"]) .sk-pixel .cards .slot{ animation: m-px-drop calc(300ms * var(--m-slow, 1)) steps(3) backwards; } :where(page[w-p="aha"]) .calm .hooray-t,:where(page[w-p="aha"]) .calm .q,:where(page[w-p="aha"]) .calm .lead,:where(page[w-p="aha"]) .calm .kicker,:where(page[w-p="aha"]) .calm .chips .chip,:where(page[w-p="aha"]) .calm .cards .slot,:where(page[w-p="aha"]) .calm .rule,:where(page[w-p="aha"]) .calm .egg,:where(page[w-p="aha"]) .calm .sum-card,:where(page[w-p="aha"]) .calm .sheet{ animation: calm-in var(--dur-calm) ease-out !important; } :where(page[w-p="aha"]) .calm .rule .ex,:where(page[w-p="aha"]) .calm .egg .ex,:where(page[w-p="aha"]) .calm .basket .bk,:where(page[w-p="aha"]) .calm .gcard.st-back{ animation: none !important; } :where(page[w-p="aha"]) .calm .gcard,:where(page[w-p="aha"]) .calm .basket{ transition: none !important; } :where(page[w-p="aha"]) .calm .gcard.st-held,:where(page[w-p="aha"]) .calm .basket.over{ transform: none; } :where(page[w-p="aha"]) .sk-crayon .pk-i,:where(page[w-p="aha"]) .sk-crayon .gcard{ border-image: var(--cr-frame-s); } /* pages/standup/standup.wxss */ :where(page[w-p="standup"]) .st{ --night: #0d0a14; --ink-n: #f6f1e7; --ink-n2: #c9c0d6; --ink-n3: #8d849c; --amber: #ffc94a; --amber-d: #d9921c; --amber-dd: #8a5410; --amber-ink: #3b1f04; --panel: #17131f; --panel2: #221c2e; --line-n: #352d44; --brick: #4a2622; --mortar: #2b1513; --curtain-a: #5e0f1d; --curtain-b: #7d1627; --curtain-c: #4c0b17; --neon: #ffd6e5; --neon-glow: #ff5d8f; --sil-back: #120f17; --sil-front: #07060a; --edge: transparent; --r-card: 20px; --r-btn: 26px; height: calc(100 * var(--wx-vh)); display: flex; flex-direction: column; overflow: hidden; background: var(--night); color: var(--ink-n); } :where(page[w-p="standup"]) .st.sk-pixel{ --night: #1B1630; --ink-n: #FFF4DA; --ink-n2: #D8CCF2; --ink-n3: #A99CC8; --amber: #FFD84A; --amber-d: #E0A92A; --amber-dd: #0F0B1A; --amber-ink: #1E1426; --panel: #2A2348; --panel2: #352C5A; --line-n: #0F0B1A; --brick: #5A2E2A; --mortar: #2E1612; --curtain-a: #8E1C2C; --curtain-b: #B8283E; --curtain-c: #6A1220; --neon: #FFE0EA; --neon-glow: #FF5D8F; --sil-back: #241D3E; --sil-front: #0F0B1A; --edge: #0F0B1A; --r-card: 0px; --r-btn: 0px; } :where(page[w-p="standup"]) .top{ flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-2); } :where(page[w-p="standup"]) .exit{ flex: none; width: var(--hit); height: var(--hit); border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; margin-left: calc(var(--s-2) * -1); } :where(page[w-p="standup"]) .chev{ width: 11px; height: 11px; border-left: 2.5px solid var(--ink-n); border-bottom: 2.5px solid var(--ink-n); transform: translateX(2px) rotate(45deg); } :where(page[w-p="standup"]) .ttl{ flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } :where(page[w-p="standup"]) .ttl-b{ font-size: 16px; font-weight: 700; color: var(--ink-n); } :where(page[w-p="standup"]) .ttl-s{ font-size: 12px; color: var(--ink-n3); } :where(page[w-p="standup"]) .pill{ flex: none; height: 34px; padding: 0 var(--s-3); border-radius: 17px; display: flex; align-items: center; font-size: 13px; font-weight: 700; color: var(--ink-n); background: rgba(255, 255, 255, .1); } :where(page[w-p="standup"]) .sk-pixel .pill{ border-radius: 0; background: var(--panel); box-shadow: inset 0 0 0 2px var(--edge), 3px 3px 0 var(--edge); } :where(page[w-p="standup"]) .fill{ flex: 1; display: flex; flex-direction: column; justify-content: center; } :where(page[w-p="standup"]) .stage{ position: relative; flex: none; height: 300px; overflow: hidden; } :where(page[w-p="standup"]) .wall{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: radial-gradient(260px 200px at 50% 38%, rgba(0, 0, 0, 0), rgba(0, 0, 0, .72) 100%), repeating-linear-gradient(0deg, var(--mortar) 0 2px, transparent 2px 22px), repeating-linear-gradient(90deg, var(--mortar) 0 2px, transparent 2px 46px), linear-gradient(var(--brick), #3b1d1a); } :where(page[w-p="standup"]) .sk-pixel .wall{ background: linear-gradient(rgba(15, 11, 26, .55), rgba(15, 11, 26, 0) 30%, rgba(15, 11, 26, 0) 70%, rgba(15, 11, 26, .6)), repeating-linear-gradient(0deg, var(--mortar) 0 4px, transparent 4px 24px), repeating-linear-gradient(90deg, var(--mortar) 0 4px, transparent 4px 48px), var(--brick); } :where(page[w-p="standup"]) .curtain{ position: absolute; top: 0; bottom: 0; width: 34px; z-index: 3; background: repeating-linear-gradient(90deg, var(--curtain-a) 0 6px, var(--curtain-b) 6px 11px, var(--curtain-c) 11px 17px); box-shadow: 0 0 22px rgba(0, 0, 0, .8); } :where(page[w-p="standup"]) .curtain.l{ left: 0; } :where(page[w-p="standup"]) .curtain.r{ right: 0; } :where(page[w-p="standup"]) .valance{ position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 4; background: radial-gradient(14px 12px at 14px 0, var(--curtain-b) 98%, transparent) 0 0 / 28px 22px, var(--curtain-a); box-shadow: 0 6px 14px rgba(0, 0, 0, .5); } :where(page[w-p="standup"]) .sk-pixel .curtain{ box-shadow: none; border-right: 4px solid var(--edge); } :where(page[w-p="standup"]) .sk-pixel .curtain.r{ border-right: 0; border-left: 4px solid var(--edge); } :where(page[w-p="standup"]) .sk-pixel .valance{ height: 20px; box-shadow: 0 4px 0 var(--edge); background: linear-gradient(var(--curtain-a) 0 12px, transparent 12px), repeating-linear-gradient(90deg, var(--curtain-b) 0 16px, transparent 16px 24px); } :where(page[w-p="standup"]) .neon{ position: absolute; left: 46px; top: 40px; z-index: 2; display: flex; flex-direction: column; transform: rotate(-6deg); animation: flick calc(5s * var(--m-slow, 1)) infinite; } :where(page[w-p="standup"]) .neon-en{ font-family: 'Snell Roundhand', 'Brush Script MT', cursive; font-size: 30px; color: var(--neon); text-shadow: 0 0 4px var(--neon-glow), 0 0 12px var(--neon-glow), 0 0 26px #ff2f73; } :where(page[w-p="standup"]) .neon-zh{ margin: -2px 0 0 6px; font-size: 12px; letter-spacing: .32em; color: #ffe9f0; text-shadow: 0 0 8px var(--neon-glow); } @keyframes flick { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .45; } 95% { opacity: 1; } 96% { opacity: .6; } } :where(page[w-p="standup"]) .sk-pixel .neon{ transform: none; top: 34px; left: 44px; padding: 4px 8px; box-shadow: inset 0 0 0 2px var(--neon-glow); animation-timing-function: steps(1, end); } :where(page[w-p="standup"]) .sk-pixel .neon-en{ font-family: 'Courier New', monospace; font-size: 22px; font-weight: 700; letter-spacing: 1px; color: var(--neon); text-shadow: 2px 2px 0 #8E1C2C; } :where(page[w-p="standup"]) .sk-pixel .neon-zh{ margin: 2px 0 0; letter-spacing: .3em; text-shadow: none; color: var(--neon); } :where(page[w-p="standup"]) .floor{ position: absolute; left: 0; right: 0; bottom: 0; height: 84px; z-index: 1; background: linear-gradient(#2a1a12, #120b08); border-top: 3px solid #6b4426; } :where(page[w-p="standup"]) .sk-pixel .floor{ background: repeating-linear-gradient(90deg, #3A2418 0 22px, #2E1C12 22px 24px); border-top: 4px solid #8A5A2A; } :where(page[w-p="standup"]) .pool{ position: absolute; left: 50%; bottom: 58px; width: 250px; height: 46px; margin-left: -125px; border-radius: 50%; z-index: 2; background: radial-gradient(closest-side, rgba(255, 230, 170, .55), rgba(255, 230, 170, 0)); transition: opacity .5s; } :where(page[w-p="standup"]) .sk-pixel .pool{ border-radius: 0; height: 20px; bottom: 66px; width: 200px; margin-left: -100px; background: rgba(255, 228, 150, .35); box-shadow: 0 0 0 8px rgba(255, 228, 150, .15); } :where(page[w-p="standup"]) .spot{ position: absolute; left: 50%; top: -10px; width: 330px; height: 300px; margin-left: -165px; z-index: 2; pointer-events: none; opacity: .85; transition: opacity .5s; background: linear-gradient(rgba(255, 240, 200, .5), rgba(255, 226, 160, .12) 70%, rgba(255, 226, 160, 0)); clip-path: polygon(44% 0, 56% 0, 92% 100%, 8% 100%); } :where(page[w-p="standup"]) .sk-pixel .spot{ background: rgba(255, 236, 170, .22); clip-path: polygon(44% 0, 56% 0, 56% 10%, 62% 10%, 62% 30%, 70% 30%, 70% 50%, 78% 50%, 78% 70%, 86% 70%, 86% 100%, 14% 100%, 14% 70%, 22% 70%, 22% 50%, 30% 50%, 30% 30%, 38% 30%, 38% 10%, 44% 10%); } :where(page[w-p="standup"]) .spot.flash{ animation: spot-up calc(700ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="standup"]) .sk-pixel .spot.flash{ animation-timing-function: steps(3); } @keyframes spot-up { 0% { opacity: .12; } 35% { opacity: 1; } 100% { opacity: .85; } } :where(page[w-p="standup"]) .bot{ position: absolute; left: 50%; bottom: 74px; width: 128px; margin-left: -58px; z-index: 3; transform-origin: 50% 100%; animation: bot-idle calc(3s * var(--m-slow, 1)) ease-in-out infinite; } :where(page[w-p="standup"]) .bot-img{ width: 100%; display: block; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); } :where(page[w-p="standup"]) .talking .bot{ animation: bot-talk calc(360ms * var(--m-slow, 1)) ease-in-out infinite; } :where(page[w-p="standup"]) .bot.laugh{ animation: bot-laugh calc(220ms * var(--m-slow, 1)) ease-in-out infinite; } @keyframes bot-idle { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-2px) rotate(1deg); } } @keyframes bot-talk { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.97, 1.06); } } @keyframes bot-laugh { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-5px); } } :where(page[w-p="standup"]) .sk-pixel .bot{ width: 112px; margin-left: -52px; bottom: 76px; animation-timing-function: steps(2, end); } :where(page[w-p="standup"]) .sk-pixel .bot-img{ filter: none; image-rendering: pixelated; } :where(page[w-p="standup"]) .sk-pixel .talking .bot,:where(page[w-p="standup"]) .sk-pixel .bot.laugh{ animation-timing-function: steps(2, end); } :where(page[w-p="standup"]) .mic{ position: absolute; left: 50%; bottom: 66px; width: 70px; height: 150px; margin-left: -62px; z-index: 4; pointer-events: none; } :where(page[w-p="standup"]) .mic-base{ position: absolute; left: 10px; bottom: 0; width: 40px; height: 8px; border-radius: 50%; background: #0a0a0d; } :where(page[w-p="standup"]) .mic-pole{ position: absolute; left: 28px; bottom: 4px; width: 4px; height: 48px; border-radius: 2px; background: linear-gradient(90deg, #3a3a44, #a6a6b4, #2a2a33); } :where(page[w-p="standup"]) .mic-arm{ position: absolute; left: 30px; bottom: 50px; width: 4px; height: 12px; border-radius: 2px; background: #8c8c98; transform: rotate(40deg); transform-origin: 50% 100%; } :where(page[w-p="standup"]) .mic-head{ position: absolute; left: 34px; bottom: 58px; width: 12px; height: 26px; border-radius: 6px; background: linear-gradient(#a6a6b4 0 45%, #1e1e25 45%); transform: rotate(38deg); transform-origin: 50% 100%; } :where(page[w-p="standup"]) .sk-pixel .mic-base{ border-radius: 0; height: 6px; } :where(page[w-p="standup"]) .sk-pixel .mic-pole,:where(page[w-p="standup"]) .sk-pixel .mic-arm{ border-radius: 0; background: #A6A6B4; box-shadow: 2px 0 0 #3a3a44; } :where(page[w-p="standup"]) .sk-pixel .mic-head{ border-radius: 0; background: linear-gradient(#C8C8D4 0 45%, #2a2a33 45%); } :where(page[w-p="standup"]) .think{ position: absolute; left: 50%; bottom: 196px; margin-left: 44px; z-index: 6; display: flex; gap: 5px; opacity: 0; transition: opacity .3s; } :where(page[w-p="standup"]) .td{ width: 9px; height: 9px; border-radius: 50%; background: #fff3d6; animation: dot calc(1s * var(--m-slow, 1)) infinite; } :where(page[w-p="standup"]) .td:nth-child(2){ animation-delay: .15s; } :where(page[w-p="standup"]) .td:nth-child(3){ animation-delay: .3s; } @keyframes dot { 50% { transform: translateY(-5px); opacity: .5; } } :where(page[w-p="standup"]) .sk-pixel .td{ border-radius: 0; width: 8px; height: 8px; animation-timing-function: steps(2); } :where(page[w-p="standup"]) .dimmer{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 5; background: rgba(5, 3, 10, .68); opacity: 0; transition: opacity .5s; pointer-events: none; } :where(page[w-p="standup"]) .dim .spot{ opacity: .12; } :where(page[w-p="standup"]) .dim .pool{ opacity: .15; } :where(page[w-p="standup"]) .dim .dimmer{ opacity: 1; } :where(page[w-p="standup"]) .dim .think{ opacity: 1; } :where(page[w-p="standup"]) .dim .bot{ z-index: 6; } :where(page[w-p="standup"]) .dim .bot-img{ filter: brightness(.55) drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); } :where(page[w-p="standup"]) .sk-pixel .dim .bot-img{ filter: brightness(.55); } :where(page[w-p="standup"]) .aud{ position: absolute; left: 0; right: 0; bottom: -2px; height: 96px; z-index: 7; pointer-events: none; } :where(page[w-p="standup"]) .who{ position: absolute; bottom: 0; width: calc(60px * var(--s)); margin-left: calc(-30px * var(--s)); height: calc(84px * var(--s)); transform-origin: 50% 100%; } :where(page[w-p="standup"]) .who.back{ bottom: 16px; z-index: 1; } :where(page[w-p="standup"]) .who.front{ z-index: 2; } :where(page[w-p="standup"]) .hd{ position: absolute; left: 50%; top: 0; width: calc(30px * var(--s)); height: calc(30px * var(--s)); margin-left: calc(-15px * var(--s)); border-radius: 50%; background: var(--sil-back); box-shadow: 0 0 0 1px rgba(255, 214, 150, .12); } :where(page[w-p="standup"]) .bd{ position: absolute; left: 0; right: 0; bottom: 0; height: calc(52px * var(--s)); border-radius: 50% 50% 0 0; background: var(--sil-back); box-shadow: 0 0 0 1px rgba(255, 214, 150, .1); } :where(page[w-p="standup"]) .front .hd,:where(page[w-p="standup"]) .front .bd{ background: var(--sil-front); box-shadow: 0 0 0 1px rgba(255, 214, 150, .22); } :where(page[w-p="standup"]) .ex{ position: absolute; } :where(page[w-p="standup"]) .bun .ex{ left: 50%; top: calc(-10px * var(--s)); width: calc(14px * var(--s)); height: calc(14px * var(--s)); margin-left: calc(-7px * var(--s)); border-radius: 50%; background: var(--sil-front); } :where(page[w-p="standup"]) .cap .ex{ left: calc(14px * var(--s)); top: calc(-2px * var(--s)); width: calc(40px * var(--s)); height: calc(10px * var(--s)); border-radius: 12px 12px 2px 2px; background: var(--sil-front); } :where(page[w-p="standup"]) .pony .ex{ left: calc(40px * var(--s)); top: calc(6px * var(--s)); width: calc(9px * var(--s)); height: calc(26px * var(--s)); border-radius: 6px; background: var(--sil-front); transform: rotate(-18deg); } :where(page[w-p="standup"]) .sk-pixel .hd,:where(page[w-p="standup"]) .sk-pixel .bd,:where(page[w-p="standup"]) .sk-pixel .ex{ border-radius: 0; box-shadow: none; } :where(page[w-p="standup"]) .sk-pixel .bd{ border-radius: 0; clip-path: polygon(14% 0, 86% 0, 86% 12%, 100% 12%, 100% 100%, 0 100%, 0 12%, 14% 12%); } :where(page[w-p="standup"]) .sk-pixel .hd{ box-shadow: inset 0 0 0 2px rgba(255, 214, 150, .18); } :where(page[w-p="standup"]) .aud.l1 .who{ animation: aud-1 calc(var(--f) * 2 * var(--m-slow, 1)) ease-in-out infinite; animation-delay: var(--p); } :where(page[w-p="standup"]) .aud.l2 .who{ animation: aud-2 calc(var(--f) * var(--m-slow, 1)) ease-in-out infinite; animation-delay: var(--p); } :where(page[w-p="standup"]) .aud.l3 .who{ animation: aud-3 calc(var(--f) * .8 * var(--m-slow, 1)) ease-in-out infinite; animation-delay: var(--p); } @keyframes aud-1 { 0%, 100% { transform: rotate(-2deg); } 50% { transform: translateY(-2px) rotate(2deg); } } @keyframes aud-2 { 0%, 100% { transform: rotate(-5deg); } 50% { transform: translateY(-5px) rotate(5deg); } } @keyframes aud-3 { 0%, 100% { transform: rotate(-9deg); } 50% { transform: translateY(-9px) rotate(9deg); } } :where(page[w-p="standup"]) .sk-pixel .aud .who{ animation-timing-function: steps(2, end); } :where(page[w-p="standup"]) .who.you{ width: 54px; margin-left: -27px; height: 84px; } :where(page[w-p="standup"]) .you .bd{ height: 40px; } :where(page[w-p="standup"]) .you-img{ position: absolute; left: 50%; bottom: 20px; width: 46px; height: 46px; margin-left: -23px; image-rendering: pixelated; } :where(page[w-p="standup"]) .you-t{ position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 11px; font-weight: 700; color: var(--amber); } :where(page[w-p="standup"]) .who.you.jump{ animation: you-jump calc(620ms * var(--m-slow, 1)) var(--m-out) !important; } @keyframes you-jump { 0% { transform: none; } 30% { transform: translateY(-14px) rotate(-6deg); } 60% { transform: translateY(-4px) rotate(4deg); } 100% { transform: none; } } :where(page[w-p="standup"]) .sk-pixel .who.you.jump{ animation-timing-function: steps(4) !important; } :where(page[w-p="standup"]) .closer{ position: absolute; top: 0; bottom: 0; width: 51%; z-index: 8; transition: transform calc(900ms * var(--m-slow, 1)) cubic-bezier(.6, .05, .3, 1); background: repeating-linear-gradient(90deg, var(--curtain-a) 0 8px, var(--curtain-b) 8px 15px, var(--curtain-c) 15px 22px); } :where(page[w-p="standup"]) .closer.l{ left: 0; transform: translateX(-100%); } :where(page[w-p="standup"]) .closer.r{ right: 0; transform: translateX(100%); } :where(page[w-p="standup"]) .closed .closer{ transform: none; } :where(page[w-p="standup"]) .sk-pixel .closer{ transition-timing-function: steps(6); } :where(page[w-p="standup"]) .calm .closer{ transform: none !important; opacity: 0; } :where(page[w-p="standup"]) .calm .closed .closer{ opacity: 1; animation: calm-in var(--dur-calm) ease-out !important; } :where(page[w-p="standup"]) .toast{ position: absolute; left: 50%; top: 30px; z-index: 9; max-width: 320px; transform: translateX(-50%); padding: 9px 14px; border-radius: 14px; background: #2b2338; border: 1px solid #4a3e60; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--ink-n); white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); animation: toast-in calc(250ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="standup"]) .toast-i{ flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--amber); } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } } :where(page[w-p="standup"]) .sk-pixel .toast{ border-radius: 0; border: 0; background: var(--panel); box-shadow: inset 0 0 0 2px var(--edge), 3px 3px 0 var(--edge); animation-timing-function: steps(2); } :where(page[w-p="standup"]) .sk-pixel .toast-i{ border-radius: 0; } :where(page[w-p="standup"]) .calm .toast{ animation: calm-in var(--dur-calm) ease-out !important; } :where(page[w-p="standup"]) .praise-strip{ position: absolute; left: 0; right: 0; top: 74px; z-index: 9; height: 34px; pointer-events: none; } :where(page[w-p="standup"]) .praise{ position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; align-items: baseline; gap: 6px; animation: st-cheer calc(1050ms * var(--m-slow, 1)) var(--m-out) forwards; } :where(page[w-p="standup"]) .praise-t{ font-family: var(--en); font-weight: 700; line-height: 1; color: var(--amber); } :where(page[w-p="standup"]) .praise-zh{ font-size: 12px; font-weight: 700; color: var(--ink-n2); } @keyframes st-cheer { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 20% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } } :where(page[w-p="standup"]) .sk-pixel .praise{ animation-timing-function: steps(4); } :where(page[w-p="standup"]) .subs{ position: relative; flex: 1; min-height: 0; padding: 12px 22px 8px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(var(--night), var(--panel)); } :where(page[w-p="standup"]) .prev{ font-family: var(--en-text); font-size: 14.5px; line-height: 1.45; color: #7c748a; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :where(page[w-p="standup"]) .cur{ position: relative; } :where(page[w-p="standup"]) .en{ font-family: var(--en-text); font-size: 22px; line-height: 1.36; font-weight: 600; color: #958da6; } :where(page[w-p="standup"]) .w{ transition: color .12s; } :where(page[w-p="standup"]) .w.lit{ color: var(--ink-n); } :where(page[w-p="standup"]) .zh{ display: block; margin-top: 9px; font-size: 15px; line-height: 1.5; color: var(--ink-n2); } :where(page[w-p="standup"]) .nozh .zh{ display: none; } :where(page[w-p="standup"]) .punch .en{ font-size: 29px; line-height: 1.25; font-weight: 800; color: rgba(255, 201, 74, .5); } :where(page[w-p="standup"]) .short .en{ font-size: 40px; line-height: 1.15; } :where(page[w-p="standup"]) .punch .w.lit{ color: var(--amber); text-shadow: 0 0 18px rgba(255, 201, 74, .35); } :where(page[w-p="standup"]) .cur.slam{ animation: slam calc(500ms * var(--m-slow, 1)) cubic-bezier(.2, 1.6, .4, 1) both; } @keyframes slam { 0% { transform: translateY(-34px) scale(1.5); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } } :where(page[w-p="standup"]) .pa{ position: absolute; right: -4px; top: -30px; font-size: 34px; font-weight: 900; color: var(--amber); opacity: 0; pointer-events: none; animation: pa calc(700ms * var(--m-slow, 1)) ease-out; } @keyframes pa { 0% { opacity: 0; transform: scale(2) rotate(-12deg); } 25% { opacity: 1; transform: scale(1) rotate(-8deg); } 100% { opacity: 0; transform: scale(1.1) rotate(-8deg) translateY(-8px); } } :where(page[w-p="standup"]) .sk-pixel .subs{ background: var(--night); border-top: 4px solid var(--edge); } :where(page[w-p="standup"]) .sk-pixel .en{ color: #8C80AE; } :where(page[w-p="standup"]) .sk-pixel .punch .en{ color: rgba(255, 216, 74, .45); } :where(page[w-p="standup"]) .sk-pixel .punch .w.lit{ color: var(--amber); text-shadow: 2px 2px 0 var(--edge); } :where(page[w-p="standup"]) .sk-pixel .cur.slam{ animation: px-slam calc(300ms * var(--m-slow, 1)) steps(3) both; } @keyframes px-slam { 0% { transform: translateY(-18px); opacity: 0; } 100% { transform: none; opacity: 1; } } :where(page[w-p="standup"]) .sk-pixel .pa{ animation-timing-function: steps(3); } :where(page[w-p="standup"]) .calm .cur{ animation: calm-in var(--dur-calm) ease-out !important; } :where(page[w-p="standup"]) .calm .pa{ display: none; } :where(page[w-p="standup"]) .dock{ position: relative; flex: none; height: calc(150px + env(safe-area-inset-bottom)); padding: 0 30px env(safe-area-inset-bottom); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; background: var(--panel); } :where(page[w-p="standup"]) .round{ width: 48px; height: 48px; border-radius: 50%; background: var(--panel2); border: 1px solid #3a3150; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--ink-n2); } :where(page[w-p="standup"]) .round.off{ opacity: .45; } :where(page[w-p="standup"]) .ico-pause{ width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; box-sizing: border-box; } :where(page[w-p="standup"]) .ico-play{ width: 0; height: 0; margin-left: 3px; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; } :where(page[w-p="standup"]) .ha-wrap{ display: flex; flex-direction: column; align-items: center; gap: 8px; } :where(page[w-p="standup"]) .ha{ width: 104px; height: 104px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 900; color: #5a2e05; background: radial-gradient(circle at 38% 30%, #ffe28f, var(--amber) 55%, #f2a82a); box-shadow: 0 8px 0 var(--amber-dd), 0 14px 28px rgba(255, 170, 40, .28), inset 0 -6px 10px rgba(180, 90, 0, .25); transition: transform .07s, box-shadow .07s; } :where(page[w-p="standup"]) .ha.go{ font-size: 24px; letter-spacing: 2px; } :where(page[w-p="standup"]) .ha.wait{ opacity: .55; } :where(page[w-p="standup"]) .ha-down{ transform: translateY(7px); box-shadow: 0 1px 0 var(--amber-dd), 0 4px 10px rgba(255, 170, 40, .2), inset 0 6px 12px rgba(150, 70, 0, .35); } :where(page[w-p="standup"]) .ha-label{ font-size: 13px; color: var(--ink-n2); letter-spacing: .08em; } :where(page[w-p="standup"]) .sk-pixel .dock{ border-top: 4px solid var(--edge); } :where(page[w-p="standup"]) .sk-pixel .round{ border-radius: 0; border: 0; background: var(--panel2); box-shadow: inset 0 0 0 2px var(--edge), 3px 3px 0 var(--edge); color: var(--ink-n); } :where(page[w-p="standup"]) .sk-pixel .ha{ border-radius: 0; color: var(--amber-ink); background: var(--amber); box-shadow: inset 0 0 0 4px var(--edge), inset -8px -8px 0 #E0A92A, 6px 6px 0 var(--edge); } :where(page[w-p="standup"]) .sk-pixel .ha-down{ transform: translate(5px, 5px); box-shadow: inset 0 0 0 4px var(--edge), inset 8px 8px 0 #E0A92A, 1px 1px 0 var(--edge); } :where(page[w-p="standup"]) .calm .ha-down{ transform: none; } :where(page[w-p="standup"]) .sheet{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 20px 18px calc(30px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: linear-gradient(#1d1728, #141019); border-top: 1px solid #4a3e60; box-shadow: 0 -20px 50px rgba(0, 0, 0, .6); transform: translateY(105%); transition: transform calc(450ms * var(--m-slow, 1)) cubic-bezier(.2, .9, .2, 1); } :where(page[w-p="standup"]) .sheet.on{ transform: none; } :where(page[w-p="standup"]) .sh-t{ display: block; font-size: 21px; font-weight: 800; } :where(page[w-p="standup"]) .sh-q{ display: block; margin: 6px 0 14px; font-family: Georgia, 'Songti SC', serif; font-style: italic; font-size: 16px; line-height: 1.4; color: #e9dcc2; } :where(page[w-p="standup"]) .opt{ margin: 0 0 10px; padding: 12px 14px; border-radius: 16px; background: #251e33; border: 1.5px solid #3c3252; display: flex; flex-direction: column; gap: 3px; } :where(page[w-p="standup"]) .opt.pick{ border-color: var(--amber); background: #2f2636; } :where(page[w-p="standup"]) .opt-en{ font-family: var(--en-text); font-size: 16.5px; line-height: 1.35; font-weight: 700; color: var(--ink-n); } :where(page[w-p="standup"]) .opt-zh{ font-size: 13px; color: var(--ink-n2); } :where(page[w-p="standup"]) .skip{ margin: 6px auto 0; width: 160px; height: var(--hit); display: flex; align-items: center; justify-content: center; font-size: 13.5px; color: var(--ink-n3); border-radius: var(--r-s); } :where(page[w-p="standup"]) .sk-pixel .sheet{ border-radius: 0; background: var(--panel); border-top: 4px solid var(--edge); box-shadow: 0 -4px 0 var(--amber); transition-timing-function: steps(5); } :where(page[w-p="standup"]) .sk-pixel .sh-q{ font-family: var(--en-text); font-style: normal; color: var(--amber); } :where(page[w-p="standup"]) .sk-pixel .opt{ border-radius: 0; border: 0; background: var(--panel2); box-shadow: inset 0 0 0 2px var(--edge), 3px 3px 0 var(--edge); } :where(page[w-p="standup"]) .sk-pixel .opt.pick{ box-shadow: inset 0 0 0 3px var(--amber), 3px 3px 0 var(--edge); } :where(page[w-p="standup"]) .calm .sheet{ transform: none !important; opacity: 0; pointer-events: none; } :where(page[w-p="standup"]) .calm .sheet.on{ opacity: 1; pointer-events: auto; animation: calm-in var(--dur-calm) ease-out !important; } :where(page[w-p="standup"]) .review{ flex: 1; min-height: 0; display: flex; flex-direction: column; } :where(page[w-p="standup"]) .rv-scroll{ flex: 1; min-height: 0; padding: 4px 16px 0; box-sizing: border-box; } :where(page[w-p="standup"]) .rv-hero{ display: flex; gap: 14px; align-items: center; padding: 16px; margin-bottom: 12px; border-radius: var(--r-card); border: 1px solid #3a3150; background: radial-gradient(240px 140px at 15% 0, rgba(255, 201, 74, .18), transparent), #1c1626; } :where(page[w-p="standup"]) .rv-pet{ flex: none; width: 62px; } :where(page[w-p="standup"]) .rv-h{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } :where(page[w-p="standup"]) .rv-b{ font-size: 19px; font-weight: 800; line-height: 1.35; } :where(page[w-p="standup"]) .rv-s{ font-size: 13px; color: var(--ink-n2); } :where(page[w-p="standup"]) .rv-bar{ display: flex; align-items: center; gap: var(--s-2); margin: 0 2px 10px; } :where(page[w-p="standup"]) .rv-tip{ flex: 1; font-size: 12.5px; line-height: 1.5; color: var(--ink-n3); } :where(page[w-p="standup"]) .row{ margin-bottom: 6px; border-radius: 14px; background: var(--panel); overflow: hidden; } :where(page[w-p="standup"]) .row-main{ position: relative; min-height: var(--hit); padding: 11px 12px 11px 44px; } :where(page[w-p="standup"]) .row.playing{ box-shadow: inset 0 0 0 1.5px rgba(255, 201, 74, .5); } :where(page[w-p="standup"]) .pl{ position: absolute; left: 10px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: #2a2337; display: flex; align-items: center; justify-content: center; } :where(page[w-p="standup"]) .ico-tri{ width: 0; height: 0; margin-left: 2px; border-left: 8px solid var(--amber); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } :where(page[w-p="standup"]) .e{ display: block; font-family: var(--en-text); font-size: 15.5px; line-height: 1.42; color: var(--ink-n); } :where(page[w-p="standup"]) .z{ margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 1.45; color: var(--ink-n2); } :where(page[w-p="standup"]) .row.punch{ background: linear-gradient(135deg, #2a2131, #1d1724); border: 1px solid #4b3d33; } :where(page[w-p="standup"]) .row.punch .e{ color: var(--amber); font-weight: 700; font-size: 16.5px; } :where(page[w-p="standup"]) .tag{ display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 8px; font-size: 11px; font-weight: 600; background: rgba(255, 201, 74, .16); color: var(--amber); } :where(page[w-p="standup"]) .tag.g{ margin-right: 0; background: #2c2439; color: var(--ink-n2); } :where(page[w-p="standup"]) .tools,:where(page[w-p="standup"]) .vocab,:where(page[w-p="standup"]) .explain,:where(page[w-p="standup"]) .note{ margin: 0 12px 0 44px; } :where(page[w-p="standup"]) .tools{ display: flex; gap: 6px; } :where(page[w-p="standup"]) .btn-s{ flex: none; height: 32px; padding: 0 12px; border-radius: 16px; background: #2c2439; border: 1px solid #42375a; box-sizing: border-box; display: flex; align-items: center; font-size: 13px; color: var(--ink-n); } :where(page[w-p="standup"]) .btn-s.amber{ background: rgba(255, 201, 74, .14); border-color: rgba(255, 201, 74, .45); color: var(--amber); } :where(page[w-p="standup"]) .explain{ margin-top: 9px; padding: 10px 12px; border-radius: 12px; background: #120f18; display: flex; flex-direction: column; gap: 6px; animation: calm-in calc(250ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="standup"]) .ex-t{ font-size: 13.5px; line-height: 1.6; color: #e7e0ef; } :where(page[w-p="standup"]) .ex-src{ font-size: 11.5px; line-height: 1.5; color: var(--ink-n3); } :where(page[w-p="standup"]) .vocab{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; margin-bottom: 12px; } :where(page[w-p="standup"]) .vw{ padding: 6px 10px; border-radius: 12px; background: var(--panel2); border: 1px solid #3a3150; display: flex; flex-direction: column; } :where(page[w-p="standup"]) .vw.playing{ border-color: var(--amber); } :where(page[w-p="standup"]) .vw-b{ font-family: var(--en-text); font-size: 14.5px; font-weight: 600; } :where(page[w-p="standup"]) .vw-s{ font-size: 11.5px; color: var(--ink-n2); } :where(page[w-p="standup"]) .note{ display: block; padding: 0 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink-n3); } :where(page[w-p="standup"]) .src-link{ margin: 14px auto 18px; height: var(--hit); display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-n2); text-decoration: underline; text-underline-offset: 3px; border-radius: var(--r-s); } :where(page[w-p="standup"]) .rv-cta{ flex: none; display: flex; gap: 10px; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--night); } :where(page[w-p="standup"]) .cta{ flex: 1; height: 52px; border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: var(--ink-n); } :where(page[w-p="standup"]) button.cta{ margin: 0; padding: 0; line-height: 52px; border: 0; } :where(page[w-p="standup"]) .cta.p{ background: var(--amber); color: var(--amber-ink); box-shadow: 0 5px 0 var(--amber-d); } :where(page[w-p="standup"]) .cta.s{ background: var(--panel2); border: 1px solid #42375a; box-sizing: border-box; } :where(page[w-p="standup"]) .sk-pixel .rv-hero,:where(page[w-p="standup"]) .sk-pixel .row,:where(page[w-p="standup"]) .sk-pixel .row.punch,:where(page[w-p="standup"]) .sk-pixel .explain{ border-radius: 0; border: 0; box-shadow: inset 0 0 0 2px var(--edge); } :where(page[w-p="standup"]) .sk-pixel .rv-hero{ background: var(--panel); box-shadow: inset 0 0 0 2px var(--edge), 4px 4px 0 var(--edge); } :where(page[w-p="standup"]) .sk-pixel .row.punch{ background: #3A2E4E; box-shadow: inset 0 0 0 2px var(--amber); } :where(page[w-p="standup"]) .sk-pixel .pl,:where(page[w-p="standup"]) .sk-pixel .tag,:where(page[w-p="standup"]) .sk-pixel .vw,:where(page[w-p="standup"]) .sk-pixel .btn-s{ border-radius: 0; } :where(page[w-p="standup"]) .sk-pixel .vw,:where(page[w-p="standup"]) .sk-pixel .btn-s{ border: 0; box-shadow: inset 0 0 0 2px var(--edge), 2px 2px 0 var(--edge); } :where(page[w-p="standup"]) .sk-pixel .cta.p{ box-shadow: inset 0 0 0 3px var(--edge), 4px 4px 0 var(--edge); } :where(page[w-p="standup"]) .sk-pixel .cta.s{ border: 0; box-shadow: inset 0 0 0 3px var(--edge), 4px 4px 0 var(--edge); } :where(page[w-p="standup"]) .sk-pixel .rv-pet{ image-rendering: pixelated; } :where(page[w-p="standup"]) .mask{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 30; background: rgba(6, 4, 10, .72); } :where(page[w-p="standup"]) .bill{ position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 31; max-height: calc(82 * var(--wx-vh)); padding: 16px; box-sizing: border-box; border-radius: 24px; background: #120e1a; border: 1px solid #3b3150; display: flex; flex-direction: column; gap: 12px; animation: m-rise calc(320ms * var(--m-slow, 1)) var(--m-out) backwards; } :where(page[w-p="standup"]) .marquee{ padding: 16px; border-radius: 18px; text-align: center; background: linear-gradient(#2a1830, #1a1022); border: 2px solid #5b3a2a; display: flex; flex-direction: column; gap: 4px; } :where(page[w-p="standup"]) .mq-s{ font-size: 12px; letter-spacing: .3em; color: var(--amber); font-weight: 700; } :where(page[w-p="standup"]) .mq-h{ font-family: Georgia, 'Songti SC', serif; font-size: 32px; font-weight: 800; letter-spacing: .06em; color: #fff4d8; text-shadow: 0 0 18px rgba(255, 201, 74, .55); } :where(page[w-p="standup"]) .mq-p{ font-size: 13px; line-height: 1.5; color: var(--ink-n2); } :where(page[w-p="standup"]) .how{ display: flex; gap: 8px; } :where(page[w-p="standup"]) .how-i{ flex: 1; padding: 10px; border-radius: 14px; background: #1a1522; border: 1px solid var(--line-n); display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; line-height: 1.45; color: var(--ink-n2); } :where(page[w-p="standup"]) .how-b{ font-size: 13.5px; font-weight: 700; color: var(--ink-n); } :where(page[w-p="standup"]) .bill-list{ flex: none; height: calc(40 * var(--wx-vh)); } :where(page[w-p="standup"]) .prog{ position: relative; display: flex; gap: 14px; margin-bottom: 10px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, #231b2f, #1a1523); border: 1px solid #3b3150; } :where(page[w-p="standup"]) .prog.cur{ border-color: var(--amber); } :where(page[w-p="standup"]) .pg-no{ font-family: Georgia, serif; font-size: 30px; font-weight: 800; color: var(--amber); line-height: 1; min-width: 40px; } :where(page[w-p="standup"]) .pg-b{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } :where(page[w-p="standup"]) .pg-t{ font-size: 18px; font-weight: 800; } :where(page[w-p="standup"]) .pg-en{ font-family: Georgia, serif; font-style: italic; font-size: 13.5px; color: #e9dcc2; } :where(page[w-p="standup"]) .chips{ margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; } :where(page[w-p="standup"]) .chip{ height: 24px; padding: 0 9px; border-radius: 12px; background: #2c2439; display: flex; align-items: center; font-size: 12px; color: var(--ink-n2); white-space: nowrap; } :where(page[w-p="standup"]) .chip.done{ background: rgba(255, 201, 74, .16); color: var(--amber); } :where(page[w-p="standup"]) .modal{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 40; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); box-sizing: border-box; background: rgba(6, 4, 10, .86); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: calm-in calc(300ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="standup"]) .m-act{ display: flex; gap: 10px; margin-top: 18px; width: 100%; max-width: 330px; } :where(page[w-p="standup"]) .src-box{ width: 100%; max-width: 350px; max-height: calc(66 * var(--wx-vh)); padding: 18px 16px; box-sizing: border-box; border-radius: 22px; background: var(--panel); border: 1px solid #3a3150; } :where(page[w-p="standup"]) .src-h{ display: block; font-size: 18px; font-weight: 800; margin-bottom: 8px; } :where(page[w-p="standup"]) .src-h2{ display: block; font-size: 15px; font-weight: 800; margin: 14px 0 4px; } :where(page[w-p="standup"]) .src-rights{ display: block; font-size: 12.5px; line-height: 1.6; color: var(--ink-n2); margin-bottom: 4px; } :where(page[w-p="standup"]) .src-item{ padding: 10px 0; border-top: 1px solid #2c2439; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.55; color: var(--ink-n2); } :where(page[w-p="standup"]) .src-a{ font-family: var(--en-text); font-weight: 700; color: var(--ink-n); } :where(page[w-p="standup"]) .src-pd{ color: #e7e0ef; } :where(page[w-p="standup"]) .src-ck{ font-size: 12px; color: var(--ink-n3); } :where(page[w-p="standup"]) .src-url{ font-size: 12px; color: var(--amber); word-break: break-all; text-decoration: underline; } :where(page[w-p="standup"]) .sc{ position: relative; width: 318px; max-width: 100%; padding: 24px 22px 18px; box-sizing: border-box; border-radius: 26px; overflow: hidden; text-align: center; display: flex; flex-direction: column; align-items: center; background: radial-gradient(240px 190px at 50% 0, rgba(255, 226, 150, .42), transparent 75%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 2px, transparent 2px 20px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .25) 0 2px, transparent 2px 42px), linear-gradient(#57291f, #2a1311 70%, #170a09); box-shadow: 0 30px 60px rgba(0, 0, 0, .6); animation: m-rise calc(420ms * var(--m-slow, 1)) var(--m-out) backwards; } :where(page[w-p="standup"]) .sc-night{ font-size: 11.5px; letter-spacing: .28em; color: #ffe2a6; font-weight: 700; } :where(page[w-p="standup"]) .sc-bot{ width: 96px; margin: 12px 0 4px; } :where(page[w-p="standup"]) .sc-l1,:where(page[w-p="standup"]) .sc-l2{ display: block; font-size: 25px; line-height: 1.35; font-weight: 900; color: #fff6e2; } :where(page[w-p="standup"]) .sc-n{ margin: 0 4px; font-size: 34px; color: var(--amber); } :where(page[w-p="standup"]) .sc-q{ margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 6px; } :where(page[w-p="standup"]) .sc-qe{ font-family: Georgia, serif; font-style: italic; font-size: 15.5px; line-height: 1.45; color: #f3e6cc; } :where(page[w-p="standup"]) .sc-qz{ font-size: 11.5px; color: #cdb98f; } :where(page[w-p="standup"]) .sc-brand{ width: 100%; margin-top: 14px; display: flex; justify-content: space-between; font-size: 11.5px; color: #d9c39a; } :where(page[w-p="standup"]) .sk-pixel .bill,:where(page[w-p="standup"]) .sk-pixel .marquee,:where(page[w-p="standup"]) .sk-pixel .how-i,:where(page[w-p="standup"]) .sk-pixel .prog,:where(page[w-p="standup"]) .sk-pixel .chip,:where(page[w-p="standup"]) .sk-pixel .src-box,:where(page[w-p="standup"]) .sk-pixel .sc,:where(page[w-p="standup"]) .sk-pixel .sc-q{ border-radius: 0; } :where(page[w-p="standup"]) .sk-pixel .bill{ background: var(--night); border: 0; box-shadow: inset 0 0 0 3px var(--edge), 0 0 0 3px var(--amber); animation: m-px-drop calc(300ms * var(--m-slow, 1)) steps(3) backwards; } :where(page[w-p="standup"]) .sk-pixel .marquee{ border: 0; background: #3A1E3A; box-shadow: inset 0 0 0 3px var(--amber); } :where(page[w-p="standup"]) .sk-pixel .mq-h{ font-family: -apple-system, 'PingFang SC', sans-serif; text-shadow: 3px 3px 0 #8E1C2C; color: var(--amber); } :where(page[w-p="standup"]) .sk-pixel .how-i,:where(page[w-p="standup"]) .sk-pixel .prog,:where(page[w-p="standup"]) .sk-pixel .src-box{ border: 0; background: var(--panel); box-shadow: inset 0 0 0 2px var(--edge), 3px 3px 0 var(--edge); } :where(page[w-p="standup"]) .sk-pixel .prog.cur{ box-shadow: inset 0 0 0 3px var(--amber), 3px 3px 0 var(--edge); } :where(page[w-p="standup"]) .sk-pixel .pg-no,:where(page[w-p="standup"]) .sk-pixel .pg-en{ font-family: 'Courier New', monospace; } :where(page[w-p="standup"]) .sk-pixel .sc{ box-shadow: inset 0 0 0 4px var(--edge), 6px 6px 0 var(--edge); background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 4px, transparent 4px 24px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .25) 0 4px, transparent 4px 48px), #5A2E2A; animation: m-px-drop calc(300ms * var(--m-slow, 1)) steps(3) backwards; } :where(page[w-p="standup"]) .sk-pixel .sc-bot{ image-rendering: pixelated; } :where(page[w-p="standup"]) .sk-pixel .sc-qe{ font-family: var(--en-text); font-style: normal; } :where(page[w-p="standup"]) .calm .bill,:where(page[w-p="standup"]) .calm .sc,:where(page[w-p="standup"]) .calm .modal,:where(page[w-p="standup"]) .calm .explain{ animation: calm-in var(--dur-calm) ease-out !important; } :where(page[w-p="standup"]) .btn-s{ position: relative; } :where(page[w-p="standup"]) .btn-s::after{ content: ''; position: absolute; top: -5px; bottom: -5px; left: -2px; right: -2px; } @media (max-height: 700px) { :where(page[w-p="standup"]) .stage{ height: 236px; } :where(page[w-p="standup"]) .prev{ display: none; } :where(page[w-p="standup"]) .subs{ padding: 6px 22px 4px; } :where(page[w-p="standup"]) .en{ font-size: 19px; line-height: 1.32; } :where(page[w-p="standup"]) .zh{ margin-top: 6px; font-size: 14px; line-height: 1.4; } :where(page[w-p="standup"]) .punch .en{ font-size: 21px; line-height: 1.25; } :where(page[w-p="standup"]) .short .en{ font-size: 34px; } :where(page[w-p="standup"]) .dock{ height: calc(112px + env(safe-area-inset-bottom)); } :where(page[w-p="standup"]) .ha{ width: 84px; height: 84px; font-size: 32px; } :where(page[w-p="standup"]) .ha-label{ display: none; } } @media (max-height: 600px) { :where(page[w-p="standup"]) .stage{ height: 176px; } } /* pages/me/me.wxss */ :where(page[w-p="me"]) .wrap{ padding: var(--s-1) var(--gutter) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="me"]) .who{ display: flex; align-items: center; gap: var(--s-3); } :where(page[w-p="me"]) .avatar{ flex: none; width: 52px; height: 52px; border-radius: var(--r-full); background: var(--honey); display: flex; align-items: center; justify-content: center; overflow: hidden; } :where(page[w-p="me"]) .avatar-pet{ width: 40px; height: 40px; image-rendering: var(--art-rendering); } :where(page[w-p="me"]) .av-btn{ position: relative; margin: 0; padding: 0; line-height: 1; overflow: visible; } :where(page[w-p="me"]) .av-btn::after{ border: none; } :where(page[w-p="me"]) .avatar.has{ align-items: center; } :where(page[w-p="me"]) .avatar-img{ width: 100%; height: 100%; border-radius: var(--r-full); } :where(page[w-p="me"]) .av-edit{ position: absolute; right: -4px; bottom: -4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: var(--r-full); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 11px; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: center; } :where(page[w-p="me"]) .sk-pixel .av-edit{ border-radius: 0; } :where(page[w-p="me"]) .who-t{ min-width: 0; display: flex; flex-direction: column; gap: 2px; } :where(page[w-p="me"]) .name{ font-size: var(--t-section); font-weight: 700; } :where(page[w-p="me"]) .learning{ font-size: var(--t-read-s); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(page[w-p="me"]) .stats{ padding: var(--s-4) var(--s-2) var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="me"]) .cols{ display: flex; } :where(page[w-p="me"]) .col{ flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); } :where(page[w-p="me"]) .col.mid{ border-left: 1px solid var(--line); border-right: 1px solid var(--line); } :where(page[w-p="me"]) .num{ font-family: var(--en); font-size: var(--t-display); line-height: var(--lh-tight); font-weight: 700; font-variant-numeric: tabular-nums; } :where(page[w-p="me"]) .lab{ font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; } :where(page[w-p="me"]) .rest{ text-align: center; font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="me"]) .first{ padding: var(--s-4); gap: var(--s-3); } :where(page[w-p="me"]) .first-h{ display: flex; align-items: center; gap: var(--s-3); } :where(page[w-p="me"]) .first-t{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); } :where(page[w-p="me"]) .first-title{ font-size: var(--t-section); font-weight: 700; } :where(page[w-p="me"]) .first-hint{ font-size: var(--t-read-s); line-height: var(--lh-body); color: var(--ink-2); } :where(page[w-p="me"]) .first-art{ flex: none; width: 88px; height: 76px; } :where(page[w-p="me"]) .first-cols{ padding-top: var(--s-3); border-top: 1px dashed var(--line); } :where(page[w-p="me"]) .num.dash{ color: var(--line); } :where(page[w-p="me"]) .first-go{ height: var(--hit); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="me"]) .glabel{ margin: var(--s-2) 0 calc(var(--s-2) * -1) var(--s-4); font-size: var(--t-caption); font-weight: 700; color: var(--ink-2); } :where(page[w-p="me"]) .group{ position: relative; padding: var(--s-3) calc(var(--s-4) + 26px) var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="me"]) .g-h{ display: flex; justify-content: space-between; align-items: center; } :where(page[w-p="me"]) .g-h .chev{ position: absolute; right: var(--s-4); top: 50%; margin-top: -9px; } :where(page[w-p="me"]) .g-name{ font-size: var(--t-body); font-weight: 700; } :where(page[w-p="me"]) .g-row{ display: flex; align-items: center; gap: var(--s-3); } :where(page[w-p="me"]) .avs{ display: flex; padding-left: var(--s-1); } :where(page[w-p="me"]) .av{ width: 30px; height: 30px; margin-left: calc(var(--s-1) * -1); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-caption); font-weight: 700; color: var(--ink); box-shadow: 0 0 0 2px var(--cream); } :where(page[w-p="me"]) .av0{ background: var(--mint); } :where(page[w-p="me"]) .av1{ background: var(--honey); } :where(page[w-p="me"]) .av2{ background: var(--pink); } :where(page[w-p="me"]) .av3{ background: var(--lilac); } :where(page[w-p="me"]) .av4{ background: var(--orange); color: var(--on-signal); } :where(page[w-p="me"]) .av.dim{ background: var(--line); color: var(--ink-2); } :where(page[w-p="me"]) .g-today{ font-size: var(--t-body); } :where(page[w-p="me"]) .g-week{ font-size: var(--t-read-s); color: var(--ink-2); } :where(page[w-p="me"]) .list{ padding: var(--s-1) 0; overflow: hidden; } :where(page[w-p="me"]) .row{ position: relative; display: flex; align-items: center; gap: var(--s-2); min-height: var(--btn-m); padding: 0 var(--s-4); } :where(page[w-p="me"]) .row::after{ content: ''; position: absolute; left: var(--s-4); right: var(--s-4); bottom: 0; height: 1px; background: var(--line); } :where(page[w-p="me"]) .row.last::after{ display: none; } :where(page[w-p="me"]) .rt{ flex: none; font-size: var(--t-body); } :where(page[w-p="me"]) .v{ flex: 1; min-width: 0; text-align: right; font-size: var(--t-caption); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :where(page[w-p="me"]) .row switch{ margin-left: auto; } :where(page[w-p="me"]) .chev{ flex: none; width: 18px; height: 18px; } :where(page[w-p="me"]) .num{ display: flex; height: calc(1em * var(--lh-tight)); overflow: hidden; } :where(page[w-p="me"]) .odo{ height: calc(1em * var(--lh-tight)); overflow: hidden; } :where(page[w-p="me"]) .odo-strip{ display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -10%)); animation: odo-roll calc(600ms * var(--m-slow, 1)) var(--m-out) calc(150ms * var(--m-slow, 1)) backwards; } :where(page[w-p="me"]) .odo-strip text{ display: block; height: calc(1em * var(--lh-tight)); line-height: var(--lh-tight); text-align: center; } :where(page[w-p="me"]) .sk-pixel .odo-strip{ animation-timing-function: steps(6); } @keyframes odo-roll { from { transform: translateY(0); } } :where(page[w-p="me"]) .sk-doodle .avatar{ width: 60px; height: 60px; box-shadow: inset 0 0 0 2px var(--ink); align-items: flex-end; } :where(page[w-p="me"]) .sk-doodle .avatar-pet{ width: 64px; height: 56px; } :where(page[w-p="me"]) .sk-doodle.wrap .group{ position: relative; padding-right: 130px; min-height: 64px; } :where(page[w-p="me"]) .g-art{ position: absolute; right: 44px; bottom: 6px; width: 64px; height: 58px; pointer-events: none; } :where(page[w-p="me"]) .sk-doodle .col.mid{ border-color: #D9D3C6; } :where(page[w-p="me"]) .sk-crayon .avatar{ width: 60px; height: 60px; box-shadow: none; background: var(--cr-ring), var(--honey); align-items: center; } :where(page[w-p="me"]) .sk-crayon .avatar-pet{ width: 46px; height: 46px; } :where(page[w-p="me"]) .sk-crayon.wrap .group{ position: relative; padding-right: 130px; min-height: 64px; } :where(page[w-p="me"]) .sk-crayon .col.mid{ border-color: #D9D1C0; } :where(page[w-p="me"]) .sk-crayon .col .num{ padding: 0 6px; } :where(page[w-p="me"]) .sk-crayon .col:nth-child(1) .num{ background: var(--cr-scribble-sky); } :where(page[w-p="me"]) .sk-crayon .col:nth-child(2) .num{ background: var(--cr-scribble); } :where(page[w-p="me"]) .sk-crayon .col:nth-child(3) .num{ background: var(--cr-scribble-pink); } :where(page[w-p="me"]) .sk-crayon.wrap .group{ min-height: 76px; } :where(page[w-p="me"]) .sk-crayon .g-art{ right: 40px; bottom: 8px; width: 112px; height: 68px; } /* pages/group/group.wxss */ :where(page[w-p="group"]) .wrap{ padding: 0 var(--gutter) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="group"]) .join{ align-self: center; min-height: var(--hit); padding: 0 var(--s-4); border-radius: var(--r-m); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; color: var(--ink-2); } :where(page[w-p="group"]) .tabs{ white-space: nowrap; } :where(page[w-p="group"]) .tabs-in{ display: flex; gap: var(--s-2); padding: var(--s-1) 0; } :where(page[w-p="group"]) .tab{ flex: none; min-height: var(--hit); padding: 0 var(--s-4); border-radius: var(--r-m); box-sizing: border-box; display: flex; align-items: center; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="group"]) .box{ padding: var(--s-4); border-radius: var(--r-l); display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="group"]) .lab{ font-size: var(--t-caption); font-weight: 700; color: var(--ink-2); } :where(page[w-p="group"]) .avs{ display: flex; flex-wrap: wrap; gap: var(--s-4); } :where(page[w-p="group"]) .m{ width: 56px; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); } :where(page[w-p="group"]) .av{ position: relative; width: 44px; height: 44px; border-radius: var(--r-full); } :where(page[w-p="group"]) .av-img{ width: 100%; height: 100%; border-radius: var(--r-full); display: block; } :where(page[w-p="group"]) .av.dim{ opacity: .35; } :where(page[w-p="group"]) .av0{ background: var(--honey); } :where(page[w-p="group"]) .av1{ background: var(--mint); } :where(page[w-p="group"]) .av2{ background: var(--pink); } :where(page[w-p="group"]) .av3{ background: var(--lilac); } :where(page[w-p="group"]) .av4{ background: var(--orange); } :where(page[w-p="group"]) .mark{ position: absolute; right: calc(var(--s-1) * -1); bottom: calc(var(--s-1) * -1); width: 20px; height: 20px; border-radius: var(--r-full); font-size: var(--t-caption); font-weight: 700; text-align: center; line-height: 20px; } :where(page[w-p="group"]) .mn{ font-size: var(--t-caption); font-weight: 700; max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(page[w-p="group"]) .mn.off{ color: var(--ink-2); } :where(page[w-p="group"]) .groove{ height: var(--s-3); border-radius: var(--r-xs); background: var(--line); box-shadow: var(--groove); overflow: hidden; } :where(page[w-p="group"]) .fill{ height: 100%; border-radius: var(--r-xs); background: var(--mint); } :where(page[w-p="group"]) .mrow{ display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: var(--hit); border-top: 1px solid var(--line); } :where(page[w-p="group"]) .mr-name{ flex: 1; min-width: 0; font-size: var(--t-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(page[w-p="group"]) .mr-name.bold{ font-weight: 700; } :where(page[w-p="group"]) .mr-s{ flex: none; font-size: var(--t-caption); color: var(--ink-2); font-variant-numeric: tabular-nums; } :where(page[w-p="group"]) .mr-s.on{ color: var(--ok-ink); font-weight: 700; } :where(page[w-p="group"]) .code{ padding: var(--s-4); border-radius: var(--r-l); display: flex; flex-direction: column; gap: var(--s-1); } :where(page[w-p="group"]) .cd{ display: block; font-family: var(--en); font-size: var(--t-title); font-weight: 700; } :where(page[w-p="group"]) .invite{ width: 100%; height: var(--btn-l); line-height: var(--btn-l); border-radius: var(--r-full); font-size: var(--t-body); font-weight: 700; color: var(--ok-ink); } :where(page[w-p="group"]) .leave{ min-height: var(--hit); padding: 0 var(--s-4); border-radius: var(--r-m); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; color: var(--no-ink); } :where(page[w-p="group"]) .gt{ flex: 1; min-width: 0; display: flex; align-items: baseline; } :where(page[w-p="group"]) .gt-name{ flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(page[w-p="group"]) .gt-n{ flex: none; padding-left: var(--s-1); white-space: nowrap; } /* pages/settings/settings.wxss */ :where(page[w-p="settings"]) .wrap{ padding: 0 var(--gutter) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="settings"]) .lab{ margin-top: var(--s-2); font-size: var(--t-caption); font-weight: 700; color: var(--ink-2); } :where(page[w-p="settings"]) .list{ overflow: hidden; } :where(page[w-p="settings"]) .row{ position: relative; min-height: var(--hit); box-sizing: border-box; padding: var(--s-3) var(--s-4); display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } :where(page[w-p="settings"]) .row::after{ content: ''; position: absolute; left: var(--s-4); right: var(--s-4); bottom: 0; height: 1px; background: var(--line); } :where(page[w-p="settings"]) .row.last::after{ display: none; } :where(page[w-p="settings"]) .txt{ flex: 1; min-width: 0; } :where(page[w-p="settings"]) .rt{ display: block; font-size: var(--t-body); font-weight: 700; line-height: var(--lh-tight); } :where(page[w-p="settings"]) .rs{ display: block; font-size: var(--t-caption); line-height: var(--lh-body); color: var(--ink-2); } :where(page[w-p="settings"]) .val{ font-size: var(--t-body); font-weight: 700; color: var(--ink-2); } :where(page[w-p="settings"]) .nick{ flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(page[w-p="settings"]) .nick.dim{ font-weight: 400; } :where(page[w-p="settings"]) .chev{ flex: none; width: 18px; height: 18px; } :where(page[w-p="settings"]) .box{ padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="settings"]) .chips{ display: flex; gap: var(--s-2); } :where(page[w-p="settings"]) .chip{ flex: 1; min-width: 0; min-height: var(--hit); padding: 0 var(--s-1); border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="settings"]) .mask{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; box-sizing: border-box; display: flex; align-items: flex-end; background: var(--scrim); transition: padding-bottom var(--dur) var(--ease); } :where(page[w-p="settings"]) .sheet{ position: relative; width: 100%; max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: var(--s-2) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom)); border-radius: var(--r-l) var(--r-l) 0 0; background: var(--card); display: flex; flex-direction: column; gap: var(--s-2); animation: up var(--dur) var(--ease); } :where(page[w-p="settings"]) .sheet.kb{ padding-bottom: var(--s-4); } :where(page[w-p="settings"]) .sheet.compact{ padding-top: var(--s-1); padding-bottom: var(--s-3); gap: var(--s-1); } :where(page[w-p="settings"]) .sh-head{ flex: none; display: flex; align-items: center; justify-content: space-between; } :where(page[w-p="settings"]) .sh-cancel{ min-width: var(--hit); min-height: var(--hit); padding: 0 var(--s-3); margin-right: calc(var(--s-3) * -1); border-radius: var(--r-m); box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; color: var(--ink-2); } :where(page[w-p="settings"]) .field{ flex: none; height: var(--btn-m); box-sizing: border-box; padding: 0 var(--s-4); border: 2px solid var(--line); border-radius: var(--r-m); background: var(--cream); font-size: var(--t-body); color: var(--ink); } :where(page[w-p="settings"]) .field.bad{ border-color: var(--err); } :where(page[w-p="settings"]) .status{ display: block; font-size: var(--t-caption); line-height: var(--lh-body); color: var(--ink); } :where(page[w-p="settings"]) .status.bad{ color: var(--err); font-weight: 700; } :where(page[w-p="settings"]) .rule{ display: block; font-size: var(--t-caption); line-height: var(--lh-body); color: var(--ink-2); } :where(page[w-p="settings"]) .nick-form{ display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="settings"]) .sheet.compact .nick-form{ gap: var(--s-1); } :where(page[w-p="settings"]) .save{ flex: none; margin: var(--s-2) 0 0; padding: 0; width: 100%; line-height: 1; height: var(--btn-m); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="settings"]) .sheet.compact .save{ margin-top: var(--s-1); } :where(page[w-p="settings"]) .save.busy{ opacity: .6; } :where(page[w-p="settings"]) .skin-picker{ display: flex; gap: var(--s-1); padding: var(--s-2); } :where(page[w-p="settings"]) .skin-choice{ flex: 1; min-width: var(--hit); min-height: var(--hit); padding: var(--s-2) 0; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); border-radius: var(--r-s); font-size: var(--t-caption); color: var(--ink); } :where(page[w-p="settings"]) .skin-selected{ background: var(--honey); box-shadow: var(--jelly-honey-shadow); } :where(page[w-p="settings"]) .skin-swatch{ width: 52px; height: 44px; display: flex; align-items: center; justify-content: center; } :where(page[w-p="settings"]) .skin-swatch image{ width: 40px; height: 40px; } :where(page[w-p="settings"]) .skin-check{ color: var(--ink-2); } :where(page[w-p="settings"]) .legacy-confirm{ padding: var(--s-3) var(--s-4) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="settings"]) .lc-t{ display: block; font-size: var(--t-body); font-weight: 700; line-height: var(--lh-tight); } :where(page[w-p="settings"]) .lc-btns{ display: flex; gap: var(--s-2); margin-top: var(--s-1); } :where(page[w-p="settings"]) .lc-no,:where(page[w-p="settings"]) .lc-yes{ flex: 1; min-width: 0; min-height: var(--hit); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="settings"]) .lc-yes.busy{ opacity: .6; } :where(page[w-p="settings"]) .legacy-msg{ display: block; padding: 0 var(--s-1); font-size: var(--t-caption); line-height: var(--lh-body); color: var(--ink); } :where(page[w-p="settings"]) .legacy-msg.bad{ color: var(--err); font-weight: 700; } :where(page[w-p="settings"]) .sk-doodle .skin-picker{ gap: var(--s-2); } :where(page[w-p="settings"]) .sk-doodle .skin-choice{ box-shadow: inset 0 0 0 2px #D9D3C6; border-radius: 12px; } :where(page[w-p="settings"]) .sk-doodle .skin-choice.skin-selected{ box-shadow: var(--jelly-honey-shadow); } :where(page[w-p="settings"]) .sk-doodle .skin-check{ color: var(--ink-2); } :where(page[w-p="settings"]) .sk-doodle .skin-selected .skin-check{ color: var(--ink); font-weight: 700; } :where(page[w-p="settings"]) .settings-art{ align-self: center; width: 130px; height: 100px; margin-top: var(--s-3); } :where(page[w-p="settings"]) .sk-crayon .skin-picker{ gap: var(--s-2); } :where(page[w-p="settings"]) .sk-crayon .skin-choice{ box-shadow: none; border-image: var(--cr-frame-soft); } :where(page[w-p="settings"]) .sk-crayon .skin-choice.skin-selected{ border-image: var(--cr-frame-s); background: var(--cream-2); } :where(page[w-p="settings"]) .sk-crayon .skin-check{ color: var(--ink-2); } :where(page[w-p="settings"]) .sk-crayon .skin-selected .skin-check{ color: var(--ink); font-weight: 700; } :where(page[w-p="settings"]) .av-row{ padding: 0; gap: 0; } :where(page[w-p="settings"]) .av-pick{ flex: 1; min-width: 0; margin: 0; padding: 0 var(--s-4); min-height: var(--hit); display: flex; align-items: center; gap: var(--s-3); background: transparent; border-radius: 0; line-height: normal; text-align: left; font-size: inherit; color: inherit; } :where(page[w-p="settings"]) .av-pick::after{ border: none; } :where(page[w-p="settings"]) .av-pick .rt{ flex: 1; } :where(page[w-p="settings"]) .av-mini{ flex: none; width: 36px; height: 36px; border-radius: var(--r-full); background: var(--honey); overflow: hidden; display: flex; align-items: center; justify-content: center; } :where(page[w-p="settings"]) .av-mini-img{ width: 100%; height: 100%; } :where(page[w-p="settings"]) .av-mini-pet{ width: 28px; height: 28px; } :where(page[w-p="settings"]) .av-reset{ flex: none; padding: 0 var(--s-4); min-height: var(--hit); display: flex; align-items: center; font-size: var(--t-caption); color: var(--ink-2); text-decoration: underline; } :where(page[w-p="settings"]) .tick{ flex: none; width: 24px; height: 24px; border-radius: var(--r-s); box-shadow: inset 0 0 0 2px var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--ink); } :where(page[w-p="settings"]) .tick.on{ background: var(--honey); box-shadow: inset 0 0 0 2px var(--ink); } :where(page[w-p="settings"]) .sk-pixel .tick{ border-radius: 0; } :where(page[w-p="settings"]) .del-t{ color: var(--err); font-weight: 700; } /* pages/onboard/onboard.wxss */ :where(page[w-p="onboard"]) .wrap{ min-height: calc(calc(100 * var(--wx-vh)) - 100px); box-sizing: border-box; padding: 0 var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s-4); } :where(page[w-p="onboard"]) .step-n{ font-size: var(--t-body); font-weight: 700; color: var(--ink-2); } :where(page[w-p="onboard"]) .back-hit{ width: var(--hit); height: var(--hit); border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; margin-left: calc(var(--s-2) * -1); } :where(page[w-p="onboard"]) .back{ width: 24px; height: 24px; } :where(page[w-p="onboard"]) .intro{ display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-2); } :where(page[w-p="onboard"]) .pet{ flex: none; width: 76px; height: 82px; image-rendering: var(--art-rendering); } :where(page[w-p="onboard"]) .intro-t{ display: flex; flex-direction: column; gap: var(--s-1); } :where(page[w-p="onboard"]) .title{ font-size: var(--t-display); font-weight: 700; line-height: var(--lh-tight); } :where(page[w-p="onboard"]) .sub{ font-size: var(--t-body); color: var(--ink-2); } :where(page[w-p="onboard"]) .langs{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); } :where(page[w-p="onboard"]) .lang{ min-height: 72px; padding: var(--s-3) var(--s-4); box-sizing: border-box; border: 2px solid transparent; display: flex; flex-direction: column; justify-content: center; gap: 2px; } :where(page[w-p="onboard"]) .lang.on,:where(page[w-p="onboard"]) .goal.on{ background: var(--honey); border-color: var(--signal); } :where(page[w-p="onboard"]) .native{ font-family: var(--en-text); font-size: var(--t-title); font-weight: 700; line-height: var(--lh-tight); } :where(page[w-p="onboard"]) .lang-zh{ font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="onboard"]) .note{ font-size: var(--t-read-s); line-height: var(--lh-body); color: var(--ink-2); padding: 0 var(--s-1); } :where(page[w-p="onboard"]) .goals{ flex: 1; min-height: 240px; max-height: calc(52 * var(--wx-vh)); } :where(page[w-p="onboard"]) .goal{ min-height: 64px; margin-bottom: var(--s-2); padding: var(--s-3) var(--s-4); box-sizing: border-box; border: 2px solid transparent; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } :where(page[w-p="onboard"]) .goal-l{ display: flex; flex-direction: column; gap: 2px; min-width: 0; } :where(page[w-p="onboard"]) .goal-t{ font-size: var(--t-body); font-weight: 700; } :where(page[w-p="onboard"]) .goal-s{ font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="onboard"]) .tick{ flex: none; width: 22px; height: 22px; } :where(page[w-p="onboard"]) .acts{ margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); } :where(page[w-p="onboard"]) .quiet{ text-align: center; font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="onboard"]) .go{ height: var(--btn-l); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-section); font-weight: 700; } :where(page[w-p="onboard"]) .go-row{ display: flex; gap: var(--s-3); } :where(page[w-p="onboard"]) .go-row .go{ flex: 1; min-width: 0; padding: 0 var(--s-3); text-align: center; } :where(page[w-p="onboard"]) .go-2{ flex-direction: column; gap: 2px; font-size: var(--t-body); line-height: var(--lh-tight); color: var(--ink); } :where(page[w-p="onboard"]) .go-s{ font-size: var(--t-caption); font-weight: 400; color: var(--ink-2); } :where(page[w-p="onboard"]) .sk-doodle .intro{ flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; } :where(page[w-p="onboard"]) .sk-doodle .intro-t{ flex: 1; min-width: 0; } :where(page[w-p="onboard"]) .sk-doodle .pet{ width: 140px; height: 132px; } :where(page[w-p="onboard"]) .sk-doodle .lang.on,:where(page[w-p="onboard"]) .sk-doodle .goal.on{ border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); } :where(page[w-p="onboard"]) .sk-doodle .go{ border-radius: var(--r-m); } :where(page[w-p="onboard"]) .wrap.sk-doodle{ position: relative; } :where(page[w-p="onboard"]) .goal-art{ position: absolute; right: var(--gutter); top: 0; width: 120px; height: 100px; } :where(page[w-p="onboard"]) .intro-t.with-art{ padding-right: 116px; } :where(page[w-p="onboard"]) .sk-crayon .intro{ flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; } :where(page[w-p="onboard"]) .sk-crayon .intro-t{ flex: 1; min-width: 0; } :where(page[w-p="onboard"]) .sk-crayon .pet{ width: 140px; height: 132px; } :where(page[w-p="onboard"]) .sk-crayon .lang.on,:where(page[w-p="onboard"]) .sk-crayon .goal.on{ border-color: transparent; box-shadow: none; border-image: var(--cr-frame-s); background: var(--honey); } :where(page[w-p="onboard"]) .sk-crayon .go{ border-radius: var(--r-m); } :where(page[w-p="onboard"]) .wrap.sk-crayon{ position: relative; } /* pages/sift/sift.wxss */ :where(page[w-p="sift"]) .page{ min-height: calc(100 * var(--wx-vh)); display: flex; flex-direction: column; } :where(page[w-p="sift"]) .fill{ flex: 1; display: flex; flex-direction: column; justify-content: center; } :where(page[w-p="sift"]) .head{ padding: 0 var(--gutter); display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="sift"]) .hint{ font-size: var(--t-caption); line-height: var(--lh-body); color: var(--ink-2); } :where(page[w-p="sift"]) .bar{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); } :where(page[w-p="sift"]) .pg{ font-size: var(--t-body); font-weight: 700; font-variant-numeric: tabular-nums; } :where(page[w-p="sift"]) .pg-n{ font-weight: 400; color: var(--ink-2); } :where(page[w-p="sift"]) .all{ min-height: var(--hit); padding: 0 var(--s-3); margin-right: calc(var(--s-3) * -1); border-radius: var(--r-m); display: flex; align-items: center; font-size: var(--t-body); font-weight: 700; color: var(--ink-2); } :where(page[w-p="sift"]) .grid{ margin: var(--s-2) var(--gutter) 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); } :where(page[w-p="sift"]) .bubble{ position: relative; height: var(--bubble-h); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; padding: 0 var(--s-2); box-sizing: border-box; transition: transform var(--dur-press) var(--ease), box-shadow var(--dur-press) var(--ease), background var(--dur-press) var(--ease); } :where(page[w-p="sift"]) .bubble.idle{ background: var(--pill); box-shadow: var(--jelly-pill-shadow); } :where(page[w-p="sift"]) .bubble.pressing{ background: var(--pill); box-shadow: var(--jelly-pill-pressed); transform: translateY(2px); } :where(page[w-p="sift"]) .bubble.popped{ background: var(--mint); box-shadow: none; } :where(page[w-p="sift"]) .bw{ font-family: var(--en-text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } :where(page[w-p="sift"]) .popped .bw{ color: var(--ok-ink); text-decoration: line-through; } :where(page[w-p="sift"]) .calm .bubble.pressing{ transform: none; } :where(page[w-p="sift"]) .sk-soft .bubble{ transition: transform calc(90ms * var(--m-slow, 1)) var(--m-out), box-shadow calc(90ms * var(--m-slow, 1)) var(--m-out), background calc(200ms * var(--m-slow, 1)); } :where(page[w-p="sift"]) .sk-soft .bubble.idle{ background: radial-gradient(circle at 34% 28%, #ffffff 0 10%, rgba(255, 255, 255, 0) 32%), radial-gradient(circle at 50% 60%, #fff7e8, #ffe3bf 70%, #f6cf9c); box-shadow: 0 5px 0 #e6bf92, 0 8px 14px rgba(217, 142, 92, .22), inset 0 -6px 10px rgba(214, 150, 90, .28); } :where(page[w-p="sift"]) .sk-soft .bubble.pressing{ background: radial-gradient(circle at 34% 28%, #ffffff 0 10%, rgba(255, 255, 255, 0) 32%), radial-gradient(circle at 50% 60%, #fff7e8, #ffe3bf 70%, #f6cf9c); transform: translateY(5px) scale(.9, .8); box-shadow: 0 0 0 #e6bf92, 0 2px 4px rgba(217, 142, 92, .2), inset 0 3px 8px rgba(214, 150, 90, .45); } :where(page[w-p="sift"]) .sk-soft .bubble.popped{ background: linear-gradient(180deg, #e3f8ee, #bdeed8); box-shadow: inset 0 3px 7px rgba(63, 174, 136, .32); transform: translateY(4px); animation: bub-pop calc(420ms * var(--m-slow, 1)) var(--m-out); } @keyframes bub-pop { 0% { transform: translateY(5px) scale(1.16, .7); } 30% { transform: translateY(4px) scale(.94, 1.06); } 60% { transform: translateY(4px) scale(1.02, .98); } 100% { transform: translateY(4px); } } :where(page[w-p="sift"]) .bubble.popped::before{ content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; border: 3px solid #6fd6b0; opacity: 0; pointer-events: none; animation: bub-ring calc(460ms * var(--m-slow, 1)) var(--m-out); } @keyframes bub-ring { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.32, 1.6); opacity: 0; } } :where(page[w-p="sift"]) .bubble.popped::after{ content: "✓"; position: absolute; top: 1px; right: 12px; font-size: 13px; font-weight: 800; color: #2e9c78; animation: m-fade calc(200ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="sift"]) .sk-pixel .bubble{ transition: none; } :where(page[w-p="sift"]) .sk-pixel .bubble.idle{ background: var(--cream); box-shadow: inset 0 0 0 2px #1E1426, inset -4px -4px 0 #D9B98A, inset 4px 4px 0 #ffffff, 3px 3px 0 #1E1426; } :where(page[w-p="sift"]) .sk-pixel .bubble.pressing{ background: var(--cream); transform: translate(3px, 3px); box-shadow: inset 0 0 0 2px #1E1426, inset 4px 4px 0 #D9B98A; } :where(page[w-p="sift"]) .sk-pixel .bubble.popped{ background: var(--mint); transform: translate(3px, 3px); box-shadow: inset 0 0 0 2px #1E1426, inset 3px 3px 0 #8FCF73; animation: px-pop calc(240ms * var(--m-slow, 1)) steps(3); } @keyframes px-pop { 0% { transform: translate(3px, 5px) scale(1.1, .72); } 50% { transform: translate(3px, 2px) scale(.96, 1.08); } 100% { transform: translate(3px, 3px); } } :where(page[w-p="sift"]) .sk-pixel .bubble.popped::before{ border-radius: 0; border: 3px solid #1E1426; animation: bub-ring calc(300ms * var(--m-slow, 1)) steps(3); } :where(page[w-p="sift"]) .sk-pixel .bubble.popped::after{ color: #1E3A10; right: 8px; } :where(page[w-p="sift"]) .calm .bubble.popped,:where(page[w-p="sift"]) .calm .bubble.pressing{ transform: none !important; } :where(page[w-p="sift"]) .calm .bubble.popped::before{ display: none; } :where(page[w-p="sift"]) .foot{ position: sticky; bottom: 0; z-index: 2; background: var(--page-color); margin-top: auto; padding: var(--s-3) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="sift"]) .pager{ display: flex; gap: var(--s-3); } :where(page[w-p="sift"]) .pk{ flex: 1; height: var(--hit); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); font-weight: 700; } :where(page[w-p="sift"]) .pk.off{ opacity: .5; } :where(page[w-p="sift"]) .done{ height: var(--btn-l); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-section); font-weight: 700; } :where(page[w-p="sift"]) .sk-doodle .bubble{ border-radius: 10px 12px 9px 11px; transition: transform calc(90ms * var(--m-slow, 1)) var(--m-out), background calc(160ms * var(--m-slow, 1)); } :where(page[w-p="sift"]) .sk-doodle .bubble.idle{ background: var(--card); box-shadow: inset 0 0 0 2px var(--ink); } :where(page[w-p="sift"]) .sk-doodle .bubble.pressing{ background: var(--cream-2); box-shadow: inset 0 0 0 2px var(--ink); transform: translate(2px, 2px); } :where(page[w-p="sift"]) .sk-doodle .bubble.popped{ background: #F2EEE4; box-shadow: inset 0 0 0 2px #C9C3B6; animation: m-fade calc(200ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="sift"]) .sk-doodle .popped .bw{ color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; } :where(page[w-p="sift"]) .sk-doodle .bubble.popped::before{ border-color: var(--honey); } :where(page[w-p="sift"]) .sk-doodle .bubble.popped::after{ content: ""; } :where(page[w-p="sift"]) .sk-crayon .bubble{ transition: transform calc(90ms * var(--m-slow, 1)) var(--m-out), background calc(160ms * var(--m-slow, 1)); } :where(page[w-p="sift"]) .sk-crayon .bubble.idle{ background: var(--card); box-shadow: none; border-image: var(--cr-frame-s); } :where(page[w-p="sift"]) .sk-crayon .bubble.pressing{ background: var(--cream-2); box-shadow: none; border-image: var(--cr-frame-s); transform: translate(1px, 2px); } :where(page[w-p="sift"]) .sk-crayon .bubble.popped{ background: #F3EDE0; box-shadow: none; border-image: var(--cr-frame-soft); animation: m-fade calc(200ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="sift"]) .sk-crayon .popped .bw{ color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; } :where(page[w-p="sift"]) .sk-crayon .bubble.popped::before{ border-color: #FFC93C; } :where(page[w-p="sift"]) .sk-crayon .bubble.popped::after{ content: ""; } /* pages/about/about.wxss */ :where(page[w-p="about"]) .wrap{ padding: 0 var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="about"]) .box{ padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); } :where(page[w-p="about"]) .li{ display: flex; align-items: flex-start; gap: var(--s-3); } :where(page[w-p="about"]) .dot{ flex: none; width: var(--s-2); height: var(--s-2); margin-top: var(--s-2); border-radius: var(--r-full); background: var(--signal); } :where(page[w-p="about"]) .tx{ flex: 1; min-width: 0; font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); } :where(page[w-p="about"]) .k{ font-weight: 700; } /* pages/imitation/imitation.wxss */ :where(page[w-p="imitation"]) .wrap{ padding: var(--s-3) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom)); } :where(page[w-p="imitation"]) .headline{ display: block; font-size: var(--t-title); font-weight: 700; margin: var(--s-3) 0; } :where(page[w-p="imitation"]) .muted{ color: var(--ink-2); font-size: var(--t-caption); line-height: var(--lh-body); } :where(page[w-p="imitation"]) .intro{ display: block; margin-bottom: var(--s-5); } :where(page[w-p="imitation"]) .clip,:where(page[w-p="imitation"]) .script,:where(page[w-p="imitation"]) .studio{ padding: var(--s-4); margin-bottom: var(--s-4); border-radius: var(--r-l); } :where(page[w-p="imitation"]) .source{ display: block; font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="imitation"]) .clip-title{ display: block; font-size: var(--t-section); font-weight: 700; margin: var(--s-2) 0; line-height: var(--lh-tight); } :where(page[w-p="imitation"]) .english{ display: block; font-family: var(--en); font-size: var(--t-body); line-height: var(--lh-body); margin-bottom: var(--s-3); } :where(page[w-p="imitation"]) .clip-foot{ display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); } :where(page[w-p="imitation"]) .clip-foot{ margin-top: var(--s-4); font-size: var(--t-caption); font-weight: 700; } :where(page[w-p="imitation"]) .action{ min-height: var(--hit); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); line-height: var(--lh-body); border-radius: var(--r-full); margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); color: var(--ink); } :where(page[w-p="imitation"]) .action::after{ border: 0; } :where(page[w-p="imitation"]) .action[disabled]{ opacity: .55; } :where(page[w-p="imitation"]) .small{ display: block; margin-top: var(--s-2); } :where(page[w-p="imitation"]) .clip-back{ min-height: var(--hit); min-width: var(--hit); display: flex; align-items: center; justify-content: center; padding: 0 var(--s-2); font-size: var(--t-caption); } :where(page[w-p="imitation"]) .clip-back{ justify-content: flex-start; } :where(page[w-p="imitation"]) .sorts{ display: flex; gap: var(--s-2); } :where(page[w-p="imitation"]) .sorts{ margin: var(--s-3) 0 var(--s-4); } :where(page[w-p="imitation"]) .sort{ flex: 1; min-height: var(--hit); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-body); } :where(page[w-p="imitation"]) .script,:where(page[w-p="imitation"]) .studio{ overflow-wrap: anywhere; } :where(page[w-p="imitation"]) .sort[disabled]{ color: var(--ink); opacity: .6; } /* rhythm/pages/rhythm/rhythm.wxss */ :where(page[w-p="rhythm"]) .page{ height: calc(100 * var(--wx-vh)); display: flex; flex-direction: column; overflow: hidden; } :where(page[w-p="rhythm"]) .top{ flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } :where(page[w-p="rhythm"]) .title{ font-size: var(--t-section); font-weight: 800; line-height: var(--lh-tight); white-space: nowrap; } :where(page[w-p="rhythm"]) .chips{ flex: none; display: flex; gap: 6px; } :where(page[w-p="rhythm"]) .chip{ min-height: 32px; padding: 0 14px; box-sizing: border-box; display: flex; align-items: center; border-radius: var(--r-full); font-size: var(--t-caption); font-weight: 700; background: var(--pill); box-shadow: var(--jelly-pill-shadow); color: var(--ink); } :where(page[w-p="rhythm"]) .chip.on{ background: var(--honey); box-shadow: var(--jelly-honey-shadow); } :where(page[w-p="rhythm"]) .stage{ position: relative; flex: 1; min-height: 0; margin: var(--s-2) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); border-radius: var(--r-l); background: var(--card); box-shadow: var(--card-shadow); overflow: hidden; } :where(page[w-p="rhythm"]) .cv{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; } :where(page[w-p="rhythm"]) .hits{ position: absolute; left: 12px; right: 12px; top: 0; bottom: 0; display: flex; } :where(page[w-p="rhythm"]) .hit{ flex: 1; height: 100%; } :where(page[w-p="rhythm"]) .cover{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 22px; box-sizing: border-box; text-align: center; background: var(--card); } :where(page[w-p="rhythm"]) .art{ width: 150px; height: 130px; } :where(page[w-p="rhythm"]) .art.small{ width: 110px; height: 96px; } :where(page[w-p="rhythm"]) .hop{ animation: hop .6s ease-in-out infinite alternate; } @keyframes hop { to { transform: translateY(-6px) rotate(-2deg); } } :where(page[w-p="rhythm"]) .h2{ font-size: var(--t-display); font-weight: 800; line-height: 1.25; } :where(page[w-p="rhythm"]) .hl{ background: linear-gradient(transparent 55%, var(--heat-2) 55%, var(--heat-2) 92%, transparent 92%); padding: 0 4px; } :where(page[w-p="rhythm"]) .p{ color: var(--ink-2); font-size: var(--t-read); line-height: 1.65; max-width: 30em; } :where(page[w-p="rhythm"]) .rules{ display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; text-align: left; font-size: var(--t-read); max-width: 300px; } :where(page[w-p="rhythm"]) .n{ width: 26px; height: 26px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; background: var(--honey); box-shadow: var(--jelly-honey-shadow); font-family: var(--en); font-weight: 700; font-size: 15px; } :where(page[w-p="rhythm"]) .r{ line-height: 1.4; } :where(page[w-p="rhythm"]) .btn{ width: 100%; max-width: 280px; height: var(--btn-l); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-section); font-weight: 800; color: var(--ink); } :where(page[w-p="rhythm"]) .btn.small{ width: auto; height: var(--btn-m); padding: 0 24px; font-size: var(--t-body); } :where(page[w-p="rhythm"]) .ghost{ height: var(--btn-m); padding: 0 20px; border-radius: var(--r-full); display: flex; align-items: center; font-size: var(--t-body); font-weight: 700; color: var(--ink); } :where(page[w-p="rhythm"]) .pair{ display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; width: 100%; } :where(page[w-p="rhythm"]) .note{ margin: 0; max-width: 34em; font-size: 12px; line-height: 1.55; color: var(--ink-3); } :where(page[w-p="rhythm"]) .tag{ font-size: var(--t-caption); font-weight: 700; color: var(--ink-3); } :where(page[w-p="rhythm"]) .word{ font-family: var(--en); font-weight: 700; font-size: 52px; line-height: 1.1; color: var(--word); word-break: break-word; } :where(page[w-p="rhythm"]) .word .hl{ padding: 0 8px; } :where(page[w-p="rhythm"]) .zh{ min-height: 1.4em; font-size: 22px; font-weight: 800; color: var(--ink); } :where(page[w-p="rhythm"]) .stats{ display: flex; gap: 10px; width: 100%; max-width: 330px; } :where(page[w-p="rhythm"]) .stat{ flex: 1; padding: 10px 4px 8px; border-radius: var(--r-m); background: var(--cream-2); display: flex; flex-direction: column; align-items: center; } :where(page[w-p="rhythm"]) .stat .b{ font-family: var(--en); font-weight: 700; font-size: 30px; line-height: 1.1; } :where(page[w-p="rhythm"]) .stat .s{ font-size: 12px; color: var(--ink-3); } :where(page[w-p="rhythm"]) .missed{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 320px; } :where(page[w-p="rhythm"]) .miss{ padding: 4px 10px; border-radius: var(--r-full); background: var(--pink); font-size: 13px; color: var(--ink); } :where(page[w-p="rhythm"]) .miss .em{ font-family: var(--en-text); font-weight: 600; margin-right: 4px; } :where(page[w-p="rhythm"]) .sk-doodle .stage,:where(page[w-p="rhythm"]) .sk-doodle .cover{ border-radius: 14px 16px 13px 15px; } :where(page[w-p="rhythm"]) .sk-doodle .stage{ box-shadow: inset 0 0 0 2px var(--ink); } :where(page[w-p="rhythm"]) .sk-doodle .cover{ box-shadow: inset 0 0 0 2px var(--ink); } :where(page[w-p="rhythm"]) .sk-doodle .hl{ background: linear-gradient(transparent 55%, var(--honey) 55%, var(--honey) 92%, transparent 92%); } :where(page[w-p="rhythm"]) .sk-doodle .ghost,:where(page[w-p="rhythm"]) .sk-doodle .chip{ border-radius: 14px 16px 13px 15px; } :where(page[w-p="rhythm"]) .btn.jelly-orange{ color: var(--on-signal); } :where(page[w-p="rhythm"]) .sk-doodle .chip{ border-radius: var(--r-full); } :where(page[w-p="rhythm"]) .sk-doodle .n{ box-shadow: inset 0 0 0 2px var(--ink); } :where(page[w-p="rhythm"]) .sk-doodle .stat{ background: var(--card); box-shadow: inset 0 0 0 2px var(--ink); border-radius: 12px 14px 11px 13px; } :where(page[w-p="rhythm"]) .sk-doodle .miss{ box-shadow: inset 0 0 0 2px var(--ink); } :where(page[w-p="rhythm"]) .sk-pixel .stage,:where(page[w-p="rhythm"]) .sk-pixel .cover,:where(page[w-p="rhythm"]) .sk-pixel .btn,:where(page[w-p="rhythm"]) .sk-pixel .ghost,:where(page[w-p="rhythm"]) .sk-pixel .chip,:where(page[w-p="rhythm"]) .sk-pixel .n,:where(page[w-p="rhythm"]) .sk-pixel .stat,:where(page[w-p="rhythm"]) .sk-pixel .miss{ border-radius: 0; } :where(page[w-p="rhythm"]) .sk-pixel .stat,:where(page[w-p="rhythm"]) .sk-pixel .miss{ box-shadow: var(--jelly-pill-shadow); } :where(page[w-p="rhythm"]) .sk-pixel .hop{ animation-timing-function: steps(2); } :where(page[w-p="rhythm"]) .calm .hop{ animation: none; } :where(page[w-p="rhythm"]) .sk-crayon .stage,:where(page[w-p="rhythm"]) .sk-crayon .cover{ box-shadow: none; border-image: var(--cr-frame-s); } :where(page[w-p="rhythm"]) .sk-crayon .hl{ background: var(--cr-scribble); } :where(page[w-p="rhythm"]) .sk-crayon .chip{ border-radius: var(--r-full); border-image: var(--cr-frame-s); } :where(page[w-p="rhythm"]) .sk-crayon .n{ box-shadow: none; border-image: var(--cr-frame-s); } :where(page[w-p="rhythm"]) .sk-crayon .stat{ background: var(--card); box-shadow: none; border-image: var(--cr-frame-s); } :where(page[w-p="rhythm"]) .sk-crayon .miss{ box-shadow: none; border-image: var(--cr-frame-s); } :where(page[w-p="rhythm"]) .chip{ position: relative; } :where(page[w-p="rhythm"]) .chip::after{ content: ''; position: absolute; top: -5px; bottom: -5px; left: -2px; right: -2px; } /* roots/pages/roots/roots.wxss */ :where(page[w-p="roots"]) .page{ height: calc(100 * var(--wx-vh)); display: flex; flex-direction: column; overflow: hidden; } :where(page[w-p="roots"]) .fill{ flex: 1; display: flex; flex-direction: column; justify-content: center; } :where(page[w-p="roots"]) .top{ flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-1); } :where(page[w-p="roots"]) .exit{ flex: none; width: var(--hit); height: var(--hit); display: flex; align-items: center; justify-content: center; border-radius: var(--r-m); margin-left: calc(var(--s-2) * -1); } :where(page[w-p="roots"]) .exit image{ width: 22px; height: 22px; } :where(page[w-p="roots"]) .head{ flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } :where(page[w-p="roots"]) .h-t{ font-size: var(--t-section); font-weight: 700; } :where(page[w-p="roots"]) .steps{ display: flex; gap: 5px; padding-right: var(--s-2); } :where(page[w-p="roots"]) .sdot{ width: 10px; height: 5px; border-radius: var(--r-full); background: var(--line); } :where(page[w-p="roots"]) .sdot.past{ background: var(--ink); } :where(page[w-p="roots"]) .sdot.now{ width: 22px; background: var(--honey); } :where(page[w-p="roots"]) .sk-pixel .sdot{ border-radius: 0; } :where(page[w-p="roots"]) .wrap{ flex: 1; min-height: 0; padding: var(--s-4) var(--gutter) var(--s-4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); } :where(page[w-p="roots"]) .grow{ flex: 1; } :where(page[w-p="roots"]) .kicker{ font-size: var(--t-caption); font-weight: 700; color: var(--ink-3); } :where(page[w-p="roots"]) .primary{ align-self: stretch; flex: none; height: var(--btn-l); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-section); font-weight: 700; color: var(--ink); } :where(page[w-p="roots"]) .primary.jelly-orange{ color: var(--on-signal); } :where(page[w-p="roots"]) .back-link{ align-self: center; min-height: var(--hit); box-sizing: border-box; display: flex; align-items: center; padding: var(--s-2) var(--s-4); font-size: var(--t-read-s); color: var(--ink-2); text-decoration: underline; } :where(page[w-p="roots"]) .p-prefix{ background: var(--pink); } :where(page[w-p="roots"]) .p-root{ background: var(--heat-2); } :where(page[w-p="roots"]) .p-suffix{ background: var(--lilac); } :where(page[w-p="roots"]) .part{ margin-top: var(--s-4); padding: var(--s-1) var(--s-5) var(--s-2); font-family: var(--en); font-size: 72px; line-height: 1.1; font-weight: 700; color: var(--ink); border-radius: var(--r-l); box-shadow: var(--card-shadow); } :where(page[w-p="roots"]) .sk-doodle .part{ border-radius: 16px 18px 15px 17px; box-shadow: inset 0 0 0 3px var(--ink), 5px 5px 0 var(--ink); } :where(page[w-p="roots"]) .mean{ margin-top: var(--s-3); font-size: var(--t-title, 26px); font-weight: 700; } :where(page[w-p="roots"]) .usage{ font-size: var(--t-read); color: var(--ink-2); } :where(page[w-p="roots"]) .pet{ width: 150px; height: 150px; } :where(page[w-p="roots"]) .word{ margin-top: var(--s-5); display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; font-family: var(--en); font-weight: 700; font-size: 40px; line-height: 1.15; color: var(--ink); } :where(page[w-p="roots"]) .pc{ display: flex; flex-direction: column; align-items: center; border-radius: var(--r-s); transition: margin calc(450ms * var(--m-slow, 1)) var(--m-out), padding calc(450ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="roots"]) .split .pc{ margin: 0 4px var(--s-1); padding: 4px 8px 6px; box-shadow: inset 0 0 0 2px var(--ink); } :where(page[w-p="roots"]) .word:not(.split) .pc{ background: transparent; } :where(page[w-p="roots"]) .split .pc.p-prefix{ background: var(--pink); } :where(page[w-p="roots"]) .split .pc.p-root{ background: var(--heat-2); } :where(page[w-p="roots"]) .split .pc.p-suffix{ background: var(--lilac); } :where(page[w-p="roots"]) .sk-soft .split .pc{ box-shadow: var(--jelly-shadow); } :where(page[w-p="roots"]) .pg,:where(page[w-p="roots"]) .pb{ font-family: var(--zh, inherit); font-weight: 700; color: var(--ink-2); max-height: 0; opacity: 0; overflow: hidden; transition: opacity calc(300ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="roots"]) .pg{ font-size: var(--t-read-s); } :where(page[w-p="roots"]) .pb{ font-size: 11px; font-weight: 400; color: var(--ink-3); } :where(page[w-p="roots"]) .split .pg,:where(page[w-p="roots"]) .split .pb{ max-height: 40px; opacity: 1; } :where(page[w-p="roots"]) .zh{ margin-top: var(--s-2); font-size: var(--t-section); font-weight: 700; } :where(page[w-p="roots"]) .speak{ margin-top: var(--s-2); height: 40px; padding: 0 var(--s-4); border-radius: var(--r-full); display: flex; align-items: center; gap: 6px; font-size: var(--t-read-s); font-weight: 700; color: var(--ink); } :where(page[w-p="roots"]) .speak image{ width: 18px; height: 18px; } :where(page[w-p="roots"]) .opts{ align-self: stretch; display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-4); } :where(page[w-p="roots"]) .opt{ height: 56px; border-radius: var(--r-m); display: flex; align-items: center; justify-content: center; font-size: var(--t-read); font-weight: 700; background: var(--card); box-shadow: var(--card-shadow); color: var(--ink); } :where(page[w-p="roots"]) .opt.ok{ background: var(--honey); } :where(page[w-p="roots"]) .opt.no{ color: var(--ink-3); animation: rt-shake calc(350ms * var(--m-slow, 1)) ease-out; } :where(page[w-p="roots"]) .opt.dim{ opacity: .45; } :where(page[w-p="roots"]) .note{ min-height: 22px; font-size: var(--t-read-s); color: var(--ink-2); } @keyframes rt-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } } :where(page[w-p="roots"]) .chain{ align-self: stretch; flex: 1; height: 0; margin-top: var(--s-2); } :where(page[w-p="roots"]) .row{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-2); text-align: left; transition: transform calc(200ms * var(--m-slow, 1)) var(--m-out); } :where(page[w-p="roots"]) .row.on{ transform: translateX(3px); box-shadow: inset 0 0 0 3px var(--ink), 3px 3px 0 var(--heat-2); } :where(page[w-p="roots"]) .rw{ font-family: var(--en); font-size: 22px; font-weight: 600; color: var(--ink); } :where(page[w-p="roots"]) .rw .hl{ font-weight: 700; border-radius: 6px; padding: 0 2px; } :where(page[w-p="roots"]) .rm{ font-size: var(--t-read-s); color: var(--ink-2); } :where(page[w-p="roots"]) .sum{ padding: 0 var(--s-3); font-size: var(--t-section); font-weight: 700; line-height: 1.5; } :where(page[w-p="roots"]) .ety{ align-self: stretch; margin-top: var(--s-4); padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); text-align: left; } :where(page[w-p="roots"]) .sk-doodle .ety{ border-radius: 16px 18px 15px 17px; box-shadow: inset 0 0 0 2.5px var(--ink), 4px 4px 0 var(--ink); } :where(page[w-p="roots"]) .ety-k{ font-size: var(--t-caption); font-weight: 700; color: var(--ink-3); } :where(page[w-p="roots"]) .ety-say{ font-size: var(--t-read); line-height: 1.6; color: var(--ink-2); } :where(page[w-p="roots"]) .ety-foot{ font-size: 11px; color: var(--ink-3); } :where(page[w-p="roots"]) .lit{ margin-top: var(--s-3); display: flex; align-items: center; justify-content: center; gap: var(--s-2); font-size: var(--t-read); } :where(page[w-p="roots"]) .lit-l{ margin-top: 0; justify-content: flex-start; flex-wrap: wrap; row-gap: 4px; } :where(page[w-p="roots"]) .lit-from,:where(page[w-p="roots"]) .lit-to{ white-space: nowrap; } :where(page[w-p="roots"]) .lit-from{ padding: 3px 10px; border-radius: var(--r-full); background: var(--card); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; color: var(--ink); } :where(page[w-p="roots"]) .lit-to{ padding: 3px 10px; border-radius: var(--r-full); background: var(--heat-2); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 700; color: var(--ink); } :where(page[w-p="roots"]) .lit-arrow{ color: var(--ink-3); } :where(page[w-p="roots"]) .rl{ display: flex; flex-direction: column; min-width: 0; } :where(page[w-p="roots"]) .rlit{ font-size: var(--t-caption); color: var(--ink-3); } :where(page[w-p="roots"]) .sk-pixel .ety,:where(page[w-p="roots"]) .sk-pixel .lit-from,:where(page[w-p="roots"]) .sk-pixel .lit-to{ border-radius: 0; } :where(page[w-p="roots"]) .calm .pc,:where(page[w-p="roots"]) .calm .row{ transition: none; } :where(page[w-p="roots"]) .calm .opt.no{ animation: none; } :where(page[w-p="roots"]) .sk-pixel .pc,:where(page[w-p="roots"]) .sk-pixel .row{ transition: none; } :where(page[w-p="roots"]) .sk-pixel .split .pc,:where(page[w-p="roots"]) .sk-pixel .opt,:where(page[w-p="roots"]) .sk-pixel .part{ border-radius: 0; } /* roots/pages/story/story.wxss */ :where(page[w-p="story"]) .page{ height: calc(100 * var(--wx-vh)); display: flex; flex-direction: column; overflow: hidden; } :where(page[w-p="story"]) .fill{ flex: 1; display: flex; flex-direction: column; justify-content: center; } :where(page[w-p="story"]) .top{ flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-1); } :where(page[w-p="story"]) .exit{ flex: none; width: var(--hit); height: var(--hit); display: flex; align-items: center; justify-content: center; border-radius: var(--r-m); margin-left: calc(var(--s-2) * -1); } :where(page[w-p="story"]) .exit image{ width: 22px; height: 22px; } :where(page[w-p="story"]) .h-t{ font-size: var(--t-section); font-weight: 700; } :where(page[w-p="story"]) .wrap{ flex: 1; min-height: 0; padding: var(--s-3) var(--gutter) var(--s-4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); overflow-y: auto; } :where(page[w-p="story"]) .kicker{ font-size: var(--t-caption); font-weight: 700; color: var(--ink-3); } :where(page[w-p="story"]) .title{ font-size: var(--t-title, 26px); font-weight: 700; line-height: 1.3; color: var(--ink); } :where(page[w-p="story"]) .pic{ margin-top: var(--s-1); width: 200px; height: 84px; display: flex; align-items: center; justify-content: center; gap: var(--s-3); font-size: 42px; } :where(page[w-p="story"]) .sk-doodle .pic{ border-radius: 16px 18px 15px 17px; box-shadow: inset 0 0 0 2.5px var(--ink); } :where(page[w-p="story"]) .approx{ font-size: 28px; color: var(--ink-3); } :where(page[w-p="story"]) .pic.has-art{ padding: 0; overflow: hidden; background: #fff; } :where(page[w-p="story"]) .art{ width: 200px; height: 84px; } :where(page[w-p="story"]) .eq{ margin-top: var(--s-2); display: flex; align-items: baseline; gap: var(--s-2); } :where(page[w-p="story"]) .w{ font-family: var(--en); font-size: 32px; font-weight: 700; color: var(--ink); } :where(page[w-p="story"]) .zh{ font-size: var(--t-read); color: var(--ink-2); } :where(page[w-p="story"]) .lit{ font-size: var(--t-read); color: var(--ink-2); } :where(page[w-p="story"]) .lit-b{ font-weight: 700; color: var(--ink); } :where(page[w-p="story"]) .tale{ align-self: stretch; text-align: left; font-size: var(--t-read); line-height: 1.6; color: var(--ink-2); } :where(page[w-p="story"]) .also{ align-self: stretch; display: flex; flex-direction: column; gap: var(--s-2); } :where(page[w-p="story"]) .ar{ display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); text-align: right; } :where(page[w-p="story"]) .ae{ flex: none; font-family: var(--en); font-size: 18px; font-weight: 700; color: var(--ink); } :where(page[w-p="story"]) .ac{ min-width: 0; font-size: var(--t-caption); color: var(--ink-2); } :where(page[w-p="story"]) .grow{ flex: 1; min-height: var(--s-2); } :where(page[w-p="story"]) .foot{ font-size: 11px; color: var(--ink-3); } :where(page[w-p="story"]) .btns{ align-self: stretch; display: flex; gap: var(--s-3); } :where(page[w-p="story"]) .btn{ flex: 1; height: var(--btn-l); border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; font-size: var(--t-section); font-weight: 700; color: var(--ink); } :where(page[w-p="story"]) .btn.main.jelly-orange{ color: var(--on-signal); } :where(page[w-p="story"]) .sk-pixel .pic,:where(page[w-p="story"]) .sk-pixel .ar{ border-radius: 0; }