.character-ribbon{display:flex;gap:14px;flex-wrap:wrap;padding:24px 0}.character-ribbon>div{min-width:90px;border:1px solid #c7d6c9;background:#fff;border-radius:12px;padding:18px;text-align:center}.character-ribbon small,.character-ribbon span{display:block;font-size:12px;color:#60786a}.character-ribbon strong{display:block;font-size:40px;margin:12px 0}.encoding-path{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;padding:24px 0}.encoding-path b{font:22px ui-monospace,monospace;background:white;border:1px solid #bfcfc2;border-radius:8px;padding:12px}.encoding-path span{font-size:13px;color:#56725e}.ascii-scroll{overflow:auto;max-height:430px;background:white;border:1px solid #d8e1d5;border-radius:10px}.ascii-table{border-collapse:collapse;width:100%;min-width:550px;text-align:center}.ascii-table caption{padding:12px;font-size:13px;text-align:left}.ascii-table td,.ascii-table th{padding:8px!important;border:1px solid #e0e5dc;font:14px ui-monospace,monospace;text-align:center!important}.ascii-table th{background:#eff3eb}.ascii-table .lookup-row{background:#f7ecda;animation:lookup-row .4s both}.ascii-table .lookup-col{background:#e0eee5;animation:lookup-row .4s .2s both}.ascii-table .lookup-hit{background:#244f3c;color:white;font-weight:700;outline:2px solid #b57e42;outline-offset:-2px;animation:lookup-hit .4s .5s both}.comparison-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:20px 0}.comparison-pair section{min-width:0;background:white;border:1px solid #d4dfcf;padding:22px;border-radius:12px}.comparison-pair small{display:block;font-size:14px;color:#526c5a}.comparison-pair strong{display:block;font:clamp(20px,3vw,31px) ui-monospace,monospace;margin-top:18px;overflow-wrap:anywhere}.hanzi-path{display:flex;align-items:center;gap:14px;padding:25px 0}.hanzi-path section{background:white;padding:22px;flex:1;text-align:center;border:1px solid #cbd9c7;border-radius:12px;min-width:0}.hanzi-path b{display:block;font-size:38px;margin:15px 0}.hanzi-path small,.hanzi-path p{font-size:13px}.hanzi-path .not-yet{background:transparent;border-style:dashed;color:#758679}.shift-bit{animation:shift-travel .85s ease-in-out both}.new-bit{animation:new-bit .3s .55s both}.discarded-bit{animation:discard-bit .8s ease-in both}.extension-source{text-align:center;margin:25px}.extension-source small{display:block;color:#5c7463}.extension-source strong{font:30px ui-monospace,monospace}.extension-grid{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:5px}.extension-grid>div{padding:12px 2px;border:1px solid #b8ccb8;border-radius:7px;text-align:center;min-width:0}.extension-grid small{font-size:10px;display:block}.extension-grid b{font:24px ui-monospace,monospace;display:block;margin-top:12px}.kept-cell{background:#e0ecdc}.added-cell{background:#f6e5ca;animation:fill-slot .5s both;animation-delay:var(--delay)}.removed-cell{background:#eed6cf;animation:remove-cell .8s both}.extension-grid.is-compression{grid-template-columns:repeat(8,minmax(0,1fr))}.result-capsule{margin:25px auto 0;background:white;border:1px solid #bacfb9;border-radius:10px;padding:16px;width:fit-content;max-width:100%;overflow-wrap:anywhere}.result-capsule b{font:22px ui-monospace,monospace;margin-left:16px}.round-partition{display:flex;align-items:center;justify-content:center;gap:22px;margin:26px 0}.round-partition section{padding:20px;background:#deead8;border-radius:12px;border:1px solid #b8cfac}.round-partition .discard-part{background:#f4e1d5;border-color:#d5b5a3}.round-partition small{display:block;font-size:14px}.round-partition strong{display:block;font:32px ui-monospace,monospace;margin-top:14px}.round-partition mark{background:#bd7044;color:white;border-radius:4px;padding:0 2px}.cut-marker{font-size:26px;color:#ae714a}.round-action{text-align:center;font-size:17px;padding:12px}.carry-bits{display:flex;justify-content:center;gap:12px;padding:24px 0}.carry-bits>div{position:relative;border:1px solid #b7cbb0;background:white;min-width:70px;height:115px;border-radius:9px;text-align:center}.carry-bits small{display:block;font-size:11px;padding:10px}.carry-bits span{position:absolute;top:44px;left:0;width:100%;font:32px ui-monospace,monospace}.calc-before{animation:old-out .01s steps(1,end) both;animation-delay:var(--delay)}.calc-after{animation:result-in .01s steps(1,end) both;animation-delay:var(--delay);color:#285b3c}.carry-signal{position:absolute;bottom:-23px;left:0;width:100%;font-size:12px;font-style:normal;color:#b05c37;animation:result-in .01s steps(1,end) both;animation-delay:var(--delay)}
@keyframes lookup-row{from{background:#fff}to{}}@keyframes lookup-hit{from{background:#fff;color:#26463e}to{background:#244f3c;color:#fff}}@keyframes shift-travel{from{transform:translate(var(--dx),var(--dy))}to{transform:translate(0,0)}}@keyframes new-bit{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}@keyframes discard-bit{to{transform:translateX(var(--exit));opacity:0}}@keyframes remove-cell{to{opacity:.3;transform:translateY(-10px)}}@keyframes old-out{from{opacity:1}to{opacity:0}}@keyframes result-in{from{opacity:0}to{opacity:1}}
@media(max-width:650px){.comparison-pair{grid-template-columns:1fr}.hanzi-path{gap:6px}.hanzi-path section{padding:12px 6px}.hanzi-path b{font-size:28px}.extension-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.round-partition{gap:8px}.round-partition section{padding:12px}.round-partition strong{font-size:26px}.carry-bits{gap:6px}.carry-bits>div{min-width:0;flex:1}.carry-bits small{padding:10px 0}}
@media(prefers-reduced-motion:reduce){.motion-scene .calc-before{opacity:0}.motion-scene .calc-after{opacity:1}.motion-scene .discarded-bit{opacity:0}.motion-scene .removed-cell{opacity:.3}}