:root {
      --font: var(--simaku-font);
      --primary: var(--portal-primary);
      --action: var(--portal-action-start);
      --action-hover: var(--portal-hero-start);
      --text: var(--portal-ink);
      --muted: var(--portal-muted);
      --ground: var(--portal-surface);
      --tint: var(--portal-soft);
      --line: var(--portal-line);
      --hero-gradient: var(--portal-header-gradient);
      --action-gradient: var(--portal-action-gradient);
    }
    * { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
    body { margin: 0; background: var(--ground); color: var(--text); font: 13px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
    h1, h2, h3, p { margin: 0; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; }
    a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
    a:focus-visible, button:focus-visible { outline: 3px solid var(--portal-action-end); outline-offset: 3px; }
    [hidden] { display: none !important; }
    .icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
    .skip-link { position: fixed; top: -100px; left: 12px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: white; }
    .skip-link:focus { top: 12px; }
    .shell { width: min(100%, 816px); margin: 0 auto; padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px)); }
    main.shell { padding-top: 24px; padding-bottom: max(28px, env(safe-area-inset-bottom, 0px)); }
    .guide-hero { position: sticky; top: 0; z-index: 60; isolation: isolate; padding-top: env(safe-area-inset-top, 0px); border-radius: 0 0 56px 56px / 0 0 48px 48px; background: none; color: #f6faf9; pointer-events: none; }
    .guide-hero::before { content: ''; position: absolute; z-index: -1; inset: 0 0 var(--guide-header-lift,0px); border-radius: 0 0 var(--guide-corner-x,56px) var(--guide-corner-x,56px) / 0 0 var(--guide-corner-y,48px) var(--guide-corner-y,48px); corner-shape: inherit; background: var(--hero-gradient); pointer-events: none; }
    .guide-hero :is(a,button) { pointer-events: auto; }
    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
    .share-button { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: transparent; color: var(--action); box-shadow: none; }
    .back-link::before,.share-button::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff; transform: scale(var(--guide-toolbar-scale,1)); pointer-events: none; }
    .back-link:hover::before,.share-button:hover::before { background: var(--portal-wash); }
    .share-button .icon { position: relative; width: 18px; height: 18px; transform: scale(var(--guide-toolbar-scale,1)); }
    .intro { padding: 0 0 30px; }
    .back-link { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: transparent; color: var(--action); }
    .back-link .icon { position: relative; width: 15px; height: 15px; transform: rotate(180deg) scale(var(--guide-toolbar-scale,1)); }
    h1 { margin-top: 5px; font-size: 26px; line-height: 1.25; font-weight: 700; transform: translate(var(--guide-title-x,0px),var(--guide-title-y,0px)) scale(var(--guide-title-scale,1)); transform-origin: left top; }
    .intro p { max-width: 570px; margin-top: 8px; color: #eef6f6; font-size: 12px; line-height: 1.65; opacity: max(0,calc(1 - 2 * var(--guide-collapse,0))); transform: translateY(var(--guide-title-y,0px)); }
    .prepare { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 24px; padding: 0 0 24px; border-bottom: 1px solid var(--line); }
    .prepare-copy { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
    .prepare-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 0; border-radius: 10px; background: var(--tint); color: var(--action); }
    .prepare-mark .icon { width: 17px; height: 17px; }
    .prepare strong { display: block; font-size: 12px; font-weight: 600; }
    .prepare p { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.5; }
    .prepare-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; flex: 0 0 auto; padding: 10px 18px; border-radius: 999px; background: var(--action-gradient); color: white; box-shadow: none; font-size: 12px; font-weight: 600; text-align: center; }
    .prepare-link:hover { background: var(--action-gradient); filter: brightness(1.07); }
    .prepare-link .icon { width: 15px; height: 15px; }
    .section-label { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
    .method-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .method-tab { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 52px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--portal-field); color: var(--text); font-size: 11.5px; line-height: 1.4; font-weight: 500; text-align: center; box-shadow: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
    .method-tab .icon { width: 18px; height: 18px; color: var(--action); }
    .method-tab span { min-width: 0; overflow-wrap: anywhere; text-wrap: balance; }
    .method-tab:hover { border-color: var(--primary); }
    .method-tab[aria-selected="true"] { border-color: transparent; background: var(--portal-control-start); color: #fff; font-weight: 600; box-shadow: none; }
    .method-tab[aria-selected="true"] .icon { color: inherit; }
    .guide-panel { margin-top: 24px; border-top: 1px solid var(--line); }
    .guide-head { display: flex; align-items: center; gap: 11px; padding: 20px 0; color: var(--text); }
    .guide-head-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border: 0; border-radius: 10px; background: var(--tint); color: var(--action); }
    .guide-head-mark .icon { width: 20px; height: 20px; }
    .guide-head h2 { font-size: 16px; line-height: 1.45; font-weight: 600; }
    .guide-head p { margin-top: 3px; color: var(--muted); font-size: 11px; }
    .guide-body { padding: 0; }
    .video-section { padding-bottom: 19px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
    .section-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; font-size: 12px; font-weight: 600; }
    .section-heading .icon { width: 17px; height: 17px; color: var(--action); }
    .video-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
    .video-trigger { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text); box-shadow: none; font-size: 11.5px; line-height: 1.5; font-weight: 500; text-align: left; }
    .video-trigger:hover, .video-trigger[aria-expanded="true"] { border-color: var(--portal-outline); background: var(--tint); }
    .video-trigger .icon { width: 18px; height: 18px; color: var(--action); }
    .video-player { margin-top: 12px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: var(--portal-hero-start); }
    .video-player iframe { display: block; width: 100%; height: 100%; border: 0; }
    .step-list { margin: 0; padding: 0; list-style: none; counter-reset: guide-step; }
    .step-list li { position: relative; min-height: 38px; padding: 0 0 20px 36px; color: var(--muted); font-size: 12px; line-height: 1.75; counter-increment: guide-step; overflow-wrap: anywhere; }
    .step-list li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 29px; bottom: 5px; border-left: 1px solid var(--line); }
    .step-list li::before { content: counter(guide-step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line); border-radius: 50%; background: var(--tint); color: var(--action); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
    .step-list li:last-child { padding-bottom: 0; }
    .step-list strong { color: var(--text); font-weight: 600; }
    .channel-note { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 15px; padding: 12px; border: 1px solid #eadcb8; border-radius: 8px; background: #fff9ea; color: #76551c; font-size: 11.5px; line-height: 1.65; }
    .channel-note .icon { width: 16px; height: 16px; margin-top: 1px; }
    .aftercare { margin-top: 28px; padding: 20px 0; border-top: 1px solid var(--line); }
    .aftercare h2 { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; }
    .aftercare h2 .icon { width: 17px; height: 17px; color: var(--action); }
    .aftercare p { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.65; }
    .safety { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.6; text-align: center; }
    .safety span { min-width: 0; text-wrap: balance; }
    .safety .icon { width: 14px; height: 14px; color: var(--muted); }
    .toast { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; z-index: 30; width: max-content; max-width: calc(100% - 32px); padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 25px var(--portal-shadow-soft); color: var(--text); font-size: 11px; font-weight: 600; text-align: center; transform: translate(-50%, -12px); animation: toast-in .2s ease-out forwards; }
    @keyframes toast-in { to { transform: translate(-50%, 0); } }
    @supports (corner-shape: superellipse(1.5)) {
      .guide-hero { corner-shape: superellipse(1.5); border-radius: 0 0 76px 76px / 0 0 64px 64px; }
    }
    @media (min-width: 900px) {
      .guide-hero { border-radius: 0 0 88px 88px / 0 0 56px 56px; }
      .topbar { min-height: 56px; }
      .intro { padding-bottom: 40px; }
      h1 { font-size: 32px; }
      main.shell { padding-top: 32px; }
      @supports (corner-shape: superellipse(1.5)) {
        .guide-hero { border-radius: 0 0 112px 112px / 0 0 72px 72px; }
      }
    }
    @media (max-width: 640px) {
      .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .prepare { align-items: stretch; flex-direction: column; gap: 11px; }
      .prepare-link { width: 100%; }
    }
    @media (max-width: 390px) {
      .shell { padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
      h1 { font-size: 23px; }
      .method-tab { padding-inline: 7px; font-size: 10.5px; }
      .guide-head h2 { font-size: 16px; }
    }
    @media (prefers-reduced-motion: reduce) { .method-tab, .toast { animation: none; transition: none; } .toast { transform: translate(-50%, 0); } }
    @media (forced-colors: active) {
      .guide-hero, .method-tab, .prepare-link, .share-button, .video-trigger, .prepare-mark, .guide-head-mark, .step-list li::before, .channel-note, .toast { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; }
      .method-tab[aria-selected="true"] { background: Highlight; color: HighlightText; border-color: Highlight; }
      .guide-hero { background: none; }
      .guide-hero::before { background: Canvas; border: 1px solid CanvasText; }
      .back-link::before,.share-button::before { background: Canvas; border: 1px solid CanvasText; }
      .method-tab .icon, .guide-hero .intro p, .back-link { color: inherit; }
    }