#encounter{--lf-white:#eae5d7;--lf-muted:#b2bcaa;--lf-line:#52604e;--lf-accent:#d5d5b5;min-height:0;padding:82px 6% 36px;background:#202b23;color:var(--lf-white);overflow:hidden;scroll-margin-top:0}
#encounter .lf-intro{text-align:center;margin-bottom:34px;position:relative;z-index:1}
#encounter .lf-intro>span{font-size:10px;letter-spacing:.15em;color:var(--lf-muted)}
#encounter .lf-intro h2{font:400 clamp(35px,3.7vw,58px)/1.4 var(--serif);letter-spacing:.07em;margin:22px 0 14px}
#encounter .lf-intro>p{font-size:13px;line-height:1.95;color:#bdc6b5;margin-bottom:0}
#encounter .lf-layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:38px;max-width:1510px;margin:0 auto;align-items:start}
#encounter .lf-visual{min-width:0;position:relative}
#encounter .lf-stage{height:clamp(475px,43vw,660px);position:relative;cursor:grab;touch-action:pan-y;background:radial-gradient(ellipse at 49% 47%,#43523b42 0,#29352919 53%,transparent 73%);border-bottom:1px solid #59665260}
#encounter .lf-stage.is-dragging{cursor:grabbing}
#encounter .lf-stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}
#encounter .lf-stage-edge{position:absolute;left:0;top:30px;font-size:8px;letter-spacing:.17em;line-height:1.9;color:#b6beab72;pointer-events:none}
#encounter .lf-drag-hint{position:absolute;bottom:24px;left:0;font-size:10px;letter-spacing:.08em;color:#b6beab9c;pointer-events:none}
#encounter .lf-view-reset{position:absolute;bottom:16px;right:0;width:36px;height:36px;border:1px solid #737f6560;border-radius:50%;font-size:20px;color:#d2d8c3;transition:border-color .2s,transform .2s}
#encounter .lf-view-reset:hover{border-color:#cbd4b6;transform:rotate(-15deg)}
#encounter .lf-fallback{position:absolute;inset:45% 10% auto;text-align:center;max-width:none;font-size:13px;color:var(--lf-muted);line-height:1.8}
#encounter [hidden]{display:none!important}
#encounter .lf-stage-footer{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;padding-top:22px;min-height:75px}
#encounter #lf-description{font:400 14px/1.9 var(--serif);max-width:440px;margin:0;color:#d9ddcc}
#encounter #lf-motion{font-size:11px;white-space:nowrap;padding:4px 0 7px;border-bottom:1px solid #859276;color:#d9ddcc}
#encounter .lf-making{padding-top:23px}
#encounter .lf-presets{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;margin-bottom:35px}
#encounter .lf-presets button{font:400 19px/1.3 var(--serif);text-align:left;padding:14px 0;border-bottom:1px solid #6b77583d;display:flex;gap:16px;align-items:center;color:#a5b096;transition:color .25s,border-color .25s}
#encounter .lf-presets button>span{font:9px/1.3 'Helvetica Neue',sans-serif;letter-spacing:.07em;color:#8e9a80}
#encounter .lf-presets button[aria-pressed=true]{color:#f0eddf;border-bottom-color:#d0d2b2}
#encounter .lf-presets button:hover{color:#f0eddf;border-bottom-color:#a8b391}
#encounter .lf-control{display:block;margin-bottom:24px;cursor:pointer}
#encounter .lf-control-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.06em;margin-bottom:10px}
#encounter .lf-control-title output{font:10px/1.4 'Helvetica Neue',sans-serif;color:#afbba0;font-variant-numeric:tabular-nums}
#encounter .lf-control input{appearance:none;-webkit-appearance:none;display:block;width:100%;height:20px;margin:0;background:transparent;cursor:ew-resize;accent-color:#dfdfc5;touch-action:pan-y}
#encounter .lf-control input::-webkit-slider-runnable-track{height:1px;background:#778569}
#encounter .lf-control input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#e4e2cc;border:1px solid #f2eedb;margin-top:-5px;box-shadow:0 0 0 5px #a7b48c0d;transition:box-shadow .2s}
#encounter .lf-control input:hover::-webkit-slider-thumb{box-shadow:0 0 0 7px #b8c39f1c}
#encounter .lf-control input::-moz-range-track{height:1px;background:#778569}
#encounter .lf-control input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e4e2cc;border:1px solid #f2eedb}
#encounter .lf-control-ends{display:flex;justify-content:space-between;margin-top:3px;font-size:9px;color:#a2af96;letter-spacing:.03em}
#encounter .lf-surprise{width:100%;display:flex;align-items:center;justify-content:space-between;background:#cdd2b8;color:#273427;padding:16px 18px;margin-top:7px;font-size:12px;letter-spacing:.06em;transition:background .2s}
#encounter .lf-surprise:hover{background:#e1e3cd}
#encounter .lf-surprise>span:last-child{font-size:19px;line-height:1}
#encounter .lf-deeper{margin-top:23px;border-bottom:1px solid #71816155}
#encounter .lf-deeper summary{font-size:11px;list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding:0 0 17px;color:#c5cdb6}
#encounter .lf-deeper summary::-webkit-details-marker{display:none}
#encounter .lf-deeper summary>span{font-size:17px;line-height:1;transition:transform .2s}
#encounter .lf-deeper[open] summary>span{transform:rotate(45deg)}
#encounter .lf-advanced{padding:12px 0 20px}
#encounter .lf-advanced .lf-control{margin-bottom:21px}
#encounter .lf-whisper{font:400 12px/1.8 var(--serif);color:#aebba0;margin:2px 0 24px}
#encounter .lf-seed{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#c5cdb6;gap:20px}
#encounter .lf-seed input{width:105px;min-width:0;background:transparent;border:0;border-bottom:1px solid #71816180;color:#e6e5d0;padding:6px 0;font-size:12px;font-variant-numeric:tabular-nums;text-align:right}
#encounter .lf-keep{display:flex;gap:14px 20px;flex-wrap:wrap;padding-top:21px}
#encounter .lf-keep button{font-size:10px;color:#c9d0bb;padding:0 0 5px;border-bottom:1px solid transparent;text-align:left;white-space:nowrap;transition:border-color .2s}
#encounter .lf-keep button:hover{border-color:#a8b391}
#encounter .lf-status{font-size:10px;line-height:1.9;color:#d3d9bd;min-height:19px;margin:16px 0 0}
#encounter .lf-bottom{display:flex;justify-content:space-between;gap:22px;padding-top:32px;max-width:1510px;margin:0 auto;align-items:center}
#encounter .lf-bottom p{font:400 13px/1.8 var(--serif);color:#c9d1bb;margin:0}
#encounter .lf-bottom>span{font-size:9px;line-height:1.8;color:#abb89c;text-align:right}
#encounter button:focus-visible,#encounter summary:focus-visible,#encounter input:focus-visible{outline:2px solid #eee7bc;outline-offset:5px}
#encounter button:disabled,#encounter input:disabled{opacity:.35;cursor:default}
@media(min-width:1750px){#encounter .lf-layout{grid-template-columns:minmax(0,1fr) 320px;gap:80px}#encounter .lf-stage{height:710px}}
@media(max-width:1000px){#encounter{padding-left:5%;padding-right:5%}#encounter .lf-layout{grid-template-columns:minmax(0,1fr) 265px;gap:24px}#encounter .lf-stage{height:510px}#encounter .lf-stage-footer{flex-direction:column;gap:10px}#encounter .lf-presets button{font-size:17px}}
@media(max-width:720px){#encounter{padding:54px 7% 29px}#encounter .lf-intro{margin-bottom:10px}#encounter .lf-intro>span{font-size:9px}#encounter .lf-intro h2{font-size:34px;letter-spacing:.035em;margin:21px 0 12px}#encounter .lf-intro>p{font-size:12px}#encounter .lf-layout{display:block}#encounter .lf-stage{height:460px;margin:0 -3%;width:106%}#encounter .lf-stage-edge{top:25px;font-size:7px;left:3%}#encounter .lf-drag-hint{left:3%;font-size:9px;bottom:19px}#encounter .lf-view-reset{right:3%;bottom:11px;width:33px;height:33px}#encounter .lf-stage-footer{flex-direction:row;align-items:flex-start;padding-top:17px;gap:17px;min-height:0}#encounter #lf-description{font-size:12px;max-width:70%}#encounter #lf-motion{font-size:10px}#encounter .lf-making{padding-top:29px}#encounter .lf-presets{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:31px}#encounter .lf-presets button{font-size:17px;display:block;padding:8px 0 13px}#encounter .lf-presets button>span{display:block;font-size:8px;margin-bottom:11px}#encounter .lf-primary{display:grid;grid-template-columns:1fr;gap:0}#encounter .lf-control{margin-bottom:25px}#encounter .lf-control-title{font-size:12px}#encounter .lf-surprise{margin-top:8px;padding:17px 19px}#encounter .lf-keep{gap:18px 22px;padding-top:24px}#encounter .lf-keep button{font-size:10px}#encounter .lf-bottom{padding-top:23px;display:block}#encounter .lf-bottom p{font-size:13px}#encounter .lf-bottom>span{display:block;text-align:left;font-size:9px;margin-top:12px}#encounter .lf-advanced{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}#encounter .lf-advanced .lf-control:last-of-type{grid-column:1/-1}#encounter .lf-whisper,#encounter .lf-seed{grid-column:1/-1}}
@media(max-width:380px){#encounter .lf-stage{height:405px}#encounter .lf-intro h2{font-size:30px}#encounter .lf-stage-footer{flex-direction:column}#encounter #lf-description{max-width:100%}#encounter .lf-presets{gap:9px}#encounter .lf-presets button{font-size:16px}}
@media(prefers-reduced-motion:reduce){#encounter *{transition:none!important}}

@media(min-width:721px){
 #encounter{padding-top:36px;padding-bottom:27px;scroll-margin-top:0}
 #encounter .lf-intro{max-width:1510px;margin:0 auto 15px;display:grid;grid-template-columns:1fr auto;text-align:left;gap:0 35px;align-items:center}
 #encounter .lf-intro>span{grid-column:1;grid-row:1;font-size:9px;line-height:1.4}
 #encounter .lf-intro h2{grid-column:1;grid-row:2;font-size:36px;line-height:1.35;margin:8px 0 0;letter-spacing:.06em}
 #encounter .lf-intro>p{grid-column:2;grid-row:1/3;font-size:11px;line-height:1.9;text-align:right;margin:0}
 #encounter .lf-stage{height:420px}
 #encounter .lf-making{padding-top:3px}
 #encounter .lf-presets{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
 #encounter .lf-presets button{display:block;padding:7px 0 12px;font-size:18px}
 #encounter .lf-presets button>span{display:block;font-size:8px;margin-bottom:8px}
 #encounter .lf-control{margin-bottom:18px}
 #encounter .lf-control-title{margin-bottom:6px;font-size:11px}
 #encounter .lf-control-ends{font-size:8px;margin-top:1px}
 #encounter .lf-surprise{padding:13px 16px;margin-top:5px;font-size:11px}
 #encounter .lf-deeper{margin-top:18px}
 #encounter .lf-deeper summary{padding-bottom:13px;font-size:10px}
 #encounter .lf-keep{padding-top:17px;gap:12px 18px}
 #encounter .lf-keep button{font-size:9px}
 #encounter .lf-status{font-size:9px;margin-top:11px;min-height:17px}
 #encounter .lf-stage-footer{padding-top:16px;min-height:0;flex-direction:row;align-items:flex-start}
 #encounter #lf-description{font-size:12px;max-width:73%;line-height:1.8}
 #encounter #lf-motion{font-size:10px}
 #encounter .lf-bottom{padding-top:23px}
 #encounter .lf-bottom p{font-size:12px}
 #encounter .lf-bottom>span{font-size:8px}
 #encounter .lf-stage-edge{top:18px}
}
@media(min-width:1500px) and (min-height:850px){#encounter .lf-stage{height:560px}#encounter .lf-intro h2{font-size:42px}#encounter .lf-intro{margin-bottom:24px}#encounter{padding-top:48px;padding-bottom:36px}}
/* A visible journey from moving points to a body, with time kept beside the work. */
#encounter .lf-stages{display:flex;justify-content:center;gap:0;border-bottom:1px solid #71816155;margin:3px 0 0}
#encounter .lf-stages button{display:flex;align-items:center;justify-content:center;gap:12px;min-width:78px;padding:11px 19px 13px;font:22px/1.2 var(--serif);color:#a5b096;border-bottom:2px solid transparent;margin-bottom:-1px}
#encounter .lf-stages button>span{font:8px/1 'Helvetica Neue',sans-serif;color:#8e9a80}
#encounter .lf-stages button[aria-pressed=true]{color:#f0eddf;border-color:#d0d2b2}
#encounter .lf-stages button:hover{color:#f0eddf}
#encounter .lf-timeline{padding-top:17px}
#encounter .lf-timeline .lf-control{margin-bottom:0}
#encounter .lf-time-actions{display:flex;justify-content:space-between;gap:24px;margin-top:11px}
#encounter .lf-time-actions button{font-size:10px;padding:4px 0;border-bottom:1px solid #71816175;color:#d5dcc4;white-space:nowrap}
#encounter #lf-motion:disabled{opacity:.6;border-color:transparent}
#encounter .lf-stage-description{font:12px/1.9 var(--serif);color:#c7d0b9;margin:17px 0 0;max-width:85%}
#encounter .lf-order{display:flex;justify-content:space-between;align-items:center;width:100%;gap:12px;padding:10px 0 12px;border-top:1px solid #71816155;margin:3px 0 7px;font-size:10px;line-height:1.5;color:#d0d8c0;text-align:left}
#encounter #lf-order-label{color:#aebc9f;font-size:9px;white-space:nowrap}
#encounter .lf-bottom a{color:inherit;text-decoration:none;border-bottom:1px solid #748464;padding-bottom:3px}
#encounter .lf-stage:focus-visible{outline:1px solid #aeba95;outline-offset:4px}
@media(min-width:721px){#encounter .lf-stage{height:365px}#encounter .lf-layout{grid-template-columns:minmax(0,1fr) 292px}#encounter .lf-making{padding-top:8px}#encounter .lf-presets{margin-bottom:25px}#encounter .lf-control{margin-bottom:20px}#encounter .lf-primary{padding-bottom:1px}#encounter .lf-deeper{margin-top:19px}#encounter .lf-keep{padding-top:18px;gap:13px 17px}#encounter .lf-bottom{padding-top:26px}#encounter .lf-intro{margin-bottom:15px}}
@media(min-width:1500px) and (min-height:850px){#encounter .lf-stage{height:515px}}
@media(max-width:720px){#encounter .lf-stages{margin-top:22px}#encounter .lf-stages button{flex:1;min-width:0;padding:11px 8px;font-size:23px;gap:9px}#encounter .lf-stage{height:400px}#encounter .lf-timeline{padding-top:20px}#encounter .lf-time-actions{margin-top:12px}#encounter .lf-stage-description{max-width:none;font-size:11px;line-height:1.9;margin-top:17px}#encounter .lf-making{padding-top:24px}#encounter .lf-presets{grid-template-columns:repeat(3,1fr);margin-bottom:29px}#encounter .lf-presets button{font-size:20px}#encounter .lf-order{font-size:11px;padding:13px 0;margin-bottom:14px}#encounter .lf-order #lf-order-label{font-size:10px}#encounter .lf-time-actions button{font-size:10px}#encounter .lf-advanced .lf-control:last-of-type{grid-column:auto}}
@media(max-width:380px){#encounter .lf-stage{height:350px}#encounter .lf-stages button{font-size:21px}}