* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
.scene { width: 100%; height: 100vh; height: 100dvh; position: relative; overflow: hidden; background: #83a9d0; }
.composition { --position: 44%; --rope-height: 46%; --hook-offset: 0%; --sway: 0deg; position: absolute; height: min(92dvh, 90vw, 850px); aspect-ratio: 724 / 2172; left: 10%; top: 50%; transform: translateY(-50%); }
.flagpole, .hook { position: absolute; display: block; width: 100%; height: 100%; inset: 0; }
.flagpole { clip-path: polygon(0 0, 58% 0, 58% 5%, 54% 5%, 54% 100%, 0 100%); }
.rope { position: absolute; left: 0; top: 5%; width: 100%; height: var(--rope-height); overflow: hidden; clip-path: inset(0 38% 0 53.7%); pointer-events: none; }
.rope img { display: block; position: absolute; width: 100%; height: 232.558%; top: -11.628%; }
.hook { clip-path: inset(47% 38% 47% 53.7%); transform: translateY(var(--hook-offset)); pointer-events: none; }
.jacket { position: absolute; width: 110%; left: 45%; top: var(--position); transform: rotate(var(--sway)); transform-origin: 12% 20%; cursor: grab; touch-action: none; outline: none; }
.jacket:active { cursor: grabbing; }
.jacket:focus-visible { filter: drop-shadow(0 0 5px white); }
.jacket img { display: block; width: 100%; height: auto; pointer-events: none; }
img { user-select: none; -webkit-user-drag: none; }


.hint { position: absolute; left: 50%; bottom: max(6vh, 28px); transform: translate(-50%, 0); padding: 9px 15px; border-radius: 999px; color: white; background: rgba(35,65,93,.6); font: 500 13px/1.3 system-ui, sans-serif; letter-spacing: .06em; white-space: nowrap; pointer-events: none; }
.hint span { display: inline-block; margin-left: 3px; }

.market-column { position: absolute; right: 10%; top: 50%; transform: translateY(-50%); width: min(360px, 40vw); display: flex; flex-direction: column; gap: 16px; }
.portrait { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
.stock-card { width: 100%; padding: 18px 18px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 16px; background: rgba(19,37,55,.88); box-shadow: 0 18px 55px rgba(19,44,71,.18); color: white; font-family: system-ui, sans-serif; }
.stock-header, .stock-brand { display: flex; align-items: center; }
.stock-header { justify-content: space-between; gap: 10px; }
.stock-brand { gap: 10px; min-width: 0; }
.stock-brand img { width: 38px; height: 38px; }
.stock-brand strong, .stock-brand span, .stock-quote strong, .stock-quote span { display: block; }
.stock-brand strong { font-size: 15px; letter-spacing: .04em; }
.stock-brand span { color: #a9bac9; font-size: 10px; margin-top: 3px; white-space: nowrap; }
.stock-quote { text-align: right; font-variant-numeric: tabular-nums; }
.stock-quote strong { font-size: 21px; }
.stock-quote span { color: #9bdb55; font-size: 11px; margin-top: 2px; }
.stock-quote span.negative { color: #ff8988; }
#stock-chart { height: 180px; margin: 12px -4px 0; }
@media (min-width: 701px) and (min-height: 601px) {
  .market-column { left: 48.25%; right: auto; top: 15.4%; transform: none; width: min(28.4vw, 60dvh); gap: 4.9dvh; }
  .portrait { aspect-ratio: 544 / 353; }
  .stock-card { height: 35dvh; display: flex; flex-direction: column; }
  #stock-chart { flex: 1; min-height: 0; height: auto; }
}
@media (max-width: 700px) {
  .composition { left: 1%; height: min(78dvh, 90vw); transform: translateY(-50%); }
  .market-column { right: 2%; width: 46%; gap: 10px; }
  .portrait { border-radius: 12px; }
  .stock-card { padding: 12px 10px 9px; }
  .stock-brand { gap: 6px; } .stock-brand img { width: 25px; height: 25px; } .stock-brand strong { font-size: 12px; }
  .stock-brand span { font-size: 9px; } .stock-quote strong { font-size: 15px; } .stock-quote span { font-size: 10px; }
  #stock-chart { height: 150px; }
}
@media (max-width: 390px) { .stock-header { align-items: flex-start; flex-direction: column; } .stock-quote { text-align: left; } }

@media (max-height: 600px) { .market-column { gap: 8px; } .portrait { max-height: 30dvh; } #stock-chart { height: 22dvh; } }

.job-card { position: absolute; z-index: 5; top: max(20px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); max-height: min(78dvh, 760px); display: flex; flex-direction: column; overflow: hidden; color: #17212b; background: #fff; border: 1px solid rgba(18, 40, 55, .1); border-radius: 14px; box-shadow: 0 14px 42px rgba(19, 44, 71, .23); font-family: system-ui, sans-serif; }
.job-toggle { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 0; background: white; color: inherit; text-align: left; cursor: pointer; }
.job-toggle:hover { background: #f8faf7; }
.job-toggle:focus-visible { outline: 3px solid #76b900; outline-offset: -3px; }
.job-logo { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border: 1px solid #e5e9e2; border-radius: 10px; background: #f8faf7; }
.job-logo img { width: 34px; height: 34px; }
.job-summary { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.job-company { color: #45515c; font-size: 11px; font-weight: 750; letter-spacing: .06em; }
.job-hiring { margin-left: 5px; color: #548800; }
.job-summary > strong { font-size: 17px; line-height: 1.25; }
.job-meta { color: #64717c; font-size: 12px; line-height: 1.35; }
.job-chevron { color: #64717c; font-size: 25px; line-height: 1; transition: transform .2s; }
.job-toggle[aria-expanded="true"] .job-chevron { transform: rotate(180deg); }
.job-details { overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid #e9edef; }
.job-details[hidden] { display: none; }
.job-details-content { padding: 5px 22px 20px; color: #3f4b55; font-size: 14px; line-height: 1.55; }
.job-details h2 { margin: 22px 0 8px; color: #18222b; font-size: 16px; }
.job-details p { margin: 10px 0; }
.job-details ul, .job-details ol { padding-left: 21px; margin: 8px 0; }
.job-details li { margin: 5px 0; }
.job-details li ul { margin: 5px 0 12px; }
.job-level { color: #596671; }
.job-signoff { color: #518000; font-weight: 750; }
@media (max-width: 700px) {
  .job-card { top: max(12px, env(safe-area-inset-top)); max-height: 72dvh; }
  .job-toggle { padding: 12px 14px; gap: 10px; }
  .job-logo { width: 40px; height: 40px; flex-basis: 40px; }
  .job-logo img { width: 28px; height: 28px; }
  .job-summary > strong { font-size: 15px; }
  .job-meta { font-size: 11px; }
  .job-details-content { padding: 4px 16px 18px; }
}