:root{--ink:#17183d;--muted:#696c87;--purple:#755fd2;--green:#20a970}*{box-sizing:border-box}body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink);background:linear-gradient(145deg,#f2efff,#fbfdff 48%,#edfff7);min-height:100vh}button,input,select{font:inherit}.app{max-width:1320px;margin:auto;padding:24px 18px 48px}header{display:flex;justify-content:space-between;gap:20px;align-items:end}.eyebrow{color:var(--purple);font-weight:900;letter-spacing:.11em;text-transform:uppercase;font-size:.76rem}h1{font-size:clamp(1.9rem,4vw,3.3rem);line-height:1;margin:.25rem 0}.sub{color:var(--muted);line-height:1.5;max-width:720px}.score{min-width:180px;background:#fff;border:1px solid #e4e1f0;border-radius:20px;padding:14px 17px;box-shadow:0 12px 35px #51458c17;font-weight:900}.progress{height:8px;background:#ececf4;border-radius:8px;margin-top:8px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#8065dc,#38c58a);transition:.3s}.levels{display:flex;gap:9px;overflow:auto;padding:17px 1px 14px}.level{white-space:nowrap;border:1px solid #ddd9eb;background:#fff;border-radius:999px;padding:10px 14px;font-weight:850;cursor:pointer}.level.active,.level:hover{background:var(--ink);color:#fff}.layout{display:grid;grid-template-columns:minmax(0,900px) minmax(300px,1fr);gap:20px}.board,.side{background:#ffffffeb;border:1px solid #e6e3f0;border-radius:25px;box-shadow:0 18px 50px #4c467218}.board{padding:11px}.scene-head{display:flex;justify-content:space-between;padding:4px 5px 11px;gap:12px}.scene-head h2{font-size:1.12rem;margin:0}.scene-head span{font-size:.85rem;color:var(--muted);font-weight:800}.poster{position:relative;overflow:hidden;border-radius:18px;background:#eee}.poster>img{display:block;width:100%;height:100%;object-fit:cover}.hot{position:absolute;transform:translate(-50%,-50%);min-width:56px;border:2px solid #fff;border-radius:11px;padding:5px 7px;background:var(--bg);box-shadow:0 3px 10px #20204055;text-align:center;cursor:pointer;line-height:1}.hot.image-label{min-width:0;padding:0;border:0;border-radius:10px;background:transparent;box-shadow:none;color:transparent}.hot.image-label:hover,.hot.image-label:focus-visible{background:#ffffff18;outline:3px solid #755fd299}.hot.image-label.done{outline:3px solid #26b57a99}.hot:hover,.hot:focus-visible{transform:translate(-50%,-50%) scale(1.08);outline:3px solid #755fd2;z-index:5}.hot.done{outline:3px solid #26b57a}.blank{display:block;font-size:.62rem;font-weight:900;color:#74768d;letter-spacing:-.08em}.zh{display:block;margin-top:3px;font-size:clamp(.66rem,1.1vw,.9rem);font-weight:950}.done .blank{color:#168158;letter-spacing:0}.side{padding:21px;align-self:start;position:sticky;top:14px}.side h2{margin:0 0 7px}.side p{color:var(--muted);line-height:1.45}.target{background:#f1eeff;border-radius:16px;padding:13px;margin:14px 0}.target strong{font-size:1.3rem}.answer{width:100%;border:2px solid #dcdeeb;border-radius:13px;padding:13px;outline:0}.answer:focus{border-color:var(--purple);box-shadow:0 0 0 4px #826ed21c}.actions{display:flex;gap:9px;margin-top:10px}.primary,.secondary{border:0;border-radius:12px;padding:11px 14px;font-weight:850;cursor:pointer}.primary{background:var(--ink);color:#fff;flex:1}.secondary{background:#eceaf6}.feedback{min-height:45px;margin-top:12px;font-weight:800}.good{color:#14855a}.bad{color:#bd3654}.hint{background:#fff8dc;border:1px solid #efd978;border-radius:14px;padding:12px;margin-top:9px}.hint small{display:block;color:#8c7420;font-weight:900;text-transform:uppercase;margin-bottom:4px}details{border-top:1px solid #e7e5ef;margin-top:17px;padding-top:14px}summary{font-weight:900;cursor:pointer}.settings{display:grid;gap:9px;margin-top:10px}.settings label{font-size:.8rem;font-weight:850;color:var(--muted)}.settings select,.settings input{width:100%;margin-top:4px;border:1px solid #dcdeeb;border-radius:10px;padding:9px}.celebrate{position:fixed;inset:0;display:none;place-items:center;background:#15132c99;z-index:20}.celebrate.show{display:grid}.bravo{background:#fff;border-radius:30px;padding:38px 54px;text-align:center;animation:pop .3s ease-out}.bravo h2{font-size:3rem;color:#198d61;margin:5px}@keyframes pop{from{transform:scale(.7);opacity:0}}@media(max-width:930px){.layout{grid-template-columns:1fr}.side{position:static}.app{padding:16px 9px}.hot{min-width:46px;padding:4px}.zh{font-size:.62rem}}@media(max-width:600px){header{display:block}.score{margin-top:12px}.blank{font-size:.5rem}.zh{font-size:.55rem}}

.discussion-dialog{width:min(860px,96vw);height:min(92dvh,950px);max-width:96vw;max-height:94dvh;border:1px solid #e4dcf5;border-radius:22px;padding:0;background:#faf8ff;color:var(--ink)}.discussion-dialog::backdrop{background:#17132f99}.discussion-shell{display:flex;flex-direction:column;height:100%}.discussion-head{display:flex;align-items:start;justify-content:space-between;gap:14px;padding:20px;background:white;border-bottom:1px solid #e8e2f4}.discussion-head h2{margin:0}.discussion-head p{font-size:.85rem;color:var(--muted);margin-bottom:0}.discussion-body{padding:20px;overflow:auto;min-height:0}.comment-form{padding:18px;background:#fff;border:1px solid #e3d9f4;border-radius:16px;display:grid;gap:12px}.comment-form h3{margin:0}.comment-form label{display:grid;gap:5px;font-size:.88rem;font-weight:700}.comment-form input,.comment-form select,.comment-form textarea,.discussion-filter select{font:inherit;padding:10px;border:1px solid #d9d0e9;border-radius:10px;max-width:100%;width:100%;color:var(--ink);background:#fff}.comment-form textarea{resize:vertical;line-height:1.6}.comment-form p{margin:0;font-size:.85rem}.comment-form .actions{margin:0}.discussion-filter{display:flex;align-items:end;gap:14px;justify-content:space-between;margin:22px 0 10px}.discussion-filter label{display:grid;gap:5px;font-size:.85rem}.comment-thread{margin-bottom:16px;background:#fff;border:1px solid #e5def0;border-radius:14px;overflow:hidden}.comment-card{padding:16px}.comment-reply{margin-left:24px;border-top:1px solid #ede6f4;background:#fcfaff}.comment-meta{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}.comment-meta time,.comment-card small{font-size:.75rem;color:var(--muted)}.comment-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}.comment-card button{font-size:.78rem;padding:7px 10px}.comment-card .actions:empty{display:none}#commentReplyTo{padding:9px;background:#f1eaff;border-radius:10px;font-size:.85rem}#commentReplyTo button{margin-left:9px;font-size:.75rem;padding:5px}#commentLoadStatus{font-size:.85rem;color:var(--muted)}button:disabled{opacity:.5;cursor:default}@media(max-width:600px){.discussion-body,.discussion-head{padding:12px}.comment-meta{display:block}.comment-meta time{display:block;margin-top:4px}.comment-reply{margin-left:12px}.discussion-filter{align-items:center}.comment-form{padding:12px}}

.offline-banner{background:#e4f7ed;padding:12px 15px;border-radius:12px;color:#165e42;line-height:1.7;font-size:.85rem}

.editbar{margin-top:16px;padding-top:14px;border-top:1px solid #e6e3ef}.editbar button{margin:3px}.editpanel{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.editpanel label{font-size:.75rem;font-weight:800}.editpanel input{width:100%;padding:7px;border:1px solid #d8d8e5;border-radius:8px}.editing .image-label{background:#ff4ca52e!important;outline:2px solid #ff2d8d!important;cursor:move!important}.editing .image-label.selected{background:#33d6ff42!important;outline:3px solid #087ea4!important}


[hidden]{display:none!important}.actions{flex-wrap:wrap}.scene-tools{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.study-open{font-size:.8rem;padding:8px 11px;background:#f0ebff;color:#5c45a4}.study-dialog{width:min(1200px,96vw);height:min(92dvh,1000px);max-width:96vw;max-height:94dvh;padding:0;border:1px solid #e4dcf5;border-radius:22px;color:var(--ink);background:#fbfaff;box-shadow:0 24px 90px #15132c55}.study-dialog::backdrop{background:#17132f99}.study-shell{display:flex;flex-direction:column;height:100%}.study-head{padding:18px 20px;background:#fff;border-bottom:1px solid #e8e3f1;display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.study-head h2{margin:0;font-size:1.25rem}.study-head p{margin:6px 0 0;color:var(--muted);font-size:.88rem}.study-close{white-space:nowrap}.study-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;gap:10px;flex-wrap:wrap}.study-tabs{display:flex;gap:7px}.study-tab{border:1px solid #dcd4ec;background:#fff;border-radius:10px;padding:10px 12px;color:var(--ink);font-weight:800;cursor:pointer}.study-tab[aria-selected="true"]{background:#755fd2;color:#fff;border-color:#755fd2}.study-zoom{display:flex;align-items:center;gap:6px}.study-zoom button{padding:8px 12px}.study-content{min-height:0;overflow:auto;flex:1;padding:0 18px 18px;overscroll-behavior:contain}.study-image-wrap{overflow:auto;border-radius:14px;background:#eee9f5;padding:8px;height:100%;min-height:200px}.study-image{display:block;width:100%;height:auto;max-width:none;margin:0 auto}.study-vocab{background:#fff;border:1px solid #e6dfef;border-radius:14px;padding:16px}.study-search{width:100%;padding:11px 13px;border:1px solid #dcd5e7;border-radius:10px;margin:0 0 14px;font:inherit}.study-vocab table{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.5}.study-vocab th,.study-vocab td{text-align:left;border-bottom:1px solid #eee8f5;padding:12px 10px;vertical-align:top}.study-vocab th{color:#6d549d;background:#f7f3ff}.study-vocab tr.focus-term{background:#fff7d9}.study-vocab td small{display:block;color:var(--muted);margin-top:4px}.study-note{font-size:.85rem;color:var(--muted);margin:0 0 12px}.study-return{padding:12px 18px;border-top:1px solid #e8e3f1;background:#fff;text-align:right}.study-selected{padding:9px 12px;margin:0 18px 10px;border-radius:10px;background:#fff5d4;font-size:.9rem}.study-empty{padding:12px;color:var(--muted)}@media(max-width:600px){.scene-head{align-items:flex-start}.scene-tools{gap:6px;max-width:58%}.study-dialog{width:98vw;max-width:98vw;height:94dvh;border-radius:15px}.study-head{padding:14px}.study-head h2{font-size:1.1rem}.study-toolbar{padding:10px}.study-tab{font-size:.8rem;padding:9px}.study-content{padding:0 8px 10px}.study-vocab{padding:9px}.study-vocab td,.study-vocab th{padding:9px 6px}.study-selected{margin:0 10px 9px}.study-zoom{font-size:.85rem}}


body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif}.hot.image-label{border:1.5px dashed #7760c5;border-radius:4px;background:#ffffff40;color:#5b4699;overflow:hidden;min-height:0;min-width:0;line-height:1;padding:0;box-shadow:none}.hot.image-label .spot-mark{display:block;font-size:clamp(8px,1.2vw,13px);font-weight:900;letter-spacing:2px;line-height:1}.hot.image-label:hover,.hot.image-label:focus-visible{transform:translate(-50%,-50%);background:#f2eaff88;outline:2px solid #755fd2;outline-offset:-2px}.hot.image-label.done{background:#bcebd155;border-color:#168158;color:#168158;outline:none}.hot.image-label.active-spot{border-style:solid;border-color:#6b40cf;background:#e9dcff77}.edit-guide{font-size:.85rem;color:#68617b;line-height:1.65}.board{overflow-x:auto}.practice-zoom{display:flex;gap:5px;align-items:center}.practice-zoom button{font-size:.78rem;padding:7px 9px}.scene-head{min-width:260px}.hint small{text-transform:none}.sub{line-height:1.8}.level{font-weight:700}

.sentence-practice{border-top:1px solid #e7e5ef;margin-top:18px;padding-top:16px}.sentence-practice h3{margin:0 0 8px}.sentence-guide{font-size:.82rem}.sentence-tabs{display:flex;gap:7px;flex-wrap:wrap}.sentence-tabs [aria-pressed="true"]{background:#755fd2;color:white}.sentence-text{padding:14px;background:#f3efff;border-radius:12px;line-height:1.7;overflow-wrap:anywhere;color:#242049!important}.sentence-chinese{font-size:.9rem}.sentence-practice label{display:block;font-size:.85rem;margin-bottom:7px}.sentence-practice .feedback{min-height:0}.sentence-practice .actions{flex-wrap:wrap}
@media(max-width:600px){.scene-head{flex-wrap:wrap}.scene-tools{display:flex;flex-wrap:wrap;gap:6px}}