.ccm-machine {
    --ccm-brass-1: #b8893f;
    --ccm-brass-2: #e0be74;
    --ccm-brass-3: #6f4b18;
    --ccm-wood-1: #3f2a1f;
    --ccm-wood-2: #2a1a13;
    --ccm-panel-1: #241811;
    --ccm-panel-2: #160f0a;
    --ccm-paper-1: #ece1c9;
    --ccm-paper-2: #d6c7a5;
    --ccm-ink: #261b12;
    --ccm-glow: rgba(224, 190, 116, 0.25);
    --ccm-shadow: rgba(0, 0, 0, 0.42);
    --ccm-radius: 28px;
    --ccm-step-angle: 13.8461538462deg;
    margin: 2rem auto;
    max-width: 1120px;
    color: #f9f0dd;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

.ccm-machine * {
    box-sizing: border-box;
}

.ccm-machine__body {
    position: relative;
    overflow: hidden;
    border-radius: var(--ccm-radius);
    padding: clamp(1.2rem, 2vw, 2rem);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.18)),
        radial-gradient(circle at top left, rgba(224, 190, 116, 0.18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(184, 137, 63, 0.12), transparent 28%),
        linear-gradient(180deg, var(--ccm-panel-1), var(--ccm-panel-2));
    border: 1px solid rgba(224, 190, 116, 0.24);
    box-shadow:
        0 24px 70px var(--ccm-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.ccm-machine__body::before,
.ccm-machine__body::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ccm-machine__body::before {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.015) 0,
            rgba(255, 255, 255, 0.015) 2px,
            transparent 2px,
            transparent 9px
        );
    mix-blend-mode: soft-light;
    opacity: 0.5;
}

.ccm-machine__body::after {
    inset: 14px;
    border-radius: calc(var(--ccm-radius) - 12px);
    border: 1px solid rgba(224, 190, 116, 0.1);
}

.ccm-rivet {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f0d18e, #8a6026 68%, #4b2f0d 100%);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.45);
}

.ccm-rivet--tl { top: 16px; left: 16px; }
.ccm-rivet--tr { top: 16px; right: 16px; }
.ccm-rivet--bl { bottom: 16px; left: 16px; }
.ccm-rivet--br { bottom: 16px; right: 16px; }

.ccm-machine__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0 1rem;
}

.ccm-machine__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #e9cf98;
    opacity: 0.88;
}

.ccm-machine__title {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 2.4rem);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff4d5;
    text-shadow: 0 2px 20px rgba(224, 190, 116, 0.14);
}

.ccm-status-badge {
    min-width: 128px;
    border-radius: 999px;
    padding: 0.75rem 1rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff5d6;
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.14), transparent 55%),
        linear-gradient(180deg, rgba(56, 91, 48, 0.95), rgba(27, 47, 23, 0.95));
    border: 1px solid rgba(194, 255, 175, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 18px rgba(124, 255, 133, 0.14);
}

.ccm-machine__layout {
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) minmax(260px, 0.85fr);
    gap: clamp(1.2rem, 2vw, 2rem);
    align-items: stretch;
}

.ccm-wheel-area,
.ccm-controls,
.ccm-paperwork {
    min-width: 0;
}

.ccm-wheel-frame {
    position: relative;
    aspect-ratio: 1;
    min-height: 320px;
    border-radius: 36px;
    padding: clamp(0.8rem, 2vw, 1.4rem);
    background:
        linear-gradient(180deg, rgba(100, 70, 29, 0.7), rgba(36, 23, 13, 0.95)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 55%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -2px 8px rgba(0, 0, 0, 0.45),
        0 18px 50px rgba(0, 0, 0, 0.34);
    display: grid;
    place-items: center;
}

.ccm-wheel-frame::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 28px;
    border: 1px solid rgba(224, 190, 116, 0.14);
    pointer-events: none;
}

.ccm-alignment-window {
    position: absolute;
    top: clamp(16px, 2vw, 24px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    min-width: 140px;
    padding: 0.55rem 1rem;
    border-radius: 14px;
    text-align: center;
    color: #1d150d;
    font-weight: 700;
    letter-spacing: 0.06em;
    background:
        linear-gradient(180deg, #f7eac7, #dcc38d);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.7),
        inset 0 -1px 0 rgba(67, 46, 17, 0.22),
        0 8px 18px rgba(0, 0, 0, 0.26);
    border: 1px solid rgba(96, 66, 26, 0.26);
}

.ccm-wheel {
    --ccm-wheel-rotation: 0deg;
    --ccm-letter-radius: 160px;
    position: absolute;
    inset: clamp(18px, 3vw, 26px);
    border-radius: 50%;
    transition: transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 280ms ease;
    transform: rotate(var(--ccm-wheel-rotation));
}

.ccm-wheel--outer {
    --ccm-letter-radius: clamp(112px, 18vw, 176px);
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.42), transparent 24%),
        radial-gradient(circle at center, rgba(255, 236, 192, 0.18), rgba(113, 72, 22, 0.14) 58%, rgba(55, 32, 12, 0.9) 100%);
    border: clamp(16px, 2.2vw, 24px) solid transparent;
    box-shadow:
        inset 0 0 0 1px rgba(255, 245, 220, 0.22),
        inset 0 0 0 clamp(3px, 0.5vw, 5px) rgba(91, 59, 20, 0.55),
        inset 0 0 0 clamp(14px, 2vw, 22px) rgba(176, 128, 61, 0.34),
        0 10px 24px rgba(0, 0, 0, 0.3);
}

.ccm-wheel--inner {
    --ccm-letter-radius: clamp(84px, 14vw, 132px);
    inset: 18%;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.34), transparent 24%),
        radial-gradient(circle at center, rgba(245, 225, 184, 0.16), rgba(110, 70, 24, 0.22) 58%, rgba(45, 25, 9, 0.95) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 245, 220, 0.25),
        inset 0 0 0 clamp(3px, 0.5vw, 5px) rgba(91, 59, 20, 0.58),
        inset 0 0 0 clamp(12px, 1.7vw, 18px) rgba(176, 128, 61, 0.32),
        0 16px 28px rgba(0, 0, 0, 0.34);
}

.ccm-wheel-letter {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fbf0d3;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(0.76rem, 1.15vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    transform:
        translate(-50%, -50%)
        rotate(var(--ccm-letter-angle))
        translateY(calc(-1 * var(--ccm-letter-radius)))
        rotate(calc(-1 * var(--ccm-letter-angle) - var(--ccm-wheel-rotation)));
    text-shadow:
        0 0 1px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    user-select: none;
    pointer-events: none;
}

.ccm-wheel--outer .ccm-wheel-letter {
    background: rgba(0, 0, 0, 0.08);
}

.ccm-wheel--inner .ccm-wheel-letter {
    color: #fff2cf;
    background: rgba(255, 255, 255, 0.05);
}

.ccm-pointer {
    position: absolute;
    top: clamp(22px, 4vw, 34px);
    left: 50%;
    z-index: 7;
    width: 30px;
    height: 54px;
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35));
}

.ccm-pointer::before,
.ccm-pointer::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.ccm-pointer::before {
    top: 0;
    width: 16px;
    height: 36px;
    border-radius: 10px 10px 4px 4px;
    background: linear-gradient(180deg, #f0d18b, #875b20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ccm-pointer::after {
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 18px solid #f2d188;
}

.ccm-center-cap {
    position: absolute;
    z-index: 8;
    width: clamp(84px, 12vw, 118px);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff3cf;
    letter-spacing: 0.16em;
    font-size: clamp(0.88rem, 1vw, 1rem);
    font-weight: 700;
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.4), transparent 28%),
        radial-gradient(circle at center, #c7994c 0%, #81561e 58%, #4d2d0e 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.22),
        0 10px 20px rgba(0, 0, 0, 0.34),
        0 0 0 6px rgba(55, 34, 14, 0.45),
        0 0 0 7px rgba(224, 190, 116, 0.08);
}

.ccm-controls {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.ccm-control-card {
    padding: 1rem;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.16)),
        linear-gradient(180deg, rgba(85, 52, 24, 0.72), rgba(34, 20, 11, 0.85));
    border: 1px solid rgba(224, 190, 116, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 10px 18px rgba(0, 0, 0, 0.18);
}

.ccm-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.ccm-mode-button,
.ccm-step-button,
.ccm-action-button {
    appearance: none;
    border: 0;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, opacity 140ms ease;
}

.ccm-mode-button {
    border-radius: 16px;
    padding: 0.95rem 1rem;
    color: #fff3cf;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.16)),
        linear-gradient(180deg, #664320, #2f1b0e);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.18);
}

.ccm-mode-button.is-active {
    color: #221508;
    background:
        linear-gradient(180deg, #f7e9c3, #c79a46);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        0 0 0 1px rgba(255, 246, 214, 0.22),
        0 6px 14px rgba(224, 190, 116, 0.26);
}

.ccm-control-heading {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 1rem;
    color: #fff0ca;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ccm-secondary-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 241, 206, 0.76);
}

.ccm-knob-card {
    text-align: center;
}

.ccm-knob-shell {
    position: relative;
    width: min(240px, 100%);
    aspect-ratio: 1;
    margin: 0 auto 1rem;
    display: grid;
    place-items: center;
}

.ccm-knob-scale {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, transparent 54%, rgba(0, 0, 0, 0.35) 55%, transparent 56%),
        repeating-conic-gradient(
            from -90deg,
            rgba(255, 238, 201, 0.9) 0deg 1deg,
            transparent 1deg 13.8461538462deg
        );
    opacity: 0.9;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

.ccm-knob {
    --ccm-knob-rotation: 0deg;
    position: relative;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    transform: rotate(var(--ccm-knob-rotation));
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.34), transparent 25%),
        radial-gradient(circle at center, #d8ab5a 0%, #8b5f26 58%, #44280d 100%);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -8px 18px rgba(0, 0, 0, 0.22),
        0 16px 26px rgba(0, 0, 0, 0.25),
        0 0 0 10px rgba(55, 34, 14, 0.35),
        0 0 0 11px rgba(224, 190, 116, 0.1);
    touch-action: none;
    outline: none;
    cursor: grab;
}

.ccm-knob:active {
    cursor: grabbing;
}

.ccm-knob:focus-visible {
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.3),
        inset 0 -8px 18px rgba(0, 0, 0, 0.22),
        0 16px 26px rgba(0, 0, 0, 0.25),
        0 0 0 10px rgba(55, 34, 14, 0.35),
        0 0 0 15px rgba(224, 190, 116, 0.25);
}

.ccm-knob-indicator {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 6px;
    height: 26%;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #fff5d7, #603f14);
    box-shadow: 0 0 10px rgba(255, 241, 206, 0.18);
}

.ccm-knob-cap {
    width: 32%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.32), transparent 25%),
        radial-gradient(circle at center, #be9147 0%, #6b4517 70%, #3f240c 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 6px 10px rgba(0, 0, 0, 0.2);
}

.ccm-knob-readout {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 0.75rem;
    align-items: center;
}

.ccm-step-button {
    height: 52px;
    border-radius: 16px;
    color: #221508;
    font-size: 1.5rem;
    font-weight: 700;
    background:
        linear-gradient(180deg, #f2e2b8, #b98635);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 6px 10px rgba(0, 0, 0, 0.18);
}

.ccm-digital-display {
    min-height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #c8ffb2;
    font-family: "Courier New", Courier, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.14em;
    text-indent: 0.14em;
    background:
        radial-gradient(circle at center, rgba(57, 84, 48, 0.44), rgba(15, 25, 12, 0.95));
    border: 1px solid rgba(187, 255, 162, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -8px 20px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(144, 255, 122, 0.08);
}

.ccm-machine-note,
.ccm-machine-subnote {
    margin: 0;
}

.ccm-machine-note {
    color: #fff1ca;
    font-weight: 700;
    line-height: 1.45;
}

.ccm-machine-subnote {
    margin-top: 0.55rem;
    color: rgba(255, 241, 206, 0.8);
    line-height: 1.55;
}

.ccm-paperwork {
    margin-top: clamp(1.2rem, 2vw, 1.8rem);
    padding: clamp(1rem, 1.8vw, 1.4rem);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(230, 212, 170, 0.18), rgba(110, 84, 49, 0.22)),
        linear-gradient(180deg, #4f3424, #291a12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 12px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(224, 190, 116, 0.16);
}

.ccm-field + .ccm-field {
    margin-top: 1rem;
}

.ccm-field label {
    display: block;
    margin-bottom: 0.55rem;
    color: #fff1ca;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ccm-textarea {
    width: 100%;
    min-height: 150px;
    border-radius: 18px;
    border: 1px solid rgba(70, 47, 19, 0.4);
    padding: 1rem 1.1rem;
    resize: vertical;
    color: var(--ccm-ink);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 12%),
        linear-gradient(180deg, var(--ccm-paper-1), var(--ccm-paper-2));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(100, 73, 31, 0.2),
        0 8px 12px rgba(0, 0, 0, 0.12);
    font: 600 1rem/1.65 "Courier New", Courier, monospace;
    letter-spacing: 0.02em;
}

.ccm-textarea:focus {
    outline: 2px solid rgba(224, 190, 116, 0.28);
    outline-offset: 1px;
}

.ccm-textarea--output {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 12%),
        linear-gradient(180deg, #eadbc1, #cbb991);
}

.ccm-mapping-display {
    margin-top: 1rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    color: #21170f;
    background:
        linear-gradient(180deg, #f3e6c8, #d9c08b);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 8px 12px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(93, 64, 24, 0.18);
}

.ccm-map-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
}

.ccm-map-row + .ccm-map-row {
    margin-top: 0.55rem;
}

.ccm-map-label {
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #67451b;
    font-size: 0.75rem;
}

.ccm-map-code {
    display: block;
    margin: 0;
    overflow-wrap: anywhere;
    font: 700 0.94rem/1.6 "Courier New", Courier, monospace;
    color: #22170f;
    letter-spacing: 0.08em;
}

.ccm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1rem;
}

.ccm-action-button {
    min-height: 48px;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    color: #221508;
    font-weight: 700;
    letter-spacing: 0.03em;
    background:
        linear-gradient(180deg, #f3e4be, #bf8f43);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 6px 10px rgba(0, 0, 0, 0.15);
}

.ccm-action-button--quiet {
    background:
        linear-gradient(180deg, #dbc49a, #9e7540);
}

.ccm-mode-button:hover,
.ccm-step-button:hover,
.ccm-action-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.ccm-mode-button:active,
.ccm-step-button:active,
.ccm-action-button:active {
    transform: translateY(1px);
}

@media (max-width: 920px) {
    .ccm-machine__layout {
        grid-template-columns: 1fr;
    }

    .ccm-wheel-frame {
        min-height: min(76vw, 560px);
    }
}

@media (max-width: 640px) {
    .ccm-machine__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ccm-status-badge {
        min-width: auto;
    }

    .ccm-knob-readout {
        grid-template-columns: 44px minmax(0, 1fr) 44px;
    }

    .ccm-actions {
        flex-direction: column;
    }

    .ccm-action-button {
        width: 100%;
    }

    .ccm-map-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ccm-wheel,
    .ccm-knob,
    .ccm-mode-button,
    .ccm-step-button,
    .ccm-action-button {
        transition: none !important;
    }
}