:root{--cream:#f7f1ea;--paper:#fffaf4;--plum:#392630;--muted:#88747b;--rose:#d4a5a2;--accent:#df5f88}
*{box-sizing:border-box}html,body{margin:0;background:#1c171a;font-family:'Work Sans',Arial,sans-serif}body{overflow:hidden}#stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}#frame{position:relative;width:1080px;height:1920px;flex:none;overflow:hidden;background:var(--cream);color:var(--plum);transform-origin:center center}.wash{position:absolute;inset:0;background:radial-gradient(circle at 50% 63%,#fffaf4 0%,#f7f1ea 55%,#eee3df 100%)}.rule{position:absolute;left:76px;right:76px;height:2px;background:#cdbbc0}.top-rule{top:87px}.bottom-rule{bottom:108px}.eyebrow{position:absolute;left:76px;top:112px;font-size:24px;font-weight:700;letter-spacing:.18em}.eyebrow span,.end-model span{color:var(--accent)}.headline{position:absolute;left:74px;top:220px;right:72px;font-size:103px;line-height:.99;font-weight:700;letter-spacing:-.035em}.headline span{display:block}.headline#hook span{white-space:nowrap}.headline#story{font-size:94px;top:231px}.step{position:absolute;left:76px;top:227px;display:flex;align-items:baseline;gap:24px}.step #step-index{font:500 24px 'DM Mono',monospace;color:var(--accent)}.step #step-name{font-size:102px;font-weight:700;letter-spacing:-.035em;line-height:1}.device{position:absolute;transform-origin:center center}.device-screen{position:relative;width:100%;height:100%;background:#fefaf7;overflow:hidden;box-shadow:0 20px 40px rgba(57,38,48,.10)}.screen-header{height:55px;display:flex;align-items:center;gap:8px;padding:0 18px;border-bottom:2px solid #e8d9da}.screen-header i{width:10px;height:10px;border-radius:50%;background:#e5d4d6}.screen-header b{margin-left:auto;font:500 17px 'DM Mono',monospace;letter-spacing:.1em;color:#9b858c}.screen-body{position:relative;padding:34px 30px}.screen-prompt{font-size:19px;font-weight:500;color:#a99198}.screen-typed{margin-top:18px;min-height:55px;font-size:38px;line-height:1.05;letter-spacing:-.05em;font-weight:600;color:var(--plum);white-space:nowrap}.device-tag{position:absolute;display:flex;align-items:center;gap:11px;font-size:23px;font-weight:600;white-space:nowrap}.device-tag strong{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--plum);border-radius:50%;font:500 17px 'DM Mono',monospace}.laptop{left:74px;top:579px;width:508px;height:315px}.laptop .device-screen{height:284px;border:13px solid var(--plum);border-radius:20px 20px 7px 7px}.laptop .laptop-base{position:absolute;left:-30px;right:-30px;top:284px;height:22px;background:var(--plum);border-radius:2px 2px 18px 18px}.laptop .laptop-base:after{content:'';position:absolute;width:100px;height:7px;left:50%;transform:translateX(-50%);background:#ad929a;border-radius:0 0 10px 10px}.laptop .device-tag{top:325px;left:6px}.tablet{left:623px;top:584px;width:375px;height:270px}.tablet .device-screen{border:12px solid var(--plum);border-radius:23px}.tablet .screen-typed{font-size:30px}.tablet .screen-body{padding:25px 21px}.tablet .device-tag{top:292px;left:5px}.phone{left:727px;top:902px;width:204px;height:267px;background:var(--plum);border-radius:26px;padding:10px}.phone .device-screen{border-radius:17px;box-shadow:none}.phone .screen-header{height:43px;padding:0 12px}.phone .screen-header b{font-size:12px}.phone .screen-body{padding:21px 13px}.phone .screen-prompt{font-size:14px}.phone .screen-typed{font-size:24px;white-space:normal;margin-top:10px}.phone .device-tag{left:-170px;top:183px}.phone-speaker{position:absolute;z-index:2;width:50px;height:6px;border-radius:5px;background:var(--plum);left:77px;top:15px}
.device[data-active="true"] .device-screen{box-shadow:0 0 0 6px var(--accent),0 24px 56px rgba(223,95,136,.23)}.device[data-active="true"] .device-tag strong{border-color:var(--accent);background:var(--accent);color:white}.device[data-active="true"] .screen-header{border-bottom-color:#f2c4d2}.device[data-active="false"] .screen-typed{color:#aa969b}
#keyboard-wrap{position:absolute;left:-210px;top:875px;width:1500px;height:844px;transform-origin:750px 430px}#keyboard{position:absolute;inset:0;width:1500px;height:844px;object-fit:contain;filter:drop-shadow(0 27px 24px rgba(71,39,50,.19))}.keyboard-shadow{position:absolute;left:300px;right:300px;top:575px;height:90px;border-radius:50%;background:rgba(61,35,44,.11);filter:blur(50px)}.key-cue{position:absolute;left:0;top:0;width:60px;height:60px;transform:translate(-50%,-50%);pointer-events:none}.key-ring{position:absolute;inset:6px;border:5px solid var(--accent);border-radius:50%;box-shadow:0 0 0 7px rgba(247,241,234,.68)}.key-press{position:absolute;inset:13px;border-radius:50%;background:rgba(223,95,136,.36)}.finger{position:absolute;left:19px;top:-91px;width:24px;height:105px;border-radius:18px;background:linear-gradient(90deg,#ae7d82,#efbdb7 45%,#d89c9c);box-shadow:3px 6px 8px rgba(57,38,48,.18);transform-origin:center bottom}.finger-tip{position:absolute;bottom:0;width:24px;height:22px;border-radius:50%;background:#eab5ac}.key-cue:after{content:'';position:absolute;left:30px;top:-139px;width:2px;height:32px;background:var(--accent)}
#action-line{position:absolute;left:76px;top:1534px;display:flex;align-items:center;gap:18px;color:var(--accent);font:500 24px 'DM Mono',monospace;letter-spacing:.04em}.action-dash{width:45px;height:3px;background:var(--accent)}#qualifier{position:absolute;left:76px;top:1611px;font-size:25px;color:#79666d;font-weight:500}.footer-left,.footer-right{position:absolute;bottom:57px;font-size:18px;font-weight:700;letter-spacing:.16em}.footer-left{left:76px}.footer-right{right:76px}.footer-right span{color:var(--accent)}
#end-card{position:absolute;inset:0;pointer-events:none}.end-kicker{position:absolute;left:76px;top:250px;font:500 24px 'DM Mono',monospace;letter-spacing:.08em;color:var(--accent)}.end-title{position:absolute;left:70px;top:304px;font-size:130px;line-height:.91;letter-spacing:-.035em;font-weight:700}.end-model{position:absolute;left:76px;top:578px;font-size:35px;font-weight:600}.cta{position:absolute;left:76px;top:1550px;width:928px;height:110px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:var(--plum);border-radius:60px;color:var(--paper);font-size:34px;font-weight:600;letter-spacing:-.03em}.cta span{font-size:48px;font-weight:400;color:#e7a7ba}
#preview-controls{position:fixed;z-index:10;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:#292127;color:white;padding:10px 14px;border-radius:12px;font:14px Arial,sans-serif}#preview-controls button{border:0;background:#df5f88;color:white;border-radius:8px;width:35px;height:35px;cursor:pointer}#scrub{width:280px;accent-color:#df5f88}body.render #preview-controls{display:none}body.render #stage{display:block}body.render #frame{transform:none!important}
#bridge{position:absolute;left:74px;top:281px;font-size:107px;line-height:1.02;font-weight:700;letter-spacing:-.035em}#bridge em{font-style:normal;color:var(--accent)}
.phone{top:810px}

/* Typography matches the original tutorial tokens; decorative rules removed. */
:root{--sans:"Work Sans","Noto Sans",Helvetica,Arial,sans-serif;--mono:"DM Mono",Menlo,monospace}
#frame{font-family:var(--sans);font-synthesis:none}.rule,.action-dash,.key-cue:after{display:none}.headline,.step #step-name,#bridge,.end-title{font-weight:700}.end-kicker,.eyebrow{font-weight:500}

.tablet .device-tag{top:-57px}