#demolition-animation-widget{
    --ink:#222;            
    --sub:#777;            
    --paper:#fff;          
    --hi:#3aad47;          
    --hi-deep:#2e9139;     
    --greenl:#edfbf0;      
    --hi2:#FF6B35;         
    --bg:#f7f8f7;          
    --sheet:#3aad47;       
    --line:#e8e8e8;        
  }
#demolition-animation-widget *{box-sizing:border-box;margin:0;padding:0}
#demolition-animation-widget{
    background:var(--paper);
    color:var(--ink);
    font-family:"Noto Sans JP",system-ui,sans-serif;
    padding:24px;
  }
#demolition-animation-widget .frame{width:min(960px,100%)}
#demolition-animation-widget .titlebar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:12px}
#demolition-animation-widget .titlebar h1{font-family:"Oswald",sans-serif;font-weight:600;letter-spacing:.04em;font-size:clamp(20px,3.4vw,30px);line-height:1;text-transform:uppercase;color:var(--ink)}
#demolition-animation-widget .titlebar h1 .jp{display:block;font-family:"Noto Sans JP";font-weight:700;font-size:clamp(12px,1.8vw,15px);letter-spacing:.16em;color:var(--hi);margin-bottom:6px;text-transform:none}
#demolition-animation-widget .meta{font-family:"Oswald",sans-serif;font-size:12px;letter-spacing:.14em;color:var(--sub);text-align:right;text-transform:uppercase;white-space:nowrap}
#demolition-animation-widget .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
#demolition-animation-widget .tab{font-family:"Noto Sans JP";font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--sub);border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:8px 14px;cursor:pointer;transition:all .18s;line-height:1.2}
#demolition-animation-widget .tab small{display:block;font-family:"Oswald",sans-serif;font-weight:500;font-size:9.5px;letter-spacing:.12em;opacity:.6;margin-top:2px}
#demolition-animation-widget .tab:hover{color:var(--ink);border-color:#cfd4d2;background:var(--bg)}
#demolition-animation-widget .tab.active{background:var(--hi);color:#fff;border-color:var(--hi);box-shadow:0 4px 14px rgba(58,173,71,.25)}
#demolition-animation-widget .tab.active small{opacity:.85}
#demolition-animation-widget .stage-wrap{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 10px 34px -16px rgba(0,0,0,.18);background:#fff}
#demolition-animation-widget #sceneHost{display:block}
#demolition-animation-widget svg{display:block;width:100%;height:auto}
#demolition-animation-widget .hud{position:absolute;inset:0;pointer-events:none}
#demolition-animation-widget .stamp{position:absolute;top:16px;left:18px;font-family:"Oswald",sans-serif;font-weight:600;letter-spacing:.14em;font-size:12px;color:#fff;background:var(--hi2);padding:5px 11px;border-radius:20px;box-shadow:0 2px 10px rgba(255,107,53,.3)}
#demolition-animation-widget .stamp b{color:#fff;animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}
#demolition-animation-widget .caption{margin-top:14px;padding:15px 20px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--hi);border-radius:12px;min-height:104px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
#demolition-animation-widget .lt-num{font-family:"Oswald",sans-serif;font-weight:700;font-size:13px;letter-spacing:.16em;color:var(--hi)}
#demolition-animation-widget .lt-title{font-weight:900;font-size:clamp(18px,3.2vw,26px);line-height:1.2;margin:3px 0 5px;color:var(--ink)}
#demolition-animation-widget .lt-desc{font-weight:400;font-size:clamp(12px,1.9vw,14.5px);line-height:1.6;color:#555;max-width:70ch}
#demolition-animation-widget .caption>*{transition:opacity .3s ease, transform .3s ease}
#demolition-animation-widget .caption.swap>*{opacity:0;transform:translateY(7px)}
#demolition-animation-widget .complete-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .5s ease}
#demolition-animation-widget .complete-badge .ring{border:2px solid var(--hi);color:var(--hi-deep);font-family:"Noto Sans JP";font-weight:700;letter-spacing:.1em;font-size:clamp(15px,2.6vw,23px);padding:16px 28px;border-radius:12px;background:rgba(255,255,255,.86);backdrop-filter:blur(2px);box-shadow:0 10px 30px -8px rgba(58,173,71,.35);transform:scale(.9);transition:transform .5s cubic-bezier(.2,.9,.3,1.2)}
#demolition-animation-widget .complete-badge.show{opacity:1}
#demolition-animation-widget .complete-badge.show .ring{transform:scale(1)}
#demolition-animation-widget .controls{margin-top:14px}
#demolition-animation-widget .scrub{position:relative;height:30px;cursor:pointer;display:flex;align-items:center}
#demolition-animation-widget .track{position:absolute;left:0;right:0;height:5px;background:#e8e8e8;border-radius:3px}
#demolition-animation-widget .fill{position:absolute;left:0;height:5px;background:var(--hi);border-radius:3px;width:0%}
#demolition-animation-widget .ticks{position:absolute;left:0;right:0;height:30px}
#demolition-animation-widget .tick{position:absolute;top:50%;width:2px;height:14px;background:#cfd4d2;border-radius:2px;translate:-50% -50%}
#demolition-animation-widget .bar{display:flex;align-items:center;gap:14px;margin-top:10px}
#demolition-animation-widget button{font-family:"Oswald",sans-serif;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:9px 16px;border-radius:8px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:7px}
#demolition-animation-widget button:hover{background:var(--bg);border-color:#cfd4d2}
#demolition-animation-widget button:active{transform:translateY(1px)}
#demolition-animation-widget #play{background:var(--hi);color:#fff;border-color:var(--hi);box-shadow:0 4px 16px rgba(58,173,71,.25)}
#demolition-animation-widget #play:hover{background:var(--hi-deep);border-color:var(--hi-deep);color:#fff}
#demolition-animation-widget .time{font-family:"Oswald",sans-serif;font-size:14px;letter-spacing:.1em;color:var(--sub);margin-left:auto}
#demolition-animation-widget .time b{color:var(--ink)}
#demolition-animation-widget .legend{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 10px}
#demolition-animation-widget .chip{font-size:11px;letter-spacing:.02em;color:var(--sub);border:1px solid var(--line);border-radius:20px;padding:4px 11px;transition:all .25s;background:var(--paper)}
#demolition-animation-widget .chip.active{color:#fff;background:var(--hi);border-color:var(--hi);font-weight:700}
#demolition-animation-widget .chip.done{color:var(--hi-deep);border-color:#c5eacc;background:var(--greenl)}
#demolition-animation-widget .note{margin-top:12px;font-size:11.5px;line-height:1.6;color:var(--sub)}
#demolition-animation-widget .note b{color:var(--ink)}


#demolition-animation-widget{border-radius:14px;border:1px solid var(--line);box-shadow:0 16px 42px rgba(0,0,0,.10);}
#demolition-animation-widget .frame{margin:0 auto;}
@media(max-width:700px){#demolition-animation-widget{padding:14px;}#demolition-animation-widget .bar{flex-wrap:wrap;}#demolition-animation-widget .time{width:100%;margin-left:0;}#demolition-animation-widget .titlebar{align-items:flex-start;flex-direction:column;}#demolition-animation-widget .meta{text-align:left;white-space:normal;}}