:root {
    color-scheme: light;
    --idp-ink: #182126;
    --idp-muted: #59676b;
    --idp-paper: #ffffff;
    --idp-page: #edf2ef;
    --idp-soft: #f5f8f6;
    --idp-line: #c8d3cd;
    --idp-line-strong: #9dada5;
    --idp-teal: #0b766d;
    --idp-teal-dark: #075a53;
    --idp-mint: #dff3ec;
    --idp-amber: #c98517;
    --idp-amber-soft: #fff3d8;
    --idp-coral: #b8493a;
    --idp-coral-soft: #fff0ed;
    --idp-blue: #315f7a;
    --idp-shadow: 0 12px 30px rgba(24, 33, 38, 0.09);
    --stage-ratio: 600 / 800;
    --guide-top: 12%;
    --guide-eye: 43%;
    --guide-chin: 80%;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    min-width: 320px;
    background: var(--idp-page);
}

body {
    margin: 0;
    color: var(--idp-ink);
    background: var(--idp-page);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    line-height: 1.65;
    letter-spacing: 0;
}

button,
input,
select {
    font: inherit;
    letter-spacing: 0;
}

button {
    min-height: 42px;
    border: 1px solid var(--idp-teal);
    border-radius: 6px;
    padding: 8px 13px;
    color: #ffffff;
    background: var(--idp-teal);
    font-weight: 700;
    cursor: pointer;
}

button:hover:not(:disabled) {
    border-color: var(--idp-teal-dark);
    background: var(--idp-teal-dark);
}

button.secondary {
    color: var(--idp-ink);
    border-color: var(--idp-line-strong);
    background: #ffffff;
}

button.secondary:hover:not(:disabled) {
    color: var(--idp-teal-dark);
    border-color: var(--idp-teal);
    background: #f1faf7;
}

button.danger {
    color: var(--idp-coral);
    border-color: #d6a49b;
    background: #ffffff;
}

button.danger:hover:not(:disabled) {
    color: #ffffff;
    border-color: var(--idp-coral);
    background: var(--idp-coral);
}

button:disabled,
fieldset:disabled button {
    color: #89938f;
    border-color: #cbd3cf;
    background: #e4e9e6;
    cursor: not-allowed;
}

button:focus-visible,
input:focus-visible,
.idp-stage:focus-within,
#outputCanvas:focus-visible,
.idp-preset-list label:has(input:focus-visible),
.idp-segmented label:has(input:focus-visible) {
    outline: 3px solid rgba(201, 133, 23, 0.48);
    outline-offset: 2px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.idp-shell {
    width: min(1320px, calc(100% - 32px));
    margin-inline: auto;
    padding: 24px 0 40px;
}

.idp-header {
    padding: 0 2px 18px;
}

.idp-breadcrumb {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    color: var(--idp-teal-dark);
    font-weight: 700;
    text-decoration: none;
}

.idp-breadcrumb:hover {
    text-decoration: underline;
}

.idp-kicker,
.idp-step {
    margin: 0;
    color: var(--idp-teal-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.35;
}

.idp-header .idp-kicker {
    margin-top: 10px;
}

.idp-header h1 {
    margin: 5px 0 6px;
    font-size: 40px;
    line-height: 1.22;
    letter-spacing: 0;
}

.idp-header h1 span {
    display: inline;
}

.idp-lead {
    max-width: 880px;
    margin: 0;
    color: var(--idp-muted);
    font-size: 17px;
}

.idp-tool {
    overflow: hidden;
    border: 1px solid var(--idp-line-strong);
    border-radius: 8px;
    background: var(--idp-paper);
    box-shadow: var(--idp-shadow);
}

.idp-start-band {
    display: grid;
    min-height: 76px;
    grid-template-columns: auto minmax(260px, 1fr) minmax(280px, 0.82fr);
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--idp-line);
    background: var(--idp-soft);
}

.idp-primary-actions {
    display: flex;
    gap: 8px;
}

.idp-primary-actions button {
    white-space: nowrap;
}

.idp-camera-note {
    margin: 0;
    color: var(--idp-muted);
    font-size: 13px;
}

.idp-status {
    min-height: 44px;
    border-left: 3px solid var(--idp-amber);
    padding: 5px 0 5px 12px;
    font-size: 14px;
}

.idp-status.is-error {
    border-color: var(--idp-coral);
    color: #8d3328;
}

.idp-status.is-success {
    border-color: var(--idp-teal);
    color: var(--idp-teal-dark);
}

.idp-mobile-tabs {
    display: none;
}

.idp-workspace {
    display: grid;
    min-height: 690px;
    grid-template-columns: minmax(340px, 1.1fr) minmax(330px, 1fr) minmax(285px, 0.82fr);
}

.idp-panel {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    background: #ffffff;
}

.idp-panel + .idp-panel {
    border-left: 1px solid var(--idp-line);
}

.idp-panel-heading {
    display: flex;
    min-height: 66px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--idp-line);
}

.idp-panel-heading h2 {
    margin: 2px 0 0;
    font-size: 18px;
    line-height: 1.35;
}

.idp-panel-heading > strong {
    color: var(--idp-muted);
    font-size: 13px;
    white-space: nowrap;
}

.idp-brightness {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    border: 1px solid var(--idp-line);
    border-radius: 999px;
    padding: 3px 9px;
    color: var(--idp-muted);
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.idp-brightness.is-dark {
    color: #ffffff;
    border-color: #59656c;
    background: #59656c;
}

.idp-brightness.is-ok {
    color: var(--idp-teal-dark);
    border-color: #8fc9b8;
    background: var(--idp-mint);
}

.idp-brightness.is-bright {
    color: #85560d;
    border-color: #dfb35b;
    background: var(--idp-amber-soft);
}

.idp-stage {
    position: relative;
    width: calc(100% - 28px);
    max-height: 515px;
    aspect-ratio: var(--stage-ratio);
    margin: 14px auto 0;
    overflow: hidden;
    border: 1px solid #708078;
    border-radius: 6px;
    background: #dfe6e2;
    touch-action: none;
}

.idp-source-stage {
    max-width: 388px;
}

.idp-output-stage {
    max-width: 374px;
    background:
        linear-gradient(45deg, #e5e9e7 25%, transparent 25%) 0 0 / 20px 20px,
        linear-gradient(45deg, transparent 75%, #e5e9e7 75%) 0 0 / 20px 20px,
        linear-gradient(45deg, transparent 75%, #e5e9e7 75%) 10px -10px / 20px 20px,
        linear-gradient(45deg, #e5e9e7 25%, #f5f7f6 25%) 10px -10px / 20px 20px;
}

.idp-stage video,
.idp-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #dfe6e2;
}

.idp-stage video.is-mirrored {
    transform: scaleX(-1);
}

.idp-empty-stage {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 24px;
    color: var(--idp-muted);
    text-align: center;
    background: rgba(245, 248, 246, 0.94);
}

.idp-empty-stage strong {
    color: var(--idp-ink);
    font-size: 18px;
}

.idp-empty-stage span {
    font-size: 13px;
}

.idp-guide {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.idp-guide > span {
    position: absolute;
    display: block;
}

.idp-guide-center {
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px dashed rgba(255, 255, 255, 0.92);
    box-shadow: 1px 0 rgba(24, 33, 38, 0.35);
}

.idp-guide-top,
.idp-guide-eye,
.idp-guide-chin {
    right: 4%;
    left: 4%;
    border-top: 2px solid rgba(255, 255, 255, 0.94);
    box-shadow: 0 1px rgba(24, 33, 38, 0.42);
}

.idp-guide-top {
    top: var(--guide-top);
}

.idp-guide-eye {
    top: var(--guide-eye);
    border-top-style: dashed;
}

.idp-guide-chin {
    top: var(--guide-chin);
}

.idp-guide b {
    position: absolute;
    top: 3px;
    right: 2px;
    padding: 1px 5px;
    color: #ffffff;
    background: rgba(24, 33, 38, 0.74);
    font-size: 10px;
    line-height: 1.4;
}

.idp-guide-oval {
    top: var(--guide-top);
    bottom: calc(100% - var(--guide-chin));
    left: 22%;
    width: 56%;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(24, 33, 38, 0.28);
}

.idp-countdown {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: rgba(24, 33, 38, 0.38);
    font-size: 72px;
    font-weight: 800;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.idp-orientation {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    justify-content: center;
    margin: 8px 14px 0;
    color: var(--idp-muted);
    font-size: 12px;
}

.idp-capture-actions,
.idp-retake-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 9px 14px 0;
}

.idp-retake-actions {
    grid-template-columns: 1fr;
}

.idp-inline-setting {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
    margin: 12px 14px 0;
    border: 0;
    padding: 0;
}

.idp-inline-setting legend {
    grid-column: 1 / -1;
    margin-bottom: 3px;
    padding: 0;
    font-size: 13px;
    font-weight: 800;
}

.idp-segmented {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--idp-line-strong);
    border-radius: 6px;
    background: #ffffff;
}

.idp-segmented label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.idp-segmented label + label {
    border-left: 1px solid var(--idp-line);
}

.idp-segmented input {
    position: absolute;
    opacity: 0;
}

.idp-segmented span {
    display: grid;
    min-height: 40px;
    place-items: center;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 700;
}

.idp-segmented input:checked + span {
    color: #ffffff;
    background: var(--idp-teal);
}

.idp-switches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 14px 14px;
    color: var(--idp-muted);
    font-size: 13px;
}

.idp-switches label {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 6px;
}

.idp-switches input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--idp-teal);
}

.idp-preview-help {
    margin: 9px 14px 0;
    color: var(--idp-muted);
    font-size: 12px;
}

.idp-retake-actions {
    margin-top: auto;
    padding-bottom: 14px;
}

.idp-controls-scroll {
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px 16px;
}

.idp-control-group {
    min-width: 0;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--idp-line);
    padding: 14px 0 2px;
}

.idp-control-group:first-child {
    border-top: 0;
    padding-top: 0;
}

.idp-control-group legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 14px;
    font-weight: 800;
}

.idp-preset-list {
    display: grid;
    gap: 6px;
}

.idp-preset-list label {
    position: relative;
    display: block;
    cursor: pointer;
}

.idp-preset-list input {
    position: absolute;
    opacity: 0;
}

.idp-preset-list span {
    display: flex;
    min-height: 49px;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--idp-line);
    border-radius: 6px;
    padding: 5px 10px;
    background: #ffffff;
}

.idp-preset-list small {
    color: var(--idp-muted);
    font-size: 11px;
}

.idp-preset-list input:checked + span {
    border-color: var(--idp-teal);
    box-shadow: inset 4px 0 var(--idp-teal);
    background: #f1faf7;
}

.idp-free-size {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.idp-free-size label {
    font-size: 12px;
}

.idp-free-size input {
    width: 100%;
    min-height: 39px;
    border: 1px solid var(--idp-line-strong);
    border-radius: 5px;
    padding: 5px 7px;
}

.idp-control-note {
    margin: 7px 0 0;
    color: var(--idp-muted);
    font-size: 12px;
}

.idp-range-row {
    display: block;
    margin-bottom: 8px;
}

.idp-range-row span {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 700;
}

.idp-range-row output {
    color: var(--idp-teal-dark);
}

.idp-range-row input[type="range"] {
    width: 100%;
    accent-color: var(--idp-teal);
}

.idp-button-grid,
.idp-save-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.idp-wide-button {
    grid-column: 1 / -1;
}

.idp-reset-button {
    width: 100%;
    margin-top: 14px;
}

.idp-ad-reserve {
    display: grid;
    min-height: 112px;
    place-items: center;
    margin-top: 24px;
    border-block: 1px solid var(--idp-line);
    color: #7a8581;
    background: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    letter-spacing: 0;
}

.idp-info-band {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr);
    gap: 28px;
    padding: 30px 4px;
    border-bottom: 1px solid var(--idp-line);
}

.idp-info-heading h2 {
    margin: 4px 0 6px;
    font-size: 24px;
    line-height: 1.35;
}

.idp-info-heading p:last-child {
    margin: 0;
    color: var(--idp-muted);
}

.idp-standard-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
}

.idp-standard-links a {
    display: flex;
    min-height: 48px;
    align-items: center;
    border-bottom: 1px solid var(--idp-line);
    color: var(--idp-teal-dark);
    font-weight: 700;
    text-decoration: none;
}

.idp-standard-links a:hover {
    text-decoration: underline;
}

.idp-comments-placeholder {
    padding: 26px 4px;
    border-bottom: 1px solid var(--idp-line);
}

.idp-comments-placeholder h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.idp-comments-placeholder p {
    margin: 0;
    color: var(--idp-muted);
}

.idp-return-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 24px 4px;
}

.idp-return-links a,
.idp-footer a {
    color: var(--idp-teal-dark);
    font-weight: 700;
}

.idp-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 20px;
    border-top: 1px solid var(--idp-line);
    padding: 18px 4px 0;
    color: var(--idp-muted);
    font-size: 13px;
}

@media (max-width: 1179px) {
    .idp-start-band {
        grid-template-columns: auto minmax(260px, 1fr);
    }

    .idp-status {
        grid-column: 1 / -1;
        min-height: 36px;
    }

    .idp-workspace {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .idp-controls-panel {
        grid-column: 1 / -1;
        border-top: 1px solid var(--idp-line);
        border-left: 0 !important;
    }

    .idp-controls-scroll {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 20px;
        overflow: visible;
    }

    .idp-reset-button {
        align-self: end;
    }
}

@media (max-width: 767px) {
    .idp-shell {
        width: min(100% - 16px, 620px);
        padding-top: 12px;
    }

    .idp-header {
        padding-bottom: 12px;
    }

    .idp-header h1 {
        font-size: 28px;
        line-height: 1.28;
    }

    .idp-header h1 span {
        display: block;
    }

    .idp-lead {
        font-size: 15px;
    }

    .idp-start-band {
        display: block;
        padding: 10px;
    }

    .idp-primary-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .idp-primary-actions button {
        min-width: 0;
        padding-inline: 6px;
    }

    .idp-camera-note {
        margin-top: 8px;
    }

    .idp-status {
        margin-top: 8px;
        padding-left: 9px;
    }

    .idp-mobile-tabs {
        position: sticky;
        top: 0;
        z-index: 12;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-bottom: 1px solid var(--idp-line-strong);
        background: #ffffff;
    }

    .idp-mobile-tabs button {
        min-width: 0;
        border: 0;
        border-right: 1px solid var(--idp-line);
        border-radius: 0;
        color: var(--idp-muted);
        background: #ffffff;
    }

    .idp-mobile-tabs button:last-child {
        border-right: 0;
    }

    .idp-mobile-tabs button:hover:not(:disabled) {
        color: var(--idp-teal-dark);
        background: #f1faf7;
    }

    .idp-mobile-tabs button[aria-selected="true"] {
        color: #ffffff;
        background: var(--idp-teal);
    }

    .idp-mobile-tabs button[aria-selected="true"]:hover:not(:disabled) {
        color: #ffffff;
        background: var(--idp-teal-dark);
    }

    .idp-workspace {
        display: block;
        min-height: 0;
    }

    .idp-panel {
        display: none;
        min-height: 0;
        border-left: 0 !important;
    }

    body[data-mobile-panel="capture"] .idp-capture-panel,
    body[data-mobile-panel="preview"] .idp-preview-panel,
    body[data-mobile-panel="controls"] .idp-controls-panel {
        display: flex;
    }

    .idp-stage {
        max-height: none;
    }

    .idp-source-stage,
    .idp-output-stage {
        width: min(calc(100% - 28px), 430px);
        max-width: none;
    }

    .idp-retake-actions {
        margin-top: 12px;
    }

    .idp-controls-scroll {
        display: block;
        overflow: visible;
    }

    .idp-control-group {
        padding-top: 14px;
    }

    .idp-info-band {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 24px 4px;
    }

    .idp-standard-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .idp-shell {
        width: calc(100% - 12px);
    }

    .idp-header h1 {
        font-size: 27px;
    }

    .idp-panel-heading {
        padding-inline: 10px;
    }

    .idp-stage {
        width: calc(100% - 20px);
        margin-top: 10px;
    }

    .idp-capture-actions,
    .idp-retake-actions,
    .idp-inline-setting,
    .idp-switches {
        margin-inline: 10px;
    }

    .idp-inline-setting {
        grid-template-columns: 1fr;
    }

    .idp-inline-setting button {
        width: 100%;
    }

    .idp-switches {
        grid-template-columns: 1fr;
    }

    .idp-controls-scroll {
        padding-inline: 10px;
    }
}

@media (max-width: 340px) {
    .idp-primary-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .idp-primary-actions #startCameraButton {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}