Não estou conseguindo esconder o campo "Outro" e não entendi como usar o Checked.

Bom dia. Não entendi como utilizar o recurso do Checked no html e não entendi como fazer isto no .CSS. Para mim este exercício não ficou nada claro para resolver. Alguém pode me ajudar? Segue o meu código em anexo.

contato.html
<main>
        <h1 class="titulo-principal">Contato</h1>
        <div class="container">
            <form>
                <fieldset>
                    <legend>Dados Pessoais</legend>
                    <label for="nome">Nome</label>
                    <input id="nome" type="Text" name="nome-contato" placeholder="Seu nome aqui" required autofocus pattern="[A-Za-zÀ-ú ']{4,}" title="O nome precisa ter pelo menos 4 caracteres">
                    <label for="email">E-mail</label>
                    <input id="email" type="email" name="email-contato" placeholder="Digite seu e-mail" required>
                </fieldset>
                <fieldset checked>
                    <legend>Assunto</legend>
                    <label>
                    <input type="radio" name="assunto" value="Blog">
                        Blog
                    </label>
                    <label>
                    <input type="radio" name="assunto" value="Serviço">
                        Serviço
                    </label>
                    <fieldset>
                        <input id="outro" type="radio" name="assunto" value="outro">
                        <label for="outro">Outro</label>
                        <input name="outro-assunto" type="text" placeholder="Informe o assunto específico">
                    </fieldset>
                    <fieldset>
                        <label for="mensagem">Mensagem</label>
                        <textarea name="msg" id="mensagem" cols="60" rows="10" required placeholder="Digite aqui sua mensagem"></textarea>
                        <button type="submit">Enviar <strong>para mim</strong></button>
                    </fieldset>
                </fieldset>
            </form>
        </div>
    </main>

contato.css
/* Podemos usar um seletor de atributo para selecionar
   apenas a legenda desse campo e não dos outros */
legend,
label[for="mensagem"] {
    font-weight: bold;
    margin-top: 1em;
}

/* As tags <label> que têm o atributo "for" são
   os rótulos dos campos sem ser os assuntos */
   label[for] {
    display: block;
}

/* Os campos de texto devem ocupar a largura inteira da tela (exceto o campo para o assunto "Outro"), 
   ter uma borda cinza clara, espaçamento interno e usar a mesma fonte do resto da página.
Selecionamos apenas os campos de texto */
input[type="text"],
input[type="email"],
textarea {
    /* Força o navegador a usar a mesma fonte da página */
    font-family: inherit;
    /* Inclusive o tamanho dela */
    font-size: 100%;
    padding: .25em .5em;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
}

/* alguns ajustes para o campo "Outro": deixar ele na mesma linha dos outros assuntos */
fieldset > fieldset {
    display: inline;
}

/* deixar o rótulo dele inline de novo */
label[for="outro"] {
    display: inline;
}

/* deixar só esse campo sem ocupar a tela toda */
input[name="outro-assunto"] {
    width: auto;
}

/*O campo de texto que tiver o foco do teclado deve ficar com o fundo levemente amarelo.*/
input:focus,
textarea:focus {
    background-color: #FFD;
}

/*Os campos que estiverem inválidos devem ter uma sombra vermelha.*/
input:invalid {
    box-shadow: 0 0 3px red;
}

/*O botão para enviar o formulário deve ficar na parte inferior direita da página, após o formulário, 
  e ter o mesmo esquema de cores da barra lateral com a fonte usada nos títulos e levemente maior do que o texto normal.
  Além disso, o botão não deve ter borda.*/
button {
    /* Precisamos tirar a borda que o navegador coloca por padrão */
    border: 0;
    padding: .5em 1em;
    font-family: "Open Sans Condensed", sans-serif;
    background-color: #3C1D3D;
    color: white;
    font-size: 1.2em;
    /* Faz com que o botão apareça na direita */
    margin-left: auto;
    margin-top: 1em;
    display: block;
}

/*Quando o botão for selecionado pelo teclado ou quando o mouse estiver sobre ele, 
  o fundo deve mudar para a cor #8C1D3D.*/
button:hover,
button:focus {
    background-color: #8C1D3D;
}

/*O radio usado para o assunto "outro-assunto" tem o atributo value com esse texto. 
  Então, usando os seletores de atributo e de irmão, 
  conseguimos selecionar o campo e escondê-lo com a propriedade display:*/
  input[value="Outro"] ~ input {
    display: none;
}

/*Agora, quando esse radio for selecionado, a pseudoclasse será adicionada a ele. 
  Podemos usar essa pseudoclasse para selecionar novamente o campo de texto ao lado
  e mudar o valor da propriedade display:*/
  input[value="Outro"]:checked ~ input {
    display: inline;
}