:root{--bg: #000;--accent: #fff;--button-bg: #fff;--button-text: #000;--circle: #999}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);font-family:Arial,sans-serif;color:var(--accent);display:flex;flex-direction:column}.header{display:flex;align-items:center;gap:12px;padding:16px;font-size:22px}.header h1{margin:0}.main{flex:1;display:flex;justify-content:space-between;padding:16px}.canvas-wrap{flex:1;display:flex;align-items:center;justify-content:center}.canvas{width:400px;height:400px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent}.shape-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:1px;width:100%}.thumb-img{width:50px;height:50px;border-radius:50%;object-fit:cover}.timeline{padding:12px;border-top:1px solid #222;background:#000}.frame-list{display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;scrollbar-color:#555 #111;scrollbar-width:thin}.frame-list::-webkit-scrollbar{height:8px}.frame-list::-webkit-scrollbar-track{background:#111}.frame-list::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.frame-list::-webkit-scrollbar-thumb:hover{background:#888}.frame-btn{min-width:44px;height:44px;background:var(--button-bg);color:var(--button-text);display:flex;align-items:center;justify-content:center;border-radius:4px;font-size:14px;font-weight:700;border:none;flex-shrink:0}.frame-btn.active{outline:2px solid var(--accent)}.toolbar{display:flex;justify-content:center;gap:16px;padding-top:8px}.icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:22px;color:var(--accent);background:transparent;border:none;cursor:pointer}.parol-part{position:absolute;max-width:500x;max-height:500px;opacity:0}.parol-part.active{opacity:1}.frame-btn.active{background:#000;color:#fff;outline:none}