/* HONOR Pad 10 proportions and hardware frame; application screenshots remain original. */
body[data-section-tone] .honor-pad10 {
    --honor-bezel: clamp(4px, .7vw, 10px);
    position: relative;
    box-sizing: border-box;
    aspect-ratio: 31 / 20;
    padding: var(--honor-bezel);
    border: 1px solid #bfc3c7;
    border-radius: 3% / 4.65%;
    background: #141517;
    box-shadow: 0 0 0 1px #74787e, 0 10px 25px rgba(15,23,42,.15);
    overflow: hidden;
    isolation: isolate;
}
body[data-section-tone] .honor-pad10.honor-portrait {
    aspect-ratio: 20 / 31;
    border-radius: 4.65% / 3%;
}
body[data-section-tone] .honor-pad10::before,
body[data-section-tone] .honor-pad10::after {
    content: '';
    position: absolute;
    inset: auto;
    top: calc(var(--honor-bezel) * .35);
    left: 50%;
    width: clamp(2px, .25vw, 3px);
    height: clamp(2px, .25vw, 3px);
    transform: translateX(-50%);
    border-radius: 50%;
    background: #081017;
    box-shadow: inset 0 0 1px #40708b;
    z-index: 3;
}
body[data-section-tone] .honor-pad10::after { left: 30%; }
body[data-section-tone] .honor-pad10.honor-portrait::before,
body[data-section-tone] .honor-pad10.honor-portrait::after {
    top: 50%;
    left: calc(var(--honor-bezel) * .35);
    transform: translateY(-50%);
}
body[data-section-tone] .honor-pad10.honor-portrait::after { top: 30%; }
body[data-section-tone] .honor-pad10 .tablet-camera { display: none; }
body[data-section-tone] .honor-pad10 > img {
    position: absolute;
    inset: var(--honor-bezel);
    width: calc(100% - var(--honor-bezel) * 2);
    height: calc(100% - var(--honor-bezel) * 2);
    object-fit: contain;
    border-radius: clamp(4px, .7vw, 9px);
    display: block;
    background: #203fa3;
    box-shadow: none;
    transform: none;
}
body[data-section-tone] .device-tablet.honor-pad10 {
    height: 100%;
    width: auto;
    --honor-bezel: clamp(3px, .3vw, 5px);
}
body[data-section-tone] .showcase-grid .honor-pad10 { --honor-bezel: 4px; }
body[data-section-tone] .honor-ai {
    width: min(72%, 320px);
    flex: 0 0 auto;
}
.honor-ai-screen {
    position: absolute;
    inset: var(--honor-bezel);
    border-radius: clamp(4px, .7vw, 9px);
    overflow: hidden;
}
/* Existing AI screenshot includes an old shell: hide that shell in the viewport,
   preserving all original interface pixels without generating replacement UI. */
body[data-section-tone] .honor-ai-screen > .ai-screenshot,
body[data-section-tone] .honor-ai-screen > .ai-screenshot:hover {
    position: absolute;
    left: -3.55%;
    top: -2.8%;
    width: 107.1%;
    height: 105.7%;
    max-width: none;
    max-height: none;
    object-fit: fill;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}