.pelican-app { color-scheme: light; --paper:#f7f6ee; --ink:#283f42; --muted:#718380; --green:#397e70; --line:#dce2d6; }.pelican-app * { box-sizing:border-box; }.pelican-app { margin:0; background:var(--paper); color:var(--ink); font-family:"Segoe UI","Microsoft YaHei",system-ui,sans-serif; }.pelican-app button { font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }.pelican-app button:focus-visible { outline:3px solid #d08c48; outline-offset:5px; }.pelican-app .page { max-width:1200px; padding:30px 40px 22px; margin:auto; }.pelican-app header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:24px; border-bottom:1px solid var(--line); }.pelican-app .brand { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:650; letter-spacing:2px; }.pelican-app .brand svg { width:32px; height:32px; }.pelican-app .edition { color:var(--muted); font-size:11px; letter-spacing:2.1px; }.pelican-app .intro { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:29px 0 20px; }.pelican-app .eyebrow { margin:0 0 11px; color:var(--green); font-size:10px; font-weight:650; letter-spacing:3px; }.pelican-app h1 { margin:0; font-size:clamp(28px,3.4vw,42px); line-height:1.3; font-weight:650; letter-spacing:2px; }.pelican-app .intro p:last-child { margin:0 0 5px; font-size:13px; color:var(--muted); line-height:1.8; }.pelican-app .scene { position:relative; overflow:hidden; border:1px solid #dce4d8; border-radius:18px; background:#eaf1e6; }.pelican-app .scene > svg { display:block; width:100%; height:auto; }.pelican-app .live { position:absolute; top:22px; left:24px; display:flex; align-items:center; gap:7px; color:#517369; font-size:10px; letter-spacing:1.4px; }.pelican-app .live-dot { width:6px; height:6px; border-radius:100%; background:#5c9176; box-shadow:0 0 0 4px #5c917611; }.pelican-app .scene[data-paused="true"] .live-dot { background:#bd9b6f; box-shadow:none; }.pelican-app .scene-note { position:absolute; right:24px; bottom:21px; display:flex; align-items:center; gap:7px; color:#798979; font-size:10px; letter-spacing:1px; }.pelican-app .scene-note svg { width:17px; height:17px; }.pelican-app .controls { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 3px 26px; }.pelican-app .playback { display:flex; align-items:center; gap:13px; }.pelican-app .play { display:grid; place-items:center; width:44px; height:44px; background:var(--green); color:white; border:0; border-radius:50%; transition:background .2s,transform .2s; }.pelican-app .play:hover { background:#2c685d; transform:scale(1.05); }.pelican-app .play svg { width:17px; height:17px; }.pelican-app .play [hidden] { display:none; }.pelican-app .status { margin:0; font-size:13px; font-weight:550; letter-spacing:.5px; }.pelican-app .shortcut { margin:5px 0 0; color:var(--muted); font-size:10px; letter-spacing:.3px; }.pelican-app kbd { font:inherit; border:1px solid #d5dccf; border-radius:4px; padding:0 4px 1px; }.pelican-app .speed-control { display:flex; align-items:center; gap:13px; }.pelican-app .speed-label { color:var(--muted); font-size:11px; }.pelican-app .speeds { display:flex; gap:3px; padding:4px; border:1px solid var(--line); border-radius:30px; background:#eff0e7; }.pelican-app .speed { border:0; border-radius:24px; background:transparent; padding:8px 16px; font-size:11px; color:#76847b; transition:background .2s,color .2s; }.pelican-app .speed[aria-pressed="true"] { background:#fffdf6; color:#376b60; box-shadow:0 1px 4px #324b3a0d; }.pelican-app .speed:hover { color:#275b50; }.pelican-app footer { display:flex; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:17px; font-size:10px; color:#8b9588; letter-spacing:1px; }.pelican-app footer span:last-child { font-size:9px; letter-spacing:1.7px; }.pelican-app .outline { stroke:#344b4b; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
    @media (max-width:680px) {.pelican-app .page { padding:21px 18px 18px; }.pelican-app header { padding-bottom:19px; }.pelican-app .brand { font-size:13px; letter-spacing:1px; gap:8px; }.pelican-app .brand svg { width:27px; height:27px; }.pelican-app .edition { font-size:9px; letter-spacing:1px; }.pelican-app .intro { display:block; padding:25px 0 18px; }.pelican-app .intro p:last-child { margin:12px 0 0; font-size:12px; }.pelican-app .scene { border-radius:12px; }.pelican-app .scene > svg { width:145%; max-width:none; margin-left:-22.5%; }.pelican-app .live { top:13px; left:15px; font-size:8px; }.pelican-app .scene-note { bottom:14px; right:15px; font-size:8px; }.pelican-app .controls { padding:19px 0 21px; flex-wrap:wrap; row-gap:16px; }.pelican-app .speed-control { width:100%; justify-content:space-between; }.pelican-app .speeds { flex:1; max-width:275px; }.pelican-app .speed { flex:1; padding:8px 11px; }.pelican-app .status { font-size:12px; }.pelican-app footer { font-size:9px; letter-spacing:.2px; }.pelican-app footer span:last-child { font-size:8px; letter-spacing:.5px; }
    }
  
.pelican-app{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--paper);min-width:0}.pelican-app p{margin-top:0}.pelican-app .controls{padding-bottom:4px}.pelican-app .outline{stroke:#344b4b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}body[data-app-id=pelican-bike] .tool-main{max-width:1240px}body[data-app-id=pelican-bike] .tool-heading{margin-bottom:18px}body[data-app-id=pelican-bike] .tool-heading h1{font-size:26px}@media(max-width:680px){.pelican-app{padding:10px}.pelican-app .scene-note{display:none}.pelican-app .speed{min-height:40px;padding:8px}.pelican-app .controls{gap:12px}}

/* Compact animation introduction. */
body[data-app-id=pelican-bike] .tool-main{padding-top:18px}
body[data-app-id=pelican-bike] .tool-heading{margin-bottom:14px}
body[data-app-id=pelican-bike] .tool-heading .eyebrow,body[data-app-id=pelican-bike] .tool-heading .privacy-note{display:none}
body[data-app-id=pelican-bike] .tool-heading h1{font-size:24px;line-height:1.35}
body[data-app-id=pelican-bike] .tool-heading>p:not(.eyebrow){font-size:12px;line-height:1.6;margin:5px 0 0}
@media(max-width:680px){body[data-app-id=pelican-bike] .tool-heading h1{font-size:20px}body[data-app-id=pelican-bike] .tool-heading>p:not(.eyebrow){font-size:11px}}