@font-face{font-family:BlackHan;src:url('/hobocode/fonts/BlackHanSans-Regular.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:NanumCoding;src:url('/hobocode/fonts/NanumGothicCoding-Regular.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:NanumCoding;src:url('/hobocode/fonts/NanumGothicCoding-Bold.woff2') format('woff2');font-display:swap;font-weight:700}
@font-face{font-family:SairaStencil;src:url('/hobocode/fonts/SairaStencilOne-Regular.woff2') format('woff2');font-display:swap;font-weight:400}
@font-face{font-family:WetPaint;src:url('/hobocode/fonts/RubikWetPaint-Regular.woff2') format('woff2');font-display:swap;font-weight:400}
:root{--ink:#111;--muted:#626262;--line:#e2e2e2;--rust:#b4501f;--rust-d:#cc6633;--night:#0e0e0e;--chalk:#f2f2f2;--muted-d:#ababab;--paper:#f8f7f3}
*{box-sizing:border-box}html{background:#fff;color:var(--ink);font-family:NanumCoding,monospace;scroll-behavior:smooth}body{margin:0}p{line-height:1.75;color:var(--muted)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:3px solid var(--rust-d);outline-offset:4px}h1,h2{font-family:BlackHan,sans-serif;font-weight:400;letter-spacing:-.025em;line-height:1.2;word-break:keep-all;text-wrap:balance}h1 em{font-style:normal}figure{margin:0}button{font:inherit}.skip{position:absolute;top:-100px;left:12px;z-index:30;padding:14px;background:#fff}.skip:focus{top:12px}
header{height:80px;padding:0 6%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff}.brand{display:flex;gap:12px;align-items:center;min-height:44px}.brand-symbol{width:38px;height:38px;background:#111;border-radius:4px;padding:6px}.brand-wordmark{width:126px;height:auto;display:block}.toplinks{display:flex;align-items:center;gap:28px;font-size:13px}.toplinks a{min-height:44px;display:flex;align-items:center}.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);line-height:1.5}.badge:before{content:'';width:6px;height:6px;background:var(--rust);flex:none}
.eyebrow{font-size:12px;line-height:1.5;letter-spacing:.025em;margin:0 0 24px;color:var(--muted)}
/* Hero */
.hero{background:var(--night);color:var(--chalk);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,6vw,96px);padding:48px max(6%,calc((100% - 1200px)/2));min-height:calc(100svh - 80px)}.hero-copy{order:-1}.hero .eyebrow{color:var(--muted-d)}.hero h1{margin:0;font-size:clamp(40px,4.6vw,66px);color:var(--chalk)}.hero-intro{color:#c4c4c4;font-size:16px;max-width:30em;margin:28px 0 36px;word-break:keep-all}.down{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:48px;padding:12px 18px;background:var(--chalk);color:var(--ink);border-radius:4px;font-size:14px;font-weight:700;line-height:1.5}.down span{font-size:22px}
.hero-visual{position:relative;height:min(calc(100svh - 176px),820px);min-height:520px;aspect-ratio:9/16;overflow:hidden;border-radius:6px;background:#1b1b1b}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.arrive-ring{position:absolute;z-index:1;border:2px solid var(--rust-d);border-radius:50%;opacity:0;pointer-events:none}[data-hero][data-arrived] .arrive-ring{animation:ring .9s ease-out 2}@keyframes ring{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
.paint-memo{position:absolute;z-index:2;left:0;top:0;opacity:0;transform:rotate(-1deg);transform-origin:50% 30%;pointer-events:none}[data-hero][data-arrived] .paint-memo{opacity:1;animation:memoPop .66s cubic-bezier(.2,.9,.3,1) .42s both}@keyframes memoPop{0%{opacity:0;transform:translateY(-8px) rotate(-1deg) scale(.5)}42%{opacity:1;transform:translateY(0) rotate(-2.8deg) scale(1.08)}60%{transform:rotate(.8deg) scale(.97)}78%{transform:rotate(-1.7deg) scale(1.01)}100%{opacity:1;transform:rotate(-1deg) scale(1)}}
.replay{position:absolute;z-index:3;right:12px;bottom:12px;min-height:44px;padding:0 14px;border:1px solid rgba(242,242,242,.45);background:rgba(14,14,14,.62);color:var(--chalk);border-radius:4px;font-size:13px;cursor:pointer}.replay:hover{background:rgba(14,14,14,.85)}
/* Painted notes (app PaintPatch + HoboWear) */
.patch{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.patch path{fill:var(--paper)}
.face{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px 14px;color:var(--ink);-webkit-mask:url(/hobocode/media/wear.svg) 0 0/100% 100%;mask:url(/hobocode/media/wear.svg) 0 0/100% 100%}
.face p{margin:0}.memo-row{display:flex;align-items:center;gap:7px;font-size:13px;line-height:1.3;color:rgba(17,17,17,.62)}.mk{width:22px;height:22px;flex:none;background:rgba(17,17,17,.62);-webkit-mask:var(--sign) center/contain no-repeat;mask:var(--sign) center/contain no-repeat}.memo-place{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.memo-dist{flex:none}.face .memo-body{font-size:15px;line-height:1.4;color:var(--ink);flex:1;word-break:keep-all;overflow-wrap:anywhere}.face .memo-date{font:15px/1 WetPaint,'Marker Felt',cursive;text-align:right;transform:rotate(-3deg);color:var(--ink)}
/* Memo wall */
.section-copy{max-width:1200px;margin:auto;padding:104px 6% 44px}.section-copy h2{font-size:clamp(32px,3.6vw,52px);margin:0 0 18px}.section-copy p{font-size:16px;max-width:36em;margin:0;word-break:keep-all}
.wall-band{position:relative;height:388px;overflow:hidden;background:linear-gradient(#fff 0 125px,#111 125px)}.town-track{position:absolute;left:0;top:0;display:flex;width:max-content}.town-tile{display:block;width:1280px;height:150px;fill:#111}
.memo-track{position:absolute;left:0;top:168px;display:flex;width:max-content;padding-bottom:40px;outline-offset:-4px}.memos{display:flex;gap:40px;list-style:none;margin:0;padding:0 20px}.memo{position:relative;width:280px;transform:rotate(var(--tilt))}.memo .face{min-height:156px}
.wall-band[data-moving] .town-track{animation:drift 160s linear infinite}.wall-band[data-moving] .memo-track{animation:drift 80s linear infinite}.wall-band:is([data-paused],[data-offscreen]) :is(.town-track,.memo-track),.wall-band .memo-track:is(:hover,:focus-within){animation-play-state:paused}@keyframes drift{to{transform:translateX(-50%)}}
.wall-band:not([data-moving]) .memo-track{right:0;width:auto;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}.wall-band:not([data-moving]) .memos[aria-hidden]{display:none}.wall-band:not([data-moving]) .memo{scroll-snap-align:start}
.motion-toggle{position:absolute;right:16px;bottom:12px;min-height:44px;padding:0 14px;border:1px solid rgba(242,242,242,.4);border-radius:4px;background:#111;color:var(--chalk);font-size:12px;cursor:pointer}
/* Arrival scene */
.arrive{background:var(--night);color:var(--chalk)}.arrive[data-motion]{height:330vh}.arrive-stage{max-width:1200px;margin:auto;padding:104px 6%;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center}.arrive[data-motion] .arrive-stage{position:sticky;top:0;height:100svh;padding-top:40px;padding-bottom:40px}
.arrive h2{color:var(--chalk);font-size:clamp(32px,3.6vw,52px);margin:0 0 36px}.steps{list-style:none;margin:0;padding:0;display:grid;gap:22px;counter-reset:step}.steps li{display:grid;grid-template-columns:36px 1fr;column-gap:10px;transition:opacity .45s}.steps li:before{counter-increment:step;content:counter(step,decimal-leading-zero);grid-row:span 2;font:15px/1.5 SairaStencil,monospace;color:var(--rust-d)}.steps b{font-size:17px;line-height:1.5;color:var(--chalk);word-break:keep-all}.steps span{font-size:14px;line-height:1.7;color:var(--muted-d);word-break:keep-all}
.steps b,.steps span,.steps li:before{transition:color .45s}.arrive[data-motion] .steps b{color:#8c8c8c}.arrive[data-motion] .steps span{color:#828282}.arrive[data-motion] .steps li:before{color:#6b4330}.arrive[data-motion][data-step="0"] [data-i="0"] b,.arrive[data-motion][data-step="1"] [data-i="1"] b,.arrive[data-motion][data-step="2"] [data-i="2"] b{color:var(--chalk)}.arrive[data-motion][data-step="0"] [data-i="0"] span,.arrive[data-motion][data-step="1"] [data-i="1"] span,.arrive[data-motion][data-step="2"] [data-i="2"] span{color:var(--muted-d)}.arrive[data-motion][data-step="0"] [data-i="0"]:before,.arrive[data-motion][data-step="1"] [data-i="1"]:before,.arrive[data-motion][data-step="2"] [data-i="2"]:before{color:var(--rust-d)}.conditions{font-size:12px;line-height:1.7;color:#959595;margin:32px 0 0;max-width:34em;word-break:keep-all}
.arrive-scene{position:relative;height:min(76svh,680px);min-height:420px;border-radius:6px;overflow:hidden;background:#2a2a2a}.town,.scene-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.radius{fill:rgba(204,102,51,.12);stroke:var(--rust-d);stroke-width:2;transform-box:fill-box;transform-origin:center}.arr-ring{fill:none;stroke:var(--rust-d);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}.arrive[data-arrived] .arr-ring{animation:ring .9s ease-out 2}.trail{fill:none;stroke:rgba(204,102,51,.55);stroke-width:2;stroke-linejoin:round}.dot{fill:var(--rust-d);stroke:var(--night);stroke-width:3}.glow{fill:rgba(204,102,51,.18)}.place{font:700 11px NanumCoding,monospace;fill:var(--chalk);stroke:#191919;stroke-width:3;paint-order:stroke}.count{font:10px SairaStencil,sans-serif;fill:#fff}
.notif{position:absolute;left:5%;right:5%;top:5%;transition:opacity .45s,transform .5s cubic-bezier(.2,.9,.3,1)}.notif img{display:block;width:100%;height:auto;border-radius:4.2%/17%;box-shadow:0 12px 32px rgba(0,0,0,.45)}.arrive[data-motion]:not([data-arrived]) .notif{opacity:0;transform:translateY(-28px) scale(.98)}

/* Actual screens */
.screens{border-bottom:1px solid var(--line)}.screen-list{list-style:none;margin:0 auto;padding:0 6% 16px;max-width:1200px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,56px)}.screen-list:focus-visible{outline-offset:-3px}.phone{border:5px solid #111;border-radius:36px;overflow:hidden;background:#fff;max-width:300px;margin:0 auto}.phone img{display:block;width:100%;height:auto}.screen-list figcaption{max-width:300px;margin:22px auto 0;display:grid;gap:6px}.screen-list b{font:400 22px/1.3 BlackHan,sans-serif}.screen-list figcaption span{font-size:14px;line-height:1.7;color:var(--muted);word-break:keep-all}
.demo-disclosure{font-size:11px;line-height:1.7;max-width:760px;margin:0 auto;padding:28px 24px 96px;text-align:center;word-break:keep-all}
[data-reveal] .reveal{transition:opacity .7s ease var(--d,0ms),transform .7s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}[data-reveal] .reveal:not(.in){opacity:0;transform:translateY(28px)}
/* Closing + footer */
.closing{padding:88px 24px;text-align:center}.closing>img{width:64px;height:64px;background:#111;padding:10px;border-radius:6px;margin-bottom:28px}.closing h2{font-size:clamp(32px,4vw,54px);margin:0 0 28px}.closing p{font-size:13px;max-width:540px;margin:22px auto 0}.closing .badge{font-size:14px;color:var(--ink)}footer{border-top:1px solid var(--line);padding:24px 6%;display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--muted);font-size:12px}footer nav{display:flex;gap:20px;flex-wrap:wrap}footer a{display:inline-flex;align-items:center;min-height:44px}
html:lang(ja){font-family:-apple-system,'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif}html:lang(zh-Hans){font-family:-apple-system,'PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif}html:lang(ja) :is(h1,h2,p,b,span),html:lang(zh-Hans) :is(h1,h2,p,b,span){word-break:normal;overflow-wrap:anywhere}
@media(max-width:1000px){.hero{grid-template-columns:minmax(0,1fr) auto}.hero-visual{height:min(calc(100svh - 176px),680px);min-height:460px}.arrive-stage{grid-template-columns:1fr 1fr}}
@media(max-width:760px){header{height:68px;padding:0 20px;gap:12px}.brand{gap:9px}.brand-symbol{width:32px;height:32px;padding:5px}.brand-wordmark{width:98px}.toplinks .about{display:none}.toplinks .badge{font-size:10px}
.hero{display:block;padding:0 0 48px;min-height:0}.hero-visual{width:100%;height:60svh;min-height:400px;max-height:620px;aspect-ratio:auto;border-radius:0}.hero-copy{padding:32px 24px 0}.hero .eyebrow{margin-bottom:16px}.hero h1{font-size:clamp(30px,8.5vw,44px);line-height:1.24}.hero-intro{font-size:15px;margin:20px 0 28px}.down{width:100%;font-size:13px}
.section-copy{padding:72px 24px 32px}.section-copy h2{font-size:28px}.section-copy p{font-size:15px}.wall-band{height:360px;background:linear-gradient(#fff 0 104px,#111 104px)}.town-tile{width:1067px;height:125px}.memo-track{top:142px}.memos{gap:28px;padding:0 14px}.memo{width:252px}.memo .face{min-height:150px}
.arrive[data-motion]{height:300vh}.arrive-stage{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:56px 0 48px}.arrive[data-motion] .arrive-stage{padding:0 0 16px;gap:16px}.arrive-scene{order:-1;height:46svh;min-height:300px;border-radius:0}.arrive[data-motion] .arrive-scene{height:57svh}.arrive-copy{padding:0 24px}.arrive h2{font-size:26px;margin-bottom:16px}.steps{gap:10px}.steps b{font-size:15px}.steps span{font-size:13px;line-height:1.6}.arrive[data-motion] .steps span{display:none}.arrive[data-motion][data-step="0"] [data-i="0"] span,.arrive[data-motion][data-step="1"] [data-i="1"] span,.arrive[data-motion][data-step="2"] [data-i="2"] span{display:block}.conditions{font-size:11px;margin-top:14px}.notif{left:4%;right:4%;top:4%}
.screen-list{grid-template-columns:minmax(0,1fr);padding:0 24px 16px;gap:40px}.phone{border-width:4px;border-radius:30px}.screen-list b{font-size:19px}
.closing{padding:64px 24px}footer{display:block;padding:20px 24px}footer nav{margin-top:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}[data-hero][data-arrived] :is(.paint-memo,.arrive-ring){animation:none}.arrive-ring{display:none}}